Skip to content

V
vue-composition-api
Commit 05de9009 by wangshuangqing
Options

Merge branch 'feature/智能分组' into develop 

# Conflicts:
#	package-lock.json
parents f8967fc9 c57cd76e
Showing with 9937 additions and 1085 deletions
package-lock.json
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
......@@ -21,6 +21,7 @@
"@vue/cli-service": "~4.4.0",
"axios": "^0.19.2",
"babel-eslint": "^10.1.0",
"echarts": "^5.3.2",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.18.0",
......
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="utf-8">
<!-- <meta base="/his/"> -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<link rel="stylesheet" href="../src/assets//font/complete/iconfont.css">
<title>
基于病种精准管理系统
</title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</body>
</html>
\ No newline at end of file
src/assets/font/c/demo.css 0 → 100644
/* Logo 字体 */
@font-face {
font-family: "iconfont logo";
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
}
.logo {
font-family: "iconfont logo";
font-size: 160px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* tabs */
.nav-tabs {
position: relative;
}
.nav-tabs .nav-more {
position: absolute;
right: 0;
bottom: 0;
height: 42px;
line-height: 42px;
color: #666;
}
#tabs {
border-bottom: 1px solid #eee;
}
#tabs li {
cursor: pointer;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 16px;
border-bottom: 2px solid transparent;
position: relative;
z-index: 1;
margin-bottom: -1px;
color: #666;
}
#tabs .active {
border-bottom-color: #f00;
color: #222;
}
.tab-container .content {
display: none;
}
/* 页面布局 */
.main {
padding: 30px 100px;
width: 960px;
margin: 0 auto;
}
.main .logo {
color: #333;
text-align: left;
margin-bottom: 30px;
line-height: 1;
height: 110px;
margin-top: -50px;
overflow: hidden;
*zoom: 1;
}
.main .logo a {
font-size: 160px;
color: #333;
}
.helps {
margin-top: 40px;
}
.helps pre {
padding: 20px;
margin: 10px 0;
border: solid 1px #e7e1cd;
background-color: #fffdef;
overflow: auto;
}
.icon_lists {
width: 100% !important;
overflow: hidden;
*zoom: 1;
}
.icon_lists li {
width: 100px;
margin-bottom: 10px;
margin-right: 20px;
text-align: center;
list-style: none !important;
cursor: default;
}
.icon_lists li .code-name {
line-height: 1.2;
}
.icon_lists .icon {
display: block;
height: 100px;
line-height: 100px;
font-size: 42px;
margin: 10px auto;
color: #333;
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
-moz-transition: font-size 0.25s linear, width 0.25s linear;
transition: font-size 0.25s linear, width 0.25s linear;
}
.icon_lists .icon:hover {
font-size: 100px;
}
.icon_lists .svg-icon {
/* 通过设置 font-size 来改变图标大小 */
width: 1em;
/* 图标和文字相邻时，垂直对齐 */
vertical-align: -0.15em;
/* 通过设置 color 来改变 SVG 的颜色/fill */
fill: currentColor;
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
normalize.css 中也包含这行 */
overflow: hidden;
}
.icon_lists li .name,
.icon_lists li .code-name {
color: #666;
}
/* markdown 样式 */
.markdown {
color: #666;
font-size: 14px;
line-height: 1.8;
}
.highlight {
line-height: 1.5;
}
.markdown img {
vertical-align: middle;
max-width: 100%;
}
.markdown h1 {
color: #404040;
font-weight: 500;
line-height: 40px;
margin-bottom: 24px;
}
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
color: #404040;
margin: 1.6em 0 0.6em 0;
font-weight: 500;
clear: both;
}
.markdown h1 {
font-size: 28px;
}
.markdown h2 {
font-size: 22px;
}
.markdown h3 {
font-size: 16px;
}
.markdown h4 {
font-size: 14px;
}
.markdown h5 {
font-size: 12px;
}
.markdown h6 {
font-size: 12px;
}
.markdown hr {
height: 1px;
border: 0;
background: #e9e9e9;
margin: 16px 0;
clear: both;
}
.markdown p {
margin: 1em 0;
}
.markdown>p,
.markdown>blockquote,
.markdown>.highlight,
.markdown>ol,
.markdown>ul {
width: 80%;
}
.markdown ul>li {
list-style: circle;
}
.markdown>ul li,
.markdown blockquote ul>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown>ul li p,
.markdown>ol li p {
margin: 0.6em 0;
}
.markdown ol>li {
list-style: decimal;
}
.markdown>ol li,
.markdown blockquote ol>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown code {
margin: 0 3px;
padding: 0 5px;
background: #eee;
border-radius: 3px;
}
.markdown strong,
.markdown b {
font-weight: 600;
}
.markdown>table {
border-collapse: collapse;
border-spacing: 0px;
empty-cells: show;
border: 1px solid #e9e9e9;
width: 95%;
margin-bottom: 24px;
}
.markdown>table th {
white-space: nowrap;
color: #333;
font-weight: 600;
}
.markdown>table th,
.markdown>table td {
border: 1px solid #e9e9e9;
padding: 8px 16px;
text-align: left;
}
.markdown>table th {
background: #F7F7F7;
}
.markdown blockquote {
font-size: 90%;
color: #999;
border-left: 4px solid #e9e9e9;
padding-left: 0.8em;
margin: 1em 0;
}
.markdown blockquote p {
margin: 0;
}
.markdown .anchor {
opacity: 0;
transition: opacity 0.3s ease;
margin-left: 8px;
}
.markdown .waiting {
color: #ccc;
}
.markdown h1:hover .anchor,
.markdown h2:hover .anchor,
.markdown h3:hover .anchor,
.markdown h4:hover .anchor,
.markdown h5:hover .anchor,
.markdown h6:hover .anchor {
opacity: 1;
display: inline-block;
}
.markdown>br,
.markdown>p>br {
clear: both;
}
.hljs {
display: block;
background: white;
padding: 0.5em;
color: #333333;
overflow-x: auto;
}
.hljs-comment,
.hljs-meta {
color: #969896;
}
.hljs-string,
.hljs-variable,
.hljs-template-variable,
.hljs-strong,
.hljs-emphasis,
.hljs-quote {
color: #df5000;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-type {
color: #a71d5d;
}
.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-attribute {
color: #0086b3;
}
.hljs-section,
.hljs-name {
color: #63a35c;
}
.hljs-tag {
color: #333333;
}
.hljs-title,
.hljs-attr,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #795da3;
}
.hljs-addition {
color: #55a532;
background-color: #eaffea;
}
.hljs-deletion {
color: #bd2c00;
background-color: #ffecec;
}
.hljs-link {
text-decoration: underline;
}
/* 代码高亮 */
/* PrismJS 1.15.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre)>code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre)>code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function,
.token.class-name {
color: #DD4A68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
src/assets/font/c/demo_index.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>iconfont Demo</title>
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
<script src="iconfont.js"></script>
<!-- jQuery -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
<!-- 代码高亮 -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
<style>
.main .logo {
margin-top: 0;
height: auto;
}
.main .logo a {
display: flex;
align-items: center;
}
.main .logo .sub-title {
margin-left: 0.5em;
font-size: 22px;
color: #fff;
background: linear-gradient(-45deg, #3967FF, #B500FE);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<div class="main">
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
</a></h1>
<div class="nav-tabs">
<ul id="tabs" class="dib-box">
<li class="dib active"><span>Unicode</span></li>
<li class="dib"><span>Font class</span></li>
<li class="dib"><span>Symbol</span></li>
</ul>
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3111099" target="_blank" class="nav-more">查看项目</a>
</div>
<div class="tab-container">
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe6e7;</span>
<div class="name">间接费用字典</div>
<div class="code-name">&amp;#xe6e7;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6bb;</span>
<div class="name">加入组织</div>
<div class="code-name">&amp;#xe6bb;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6cf;</span>
<div class="name">导入</div>
<div class="code-name">&amp;#xe6cf;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe620;</span>
<div class="name">入院</div>
<div class="code-name">&amp;#xe620;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe641;</span>
<div class="name">个人盈亏</div>
<div class="code-name">&amp;#xe641;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe623;</span>
<div class="name">团队报表_盈亏报表</div>
<div class="code-name">&amp;#xe623;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe609;</span>
<div class="name">盈亏笔记</div>
<div class="code-name">&amp;#xe609;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe672;</span>
<div class="name">费用</div>
<div class="code-name">&amp;#xe672;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe601;</span>
<div class="name">质控</div>
<div class="code-name">&amp;#xe601;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe643;</span>
<div class="name">图标_护理医嘱_护理医嘱</div>
<div class="code-name">&amp;#xe643;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe614;</span>
<div class="name">调度规则</div>
<div class="code-name">&amp;#xe614;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe699;</span>
<div class="name">条码</div>
<div class="code-name">&amp;#xe699;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe606;</span>
<div class="name">钱钱-01</div>
<div class="code-name">&amp;#xe606;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe613;</span>
<div class="name">剪刀svg</div>
<div class="code-name">&amp;#xe613;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xeb86;</span>
<div class="name">搜索_o</div>
<div class="code-name">&amp;#xeb86;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe65d;</span>
<div class="name">导入</div>
<div class="code-name">&amp;#xe65d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe607;</span>
<div class="name">ipr_提交</div>
<div class="code-name">&amp;#xe607;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe7a9;</span>
<div class="name">听诊器</div>
<div class="code-name">&amp;#xe7a9;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe65e;</span>
<div class="name">体检组合</div>
<div class="code-name">&amp;#xe65e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6fd;</span>
<div class="name">医院</div>
<div class="code-name">&amp;#xe6fd;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6f7;</span>
<div class="name">可视化平台icon_评分</div>
<div class="code-name">&amp;#xe6f7;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe611;</span>
<div class="name">清华-人员管理off</div>
<div class="code-name">&amp;#xe611;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe629;</span>
<div class="name">出入院流程</div>
<div class="code-name">&amp;#xe629;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe858;</span>
<div class="name">医生团队</div>
<div class="code-name">&amp;#xe858;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60d;</span>
<div class="name">医生</div>
<div class="code-name">&amp;#xe60d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe67e;</span>
<div class="name">科室</div>
<div class="code-name">&amp;#xe67e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe610;</span>
<div class="name">食源性疾病监测</div>
<div class="code-name">&amp;#xe610;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe68b;</span>
<div class="name">年度</div>
<div class="code-name">&amp;#xe68b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6b2;</span>
<div class="name">医生</div>
<div class="code-name">&amp;#xe6b2;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe624;</span>
<div class="name">预测</div>
<div class="code-name">&amp;#xe624;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe668;</span>
<div class="name">分析</div>
<div class="code-name">&amp;#xe668;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe604;</span>
<div class="name">预算控制</div>
<div class="code-name">&amp;#xe604;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe648;</span>
<div class="name">分析</div>
<div class="code-name">&amp;#xe648;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe603;</span>
<div class="name">医生</div>
<div class="code-name">&amp;#xe603;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe652;</span>
<div class="name">手术订单</div>
<div class="code-name">&amp;#xe652;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe794;</span>
<div class="name">预算</div>
<div class="code-name">&amp;#xe794;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe666;</span>
<div class="name">账号管理</div>
<div class="code-name">&amp;#xe666;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe645;</span>
<div class="name">疾病管理</div>
<div class="code-name">&amp;#xe645;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60a;</span>
<div class="name">科室库存管理</div>
<div class="code-name">&amp;#xe60a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe64c;</span>
<div class="name">分析</div>
<div class="code-name">&amp;#xe64c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6fa;</span>
<div class="name">医生</div>
<div class="code-name">&amp;#xe6fa;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe703;</span>
<div class="name">科室工作量</div>
<div class="code-name">&amp;#xe703;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe67c;</span>
<div class="name">全科医疗科</div>
<div class="code-name">&amp;#xe67c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62d;</span>
<div class="name">账号管理</div>
<div class="code-name">&amp;#xe62d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe733;</span>
<div class="name">软著预测</div>
<div class="code-name">&amp;#xe733;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe77b;</span>
<div class="name">科室统计1</div>
<div class="code-name">&amp;#xe77b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61d;</span>
<div class="name">预算</div>
<div class="code-name">&amp;#xe61d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6bd;</span>
<div class="name">科室</div>
<div class="code-name">&amp;#xe6bd;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe618;</span>
<div class="name">02 TPM_预算科目</div>
<div class="code-name">&amp;#xe618;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62e;</span>
<div class="name">全科学</div>
<div class="code-name">&amp;#xe62e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xed13;</span>
<div class="name">疾病</div>
<div class="code-name">&amp;#xed13;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61c;</span>
<div class="name">导出</div>
<div class="code-name">&amp;#xe61c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe600;</span>
<div class="name">新人指南</div>
<div class="code-name">&amp;#xe600;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe8bf;</span>
<div class="name">银行卡</div>
<div class="code-name">&amp;#xe8bf;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe8af;</span>
<div class="name">付费管理</div>
<div class="code-name">&amp;#xe8af;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe898;</span>
<div class="name">22资料、手册-线性</div>
<div class="code-name">&amp;#xe898;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe605;</span>
<div class="name">箭头 三角形</div>
<div class="code-name">&amp;#xe605;</div>
</li>
</ul>
<div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2>
<hr>
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
<ul>
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
</ul>
<blockquote>
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
</blockquote>
<p>Unicode 使用步骤如下：</p>
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1645068566372') format('woff2'),
url('iconfont.woff?t=1645068566372') format('woff'),
url('iconfont.ttf?t=1645068566372') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-jianjiefeiyonzidian"></span>
<div class="name">
间接费用字典
</div>
<div class="code-name">.icon-jianjiefeiyonzidian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jiaruzuzhi"></span>
<div class="name">
加入组织
</div>
<div class="code-name">.icon-jiaruzuzhi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-daoru1"></span>
<div class="name">
导入
</div>
<div class="code-name">.icon-daoru1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-ruyuan"></span>
<div class="name">
入院
</div>
<div class="code-name">.icon-ruyuan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-gerenyingkui"></span>
<div class="name">
个人盈亏
</div>
<div class="code-name">.icon-gerenyingkui
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tuanduibaobiao_yingkuibaobiao"></span>
<div class="name">
团队报表_盈亏报表
</div>
<div class="code-name">.icon-tuanduibaobiao_yingkuibaobiao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yingkuibiji"></span>
<div class="name">
盈亏笔记
</div>
<div class="code-name">.icon-yingkuibiji
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-feiyong"></span>
<div class="name">
费用
</div>
<div class="code-name">.icon-feiyong
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zhikong"></span>
<div class="name">
质控
</div>
<div class="code-name">.icon-zhikong
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tubiao_huliyizhu_huliyizhu"></span>
<div class="name">
图标_护理医嘱_护理医嘱
</div>
<div class="code-name">.icon-tubiao_huliyizhu_huliyizhu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-bianzu_70"></span>
<div class="name">
调度规则
</div>
<div class="code-name">.icon-bianzu_70
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-iconset0254"></span>
<div class="name">
条码
</div>
<div class="code-name">.icon-iconset0254
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-qianqian-"></span>
<div class="name">
钱钱-01
</div>
<div class="code-name">.icon-qianqian-
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jiandaosvg"></span>
<div class="name">
剪刀svg
</div>
<div class="code-name">.icon-jiandaosvg
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-sousuo_o"></span>
<div class="name">
搜索_o
</div>
<div class="code-name">.icon-sousuo_o
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-daoru"></span>
<div class="name">
导入
</div>
<div class="code-name">.icon-daoru
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-ipr_tijiao"></span>
<div class="name">
ipr_提交
</div>
<div class="code-name">.icon-ipr_tijiao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tingzhenqi"></span>
<div class="name">
听诊器
</div>
<div class="code-name">.icon-tingzhenqi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tijianzuhe"></span>
<div class="name">
体检组合
</div>
<div class="code-name">.icon-tijianzuhe
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-ico_yiyuanguanjia_banliruyuan"></span>
<div class="name">
医院
</div>
<div class="code-name">.icon-ico_yiyuanguanjia_banliruyuan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-keshihuapingtaiicon_pingfen"></span>
<div class="name">
可视化平台icon_评分
</div>
<div class="code-name">.icon-keshihuapingtaiicon_pingfen
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fenzu"></span>
<div class="name">
清华-人员管理off
</div>
<div class="code-name">.icon-fenzu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-chuyuandaiyao"></span>
<div class="name">
出入院流程
</div>
<div class="code-name">.icon-chuyuandaiyao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yishengtuandui"></span>
<div class="name">
医生团队
</div>
<div class="code-name">.icon-yishengtuandui
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yisheng"></span>
<div class="name">
医生
</div>
<div class="code-name">.icon-yisheng
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-keshi"></span>
<div class="name">
科室
</div>
<div class="code-name">.icon-keshi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shiyuanxingjibingjiance"></span>
<div class="name">
食源性疾病监测
</div>
<div class="code-name">.icon-shiyuanxingjibingjiance
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-niandu"></span>
<div class="name">
年度
</div>
<div class="code-name">.icon-niandu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yisheng1"></span>
<div class="name">
医生
</div>
<div class="code-name">.icon-yisheng1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yuce"></span>
<div class="name">
预测
</div>
<div class="code-name">.icon-yuce
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fenxi"></span>
<div class="name">
分析
</div>
<div class="code-name">.icon-fenxi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-icon-test"></span>
<div class="name">
预算控制
</div>
<div class="code-name">.icon-icon-test
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fenxi1"></span>
<div class="name">
分析
</div>
<div class="code-name">.icon-fenxi1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yisheng666"></span>
<div class="name">
医生
</div>
<div class="code-name">.icon-yisheng666
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shoushudingdan"></span>
<div class="name">
手术订单
</div>
<div class="code-name">.icon-shoushudingdan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yusuan"></span>
<div class="name">
预算
</div>
<div class="code-name">.icon-yusuan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zhanghaoguanli"></span>
<div class="name">
账号管理
</div>
<div class="code-name">.icon-zhanghaoguanli
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jibingguanli"></span>
<div class="name">
疾病管理
</div>
<div class="code-name">.icon-jibingguanli
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-keshikucunguanli"></span>
<div class="name">
科室库存管理
</div>
<div class="code-name">.icon-keshikucunguanli
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fenxi2"></span>
<div class="name">
分析
</div>
<div class="code-name">.icon-fenxi2
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yisheng2"></span>
<div class="name">
医生
</div>
<div class="code-name">.icon-yisheng2
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-keshigongzuoliang"></span>
<div class="name">
科室工作量
</div>
<div class="code-name">.icon-keshigongzuoliang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-quankeyiliaoke"></span>
<div class="name">
全科医疗科
</div>
<div class="code-name">.icon-quankeyiliaoke
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zhanghaoguanli1"></span>
<div class="name">
账号管理
</div>
<div class="code-name">.icon-zhanghaoguanli1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-ruanzhuyuce"></span>
<div class="name">
软著预测
</div>
<div class="code-name">.icon-ruanzhuyuce
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-keshitongji1"></span>
<div class="name">
科室统计1
</div>
<div class="code-name">.icon-keshitongji1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yusuan1"></span>
<div class="name">
预算
</div>
<div class="code-name">.icon-yusuan1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-keshi2"></span>
<div class="name">
科室
</div>
<div class="code-name">.icon-keshi2
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-02TPM_yusuankemu"></span>
<div class="name">
02 TPM_预算科目
</div>
<div class="code-name">.icon-02TPM_yusuankemu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-quankexue"></span>
<div class="name">
全科学
</div>
<div class="code-name">.icon-quankexue
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jibing"></span>
<div class="name">
疾病
</div>
<div class="code-name">.icon-jibing
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-daochu"></span>
<div class="name">
导出
</div>
<div class="code-name">.icon-daochu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xinrenzhinan"></span>
<div class="name">
新人指南
</div>
<div class="code-name">.icon-xinrenzhinan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yinhangka"></span>
<div class="name">
银行卡
</div>
<div class="code-name">.icon-yinhangka
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fufeiguanli"></span>
<div class="name">
付费管理
</div>
<div class="code-name">.icon-fufeiguanli
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-ziliaoshouce-xianxing"></span>
<div class="name">
22资料、手册-线性
</div>
<div class="code-name">.icon-ziliaoshouce-xianxing
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jiantou1"></span>
<div class="name">
箭头 三角形
</div>
<div class="code-name">.icon-jiantou1
</div>
</li>
</ul>
<div class="article markdown">
<h2 id="font-class-">font-class 引用</h2>
<hr>
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
<p>与 Unicode 使用方式相比，具有如下特点：</p>
<ul>
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
</ul>
<p>使用步骤如下：</p>
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jianjiefeiyonzidian"></use>
</svg>
<div class="name">间接费用字典</div>
<div class="code-name">#icon-jianjiefeiyonzidian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jiaruzuzhi"></use>
</svg>
<div class="name">加入组织</div>
<div class="code-name">#icon-jiaruzuzhi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-daoru1"></use>
</svg>
<div class="name">导入</div>
<div class="code-name">#icon-daoru1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-ruyuan"></use>
</svg>
<div class="name">入院</div>
<div class="code-name">#icon-ruyuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-gerenyingkui"></use>
</svg>
<div class="name">个人盈亏</div>
<div class="code-name">#icon-gerenyingkui</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tuanduibaobiao_yingkuibaobiao"></use>
</svg>
<div class="name">团队报表_盈亏报表</div>
<div class="code-name">#icon-tuanduibaobiao_yingkuibaobiao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yingkuibiji"></use>
</svg>
<div class="name">盈亏笔记</div>
<div class="code-name">#icon-yingkuibiji</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-feiyong"></use>
</svg>
<div class="name">费用</div>
<div class="code-name">#icon-feiyong</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zhikong"></use>
</svg>
<div class="name">质控</div>
<div class="code-name">#icon-zhikong</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tubiao_huliyizhu_huliyizhu"></use>
</svg>
<div class="name">图标_护理医嘱_护理医嘱</div>
<div class="code-name">#icon-tubiao_huliyizhu_huliyizhu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-bianzu_70"></use>
</svg>
<div class="name">调度规则</div>
<div class="code-name">#icon-bianzu_70</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-iconset0254"></use>
</svg>
<div class="name">条码</div>
<div class="code-name">#icon-iconset0254</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-qianqian-"></use>
</svg>
<div class="name">钱钱-01</div>
<div class="code-name">#icon-qianqian-</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jiandaosvg"></use>
</svg>
<div class="name">剪刀svg</div>
<div class="code-name">#icon-jiandaosvg</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-sousuo_o"></use>
</svg>
<div class="name">搜索_o</div>
<div class="code-name">#icon-sousuo_o</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-daoru"></use>
</svg>
<div class="name">导入</div>
<div class="code-name">#icon-daoru</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-ipr_tijiao"></use>
</svg>
<div class="name">ipr_提交</div>
<div class="code-name">#icon-ipr_tijiao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tingzhenqi"></use>
</svg>
<div class="name">听诊器</div>
<div class="code-name">#icon-tingzhenqi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tijianzuhe"></use>
</svg>
<div class="name">体检组合</div>
<div class="code-name">#icon-tijianzuhe</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-ico_yiyuanguanjia_banliruyuan"></use>
</svg>
<div class="name">医院</div>
<div class="code-name">#icon-ico_yiyuanguanjia_banliruyuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-keshihuapingtaiicon_pingfen"></use>
</svg>
<div class="name">可视化平台icon_评分</div>
<div class="code-name">#icon-keshihuapingtaiicon_pingfen</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fenzu"></use>
</svg>
<div class="name">清华-人员管理off</div>
<div class="code-name">#icon-fenzu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-chuyuandaiyao"></use>
</svg>
<div class="name">出入院流程</div>
<div class="code-name">#icon-chuyuandaiyao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yishengtuandui"></use>
</svg>
<div class="name">医生团队</div>
<div class="code-name">#icon-yishengtuandui</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yisheng"></use>
</svg>
<div class="name">医生</div>
<div class="code-name">#icon-yisheng</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-keshi"></use>
</svg>
<div class="name">科室</div>
<div class="code-name">#icon-keshi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shiyuanxingjibingjiance"></use>
</svg>
<div class="name">食源性疾病监测</div>
<div class="code-name">#icon-shiyuanxingjibingjiance</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-niandu"></use>
</svg>
<div class="name">年度</div>
<div class="code-name">#icon-niandu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yisheng1"></use>
</svg>
<div class="name">医生</div>
<div class="code-name">#icon-yisheng1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yuce"></use>
</svg>
<div class="name">预测</div>
<div class="code-name">#icon-yuce</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fenxi"></use>
</svg>
<div class="name">分析</div>
<div class="code-name">#icon-fenxi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-icon-test"></use>
</svg>
<div class="name">预算控制</div>
<div class="code-name">#icon-icon-test</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fenxi1"></use>
</svg>
<div class="name">分析</div>
<div class="code-name">#icon-fenxi1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yisheng666"></use>
</svg>
<div class="name">医生</div>
<div class="code-name">#icon-yisheng666</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shoushudingdan"></use>
</svg>
<div class="name">手术订单</div>
<div class="code-name">#icon-shoushudingdan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yusuan"></use>
</svg>
<div class="name">预算</div>
<div class="code-name">#icon-yusuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zhanghaoguanli"></use>
</svg>
<div class="name">账号管理</div>
<div class="code-name">#icon-zhanghaoguanli</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jibingguanli"></use>
</svg>
<div class="name">疾病管理</div>
<div class="code-name">#icon-jibingguanli</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-keshikucunguanli"></use>
</svg>
<div class="name">科室库存管理</div>
<div class="code-name">#icon-keshikucunguanli</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fenxi2"></use>
</svg>
<div class="name">分析</div>
<div class="code-name">#icon-fenxi2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yisheng2"></use>
</svg>
<div class="name">医生</div>
<div class="code-name">#icon-yisheng2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-keshigongzuoliang"></use>
</svg>
<div class="name">科室工作量</div>
<div class="code-name">#icon-keshigongzuoliang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-quankeyiliaoke"></use>
</svg>
<div class="name">全科医疗科</div>
<div class="code-name">#icon-quankeyiliaoke</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zhanghaoguanli1"></use>
</svg>
<div class="name">账号管理</div>
<div class="code-name">#icon-zhanghaoguanli1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-ruanzhuyuce"></use>
</svg>
<div class="name">软著预测</div>
<div class="code-name">#icon-ruanzhuyuce</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-keshitongji1"></use>
</svg>
<div class="name">科室统计1</div>
<div class="code-name">#icon-keshitongji1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yusuan1"></use>
</svg>
<div class="name">预算</div>
<div class="code-name">#icon-yusuan1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-keshi2"></use>
</svg>
<div class="name">科室</div>
<div class="code-name">#icon-keshi2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-02TPM_yusuankemu"></use>
</svg>
<div class="name">02 TPM_预算科目</div>
<div class="code-name">#icon-02TPM_yusuankemu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-quankexue"></use>
</svg>
<div class="name">全科学</div>
<div class="code-name">#icon-quankexue</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jibing"></use>
</svg>
<div class="name">疾病</div>
<div class="code-name">#icon-jibing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-daochu"></use>
</svg>
<div class="name">导出</div>
<div class="code-name">#icon-daochu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xinrenzhinan"></use>
</svg>
<div class="name">新人指南</div>
<div class="code-name">#icon-xinrenzhinan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yinhangka"></use>
</svg>
<div class="name">银行卡</div>
<div class="code-name">#icon-yinhangka</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fufeiguanli"></use>
</svg>
<div class="name">付费管理</div>
<div class="code-name">#icon-fufeiguanli</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-ziliaoshouce-xianxing"></use>
</svg>
<div class="name">22资料、手册-线性</div>
<div class="code-name">#icon-ziliaoshouce-xianxing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jiantou1"></use>
</svg>
<div class="name">箭头 三角形</div>
<div class="code-name">#icon-jiantou1</div>
</li>
</ul>
<div class="article markdown">
<h2 id="symbol-">Symbol 引用</h2>
<hr>
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
<ul>
<li>支持多色图标了，不再受单色限制。</li>
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
<li>兼容性较差，支持 IE9+，及现代浏览器。</li>
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
</ul>
<p>使用步骤如下：</p>
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
&lt;/style&gt;
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
&lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('.tab-container .content:first').show()
$('#tabs li').click(function (e) {
var tabContent = $('.tab-container .content')
var index = $(this).index()
if ($(this).hasClass('active')) {
return
} else {
$('#tabs li').removeClass('active')
$(this).addClass('active')
tabContent.hide().eq(index).fadeIn()
}
})
})
</script>
</body>
</html>
src/assets/font/c/iconfont.css 0 → 100644
@font-face {
font-family: "iconfont"; /* Project id 3111099 */
src: url('iconfont.woff2?t=1645068566372') format('woff2'),
url('iconfont.woff?t=1645068566372') format('woff'),
url('iconfont.ttf?t=1645068566372') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-jianjiefeiyonzidian:before {
content: "\e6e7";
}
.icon-jiaruzuzhi:before {
content: "\e6bb";
}
.icon-daoru1:before {
content: "\e6cf";
}
.icon-ruyuan:before {
content: "\e620";
}
.icon-gerenyingkui:before {
content: "\e641";
}
.icon-tuanduibaobiao_yingkuibaobiao:before {
content: "\e623";
}
.icon-yingkuibiji:before {
content: "\e609";
}
.icon-feiyong:before {
content: "\e672";
}
.icon-zhikong:before {
content: "\e601";
}
.icon-tubiao_huliyizhu_huliyizhu:before {
content: "\e643";
}
.icon-bianzu_70:before {
content: "\e614";
}
.icon-iconset0254:before {
content: "\e699";
}
.icon-qianqian-:before {
content: "\e606";
}
.icon-jiandaosvg:before {
content: "\e613";
}
.icon-sousuo_o:before {
content: "\eb86";
}
.icon-daoru:before {
content: "\e65d";
}
.icon-ipr_tijiao:before {
content: "\e607";
}
.icon-tingzhenqi:before {
content: "\e7a9";
}
.icon-tijianzuhe:before {
content: "\e65e";
}
.icon-ico_yiyuanguanjia_banliruyuan:before {
content: "\e6fd";
}
.icon-keshihuapingtaiicon_pingfen:before {
content: "\e6f7";
}
.icon-fenzu:before {
content: "\e611";
}
.icon-chuyuandaiyao:before {
content: "\e629";
}
.icon-yishengtuandui:before {
content: "\e858";
}
.icon-yisheng:before {
content: "\e60d";
}
.icon-keshi:before {
content: "\e67e";
}
.icon-shiyuanxingjibingjiance:before {
content: "\e610";
}
.icon-niandu:before {
content: "\e68b";
}
.icon-yisheng1:before {
content: "\e6b2";
}
.icon-yuce:before {
content: "\e624";
}
.icon-fenxi:before {
content: "\e668";
}
.icon-icon-test:before {
content: "\e604";
}
.icon-fenxi1:before {
content: "\e648";
}
.icon-yisheng666:before {
content: "\e603";
}
.icon-shoushudingdan:before {
content: "\e652";
}
.icon-yusuan:before {
content: "\e794";
}
.icon-zhanghaoguanli:before {
content: "\e666";
}
.icon-jibingguanli:before {
content: "\e645";
}
.icon-keshikucunguanli:before {
content: "\e60a";
}
.icon-fenxi2:before {
content: "\e64c";
}
.icon-yisheng2:before {
content: "\e6fa";
}
.icon-keshigongzuoliang:before {
content: "\e703";
}
.icon-quankeyiliaoke:before {
content: "\e67c";
}
.icon-zhanghaoguanli1:before {
content: "\e62d";
}
.icon-ruanzhuyuce:before {
content: "\e733";
}
.icon-keshitongji1:before {
content: "\e77b";
}
.icon-yusuan1:before {
content: "\e61d";
}
.icon-keshi2:before {
content: "\e6bd";
}
.icon-02TPM_yusuankemu:before {
content: "\e618";
}
.icon-quankexue:before {
content: "\e62e";
}
.icon-jibing:before {
content: "\ed13";
}
.icon-daochu:before {
content: "\e61c";
}
.icon-xinrenzhinan:before {
content: "\e600";
}
.icon-yinhangka:before {
content: "\e8bf";
}
.icon-fufeiguanli:before {
content: "\e8af";
}
.icon-ziliaoshouce-xianxing:before {
content: "\e898";
}
.icon-jiantou1:before {
content: "\e605";
}
src/assets/font/c/iconfont.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/assets/font/c/iconfont.json 0 → 100644
{
"id": "3111099",
"name": "完整图标",
"font_family": "iconfont",
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "645498",
"name": "间接费用字典",
"font_class": "jianjiefeiyonzidian",
"unicode": "e6e7",
"unicode_decimal": 59111
},
{
"icon_id": "8304933",
"name": "加入组织",
"font_class": "jiaruzuzhi",
"unicode": "e6bb",
"unicode_decimal": 59067
},
{
"icon_id": "8319348",
"name": "导入",
"font_class": "daoru1",
"unicode": "e6cf",
"unicode_decimal": 59087
},
{
"icon_id": "8841391",
"name": "入院",
"font_class": "ruyuan",
"unicode": "e620",
"unicode_decimal": 58912
},
{
"icon_id": "9001914",
"name": "个人盈亏",
"font_class": "gerenyingkui",
"unicode": "e641",
"unicode_decimal": 58945
},
{
"icon_id": "9792482",
"name": "团队报表_盈亏报表",
"font_class": "tuanduibaobiao_yingkuibaobiao",
"unicode": "e623",
"unicode_decimal": 58915
},
{
"icon_id": "10660311",
"name": "盈亏笔记",
"font_class": "yingkuibiji",
"unicode": "e609",
"unicode_decimal": 58889
},
{
"icon_id": "12129938",
"name": "费用",
"font_class": "feiyong",
"unicode": "e672",
"unicode_decimal": 58994
},
{
"icon_id": "12794224",
"name": "质控",
"font_class": "zhikong",
"unicode": "e601",
"unicode_decimal": 58881
},
{
"icon_id": "14112156",
"name": "图标_护理医嘱_护理医嘱",
"font_class": "tubiao_huliyizhu_huliyizhu",
"unicode": "e643",
"unicode_decimal": 58947
},
{
"icon_id": "23775528",
"name": "调度规则",
"font_class": "bianzu_70",
"unicode": "e614",
"unicode_decimal": 58900
},
{
"icon_id": "554262",
"name": "条码",
"font_class": "iconset0254",
"unicode": "e699",
"unicode_decimal": 59033
},
{
"icon_id": "3791134",
"name": "钱钱-01",
"font_class": "qianqian-",
"unicode": "e606",
"unicode_decimal": 58886
},
{
"icon_id": "5202088",
"name": "剪刀svg",
"font_class": "jiandaosvg",
"unicode": "e613",
"unicode_decimal": 58899
},
{
"icon_id": "5387900",
"name": "搜索_o",
"font_class": "sousuo_o",
"unicode": "eb86",
"unicode_decimal": 60294
},
{
"icon_id": "10194316",
"name": "导入",
"font_class": "daoru",
"unicode": "e65d",
"unicode_decimal": 58973
},
{
"icon_id": "11542429",
"name": "ipr_提交",
"font_class": "ipr_tijiao",
"unicode": "e607",
"unicode_decimal": 58887
},
{
"icon_id": "18211336",
"name": "听诊器",
"font_class": "tingzhenqi",
"unicode": "e7a9",
"unicode_decimal": 59305
},
{
"icon_id": "3892814",
"name": "体检组合",
"font_class": "tijianzuhe",
"unicode": "e65e",
"unicode_decimal": 58974
},
{
"icon_id": "10056222",
"name": "医院",
"font_class": "ico_yiyuanguanjia_banliruyuan",
"unicode": "e6fd",
"unicode_decimal": 59133
},
{
"icon_id": "11529546",
"name": "可视化平台icon_评分",
"font_class": "keshihuapingtaiicon_pingfen",
"unicode": "e6f7",
"unicode_decimal": 59127
},
{
"icon_id": "16135377",
"name": "清华-人员管理off",
"font_class": "fenzu",
"unicode": "e611",
"unicode_decimal": 58897
},
{
"icon_id": "16900329",
"name": "出入院流程",
"font_class": "chuyuandaiyao",
"unicode": "e629",
"unicode_decimal": 58921
},
{
"icon_id": "8288899",
"name": "医生团队",
"font_class": "yishengtuandui",
"unicode": "e858",
"unicode_decimal": 59480
},
{
"icon_id": "3370262",
"name": "医生",
"font_class": "yisheng",
"unicode": "e60d",
"unicode_decimal": 58893
},
{
"icon_id": "4450270",
"name": "科室",
"font_class": "keshi",
"unicode": "e67e",
"unicode_decimal": 59006
},
{
"icon_id": "7435060",
"name": "食源性疾病监测",
"font_class": "shiyuanxingjibingjiance",
"unicode": "e610",
"unicode_decimal": 58896
},
{
"icon_id": "17188854",
"name": "年度",
"font_class": "niandu",
"unicode": "e68b",
"unicode_decimal": 59019
},
{
"icon_id": "827988",
"name": "医生",
"font_class": "yisheng1",
"unicode": "e6b2",
"unicode_decimal": 59058
},
{
"icon_id": "1037699",
"name": "预测",
"font_class": "yuce",
"unicode": "e624",
"unicode_decimal": 58916
},
{
"icon_id": "1881568",
"name": "分析",
"font_class": "fenxi",
"unicode": "e668",
"unicode_decimal": 58984
},
{
"icon_id": "1915206",
"name": "预算控制",
"font_class": "icon-test",
"unicode": "e604",
"unicode_decimal": 58884
},
{
"icon_id": "3762527",
"name": "分析",
"font_class": "fenxi1",
"unicode": "e648",
"unicode_decimal": 58952
},
{
"icon_id": "4919907",
"name": "医生",
"font_class": "yisheng666",
"unicode": "e603",
"unicode_decimal": 58883
},
{
"icon_id": "5190649",
"name": "手术订单",
"font_class": "shoushudingdan",
"unicode": "e652",
"unicode_decimal": 58962
},
{
"icon_id": "5484259",
"name": "预算",
"font_class": "yusuan",
"unicode": "e794",
"unicode_decimal": 59284
},
{
"icon_id": "6455673",
"name": "账号管理",
"font_class": "zhanghaoguanli",
"unicode": "e666",
"unicode_decimal": 58982
},
{
"icon_id": "6602265",
"name": "疾病管理",
"font_class": "jibingguanli",
"unicode": "e645",
"unicode_decimal": 58949
},
{
"icon_id": "7414003",
"name": "科室库存管理",
"font_class": "keshikucunguanli",
"unicode": "e60a",
"unicode_decimal": 58890
},
{
"icon_id": "9589363",
"name": "分析",
"font_class": "fenxi2",
"unicode": "e64c",
"unicode_decimal": 58956
},
{
"icon_id": "10056219",
"name": "医生",
"font_class": "yisheng2",
"unicode": "e6fa",
"unicode_decimal": 59130
},
{
"icon_id": "10056237",
"name": "科室工作量",
"font_class": "keshigongzuoliang",
"unicode": "e703",
"unicode_decimal": 59139
},
{
"icon_id": "11043288",
"name": "全科医疗科",
"font_class": "quankeyiliaoke",
"unicode": "e67c",
"unicode_decimal": 59004
},
{
"icon_id": "11882440",
"name": "账号管理",
"font_class": "zhanghaoguanli1",
"unicode": "e62d",
"unicode_decimal": 58925
},
{
"icon_id": "14656283",
"name": "软著预测",
"font_class": "ruanzhuyuce",
"unicode": "e733",
"unicode_decimal": 59187
},
{
"icon_id": "15668854",
"name": "科室统计1",
"font_class": "keshitongji1",
"unicode": "e77b",
"unicode_decimal": 59259
},
{
"icon_id": "18683483",
"name": "预算",
"font_class": "yusuan1",
"unicode": "e61d",
"unicode_decimal": 58909
},
{
"icon_id": "18916459",
"name": "科室",
"font_class": "keshi2",
"unicode": "e6bd",
"unicode_decimal": 59069
},
{
"icon_id": "19135003",
"name": "02 TPM_预算科目",
"font_class": "02TPM_yusuankemu",
"unicode": "e618",
"unicode_decimal": 58904
},
{
"icon_id": "22952624",
"name": "全科学",
"font_class": "quankexue",
"unicode": "e62e",
"unicode_decimal": 58926
},
{
"icon_id": "24737003",
"name": "疾病",
"font_class": "jibing",
"unicode": "ed13",
"unicode_decimal": 60691
},
{
"icon_id": "2667525",
"name": "导出",
"font_class": "daochu",
"unicode": "e61c",
"unicode_decimal": 58908
},
{
"icon_id": "249355",
"name": "新人指南",
"font_class": "xinrenzhinan",
"unicode": "e600",
"unicode_decimal": 58880
},
{
"icon_id": "11372727",
"name": "银行卡",
"font_class": "yinhangka",
"unicode": "e8bf",
"unicode_decimal": 59583
},
{
"icon_id": "20314574",
"name": "付费管理",
"font_class": "fufeiguanli",
"unicode": "e8af",
"unicode_decimal": 59567
},
{
"icon_id": "1727356",
"name": "22资料、手册-线性",
"font_class": "ziliaoshouce-xianxing",
"unicode": "e898",
"unicode_decimal": 59544
},
{
"icon_id": "1110403",
"name": "箭头 三角形",
"font_class": "jiantou1",
"unicode": "e605",
"unicode_decimal": 58885
}
]
}
src/assets/font/complete/demo.css 0 → 100644
/* Logo 字体 */
@font-face {
font-family: "iconfont logo";
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
}
.logo {
font-family: "iconfont logo";
font-size: 160px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* tabs */
.nav-tabs {
position: relative;
}
.nav-tabs .nav-more {
position: absolute;
right: 0;
bottom: 0;
height: 42px;
line-height: 42px;
color: #666;
}
#tabs {
border-bottom: 1px solid #eee;
}
#tabs li {
cursor: pointer;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 16px;
border-bottom: 2px solid transparent;
position: relative;
z-index: 1;
margin-bottom: -1px;
color: #666;
}
#tabs .active {
border-bottom-color: #f00;
color: #222;
}
.tab-container .content {
display: none;
}
/* 页面布局 */
.main {
padding: 30px 100px;
width: 960px;
margin: 0 auto;
}
.main .logo {
color: #333;
text-align: left;
margin-bottom: 30px;
line-height: 1;
height: 110px;
margin-top: -50px;
overflow: hidden;
*zoom: 1;
}
.main .logo a {
font-size: 160px;
color: #333;
}
.helps {
margin-top: 40px;
}
.helps pre {
padding: 20px;
margin: 10px 0;
border: solid 1px #e7e1cd;
background-color: #fffdef;
overflow: auto;
}
.icon_lists {
width: 100% !important;
overflow: hidden;
*zoom: 1;
}
.icon_lists li {
width: 100px;
margin-bottom: 10px;
margin-right: 20px;
text-align: center;
list-style: none !important;
cursor: default;
}
.icon_lists li .code-name {
line-height: 1.2;
}
.icon_lists .icon {
display: block;
height: 100px;
line-height: 100px;
font-size: 42px;
margin: 10px auto;
color: #333;
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
-moz-transition: font-size 0.25s linear, width 0.25s linear;
transition: font-size 0.25s linear, width 0.25s linear;
}
.icon_lists .icon:hover {
font-size: 100px;
}
.icon_lists .svg-icon {
/* 通过设置 font-size 来改变图标大小 */
width: 1em;
/* 图标和文字相邻时，垂直对齐 */
vertical-align: -0.15em;
/* 通过设置 color 来改变 SVG 的颜色/fill */
fill: currentColor;
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
normalize.css 中也包含这行 */
overflow: hidden;
}
.icon_lists li .name,
.icon_lists li .code-name {
color: #666;
}
/* markdown 样式 */
.markdown {
color: #666;
font-size: 14px;
line-height: 1.8;
}
.highlight {
line-height: 1.5;
}
.markdown img {
vertical-align: middle;
max-width: 100%;
}
.markdown h1 {
color: #404040;
font-weight: 500;
line-height: 40px;
margin-bottom: 24px;
}
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
color: #404040;
margin: 1.6em 0 0.6em 0;
font-weight: 500;
clear: both;
}
.markdown h1 {
font-size: 28px;
}
.markdown h2 {
font-size: 22px;
}
.markdown h3 {
font-size: 16px;
}
.markdown h4 {
font-size: 14px;
}
.markdown h5 {
font-size: 12px;
}
.markdown h6 {
font-size: 12px;
}
.markdown hr {
height: 1px;
border: 0;
background: #e9e9e9;
margin: 16px 0;
clear: both;
}
.markdown p {
margin: 1em 0;
}
.markdown>p,
.markdown>blockquote,
.markdown>.highlight,
.markdown>ol,
.markdown>ul {
width: 80%;
}
.markdown ul>li {
list-style: circle;
}
.markdown>ul li,
.markdown blockquote ul>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown>ul li p,
.markdown>ol li p {
margin: 0.6em 0;
}
.markdown ol>li {
list-style: decimal;
}
.markdown>ol li,
.markdown blockquote ol>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown code {
margin: 0 3px;
padding: 0 5px;
background: #eee;
border-radius: 3px;
}
.markdown strong,
.markdown b {
font-weight: 600;
}
.markdown>table {
border-collapse: collapse;
border-spacing: 0px;
empty-cells: show;
border: 1px solid #e9e9e9;
width: 95%;
margin-bottom: 24px;
}
.markdown>table th {
white-space: nowrap;
color: #333;
font-weight: 600;
}
.markdown>table th,
.markdown>table td {
border: 1px solid #e9e9e9;
padding: 8px 16px;
text-align: left;
}
.markdown>table th {
background: #F7F7F7;
}
.markdown blockquote {
font-size: 90%;
color: #999;
border-left: 4px solid #e9e9e9;
padding-left: 0.8em;
margin: 1em 0;
}
.markdown blockquote p {
margin: 0;
}
.markdown .anchor {
opacity: 0;
transition: opacity 0.3s ease;
margin-left: 8px;
}
.markdown .waiting {
color: #ccc;
}
.markdown h1:hover .anchor,
.markdown h2:hover .anchor,
.markdown h3:hover .anchor,
.markdown h4:hover .anchor,
.markdown h5:hover .anchor,
.markdown h6:hover .anchor {
opacity: 1;
display: inline-block;
}
.markdown>br,
.markdown>p>br {
clear: both;
}
.hljs {
display: block;
background: white;
padding: 0.5em;
color: #333333;
overflow-x: auto;
}
.hljs-comment,
.hljs-meta {
color: #969896;
}
.hljs-string,
.hljs-variable,
.hljs-template-variable,
.hljs-strong,
.hljs-emphasis,
.hljs-quote {
color: #df5000;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-type {
color: #a71d5d;
}
.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-attribute {
color: #0086b3;
}
.hljs-section,
.hljs-name {
color: #63a35c;
}
.hljs-tag {
color: #333333;
}
.hljs-title,
.hljs-attr,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #795da3;
}
.hljs-addition {
color: #55a532;
background-color: #eaffea;
}
.hljs-deletion {
color: #bd2c00;
background-color: #ffecec;
}
.hljs-link {
text-decoration: underline;
}
/* 代码高亮 */
/* PrismJS 1.15.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre)>code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre)>code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function,
.token.class-name {
color: #DD4A68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
src/assets/font/complete/demo_index.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>iconfont Demo</title>
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
<script src="iconfont.js"></script>
<!-- jQuery -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
<!-- 代码高亮 -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
<style>
.main .logo {
margin-top: 0;
height: auto;
}
.main .logo a {
display: flex;
align-items: center;
}
.main .logo .sub-title {
margin-left: 0.5em;
font-size: 22px;
color: #fff;
background: linear-gradient(-45deg, #3967FF, #B500FE);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<div class="main">
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
</a></h1>
<div class="nav-tabs">
<ul id="tabs" class="dib-box">
<li class="dib active"><span>Unicode</span></li>
<li class="dib"><span>Font class</span></li>
<li class="dib"><span>Symbol</span></li>
</ul>
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3111099" target="_blank" class="nav-more">查看项目</a>
</div>
<div class="tab-container">
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe6bc;</span>
<div class="name">质控图</div>
<div class="code-name">&amp;#xe6bc;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61e;</span>
<div class="name">规则管理-01</div>
<div class="code-name">&amp;#xe61e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6e6;</span>
<div class="name">审核状态</div>
<div class="code-name">&amp;#xe6e6;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6e7;</span>
<div class="name">间接费用字典</div>
<div class="code-name">&amp;#xe6e7;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6bb;</span>
<div class="name">加入组织</div>
<div class="code-name">&amp;#xe6bb;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6cf;</span>
<div class="name">导入</div>
<div class="code-name">&amp;#xe6cf;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe620;</span>
<div class="name">入院</div>
<div class="code-name">&amp;#xe620;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe641;</span>
<div class="name">个人盈亏</div>
<div class="code-name">&amp;#xe641;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe623;</span>
<div class="name">团队报表_盈亏报表</div>
<div class="code-name">&amp;#xe623;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe609;</span>
<div class="name">盈亏笔记</div>
<div class="code-name">&amp;#xe609;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe672;</span>
<div class="name">费用</div>
<div class="code-name">&amp;#xe672;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe601;</span>
<div class="name">质控</div>
<div class="code-name">&amp;#xe601;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe643;</span>
<div class="name">图标_护理医嘱_护理医嘱</div>
<div class="code-name">&amp;#xe643;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe614;</span>
<div class="name">调度规则</div>
<div class="code-name">&amp;#xe614;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe699;</span>
<div class="name">条码</div>
<div class="code-name">&amp;#xe699;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe606;</span>
<div class="name">钱钱-01</div>
<div class="code-name">&amp;#xe606;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe613;</span>
<div class="name">剪刀svg</div>
<div class="code-name">&amp;#xe613;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xeb86;</span>
<div class="name">搜索_o</div>
<div class="code-name">&amp;#xeb86;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe65d;</span>
<div class="name">导入</div>
<div class="code-name">&amp;#xe65d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe607;</span>
<div class="name">ipr_提交</div>
<div class="code-name">&amp;#xe607;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe7a9;</span>
<div class="name">听诊器</div>
<div class="code-name">&amp;#xe7a9;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe65e;</span>
<div class="name">体检组合</div>
<div class="code-name">&amp;#xe65e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6fd;</span>
<div class="name">医院</div>
<div class="code-name">&amp;#xe6fd;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6f7;</span>
<div class="name">可视化平台icon_评分</div>
<div class="code-name">&amp;#xe6f7;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe611;</span>
<div class="name">清华-人员管理off</div>
<div class="code-name">&amp;#xe611;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe629;</span>
<div class="name">出入院流程</div>
<div class="code-name">&amp;#xe629;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe858;</span>
<div class="name">医生团队</div>
<div class="code-name">&amp;#xe858;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60d;</span>
<div class="name">医生</div>
<div class="code-name">&amp;#xe60d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe67e;</span>
<div class="name">科室</div>
<div class="code-name">&amp;#xe67e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe610;</span>
<div class="name">食源性疾病监测</div>
<div class="code-name">&amp;#xe610;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe68b;</span>
<div class="name">年度</div>
<div class="code-name">&amp;#xe68b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6b2;</span>
<div class="name">医生</div>
<div class="code-name">&amp;#xe6b2;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe624;</span>
<div class="name">预测</div>
<div class="code-name">&amp;#xe624;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe668;</span>
<div class="name">分析</div>
<div class="code-name">&amp;#xe668;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe604;</span>
<div class="name">预算控制</div>
<div class="code-name">&amp;#xe604;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe648;</span>
<div class="name">分析</div>
<div class="code-name">&amp;#xe648;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe603;</span>
<div class="name">医生</div>
<div class="code-name">&amp;#xe603;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe652;</span>
<div class="name">手术订单</div>
<div class="code-name">&amp;#xe652;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe794;</span>
<div class="name">预算</div>
<div class="code-name">&amp;#xe794;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe666;</span>
<div class="name">账号管理</div>
<div class="code-name">&amp;#xe666;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe645;</span>
<div class="name">疾病管理</div>
<div class="code-name">&amp;#xe645;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60a;</span>
<div class="name">科室库存管理</div>
<div class="code-name">&amp;#xe60a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe64c;</span>
<div class="name">分析</div>
<div class="code-name">&amp;#xe64c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6fa;</span>
<div class="name">医生</div>
<div class="code-name">&amp;#xe6fa;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe703;</span>
<div class="name">科室工作量</div>
<div class="code-name">&amp;#xe703;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe67c;</span>
<div class="name">全科医疗科</div>
<div class="code-name">&amp;#xe67c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62d;</span>
<div class="name">账号管理</div>
<div class="code-name">&amp;#xe62d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe733;</span>
<div class="name">软著预测</div>
<div class="code-name">&amp;#xe733;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe77b;</span>
<div class="name">科室统计1</div>
<div class="code-name">&amp;#xe77b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61d;</span>
<div class="name">预算</div>
<div class="code-name">&amp;#xe61d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6bd;</span>
<div class="name">科室</div>
<div class="code-name">&amp;#xe6bd;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe618;</span>
<div class="name">02 TPM_预算科目</div>
<div class="code-name">&amp;#xe618;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62e;</span>
<div class="name">全科学</div>
<div class="code-name">&amp;#xe62e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xed13;</span>
<div class="name">疾病</div>
<div class="code-name">&amp;#xed13;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61c;</span>
<div class="name">导出</div>
<div class="code-name">&amp;#xe61c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe600;</span>
<div class="name">新人指南</div>
<div class="code-name">&amp;#xe600;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe8bf;</span>
<div class="name">银行卡</div>
<div class="code-name">&amp;#xe8bf;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe8af;</span>
<div class="name">付费管理</div>
<div class="code-name">&amp;#xe8af;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe898;</span>
<div class="name">22资料、手册-线性</div>
<div class="code-name">&amp;#xe898;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe605;</span>
<div class="name">箭头 三角形</div>
<div class="code-name">&amp;#xe605;</div>
</li>
</ul>
<div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2>
<hr>
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
<ul>
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
</ul>
<blockquote>
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
</blockquote>
<p>Unicode 使用步骤如下：</p>
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1648635086881') format('woff2'),
url('iconfont.woff?t=1648635086881') format('woff'),
url('iconfont.ttf?t=1648635086881') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-zhkt"></span>
<div class="name">
质控图
</div>
<div class="code-name">.icon-zhkt
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-guizeguanli-"></span>
<div class="name">
规则管理-01
</div>
<div class="code-name">.icon-guizeguanli-
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shenhezhuangtai"></span>
<div class="name">
审核状态
</div>
<div class="code-name">.icon-shenhezhuangtai
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jianjiefeiyonzidian"></span>
<div class="name">
间接费用字典
</div>
<div class="code-name">.icon-jianjiefeiyonzidian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jiaruzuzhi"></span>
<div class="name">
加入组织
</div>
<div class="code-name">.icon-jiaruzuzhi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-daoru1"></span>
<div class="name">
导入
</div>
<div class="code-name">.icon-daoru1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-ruyuan"></span>
<div class="name">
入院
</div>
<div class="code-name">.icon-ruyuan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-gerenyingkui"></span>
<div class="name">
个人盈亏
</div>
<div class="code-name">.icon-gerenyingkui
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tuanduibaobiao_yingkuibaobiao"></span>
<div class="name">
团队报表_盈亏报表
</div>
<div class="code-name">.icon-tuanduibaobiao_yingkuibaobiao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yingkuibiji"></span>
<div class="name">
盈亏笔记
</div>
<div class="code-name">.icon-yingkuibiji
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-feiyong"></span>
<div class="name">
费用
</div>
<div class="code-name">.icon-feiyong
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zhikong"></span>
<div class="name">
质控
</div>
<div class="code-name">.icon-zhikong
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tubiao_huliyizhu_huliyizhu"></span>
<div class="name">
图标_护理医嘱_护理医嘱
</div>
<div class="code-name">.icon-tubiao_huliyizhu_huliyizhu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-bianzu_70"></span>
<div class="name">
调度规则
</div>
<div class="code-name">.icon-bianzu_70
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-iconset0254"></span>
<div class="name">
条码
</div>
<div class="code-name">.icon-iconset0254
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-qianqian-"></span>
<div class="name">
钱钱-01
</div>
<div class="code-name">.icon-qianqian-
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jiandaosvg"></span>
<div class="name">
剪刀svg
</div>
<div class="code-name">.icon-jiandaosvg
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-sousuo_o"></span>
<div class="name">
搜索_o
</div>
<div class="code-name">.icon-sousuo_o
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-daoru"></span>
<div class="name">
导入
</div>
<div class="code-name">.icon-daoru
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-ipr_tijiao"></span>
<div class="name">
ipr_提交
</div>
<div class="code-name">.icon-ipr_tijiao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tingzhenqi"></span>
<div class="name">
听诊器
</div>
<div class="code-name">.icon-tingzhenqi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tijianzuhe"></span>
<div class="name">
体检组合
</div>
<div class="code-name">.icon-tijianzuhe
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-ico_yiyuanguanjia_banliruyuan"></span>
<div class="name">
医院
</div>
<div class="code-name">.icon-ico_yiyuanguanjia_banliruyuan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-keshihuapingtaiicon_pingfen"></span>
<div class="name">
可视化平台icon_评分
</div>
<div class="code-name">.icon-keshihuapingtaiicon_pingfen
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fenzu"></span>
<div class="name">
清华-人员管理off
</div>
<div class="code-name">.icon-fenzu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-chuyuandaiyao"></span>
<div class="name">
出入院流程
</div>
<div class="code-name">.icon-chuyuandaiyao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yishengtuandui"></span>
<div class="name">
医生团队
</div>
<div class="code-name">.icon-yishengtuandui
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yisheng"></span>
<div class="name">
医生
</div>
<div class="code-name">.icon-yisheng
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-keshi"></span>
<div class="name">
科室
</div>
<div class="code-name">.icon-keshi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shiyuanxingjibingjiance"></span>
<div class="name">
食源性疾病监测
</div>
<div class="code-name">.icon-shiyuanxingjibingjiance
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-niandu"></span>
<div class="name">
年度
</div>
<div class="code-name">.icon-niandu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yisheng1"></span>
<div class="name">
医生
</div>
<div class="code-name">.icon-yisheng1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yuce"></span>
<div class="name">
预测
</div>
<div class="code-name">.icon-yuce
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fenxi"></span>
<div class="name">
分析
</div>
<div class="code-name">.icon-fenxi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-icon-test"></span>
<div class="name">
预算控制
</div>
<div class="code-name">.icon-icon-test
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fenxi1"></span>
<div class="name">
分析
</div>
<div class="code-name">.icon-fenxi1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yisheng666"></span>
<div class="name">
医生
</div>
<div class="code-name">.icon-yisheng666
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shoushudingdan"></span>
<div class="name">
手术订单
</div>
<div class="code-name">.icon-shoushudingdan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yusuan"></span>
<div class="name">
预算
</div>
<div class="code-name">.icon-yusuan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zhanghaoguanli"></span>
<div class="name">
账号管理
</div>
<div class="code-name">.icon-zhanghaoguanli
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jibingguanli"></span>
<div class="name">
疾病管理
</div>
<div class="code-name">.icon-jibingguanli
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-keshikucunguanli"></span>
<div class="name">
科室库存管理
</div>
<div class="code-name">.icon-keshikucunguanli
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fenxi2"></span>
<div class="name">
分析
</div>
<div class="code-name">.icon-fenxi2
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yisheng2"></span>
<div class="name">
医生
</div>
<div class="code-name">.icon-yisheng2
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-keshigongzuoliang"></span>
<div class="name">
科室工作量
</div>
<div class="code-name">.icon-keshigongzuoliang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-quankeyiliaoke"></span>
<div class="name">
全科医疗科
</div>
<div class="code-name">.icon-quankeyiliaoke
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zhanghaoguanli1"></span>
<div class="name">
账号管理
</div>
<div class="code-name">.icon-zhanghaoguanli1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-ruanzhuyuce"></span>
<div class="name">
软著预测
</div>
<div class="code-name">.icon-ruanzhuyuce
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-keshitongji1"></span>
<div class="name">
科室统计1
</div>
<div class="code-name">.icon-keshitongji1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yusuan1"></span>
<div class="name">
预算
</div>
<div class="code-name">.icon-yusuan1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-keshi2"></span>
<div class="name">
科室
</div>
<div class="code-name">.icon-keshi2
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-02TPM_yusuankemu"></span>
<div class="name">
02 TPM_预算科目
</div>
<div class="code-name">.icon-02TPM_yusuankemu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-quankexue"></span>
<div class="name">
全科学
</div>
<div class="code-name">.icon-quankexue
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jibing"></span>
<div class="name">
疾病
</div>
<div class="code-name">.icon-jibing
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-daochu"></span>
<div class="name">
导出
</div>
<div class="code-name">.icon-daochu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xinrenzhinan"></span>
<div class="name">
新人指南
</div>
<div class="code-name">.icon-xinrenzhinan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yinhangka"></span>
<div class="name">
银行卡
</div>
<div class="code-name">.icon-yinhangka
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fufeiguanli"></span>
<div class="name">
付费管理
</div>
<div class="code-name">.icon-fufeiguanli
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-ziliaoshouce-xianxing"></span>
<div class="name">
22资料、手册-线性
</div>
<div class="code-name">.icon-ziliaoshouce-xianxing
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jiantou1"></span>
<div class="name">
箭头 三角形
</div>
<div class="code-name">.icon-jiantou1
</div>
</li>
</ul>
<div class="article markdown">
<h2 id="font-class-">font-class 引用</h2>
<hr>
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
<p>与 Unicode 使用方式相比，具有如下特点：</p>
<ul>
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
</ul>
<p>使用步骤如下：</p>
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zhkt"></use>
</svg>
<div class="name">质控图</div>
<div class="code-name">#icon-zhkt</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-guizeguanli-"></use>
</svg>
<div class="name">规则管理-01</div>
<div class="code-name">#icon-guizeguanli-</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shenhezhuangtai"></use>
</svg>
<div class="name">审核状态</div>
<div class="code-name">#icon-shenhezhuangtai</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jianjiefeiyonzidian"></use>
</svg>
<div class="name">间接费用字典</div>
<div class="code-name">#icon-jianjiefeiyonzidian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jiaruzuzhi"></use>
</svg>
<div class="name">加入组织</div>
<div class="code-name">#icon-jiaruzuzhi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-daoru1"></use>
</svg>
<div class="name">导入</div>
<div class="code-name">#icon-daoru1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-ruyuan"></use>
</svg>
<div class="name">入院</div>
<div class="code-name">#icon-ruyuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-gerenyingkui"></use>
</svg>
<div class="name">个人盈亏</div>
<div class="code-name">#icon-gerenyingkui</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tuanduibaobiao_yingkuibaobiao"></use>
</svg>
<div class="name">团队报表_盈亏报表</div>
<div class="code-name">#icon-tuanduibaobiao_yingkuibaobiao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yingkuibiji"></use>
</svg>
<div class="name">盈亏笔记</div>
<div class="code-name">#icon-yingkuibiji</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-feiyong"></use>
</svg>
<div class="name">费用</div>
<div class="code-name">#icon-feiyong</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zhikong"></use>
</svg>
<div class="name">质控</div>
<div class="code-name">#icon-zhikong</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tubiao_huliyizhu_huliyizhu"></use>
</svg>
<div class="name">图标_护理医嘱_护理医嘱</div>
<div class="code-name">#icon-tubiao_huliyizhu_huliyizhu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-bianzu_70"></use>
</svg>
<div class="name">调度规则</div>
<div class="code-name">#icon-bianzu_70</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-iconset0254"></use>
</svg>
<div class="name">条码</div>
<div class="code-name">#icon-iconset0254</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-qianqian-"></use>
</svg>
<div class="name">钱钱-01</div>
<div class="code-name">#icon-qianqian-</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jiandaosvg"></use>
</svg>
<div class="name">剪刀svg</div>
<div class="code-name">#icon-jiandaosvg</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-sousuo_o"></use>
</svg>
<div class="name">搜索_o</div>
<div class="code-name">#icon-sousuo_o</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-daoru"></use>
</svg>
<div class="name">导入</div>
<div class="code-name">#icon-daoru</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-ipr_tijiao"></use>
</svg>
<div class="name">ipr_提交</div>
<div class="code-name">#icon-ipr_tijiao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tingzhenqi"></use>
</svg>
<div class="name">听诊器</div>
<div class="code-name">#icon-tingzhenqi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tijianzuhe"></use>
</svg>
<div class="name">体检组合</div>
<div class="code-name">#icon-tijianzuhe</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-ico_yiyuanguanjia_banliruyuan"></use>
</svg>
<div class="name">医院</div>
<div class="code-name">#icon-ico_yiyuanguanjia_banliruyuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-keshihuapingtaiicon_pingfen"></use>
</svg>
<div class="name">可视化平台icon_评分</div>
<div class="code-name">#icon-keshihuapingtaiicon_pingfen</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fenzu"></use>
</svg>
<div class="name">清华-人员管理off</div>
<div class="code-name">#icon-fenzu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-chuyuandaiyao"></use>
</svg>
<div class="name">出入院流程</div>
<div class="code-name">#icon-chuyuandaiyao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yishengtuandui"></use>
</svg>
<div class="name">医生团队</div>
<div class="code-name">#icon-yishengtuandui</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yisheng"></use>
</svg>
<div class="name">医生</div>
<div class="code-name">#icon-yisheng</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-keshi"></use>
</svg>
<div class="name">科室</div>
<div class="code-name">#icon-keshi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shiyuanxingjibingjiance"></use>
</svg>
<div class="name">食源性疾病监测</div>
<div class="code-name">#icon-shiyuanxingjibingjiance</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-niandu"></use>
</svg>
<div class="name">年度</div>
<div class="code-name">#icon-niandu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yisheng1"></use>
</svg>
<div class="name">医生</div>
<div class="code-name">#icon-yisheng1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yuce"></use>
</svg>
<div class="name">预测</div>
<div class="code-name">#icon-yuce</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fenxi"></use>
</svg>
<div class="name">分析</div>
<div class="code-name">#icon-fenxi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-icon-test"></use>
</svg>
<div class="name">预算控制</div>
<div class="code-name">#icon-icon-test</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fenxi1"></use>
</svg>
<div class="name">分析</div>
<div class="code-name">#icon-fenxi1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yisheng666"></use>
</svg>
<div class="name">医生</div>
<div class="code-name">#icon-yisheng666</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shoushudingdan"></use>
</svg>
<div class="name">手术订单</div>
<div class="code-name">#icon-shoushudingdan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yusuan"></use>
</svg>
<div class="name">预算</div>
<div class="code-name">#icon-yusuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zhanghaoguanli"></use>
</svg>
<div class="name">账号管理</div>
<div class="code-name">#icon-zhanghaoguanli</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jibingguanli"></use>
</svg>
<div class="name">疾病管理</div>
<div class="code-name">#icon-jibingguanli</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-keshikucunguanli"></use>
</svg>
<div class="name">科室库存管理</div>
<div class="code-name">#icon-keshikucunguanli</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fenxi2"></use>
</svg>
<div class="name">分析</div>
<div class="code-name">#icon-fenxi2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yisheng2"></use>
</svg>
<div class="name">医生</div>
<div class="code-name">#icon-yisheng2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-keshigongzuoliang"></use>
</svg>
<div class="name">科室工作量</div>
<div class="code-name">#icon-keshigongzuoliang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-quankeyiliaoke"></use>
</svg>
<div class="name">全科医疗科</div>
<div class="code-name">#icon-quankeyiliaoke</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zhanghaoguanli1"></use>
</svg>
<div class="name">账号管理</div>
<div class="code-name">#icon-zhanghaoguanli1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-ruanzhuyuce"></use>
</svg>
<div class="name">软著预测</div>
<div class="code-name">#icon-ruanzhuyuce</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-keshitongji1"></use>
</svg>
<div class="name">科室统计1</div>
<div class="code-name">#icon-keshitongji1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yusuan1"></use>
</svg>
<div class="name">预算</div>
<div class="code-name">#icon-yusuan1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-keshi2"></use>
</svg>
<div class="name">科室</div>
<div class="code-name">#icon-keshi2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-02TPM_yusuankemu"></use>
</svg>
<div class="name">02 TPM_预算科目</div>
<div class="code-name">#icon-02TPM_yusuankemu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-quankexue"></use>
</svg>
<div class="name">全科学</div>
<div class="code-name">#icon-quankexue</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jibing"></use>
</svg>
<div class="name">疾病</div>
<div class="code-name">#icon-jibing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-daochu"></use>
</svg>
<div class="name">导出</div>
<div class="code-name">#icon-daochu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xinrenzhinan"></use>
</svg>
<div class="name">新人指南</div>
<div class="code-name">#icon-xinrenzhinan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yinhangka"></use>
</svg>
<div class="name">银行卡</div>
<div class="code-name">#icon-yinhangka</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fufeiguanli"></use>
</svg>
<div class="name">付费管理</div>
<div class="code-name">#icon-fufeiguanli</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-ziliaoshouce-xianxing"></use>
</svg>
<div class="name">22资料、手册-线性</div>
<div class="code-name">#icon-ziliaoshouce-xianxing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jiantou1"></use>
</svg>
<div class="name">箭头 三角形</div>
<div class="code-name">#icon-jiantou1</div>
</li>
</ul>
<div class="article markdown">
<h2 id="symbol-">Symbol 引用</h2>
<hr>
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
<ul>
<li>支持多色图标了，不再受单色限制。</li>
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
<li>兼容性较差，支持 IE9+，及现代浏览器。</li>
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
</ul>
<p>使用步骤如下：</p>
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
&lt;/style&gt;
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
&lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('.tab-container .content:first').show()
$('#tabs li').click(function (e) {
var tabContent = $('.tab-container .content')
var index = $(this).index()
if ($(this).hasClass('active')) {
return
} else {
$('#tabs li').removeClass('active')
$(this).addClass('active')
tabContent.hide().eq(index).fadeIn()
}
})
})
</script>
</body>
</html>
src/assets/font/complete/iconfont.css 0 → 100644
@font-face {
font-family: "iconfont"; /* Project id 3111099 */
src: url('iconfont.woff2?t=1648635086881') format('woff2'),
url('iconfont.woff?t=1648635086881') format('woff'),
url('iconfont.ttf?t=1648635086881') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-zhkt:before {
content: "\e6bc";
}
.icon-guizeguanli-:before {
content: "\e61e";
}
.icon-shenhezhuangtai:before {
content: "\e6e6";
}
.icon-jianjiefeiyonzidian:before {
content: "\e6e7";
}
.icon-jiaruzuzhi:before {
content: "\e6bb";
}
.icon-daoru1:before {
content: "\e6cf";
}
.icon-ruyuan:before {
content: "\e620";
}
.icon-gerenyingkui:before {
content: "\e641";
}
.icon-tuanduibaobiao_yingkuibaobiao:before {
content: "\e623";
}
.icon-yingkuibiji:before {
content: "\e609";
}
.icon-feiyong:before {
content: "\e672";
}
.icon-zhikong:before {
content: "\e601";
}
.icon-tubiao_huliyizhu_huliyizhu:before {
content: "\e643";
}
.icon-bianzu_70:before {
content: "\e614";
}
.icon-iconset0254:before {
content: "\e699";
}
.icon-qianqian-:before {
content: "\e606";
}
.icon-jiandaosvg:before {
content: "\e613";
}
.icon-sousuo_o:before {
content: "\eb86";
}
.icon-daoru:before {
content: "\e65d";
}
.icon-ipr_tijiao:before {
content: "\e607";
}
.icon-tingzhenqi:before {
content: "\e7a9";
}
.icon-tijianzuhe:before {
content: "\e65e";
}
.icon-ico_yiyuanguanjia_banliruyuan:before {
content: "\e6fd";
}
.icon-keshihuapingtaiicon_pingfen:before {
content: "\e6f7";
}
.icon-fenzu:before {
content: "\e611";
}
.icon-chuyuandaiyao:before {
content: "\e629";
}
.icon-yishengtuandui:before {
content: "\e858";
}
.icon-yisheng:before {
content: "\e60d";
}
.icon-keshi:before {
content: "\e67e";
}
.icon-shiyuanxingjibingjiance:before {
content: "\e610";
}
.icon-niandu:before {
content: "\e68b";
}
.icon-yisheng1:before {
content: "\e6b2";
}
.icon-yuce:before {
content: "\e624";
}
.icon-fenxi:before {
content: "\e668";
}
.icon-icon-test:before {
content: "\e604";
}
.icon-fenxi1:before {
content: "\e648";
}
.icon-yisheng666:before {
content: "\e603";
}
.icon-shoushudingdan:before {
content: "\e652";
}
.icon-yusuan:before {
content: "\e794";
}
.icon-zhanghaoguanli:before {
content: "\e666";
}
.icon-jibingguanli:before {
content: "\e645";
}
.icon-keshikucunguanli:before {
content: "\e60a";
}
.icon-fenxi2:before {
content: "\e64c";
}
.icon-yisheng2:before {
content: "\e6fa";
}
.icon-keshigongzuoliang:before {
content: "\e703";
}
.icon-quankeyiliaoke:before {
content: "\e67c";
}
.icon-zhanghaoguanli1:before {
content: "\e62d";
}
.icon-ruanzhuyuce:before {
content: "\e733";
}
.icon-keshitongji1:before {
content: "\e77b";
}
.icon-yusuan1:before {
content: "\e61d";
}
.icon-keshi2:before {
content: "\e6bd";
}
.icon-02TPM_yusuankemu:before {
content: "\e618";
}
.icon-quankexue:before {
content: "\e62e";
}
.icon-jibing:before {
content: "\ed13";
}
.icon-daochu:before {
content: "\e61c";
}
.icon-xinrenzhinan:before {
content: "\e600";
}
.icon-yinhangka:before {
content: "\e8bf";
}
.icon-fufeiguanli:before {
content: "\e8af";
}
.icon-ziliaoshouce-xianxing:before {
content: "\e898";
}
.icon-jiantou1:before {
content: "\e605";
}
src/assets/font/complete/iconfont.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/assets/font/complete/iconfont.json 0 → 100644
{
"id": "3111099",
"name": "完整图标",
"font_family": "iconfont",
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "2710435",
"name": "质控图",
"font_class": "zhkt",
"unicode": "e6bc",
"unicode_decimal": 59068
},
{
"icon_id": "10416492",
"name": "规则管理-01",
"font_class": "guizeguanli-",
"unicode": "e61e",
"unicode_decimal": 58910
},
{
"icon_id": "18707757",
"name": "审核状态",
"font_class": "shenhezhuangtai",
"unicode": "e6e6",
"unicode_decimal": 59110
},
{
"icon_id": "645498",
"name": "间接费用字典",
"font_class": "jianjiefeiyonzidian",
"unicode": "e6e7",
"unicode_decimal": 59111
},
{
"icon_id": "8304933",
"name": "加入组织",
"font_class": "jiaruzuzhi",
"unicode": "e6bb",
"unicode_decimal": 59067
},
{
"icon_id": "8319348",
"name": "导入",
"font_class": "daoru1",
"unicode": "e6cf",
"unicode_decimal": 59087
},
{
"icon_id": "8841391",
"name": "入院",
"font_class": "ruyuan",
"unicode": "e620",
"unicode_decimal": 58912
},
{
"icon_id": "9001914",
"name": "个人盈亏",
"font_class": "gerenyingkui",
"unicode": "e641",
"unicode_decimal": 58945
},
{
"icon_id": "9792482",
"name": "团队报表_盈亏报表",
"font_class": "tuanduibaobiao_yingkuibaobiao",
"unicode": "e623",
"unicode_decimal": 58915
},
{
"icon_id": "10660311",
"name": "盈亏笔记",
"font_class": "yingkuibiji",
"unicode": "e609",
"unicode_decimal": 58889
},
{
"icon_id": "12129938",
"name": "费用",
"font_class": "feiyong",
"unicode": "e672",
"unicode_decimal": 58994
},
{
"icon_id": "12794224",
"name": "质控",
"font_class": "zhikong",
"unicode": "e601",
"unicode_decimal": 58881
},
{
"icon_id": "14112156",
"name": "图标_护理医嘱_护理医嘱",
"font_class": "tubiao_huliyizhu_huliyizhu",
"unicode": "e643",
"unicode_decimal": 58947
},
{
"icon_id": "23775528",
"name": "调度规则",
"font_class": "bianzu_70",
"unicode": "e614",
"unicode_decimal": 58900
},
{
"icon_id": "554262",
"name": "条码",
"font_class": "iconset0254",
"unicode": "e699",
"unicode_decimal": 59033
},
{
"icon_id": "3791134",
"name": "钱钱-01",
"font_class": "qianqian-",
"unicode": "e606",
"unicode_decimal": 58886
},
{
"icon_id": "5202088",
"name": "剪刀svg",
"font_class": "jiandaosvg",
"unicode": "e613",
"unicode_decimal": 58899
},
{
"icon_id": "5387900",
"name": "搜索_o",
"font_class": "sousuo_o",
"unicode": "eb86",
"unicode_decimal": 60294
},
{
"icon_id": "10194316",
"name": "导入",
"font_class": "daoru",
"unicode": "e65d",
"unicode_decimal": 58973
},
{
"icon_id": "11542429",
"name": "ipr_提交",
"font_class": "ipr_tijiao",
"unicode": "e607",
"unicode_decimal": 58887
},
{
"icon_id": "18211336",
"name": "听诊器",
"font_class": "tingzhenqi",
"unicode": "e7a9",
"unicode_decimal": 59305
},
{
"icon_id": "3892814",
"name": "体检组合",
"font_class": "tijianzuhe",
"unicode": "e65e",
"unicode_decimal": 58974
},
{
"icon_id": "10056222",
"name": "医院",
"font_class": "ico_yiyuanguanjia_banliruyuan",
"unicode": "e6fd",
"unicode_decimal": 59133
},
{
"icon_id": "11529546",
"name": "可视化平台icon_评分",
"font_class": "keshihuapingtaiicon_pingfen",
"unicode": "e6f7",
"unicode_decimal": 59127
},
{
"icon_id": "16135377",
"name": "清华-人员管理off",
"font_class": "fenzu",
"unicode": "e611",
"unicode_decimal": 58897
},
{
"icon_id": "16900329",
"name": "出入院流程",
"font_class": "chuyuandaiyao",
"unicode": "e629",
"unicode_decimal": 58921
},
{
"icon_id": "8288899",
"name": "医生团队",
"font_class": "yishengtuandui",
"unicode": "e858",
"unicode_decimal": 59480
},
{
"icon_id": "3370262",
"name": "医生",
"font_class": "yisheng",
"unicode": "e60d",
"unicode_decimal": 58893
},
{
"icon_id": "4450270",
"name": "科室",
"font_class": "keshi",
"unicode": "e67e",
"unicode_decimal": 59006
},
{
"icon_id": "7435060",
"name": "食源性疾病监测",
"font_class": "shiyuanxingjibingjiance",
"unicode": "e610",
"unicode_decimal": 58896
},
{
"icon_id": "17188854",
"name": "年度",
"font_class": "niandu",
"unicode": "e68b",
"unicode_decimal": 59019
},
{
"icon_id": "827988",
"name": "医生",
"font_class": "yisheng1",
"unicode": "e6b2",
"unicode_decimal": 59058
},
{
"icon_id": "1037699",
"name": "预测",
"font_class": "yuce",
"unicode": "e624",
"unicode_decimal": 58916
},
{
"icon_id": "1881568",
"name": "分析",
"font_class": "fenxi",
"unicode": "e668",
"unicode_decimal": 58984
},
{
"icon_id": "1915206",
"name": "预算控制",
"font_class": "icon-test",
"unicode": "e604",
"unicode_decimal": 58884
},
{
"icon_id": "3762527",
"name": "分析",
"font_class": "fenxi1",
"unicode": "e648",
"unicode_decimal": 58952
},
{
"icon_id": "4919907",
"name": "医生",
"font_class": "yisheng666",
"unicode": "e603",
"unicode_decimal": 58883
},
{
"icon_id": "5190649",
"name": "手术订单",
"font_class": "shoushudingdan",
"unicode": "e652",
"unicode_decimal": 58962
},
{
"icon_id": "5484259",
"name": "预算",
"font_class": "yusuan",
"unicode": "e794",
"unicode_decimal": 59284
},
{
"icon_id": "6455673",
"name": "账号管理",
"font_class": "zhanghaoguanli",
"unicode": "e666",
"unicode_decimal": 58982
},
{
"icon_id": "6602265",
"name": "疾病管理",
"font_class": "jibingguanli",
"unicode": "e645",
"unicode_decimal": 58949
},
{
"icon_id": "7414003",
"name": "科室库存管理",
"font_class": "keshikucunguanli",
"unicode": "e60a",
"unicode_decimal": 58890
},
{
"icon_id": "9589363",
"name": "分析",
"font_class": "fenxi2",
"unicode": "e64c",
"unicode_decimal": 58956
},
{
"icon_id": "10056219",
"name": "医生",
"font_class": "yisheng2",
"unicode": "e6fa",
"unicode_decimal": 59130
},
{
"icon_id": "10056237",
"name": "科室工作量",
"font_class": "keshigongzuoliang",
"unicode": "e703",
"unicode_decimal": 59139
},
{
"icon_id": "11043288",
"name": "全科医疗科",
"font_class": "quankeyiliaoke",
"unicode": "e67c",
"unicode_decimal": 59004
},
{
"icon_id": "11882440",
"name": "账号管理",
"font_class": "zhanghaoguanli1",
"unicode": "e62d",
"unicode_decimal": 58925
},
{
"icon_id": "14656283",
"name": "软著预测",
"font_class": "ruanzhuyuce",
"unicode": "e733",
"unicode_decimal": 59187
},
{
"icon_id": "15668854",
"name": "科室统计1",
"font_class": "keshitongji1",
"unicode": "e77b",
"unicode_decimal": 59259
},
{
"icon_id": "18683483",
"name": "预算",
"font_class": "yusuan1",
"unicode": "e61d",
"unicode_decimal": 58909
},
{
"icon_id": "18916459",
"name": "科室",
"font_class": "keshi2",
"unicode": "e6bd",
"unicode_decimal": 59069
},
{
"icon_id": "19135003",
"name": "02 TPM_预算科目",
"font_class": "02TPM_yusuankemu",
"unicode": "e618",
"unicode_decimal": 58904
},
{
"icon_id": "22952624",
"name": "全科学",
"font_class": "quankexue",
"unicode": "e62e",
"unicode_decimal": 58926
},
{
"icon_id": "24737003",
"name": "疾病",
"font_class": "jibing",
"unicode": "ed13",
"unicode_decimal": 60691
},
{
"icon_id": "2667525",
"name": "导出",
"font_class": "daochu",
"unicode": "e61c",
"unicode_decimal": 58908
},
{
"icon_id": "249355",
"name": "新人指南",
"font_class": "xinrenzhinan",
"unicode": "e600",
"unicode_decimal": 58880
},
{
"icon_id": "11372727",
"name": "银行卡",
"font_class": "yinhangka",
"unicode": "e8bf",
"unicode_decimal": 59583
},
{
"icon_id": "20314574",
"name": "付费管理",
"font_class": "fufeiguanli",
"unicode": "e8af",
"unicode_decimal": 59567
},
{
"icon_id": "1727356",
"name": "22资料、手册-线性",
"font_class": "ziliaoshouce-xianxing",
"unicode": "e898",
"unicode_decimal": 59544
},
{
"icon_id": "1110403",
"name": "箭头 三角形",
"font_class": "jiantou1",
"unicode": "e605",
"unicode_decimal": 58885
}
]
}
src/assets/font/iconfont.css 0 → 100644
@font-face {
font-family: 'PingFang SC';
src: url('./pingfangzhunjian.ttf')
}
\ No newline at end of file
src/components/medicalRecordHomepage/data.js 0 → 100644
/*
* @Author: ninglupeng
* @Date: 2022-06-07 09:50:19
* @LastEditors: ninglupeng
* @LastEditTime: 2022-06-07 09:50:49
* @Description:
*/
export const Nativeplace = {
'01': '北京市',
'02': '天津市',
'03': '河北省',
'04': '山西省',
'05': '内蒙古',
'06': '辽宁省',
'07': '吉林省',
'08': '黑龙江省',
'09': '上海市',
10: '江苏省',
11: '浙江省',
12: '安徽省',
13: '福建省',
14: '江西省',
15: '山东省',
16: '河南省',
17: '湖北省',
18: '湖南省',
19: '广东省',
20: '广西省',
21: '海南省',
22: '四川省',
23: '重庆市',
24: '贵州省',
25: '云南省',
26: '西藏',
27: '陕西省',
28: '甘肃省',
29: '青海省',
30: '宁夏',
31: '新疆',
32: '台湾',
33: '香港特,别行政区',
34: '澳门',
35: '外籍',
'——': '——',
};
export const sex = {
0: '未知的性别',
1: '男',
2: '女',
9: '未说明的性别',
'——': '——',
};
src/components/medicalRecordHomepage/index.scss 0 → 100644
@import "../../styles/mixin.scss";
@media screen and (min-width: 769px) and (max-width: 1365px) {
#medicalRecord {
font-size: 12px !important;
.pageindex {
padding: 20px 0px !important;
}
.el-row {
margin-bottom: 15px !important;
&:last-child {
margin-bottom: 0;
}
}
.homePageTitle {
font-size: 25px;
font-weight: bold;
}
.key {
font-size: 12px !important;
}
.value {
font-size: 12px !important;
}
}
}
@media screen and (min-width: 1366px) and(max-width:1440px) {
#medicalRecord {
font-size: 12px !important;
.pageindex {
padding: 20px 0px !important;
}
.el-row {
margin-bottom: 15px !important;
&:last-child {
margin-bottom: 0;
}
}
.homePageTitle {
font-size: 25px;
font-weight: bold;
}
.key {
font-size: 12px !important;
}
.value {
font-size: 12px !important;
}
}
}
\ No newline at end of file
src/components/medicalRecordHomepage/index.vue 0 → 100644
<template>
<div id="medicalRecord">
<div class="pageindex">
<el-row justify="center">
<el-col :span="24">
<div class="homePageTitle">住院病案首页</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24" class="juStart">
<span class="key a46C"> 医疗付费方式:{{ changeValue('a46C') }} </span>
</el-col>
</el-row>
<el-row style="border-bottom: 1px solid #000">
<el-col :span="6">
<el-row>
<el-col :span="12"><span class="key a47"> 健康卡号: </span></el-col>
<el-col :span="12"><span>{{ changeValue('a47') }}</span>
</el-col>
</el-row>
</el-col>
<el-col :span="6">
<el-row>
<el-col :span="8"><span class="key a49"> 第 </span></el-col>
<el-col :span="8"><span> {{ changeValue('a49') }} </span></el-col>
<el-col :span="8"><span class="key"> 次入院 </span></el-col>
</el-row>
</el-col>
<el-col :span="6">
<el-row>
<el-col :span="12"><span class="key a48"> 病案号: </span></el-col>
<el-col :span="12"><span> {{ changeValue('a48') }} </span></el-col>
</el-row>
</el-col>
<el-col :span="6">
<el-row>
<el-col :span="8"><span class="key"> 共</span></el-col>
<el-col :span="8"><span> {{ changeValue('') }} </span></el-col>
<el-col :span="8"><span class="key"> 页 </span></el-col>
</el-row>
</el-col>
</el-row>
<el-row>
<el-col :xl="3" :lg="3" :md="4">
<el-row>
<el-col :span="12"><span class="key a11"> 姓名 </span></el-col>
<el-col :span="12"><span class="values"> {{ changeValue('a11') }} </span></el-col>
</el-row>
</el-col>
<el-col :xl="3" :lg="3" :md="3">
<el-row>
<el-col :span="12"><span class="key a12C"> 性别 </span></el-col>
<el-col :span="12"><span class="values"> {{ changeValue('a12C') }} </span></el-col>
</el-row>
</el-col>
<el-col :xl="10" :lg="10" :md="9">
<el-row>
<el-col :span="7"><span class="key a13">出生日期 </span></el-col>
<el-col :span="17"><span class="values"> {{ changeValue('a13') != '——' ?
transformTime(changeValue('a13')) : changeValue('a13')
}}</span></el-col>
</el-row>
</el-col>
<el-col :xl="4" :lg="4" :md="4">
<el-row>
<el-col :span="12"><span class="key a14">年龄 </span></el-col>
<el-col :span="12"><span class="values">{{ changeValue('a14') }} </span></el-col>
</el-row>
</el-col>
<el-col :xl="4" :lg="4" :md="4">
<el-row>
<el-col :span="12"><span class="key a15C">国籍 </span></el-col>
<el-col :span="12"><span class="values">{{ changeValue('a15C') }} </span></el-col>
</el-row>
</el-col>
</el-row>
<el-row>
<el-col :span="9">
<el-row>
<el-col :span="12" :md="15"><span class="value" style="border: none">(年龄不满一周岁的)</span></el-col>
<el-col :span="4" :md="4"><span class="key a16">年龄</span></el-col>
<el-col :span="6" :md="3">
<span class="values"> {{ changeValue('a16') }} </span>
</el-col>
<el-col :span="2"><span class="value" style="border: none">月</span></el-col>
</el-row>
</el-col>
<el-col :span="7">
<el-row>
<el-col :span="15"><span class="key a18x01">新生儿出生体重</span></el-col>
<el-col :span="6"><span class="values"> {{ changeValue('a18x01') }} </span></el-col>
<el-col :span="3"><span class="value" style="border: none">克 </span></el-col>
</el-row>
</el-col>
<el-col :span="8">
<el-row>
<el-col :span="14"><span class="key a17">新生儿入院体重</span></el-col>
<el-col :span="6"><span class="values"> {{ changeValue('a17') }} </span></el-col>
<el-col :span="4"><span class="value" style="border: none">克 </span></el-col>
</el-row>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-row>
<el-col :span="5"><span class="key a22">出生地</span></el-col>
<el-col :span="19"><span class="values">{{ changeValue('a22') }}</span></el-col>
</el-row>
</el-col>
<el-col :span="9">
<el-row>
<el-col :span="4"><span class="key a23C">籍贯</span></el-col>
<el-col :span="20"><span class="values">{{ changeValue('a23C') }}</span></el-col>
</el-row>
</el-col>
<el-col :span="5">
<el-row>
<el-col :span="12"><span class="key a19C">民族</span></el-col>
<el-col :span="12"><span class="values">{{ changeValue('a19C') }}</span></el-col>
</el-row>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-row>
<el-col :span="5"><span class="key a20">身份证号</span></el-col>
<el-col :span="19"><span class="values">{{ changeValue('a20') }}</span></el-col>
</el-row>
</el-col>
<el-col :span="6">
<el-row>
<el-col :span="8"><span class="key a38C">职业</span></el-col>
<el-col :span="16"><span class="values">{{ changeValue('a38C') }}</span></el-col>
</el-row>
</el-col>
<el-col :span="6">
<el-row>
<el-col :span="8"><span class="key a21C">婚姻</span></el-col>
<el-col :span="16"><span class="values">{{ changeValue('a21C') }}</span></el-col>
</el-row>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-row>
<el-col :span="4"><span class="key a26">现住址</span></el-col>
<el-col :span="20"><span class="values">{{ changeValue('a26') }}</span></el-col>
</el-row>
</el-col>
<el-col :span="6">
<el-row>
<el-col :span="8"><span class="key a27">电话</span></el-col>
<el-col :span="16"><span class="values">{{ changeValue('a27') }}</span></el-col>
</el-row>
</el-col>
<el-col :span="6">
<el-row>
<el-col :span="8"><span class="key a28C">邮编</span></el-col>
<el-col :span="16"><span class="values">{{ changeValue('a28C') }}</span></el-col>
</el-row>
</el-col>
</el-row>
<el-row>
<el-col :span="15">
<el-row>
<el-col :span="4"><span class="key a24">户口地址</span></el-col>
<el-col :span="20"><span class="values">{{ changeValue('a24') }}</span></el-col>
</el-row>
</el-col>
<el-col :span="6">
<el-row>
<el-col :span="12"><span class="key a25C">邮编</span></el-col>
<el-col :span="12"><span class="values">{{ changeValue('a25C') }}</span></el-col>
</el-row>
</el-col>
</el-row>
<el-row>
<el-col :xl="13" :lg="13" :md="15">
<el-row justify="left">
<el-col :span="7"><span class="key a29">工作单位及地址</span></el-col>
<el-col :span="16"><span class="values">{{ changeValue('a29') }}</span></el-col>
</el-row>
</el-col>
<el-col :span="5">
<el-row>
<el-col :span="12"><span class="key a30">单位电话</span></el-col>
<el-col :span="12"><span class="values">{{ changeValue('a30') }}</span></el-col>
</el-row>
</el-col>
<el-col :span="4">
<el-row>
<el-col :span="12"><span class="key a31C">邮编</span></el-col>
<el-col :span="12"><span class="values">{{ changeValue('a31C') }}</span></el-col>
</el-row>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-row>
<el-col :span="12"><span class="key a32">联系人姓名</span></el-col>
<el-col :span="12"><span class="values">{{ changeValue('a32') }}</span></el-col>
</el-row>
</el-col>
<el-col :span="5">
<el-row>
<el-col :span="8"><span class="key a33C">关系</span></el-col>
<el-col :span="16"><span class="values">{{ changeValue('a33C') }}</span></el-col>
</el-row>
</el-col>
<el-col :span="7">
<el-row>
<el-col :span="6"><span class="key a34">地址</span></el-col>
<el-col :span="18"><span class="values">{{ changeValue('a34') }}</span></el-col>
</el-row>
</el-col>
<el-col :span="5">
<el-row>
<el-col :span="8"><span class="key a35">电话</span></el-col>
<el-col :span="16"><span class="values">{{ changeValue('a35') }}</span></el-col>
</el-row>
</el-col>
</el-row>
<el-row justify="start">
<el-col :span="3">
<span class="key b11C">入院途径</span>
</el-col>
<el-col :span="4">
<span class="values">{{ changeValue('b11C') }}</span>
</el-col>
</el-row>
<el-row>
<el-col :xl="7" :lg="7" :md="10">
<el-row>
<el-col :span="8"><span class="key b12">入院时间 </span></el-col>
<el-col :span="16"><span class="values">{{ changeValue('b12') != '——' ?
transformTime(changeValue('b12')) : changeValue('b12')
}}</span></el-col>
</el-row>
</el-col>
<el-col :xl="5" :lg="5" :md="7">
<el-row>
<el-col :span="10"><span class="key b13C">入院科别 </span></el-col>
<el-col :span="14"><span class="values">{{ changeValue('b13C') }}</span></el-col>
</el-row>
</el-col>
<el-col :xl="5" :lg="5" :md="5">
<el-row>
<el-col :span="8"><span class="key b14">病房 </span></el-col>
<el-col :span="16"><span class="values">{{ changeValue('b14') }}</span></el-col>
</el-row>
</el-col>
<el-col :xl="5" :lg="5" :md="5">
<el-row>
<el-col :span="12"><span class="key b21C">转科科别 </span></el-col>
<el-col :span="12"><span class="values">{{ changeValue('b21C') }}</span></el-col>
</el-row>
</el-col>
</el-row>
<el-row>
<el-col :xl="7" :lg="7" :md="10">
<el-row>
<el-col :span="8"><span class="key b15">出院时间 </span></el-col>
<el-col :span="16"><span class="values">{{ changeValue('b15') != '——' ?
transformTime(changeValue('b15')) : changeValue('b15')
}}</span></el-col>
</el-row>
</el-col>
<el-col :xl="5" :lg="5" :md="7">
<el-row>
<el-col :span="12"><span class="key b16C">出院科别 </span></el-col>
<el-col :span="12"><span class="values">{{ changeValue('b16C') }}</span></el-col>
</el-row>
</el-col>
<el-col :xl="5" :lg="5" :md="5">
<el-row>
<el-col :span="8"><span class="key b17">病房 </span></el-col>
<el-col :span="16"><span class="values">{{ changeValue('b17') }}</span></el-col>
</el-row>
</el-col>
<el-col :xl="5" :lg="5" :md="5">
<el-row>
<el-col :span="12"><span class="key b20">实际住院 </span></el-col>
<el-col :span="8"><span class="values">{{ changeValue('b20') }}</span></el-col>
<el-col :span="4"><span class="key">天 </span></el-col>
</el-row>
</el-col>
</el-row>
<el-row>
<el-col :span="13">
<el-row>
<el-col :span="7"><span class="key c02N">门（急）诊诊断</span></el-col>
<el-col :span="17"><span class="values">{{ changeValue('c02N') }}</span></el-col>
</el-row>
</el-col>
<el-col :span="6">
<el-row>
<el-col :span="12"><span class="key c01C">疾病编码</span></el-col>
<el-col :span="12"><span class="values">{{ changeValue('c01C') }}</span></el-col>
</el-row>
</el-col>
</el-row>
<el-row>
<el-col :span="9">
<el-row>
<el-col :span="12"><span class="key c03C">出院主要诊断编码</span></el-col>
<el-col :span="12"><span class="values">{{ changeValue('c03C') }}</span></el-col>
</el-row>
</el-col>
<el-col :span="10">
<el-row>
<el-col :span="10"><span class="key c04N">出院主要诊断名称</span></el-col>
<el-col :span="14"><span class="values">{{ changeValue('c04N') }}</span></el-col>
</el-row>
</el-col>
</el-row>
<el-row>
<el-table :data="diagnosis" border :header-cell-class-name="diagnosisclass">
<el-table-column prop="diaG_NAME" label="出院诊断"></el-table-column>
<el-table-column prop="diaG_CODE" label="疾病编码"></el-table-column>
<el-table-column prop="diaG_ORDERNAME" label="诊断类型"> </el-table-column>
<el-table-column prop="diaG_ILLNESS" label="入院详情"></el-table-column>
</el-table>
</el-row>
<el-row>
<el-col :span="3"><span class="key c05C">入院病情</span></el-col>
<el-col :span="20"><span class="values">{{ changeValue('c05C') }}</span></el-col>
</el-row>
<el-row>
<el-col :span="18">
<el-row>
<el-col :span="8"><span class="key c13N">损伤、中毒的外部原因</span></el-col>
<el-col :span="16"><span class="values">{{ changeValue('c13N') }}</span></el-col>
</el-row>
</el-col>
<el-col :span="6">
<el-row>
<el-col :span="12"><span class="key c12C">疾病编码</span></el-col>
<el-col :span="12"><span class="values">{{ changeValue('c12C') }}</span></el-col>
</el-row>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-row>
<el-col :span="5"><span class="key c10N">病理诊断:</span></el-col>
<el-col :span="17"><span class="values">{{ changeValue('c10N') }}</span></el-col>
</el-row>
</el-col>
<el-col :span="6">
<el-row>
<el-col :span="10"><span class="key c09C">疾病编码</span></el-col>
<el-col :span="14"><span class="values">{{ changeValue('c09C') }}</span></el-col>
</el-row>
</el-col>
<el-col :span="6">
<el-row>
<el-col :span="8"><span class="key c11">病理号</span></el-col>
<el-col :span="16"><span class="values">{{ changeValue('c11') }}</span></el-col>
</el-row>
</el-col>
</el-row>
<el-row>
<el-col :span="18">
<el-row>
<el-col :span="3"><span class="key c24C">药物过敏</span></el-col>
<el-col :span="4"><span class="values">{{ changeValue('c24C') }}</span></el-col>
<el-col :span="4"><span class="value c25" style="border: none">过敏药物</span></el-col>
<el-col :span="11"><span class="values">{{ changeValue('c25') }}</span></el-col>
</el-row>
</el-col>
<el-col :span="6">
<el-row>
<el-col :span="16"><span class="key c34C">死亡患者尸检</span></el-col>
<el-col :span="8"><span class="values">{{ changeValue('c34C') }}</span></el-col>
</el-row>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-row>
<el-col :span="5"><span class="key c26C">血型</span></el-col>
<el-col :span="10"><span class="values">{{ changeValue('c26C') }}</span></el-col>
</el-row>
</el-col>
<el-col :span="8">
<el-row>
<el-col :span="4"><span class="key c27C">RH</span></el-col>
<el-col :span="12"><span class="values">{{ changeValue('c27C') }}</span></el-col>
</el-row>
</el-col>
</el-row>
<el-row>
<el-col :span="5">
<el-row>
<el-col :span="10"><span class="key b22">科主任</span></el-col>
<el-col :span="14"><span class="values">{{ changeValue('b22') }}</span></el-col>
</el-row>
</el-col>
<el-col :span="7">
<el-row>
<el-col :span="16"><span class="key b23">主任(副主任)医师</span></el-col>
<el-col :span="8"><span class="values">{{ changeValue('b23') }}</span></el-col>
</el-row>
</el-col>
<el-col :span="6">
<el-row>
<el-col :span="10"><span class="key b24">主治医师</span></el-col>
<el-col :span="12"><span class="values">{{ changeValue('b24') }}</span></el-col>
</el-row>
</el-col>
<el-col :span="6">
<el-row>
<el-col :span="10"><span class="key b25">住院医师</span></el-col>
<el-col :span="12"><span class="values">{{ changeValue('b25') }}</span></el-col>
</el-row>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-row>
<el-col :span="8"><span class="key b22C">科主任编码</span></el-col>
<el-col :span="14"><span class="values">{{ changeValue('b22C') }}</span></el-col>
</el-row>
</el-col>
<el-col :span="12">
<el-row>
<el-col :span="10"><span class="key b23C">主任(副主任)医师编码</span></el-col>
<el-col :span="14"><span class="values">{{ changeValue('b23C') }}</span></el-col>
</el-row>
</el-col>
</el-row>
<el-row>
<el-col :span="11">
<el-row>
<el-col :span="8"><span class="key b24C">主治医师编码</span></el-col>
<el-col :span="14"><span class="values">{{ changeValue('b24C') }}</span></el-col>
</el-row>
</el-col>
<el-col :span="12">
<el-row>
<el-col :span="9"><span class="key b25C">住院医师编码</span></el-col>
<el-col :span="14"><span class="values">{{ changeValue('b25C') }}</span></el-col>
</el-row>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-row>
<el-col :span="10"><span class="key b28">实习医师</span></el-col>
<el-col :span="12"><span class="values">{{ changeValue('b28') }}</span></el-col>
</el-row>
</el-col>
<el-col :span="6">
<el-row>
<el-col :span="10"><span class="key b27">进修医师</span></el-col>
<el-col :span="14"><span class="values">{{ changeValue('b27') }}</span></el-col>
</el-row>
</el-col>
<el-col :span="6">
<el-row>
<el-col :span="10"><span class="key b26">责任护士</span></el-col>
<el-col :span="14"><span class="values">{{ changeValue('b26') }}</span></el-col>
</el-row>
</el-col>
<el-col :span="6">
<el-row>
<el-col :span="12"><span class="key b26C">责任护士编码</span></el-col>
<el-col :span="12"><span class="values">{{ changeValue('b26C') }}</span></el-col>
</el-row>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-row>
<el-col :span="8"><span class="key b29">编码员</span></el-col>
<el-col :span="12"><span class="values">{{ changeValue('b29') }}</span></el-col>
</el-row>
</el-col>
<el-col :span="6">
<el-row>
<el-col :span="8"><span class="key b30C">病案质量</span></el-col>
<el-col :span="14"><span class="values">{{ changeValue('b30C') }}</span></el-col>
</el-row>
</el-col>
<el-col :span="6">
<el-row>
<el-col :span="10"><span class="key b31">质控医师</span></el-col>
<el-col :span="14"><span class="values">{{ changeValue('b31') }}</span></el-col>
</el-row>
</el-col>
<el-col :span="6">
<el-row>
<el-col :span="8"><span class="key b32">质控护士</span></el-col>
<el-col :span="16"><span class="values">{{ changeValue('b32') }}</span></el-col>
</el-row>
</el-col>
</el-row>
<el-row>
<el-col :span="3"><span class="key b33">质控日期</span></el-col>
<el-col :span="15"><span class="values">{{ changeValue('b33') != '——' ?
transformTime(changeValue('b33')) : changeValue('b33')
}}</span></el-col>
</el-row>
</div>
<div class="pageindex" style="margin-top: 50px">
<el-row>
<el-table :data="ops" border :header-cell-class-name="headerRowStyle">
<el-table-column prop="opS_CODE" label="手术及操作编码"></el-table-column>
<el-table-column prop="opS_TIME" label="手术及操作日期">
<template #default="scope">
{{ scope.row.opS_TIME ? transformTime(scope.row.opS_TIME) : '' }}
</template>
</el-table-column>
<el-table-column prop="opS_LEVEL" label="手术级别"></el-table-column>
<el-table-column prop="opS_NAME" label="手术及操作名称"></el-table-column>
<el-table-column label="手术及操作医师">
<el-table-column prop="opS_DR" label="术者"></el-table-column>
<el-table-column prop="opS_DR1" label="Ⅰ助"></el-table-column>
<el-table-column prop="opS_DR2" label="Ⅱ助"></el-table-column>
</el-table-column>
<el-table-column prop="opS_HEAL" label="切口愈合等级"></el-table-column>
<el-table-column prop="opS_ANA" label="麻醉方式"></el-table-column>
<el-table-column prop="opS_ANATYPE" label="麻醉医师"></el-table-column>
</el-table>
</el-row>
<el-row>
<el-col :xl="3" :lg="3" :md="3"> <span class="key b34C"> 离院方式: </span></el-col>
<el-col :xl="3" :lg="3" :md="3">
<span class="value"> {{ changeValue('b34C') }} </span>
</el-col>
<el-col :xl="9" :lg="10" :md="12"><span class="value noBottomBoder b35">1.医嘱离院 2.医嘱转院，拟接收医疗机构名称： </span>
</el-col>
<el-col :xl="8" :lg="8" :md="6"><span class="value"> {{ changeValue('b35') }}</span></el-col>
</el-row>
<el-row>
<el-col :xl="12" :lg="13" :md="16"><span
class="value noBottomBoder b35">3.医嘱转社区卫生服务机构/乡镇卫生院，拟接收医疗机构名称：</span></el-col>
<el-col :xl="4" :lg="4" :md="8"><span class="value"> {{ changeValue('b35') }}</span></el-col>
<el-col :xl="5" :lg="6" :md="7"><span class="value noBottomBoder">4.非医嘱离院5.死亡9.其他</span></el-col>
</el-row>
<hr />
<el-row>
<el-col :xl="6" :lg="6" :md="8"><span class="value noBottomBoder b36C">是否有出院31天内再住院计划</span></el-col>
<el-col :xl="2" :lg="2" :md="2"><span class="value"> {{ changeValue('b36C') }}</span></el-col>
<el-col :xl="2" :lg="2" :md="2"><span class="value noBottomBoder b37">目的:</span></el-col>
<el-col :xl="11" :lg="11" :md="11"><span class="value"> {{ changeValue('b37') }}</span></el-col>
</el-row>
<hr />
<el-row justify="start">
<el-col :xl="6" :lg="7" :md="8">
<span class="value noBottomBoder c28 c29 c30"> 颅脑损伤患者昏迷时间：入院前</span>
</el-col>
<el-col :xl="1" :lg="1" :md="2">
<span class="value"> {{ changeValue('c28') }}</span>
</el-col>
<el-col :xl="1" :lg="1" :md="2"> 天 </el-col>
<el-col :xl="1" :lg="1" :md="2">
<span class="value"> {{ changeValue('c29') }}</span>
</el-col>
<el-col :xl="1" :lg="1" :md="2">小时</el-col>
<el-col :xl="1" :lg="1" :md="2">
<span class="value"> {{ changeValue('c30') }}</span>
</el-col>
<el-col :xl="1" :lg="1" :md="2">分钟</el-col>
<el-col :xl="2" :lg="2" :md="2">
<span class="value noBottomBoder c31 c32 c33">入院后</span>
</el-col>
<el-col :xl="1" :lg="1" :md="2">
<span class="value"> {{ changeValue('c31') }}</span>
</el-col>
<el-col :xl="1" :lg="1" :md="2"> 天 </el-col>
<el-col :xl="1" :lg="1" :md="2">
<span class="value"> {{ changeValue('c32') }}</span>
</el-col>
<el-col :xl="1" :lg="1" :md="2">小时</el-col>
<el-col :xl="1" :lg="1" :md="2">
<span class="value"> {{ changeValue('c33') }}</span>
</el-col>
<el-col :xl="1" :lg="1" :md="2">分钟</el-col>
</el-row>
<hr />
<el-row>
<el-col :xl="6" :lg="6" :md="7">
<span class="key d01">住院费用（元）：总费用</span>
</el-col>
<el-col :span="6">
<span class="value">{{ decimal(changeValue('d01')) }}</span>
</el-col>
<el-col :span="3">
<span class="value noBottomBoder d09">(自付金额:</span>
</el-col>
<el-col :span="3">
<span class="value">{{ decimal(changeValue('d09')) }}</span>
</el-col>
<el-col :span="1">
<span class="value noBottomBoder">)</span>
</el-col>
</el-row>
<el-row>
<el-col :span="5">
<span class="key">1.综合医疗服务类：</span>
</el-col>
<el-col :xl="4" :lg="4" :md="5">
<span class="value noBottomBoder d11">(1)一般医疗服务费:</span>
</el-col>
<el-col :xl="3" :lg="3" :md="3">
<span class="value">{{ decimal(changeValue('d11')) }}</span>
</el-col>
<el-col :xl="4" :lg="4" :md="5">
<span class="value noBottomBoder d12">(2)一般治疗操作费:</span>
</el-col>
<el-col :span="3">
<span class="value">{{ decimal(changeValue('d12')) }}</span>
</el-col>
</el-row>
<el-row>
<el-col :span="3">
<span class="value noBottomBoder d13">(3)护理费:</span>
</el-col>
<el-col :span="3">
<span class="value">{{ decimal(changeValue('d13')) }}</span>
</el-col>
<el-col :xl="3" :lg="3" :md="4">
<span class="value noBottomBoder d14">(4)其他费用:</span>
</el-col>
<el-col :span="3">
<span class="value">{{ decimal(changeValue('d14')) }}</span>
</el-col>
</el-row>
<el-row>
<el-col :span="3">
<span class="key">2.诊断类:</span>
</el-col>
<el-col :xl="3" :lg="3" :md="4">
<span class="value noBottomBoder d15">(5)病理诊断费:</span>
</el-col>
<el-col :span="3">
<span class="value">{{ decimal(changeValue('d15')) }}</span>
</el-col>
<el-col :xl="4" :lg="4" :md="5">
<span class="value noBottomBoder d16">(6)实验室诊断费:</span>
</el-col>
<el-col :span="3">
<span class="value">{{ decimal(changeValue('d16')) }}</span>
</el-col>
</el-row>
<el-row>
<el-col :xl="4" :lg="4" :md="5">
<span class="value noBottomBoder d17">(7)影像学诊断费:</span>
</el-col>
<el-col :span="3">
<span class="value">{{ decimal(changeValue('d17')) }}</span>
</el-col>
<el-col :xl="4" :lg="4" :md="5">
<span class="value noBottomBoder d18">(8)临床诊断项目费:</span>
</el-col>
<el-col :span="3">
<span class="value">{{ decimal(changeValue('d18')) }}</span>
</el-col>
</el-row>
<el-row>
<el-col :span="3">
<span class="key">3.治疗类:</span>
</el-col>
<el-col :xl="4" :lg="5" :md="6">
<span class="value noBottomBoder d19">(9)非手术治疗项目费:</span>
</el-col>
<el-col :span="3">
<span class="value">{{ decimal(changeValue('d19')) }}</span>
</el-col>
<el-col :xl="4" :lg="4" :md="5">
<span class="value noBottomBoder d19x01">(临床物理治疗费:</span>
</el-col>
<el-col :span="3">
<span class="value">{{ decimal(changeValue('d19x01')) }}</span>
</el-col>
<el-col :span="1">
<span class="value noBottomBoder">)</span>
</el-col>
</el-row>
<el-row>
<el-col :span="4">
<span class="value noBottomBoder d20">(9)手术治疗费:</span>
</el-col>
<el-col :span="3">
<span class="value">{{ decimal(changeValue('d20')) }}</span>
</el-col>
<el-col :xl="2" :lg="2" :md="3">
<span class="value noBottomBoder d20x01">(麻醉费:</span>
</el-col>
<el-col :span="2">
<span class="value">{{ decimal(changeValue('d20x01')) }}</span>
</el-col>
<el-col :span="2">
<span class="value noBottomBoder">手术费:</span>
</el-col>
<el-col :span="2">
<span class="value">{{ decimal(changeValue('4')) }}</span>
</el-col>
<el-col :span="1">
<span class="value noBottomBoder">)</span>
</el-col>
</el-row>
<el-row>
<el-col :span="3">
<span class="key">4.康复类:</span>
</el-col>
<el-col :span="3">
<span class="value noBottomBoder d21">(11)康复费:</span>
</el-col>
<el-col :span="4">
<span class="value">{{ decimal(changeValue('d21')) }}</span>
</el-col>
</el-row>
<el-row>
<el-col :span="3">
<span class="key">5.中医类:</span>
</el-col>
<el-col :xl="4" :lg="4" :md="5">
<span class="value noBottomBoder d22">(12)中医治疗费:</span>
</el-col>
<el-col :span="4">
<span class="value">{{ decimal(changeValue('d22')) }}</span>
</el-col>
</el-row>
<el-row>
<el-col :span="3">
<span class="key">6.西药类:</span>
</el-col>
<el-col :span="3">
<span class="value noBottomBoder d23">(13)西药费:</span>
</el-col>
<el-col :span="3">
<span class="value">{{ decimal(changeValue('d23')) }}</span>
</el-col>
<el-col :span="4">
<span class="value noBottomBoder d23x01">(抗菌药物费用:</span>
</el-col>
<el-col :span="3">
<span class="value">{{ decimal(changeValue('d23x01')) }}</span>
</el-col>
<el-col :span="1">
<span class="value noBottomBoder">)</span>
</el-col>
</el-row>
<el-row>
<el-col :span="3">
<span class="key">7.中药类:</span>
</el-col>
<el-col :xl="3" :lg="3" :md="4">
<span class="value noBottomBoder d24">(14)中成药费:</span>
</el-col>
<el-col :span="3">
<span class="value">{{ decimal(changeValue('d24')) }}</span>
</el-col>
<el-col :xl="3" :lg="3" :md="4">
<span class="value noBottomBoder d25">(15)中草药费:</span>
</el-col>
<el-col :span="3">
<span class="value">{{ decimal(changeValue('d25')) }}</span>
</el-col>
</el-row>
<el-row>
<el-col :xl="5" :lg="5" :md="6">
<span class="key">8.血液和血液制品类：</span>
</el-col>
<el-col :xl="2" :lg="2" :md="3">
<span class="value noBottomBoder d26">(16)血费:</span>
</el-col>
<el-col :span="3">
<span class="value">{{ decimal(changeValue('d26')) }}</span>
</el-col>
<el-col :xl="4" :lg="4" :md="6">
<span class="value noBottomBoder d27">(17)白蛋白类制品费:</span>
</el-col>
<el-col :span="3">
<span class="value">{{ decimal(changeValue('d27')) }}</span>
</el-col>
<el-col :xl="4" :lg="4" :md="6">
<span class="value noBottomBoder d28">(18)球蛋白类制品费:</span>
</el-col>
<el-col :span="3">
<span class="value">{{ decimal(changeValue('d28')) }}</span>
</el-col>
</el-row>
<el-row>
<el-col :xl="5" :lg="5" :md="6">
<span class="value noBottomBoder d29">(19)凝血因子类制品费:</span>
</el-col>
<el-col :span="3">
<span class="value">{{ decimal(changeValue('d29')) }}</span>
</el-col>
<el-col :xl="5" :lg="5" :md="6">
<span class="value noBottomBoder d30">(20)细胞因子类制品费:</span>
</el-col>
<el-col :span="3">
<span class="value">{{ decimal(changeValue('d30')) }}</span>
</el-col>
</el-row>
<el-row>
<el-col :xl="2" :lg="2" :md="3">
<span class="key">9.耗材类</span>
</el-col>
<el-col :xl="6" :lg="6" :md="8">
<span class="value noBottomBoder d31">(21)检查用一次性医用材料费:</span>
</el-col>
<el-col :span="3">
<span class="value">{{ decimal(changeValue('d31')) }}</span>
</el-col>
<el-col :xl="6" :lg="6" :md="8">
<span class="value noBottomBoder d32">(22)治疗用一次性医用材料费:</span>
</el-col>
<el-col :span="3">
<span class="value">{{ decimal(changeValue('d32')) }}</span>
</el-col>
</el-row>
<el-row>
<el-col :xl="5" :lg="6" :md="7">
<span class="value noBottomBoder d33">(23)术用一次性医用材料费:</span>
</el-col>
<el-col :span="3">
<span class="value">{{ decimal(changeValue('d33')) }}</span>
</el-col>
</el-row>
<el-row>
<el-col :span="3">
<span class="key">10.其他类:</span>
</el-col>
<el-col :span="3">
<span class="value noBottomBoder d34">(24)其他费:</span>
</el-col>
<el-col :span="4">
<span class="value">{{ decimal(changeValue('d34')) }}</span>
</el-col>
<el-col :span="4">
<span class="value noBottomBoder b38">(25)是否为日间手术:</span>
</el-col>
<el-col :span="4">
<span class="value">{{ changeValue('b38') }}</span>
</el-col>
</el-row>
<hr />
<el-row :gutter="20">
<el-col :span="2">
<span class="key"> 说明: </span>
</el-col>
<el-col :span="22">
<span class="value noBottomBoder" style="text-align: left">（一）医疗付费方式 1.城镇职工基本医疗保险 2.城镇居民基本医疗保险
3.新型农村合作医疗 4.贫困救助 5.商业医疗保险 6.全公费 7.全自费
8.其他社会保险 9.其他（二）凡可由医院信息系统提供住院费用清单的，住院病案首页中可不填写"住院费用"。
</span>
</el-col>
</el-row>
</div>
</div>
</template>
<script >
import { reactive, toRefs, computed, onMounted, nextTick } from '@vue/composition-api';
import { transformTimestamp } from '../../utils/formatTime';
import { decimal } from '../../utils/decimal';
export default {
props: {
Object, //弹出层是否显示
clicktitle: String, //点击的文本内容
medicalrecord: Object,
},
setup(props, context) {
const state = reactive({});
const transformTime = computed(() => {
return transformTimestamp;
});
// 添加表头calss
const headerRowStyle = ({ row, column, rowIndex, columnIndex }) => {
if (column.label == '手术及操作编码') {
return 'ops';
}
};
const diagnosisclass = ({ row, column, rowIndex, columnIndex }) => {
if (column.label == '出院诊断') {
return 'diagnosis';
}
};
const diagnosis = computed(() => {
if (props.medicalrecord.diagnosis) {
if (props.medicalrecord.diagnosis.length < 4) {
for (let i = props.medicalrecord.diagnosis.length; i <= 4; i++) {
props.medicalrecord.diagnosis.push({});
}
}
return props.medicalrecord.diagnosis;
}
});
const ops = computed(() => {
if (props.medicalrecord.ops) {
if (props.medicalrecord.ops.length < 4) {
for (let i = props.medicalrecord.ops.length; i <= 4; i++) {
props.medicalrecord.ops.push({});
}
}
return props.medicalrecord.ops;
}
});
function changeValue(str) {
let obj = props.medicalrecord;
if (str && obj) {
return obj[str] ? obj[str] : '——';
} else {
return '——';
}
}
return {
...toRefs(state),
changeValue,
transformTime,
diagnosis,
ops,
decimal,
headerRowStyle,
diagnosisclass,
};
},
};
</script>
<style lang="scss">
// @import './index.scss';
#medicalRecord {
width: 100%;
font-size: 12px !important;
tbody,
thead,
tr,
th,
td {
border-color: #000 !important;
font-family: 'PingFang SC';
color: #000;
}
.el-table--border {
border-color: #000;
border-left: none;
}
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-table::before {
background-color: #000;
}
/* .el-table--border::after */
.homePageTitle {
font-size: 25px;
font-weight: bold;
font-family: 'PingFang SC';
display: flex;
justify-content: center;
}
.juEnd {
display: flex;
justify-content: flex-end;
}
.juStart {
display: flex;
justify-content: flex-start;
}
.juCenter {
display: flex;
justify-content: center;
}
.row {
display: flex;
flex-direction: row;
}
.key {
font-size: 16px;
font-weight: bold;
font-family: 'PingFang SC';
}
.value {
font-size: 14px;
border-bottom: 1px solid #000;
font-family: 'PingFang SC';
display: block;
}
.values {
font-size: 14px;
border-bottom: 1px solid #000;
font-family: 'PingFang SC';
display: block;
}
.noBottomBoder {
border-bottom: none;
}
.pageindex {
padding: 20px 0px;
border: 1px solid #000;
min-height: 800px;
}
}
</style>
src/router/index.js
/*
* @Author: ninglupeng
* @Date: 2022-06-07 00:31:25
* @LastEditors: ninglupeng
* @LastEditTime: 2022-06-07 14:16:26
* @Description:
*/
import Vue from "vue";
import Router from "vue-router";
import store from "@/store";
import { getItem, clear } from "@/utils/auth";
import HelloWorld from "@/views/HelloWorld.vue";
import login from "@/views/login.vue";
import outseeQualityControl from "@/views/outseeQualityControl.vue";
import outpatientDetails from "@/views/outpatientDetails.vue";
import outHistorygrouping from "@/views/outHistorygrouping.vue";
Vue.use(Router);
// const baseUrl = '/his/'
const router = new Router({
routes: [
{
// mode: baseUrl,
routes: [{
path: "*",
component: (resolve) => require(["@/components/404.vue"], resolve),
},
// 查看质控
{
path: "/login",
name: "login",
component: login,
path: "/outseeQualityControl",
name: "outseeQualityControl",
component: outseeQualityControl,
},
// 患者详情
{
path: "/",
name: "home",
component: HelloWorld,
path: "/outpatientDetails",
name: "outpatientDetails",
component: outpatientDetails,
},
// 智能分组
{
path: "/outHistorygrouping",
name: "outHistorygrouping",
component: outHistorygrouping,
}
],
// mode: 'history' /*hash*/ /*不显示路由中的#*/
});
//路由跳转前判断(登录权限)
router.beforeEach((to, from, next) => {
//console.log(to, from, next);
const token = getItem("svToken"); //获取用户id
console.log(token);
if (token) {
//有登录权限
if (to.path == "/login") {
next("/");
} else {
//console.log(to);
next();
}
} else {
//没有登录权限
if (to.path == "/login") {
next();
} else {
//不然就跳转到登录；
next("/login");
}
}
});
// router.beforeEach(async(to, from, next) => {
// const hasToken = getToken()
// if (hasToken) {
// if (to.path === '/login') {
// next({ path: '/' })
// } else {
// const hasGetUserInfo = store.getters.token
// if (hasGetUserInfo) {
// next()
// } else {
// try {
// // get user info
// await store.dispatch('user/getInfo')
// next()
// } catch (error) {
// await store.dispatch('user/resetToken')
// next(`/login?redirect=${encodeURIComponent(to.fullPath)}`)
// }
// }
// }
// } else {
// if (to.matched.some(rocode => rocode.meta.requireAuth)) {
// next(`/login?redirect=${encodeURIComponent(to.fullPath)}`)
// } else {
// next()
// }
// }
// })
export default router;
\ No newline at end of file
src/styles/index.scss
@import "./mixin.scss";
@import "./variables.module.scss";
@import "./sidebar.scss";
// 编写全局样式
body {
height: 100%;
height: 1000%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
Microsoft YaHei, Arial, sans-serif;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
margin: 0;
}
......@@ -23,15 +21,12 @@ html {
}
#app {
height: 100%;
height: 486px;
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
*,
......
src/styles/media/components/outpatientDetails.scss 0 → 100644
@import '../../mixin.scss';
// 1024
@media screen and (min-width: 769px) and (max-width: 1024px) {
.outpatientDetails {
&_top {
.span1 {
font-size: 14px;
}
&_message {
&_left {
.iconfont {
font-size: 18px !important;
}
&_t1 {
font-size: 9px !important;
span {
color: #787e8a;
}
}
}
&_centert {
.iconfont {
font-size: 18px;
}
&_t2 {
font-size: 9px !important;
span {
color: #787e8a;
}
}
}
&_right {
.iconfont {
font-size: 18px !important;
}
&_t3 {
font-size: 9px !important;
text-align: start !important;
span {
color: #787e8a;
}
}
}
}
}
&_msg {
.iconfont {
font-size: 18px !important;
}
span:nth-child(2) {
margin-left: 21px;
}
span:nth-child(n + 2) {
font-size: 9px !important;
}
span:nth-child(n + 7) {
margin-right: 5px;
}
}
&_title {
span {
font-size: 13px;
}
}
&_bottom {
height: 64% !important;
// 无数据
&_box {
&_img {
width: 200px;
height: 200px;
}
&_text {
font-size: 9px !important;
}
}
// 有数据
&_left {
&_ul {
.active {
flex-direction: column !important;
align-items: flex-start !important;
.fc2 {
width: 100% !important;
.iconfont {
font-size: 10px !important;
}
}
.fc3 {
width: 100% !important;
}
}
}
li {
font-size: 9px !important;
height: 65px !important;
div {
font-size: 9px !important;
height: 61px !important;
flex-direction: column !important;
.sp1 {
width: 100% !important;
}
.sp2 {
width: 100% !important;
justify-content: start !important;
&_avg {
justify-content: start !important;
padding-left: 5px !important;
}
&_reto {
display: flex;
flex-direction: row;
align-items: center;
width: 50%;
justify-content: flex-end;
}
}
}
}
}
&_right {
width: 50%;
// 无数据样式
&_box {
&_text {
font-size: 12px !important;
}
}
&_table {
height: calc(100% - 100px);
}
.isverifyStyle {
background-color: #f4f5f8;
}
.paginations {
text-align: right;
}
}
&_rght2 {
&_top {
height: 27% !important;
&_title {
font-size: 12px !important;
}
&_mes {
flex-direction: column !important;
&_span1 {
width: 100% !important;
font-size: 12px !important;
margin-bottom: 5px !important;
}
&_span2 {
width: 100% !important;
font-size: 12px !important;
margin-bottom: 5px !important;
}
&_span3 {
width: 100% !important;
font-size: 12px !important;
margin-bottom: 5px !important;
}
&_span4 {
width: 100% !important;
font-size: 12px !important;
}
}
}
&_bottom {
margin-top: 10px !important;
&_li {
&_title {
width: 54px !important;
height: 25px !important;
font-size: 16px !important;
}
&_cont {
font-size: 12px !important;
}
}
}
}
}
}
}
//1280
@media screen and (max-width:1280px) {
.outpatientDetails {
&_top {
.span1 {
font-size: 14px;
}
&_message {
&_left {
.iconfont {
font-size: 18px !important;
}
&_t1 {
font-size: 9px !important;
span {
color: #787e8a;
}
}
}
&_centert {
.iconfont {
font-size: 18px;
}
&_t2 {
font-size: 9px !important;
span {
color: #787e8a;
}
}
}
&_right {
.iconfont {
font-size: 18px !important;
}
&_t3 {
font-size: 9px !important;
text-align: start !important;
span {
color: #787e8a;
}
}
}
}
}
&_msg {
.iconfont {
font-size: 18px !important;
}
span:nth-child(2) {
margin-left: 21px;
}
span:nth-child(n + 2) {
font-size: 9px !important;
}
span:nth-child(n + 7) {
margin-right: 5px;
}
}
&_title {
span {
font-size: 13px;
}
}
&_bottom {
height: 64% !important;
// 无数据
&_box {
&_img {
width: 200px;
height: 200px;
}
&_text {
font-size: 9px !important;
}
}
// 有数据
&_left {
&_ul {
.active {
flex-direction: column !important;
align-items: flex-start !important;
.fc2 {
width: 100% !important;
.iconfont {
font-size: 10px !important;
}
}
.fc3 {
width: 100% !important;
}
}
}
li {
font-size: 9px !important;
height: 65px !important;
div {
font-size: 9px !important;
height: 61px !important;
flex-direction: column !important;
.sp1 {
width: 100% !important;
}
.sp2 {
width: 100% !important;
justify-content: start !important;
&_avg {
justify-content: start !important;
padding-left: 5px !important;
}
&_reto {
display: flex;
flex-direction: row;
align-items: center;
width: 50%;
justify-content: flex-end;
}
}
}
}
}
&_right {
width: 50%;
// 无数据样式
&_box {
&_text {
font-size: 12px !important;
}
}
&_table {
height: calc(100% - 100px);
}
.isverifyStyle {
background-color: #f4f5f8;
}
.paginations {
text-align: right;
}
}
&_rght2 {
&_top {
height: 27% !important;
&_title {
font-size: 12px !important;
}
&_mes {
flex-direction: column !important;
&_span1 {
width: 100% !important;
font-size: 12px !important;
margin-bottom: 5px !important;
}
&_span2 {
width: 100% !important;
font-size: 12px !important;
margin-bottom: 5px !important;
}
&_span3 {
width: 100% !important;
font-size: 12px !important;
margin-bottom: 5px !important;
}
&_span4 {
width: 100% !important;
font-size: 12px !important;
}
}
}
&_bottom {
margin-top: 10px !important;
&_li {
&_title {
width: 54px !important;
height: 25px !important;
font-size: 16px !important;
}
&_cont {
font-size: 12px !important;
}
}
}
}
}
}
}
// 1366px
@media screen and (min-width: 1366px) and(max-width:1439px) {
.outpatientDetails {
&_top {
.span1 {
font-size: 14px;
}
&_message {
&_left {
.iconfont {
font-size: 18px !important;
}
&_t1 {
font-size: 9px !important;
span {
color: #787e8a;
}
}
}
&_centert {
.iconfont {
font-size: 18px;
}
&_t2 {
font-size: 9px !important;
span {
color: #787e8a;
}
}
}
&_right {
.iconfont {
font-size: 18px !important;
}
&_t3 {
font-size: 9px !important;
text-align: start !important;
span {
color: #787e8a;
}
}
}
}
}
&_msg {
.iconfont {
font-size: 18px !important;
}
span:nth-child(2) {
margin-left: 21px;
}
span:nth-child(n + 2) {
font-size: 9px !important;
}
span:nth-child(n + 7) {
margin-right: 5px;
}
}
&_title {
span {
font-size: 13px;
}
}
&_bottom {
height: 64% !important;
// 无数据
&_box {
&_img {
width: 200px;
height: 200px;
}
&_text {
font-size: 9px !important;
}
}
// 有数据
&_left {
&_ul {
.active {
.fc2 {
.iconfont {
font-size: 10px !important;
}
}
.fc3 {}
}
}
li {
font-size: 9px !important;
div {
font-size: 9px !important;
.sp1 {}
.sp2 {
&_avg {
padding-left: 5px !important;
}
&_reto {
display: flex;
flex-direction: row;
align-items: center;
width: 50%;
justify-content: flex-end;
}
}
}
}
}
&_right {
width: 50%;
// 无数据样式
&_box {
&_text {
font-size: 12px !important;
}
}
&_table {
height: calc(100% - 100px);
}
.isverifyStyle {
background-color: #f4f5f8;
}
.paginations {
text-align: right;
}
}
&_rght2 {
&_top {
&_title {
font-size: 13px !important;
}
&_mes {
&_span1 {
font-size: 12px !important;
}
&_span2 {
font-size: 12px !important;
}
&_span3 {
font-size: 12px !important;
}
&_span4 {
font-size: 12px !important;
}
}
}
&_bottom {
&_li {
&_title {
width: 54px !important;
height: 25px !important;
font-size: 16px !important;
}
&_cont {
font-size: 14px !important;
}
}
}
}
}
}
}
//1400
@media screen and (min-width: 1440px) and(max-width:1599px) {
.outpatientDetails {
&_bottom {
// margin-top: 10px !important;
&_li {
&_title {
width: 54px !important;
height: 25px !important;
font-size: 16px !important;
}
&_cont {
font-size: 16px !important;
}
}
}
}
}
//1600
@media screen and (min-width: 1600px) and(max-width:1919px) {
.outpatientDetails {
&_top {
.span1 {
font-size: 14px;
}
&_message {
&_left {
.iconfont {
font-size: 18px !important;
}
&_t1 {
font-size: 9px !important;
span {
color: #787e8a;
}
}
}
&_centert {
.iconfont {
font-size: 18px;
}
&_t2 {
font-size: 9px !important;
span {
color: #787e8a;
}
}
}
&_right {
.iconfont {
font-size: 18px !important;
}
&_t3 {
font-size: 9px !important;
text-align: start !important;
span {
color: #787e8a;
}
}
}
}
}
&_msg {
.iconfont {
font-size: 18px !important;
}
span:nth-child(2) {
margin-left: 21px;
}
span:nth-child(n + 2) {
font-size: 9px !important;
}
span:nth-child(n + 7) {
margin-right: 5px;
}
}
&_title {
span {
font-size: 13px;
}
}
&_bottom {
height: 64% !important;
// 无数据
&_box {
&_img {
width: 200px;
height: 200px;
}
&_text {
font-size: 9px !important;
}
}
// 有数据
&_left {
&_ul {
.active {
.fc2 {
.iconfont {
font-size: 10px !important;
}
}
}
}
li {
font-size: 9px !important;
div {
font-size: 9px !important;
.sp2 {
&_avg {
padding-left: 5px !important;
}
&_reto {
display: flex;
flex-direction: row;
align-items: center;
width: 50%;
justify-content: flex-end;
}
}
}
}
}
&_right {
width: 50%;
// 无数据样式
&_box {
&_text {
font-size: 12px !important;
}
}
&_table {
height: calc(100% - 100px);
}
.isverifyStyle {
background-color: #f4f5f8;
}
.paginations {
text-align: right;
}
}
&_rght2 {
&_top {
height: 20% !important;
&_title {
height: 24px !important;
font-size: 16px !important;
}
&_mes {
&_span1 {
font-size: 12px !important;
}
&_span2 {
font-size: 12px !important;
}
&_span3 {
font-size: 12px !important;
}
&_span4 {
font-size: 12px !important;
}
}
}
&_bottom {
&_li {
&_title {
font-size: 18px !important;
}
&_cont {
font-size: 16px !important;
}
}
}
}
}
}
}
\ No newline at end of file
src/styles/mixin.scss
......@@ -160,5 +160,6 @@ $Boxwidth:1024;
@return 0;
}
@return math.div($px, $Boxwidth) * 100vw;
// @return math.div($px, $Boxwidth) * 100vw;
@return $px/ $Boxwidth * 100vw;
}
\ No newline at end of file
src/utils/echarts.js
import { nextTick } from 'vue';
import { decimal } from '../utils/decimal.ts';
import { Split } from './split';
import { nextTick } from '@vue/composition-api';
import * as echarts from 'echarts';
import { reduce } from 'lodash';
function fontSize(res) {
let docEl = document.documentElement,
clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if (!clientWidth) return;
let fontSize = 100 * (clientWidth / 1920);
return res * fontSize;
}
/**
* @param echarts初始化
* @param option echarts配置的内容
* @param panelId echarts内容块Id
*/
export function initEcharts(option: any, panelId: string) {
let svChart;
export function initEcharts(option, panelId) {
var svChart;
return nextTick(() => {
svChart = echarts.getInstanceByDom(document.getElementById(panelId));
if (svChart == null) {
svChart = echarts.init(document.getElementById(panelId));
}
document.getElementById(panelId)?.setAttribute('_echarts_instance_', '');
document.getElementById(panelId).setAttribute('_echarts_instance_', '');
svChart.clear();
svChart.setOption(option);
svChart.resize();
......@@ -34,348 +28,19 @@ export function initEcharts(option: any, panelId: string) {
});
return svChart;
});
}
})
//仪表图
export function drawMoveStatistics(num) {
const option = {
series: [
{
type: 'gauge',
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
itemStyle: {
color: '#ff7e00',
},
title: {
show: false,
},
detail: {
show: false,
},
//修改图表位置
center: ['50%', '90%'],
//修改图表大小
radius: '175%',
//外表盘样式
progress: {
show: true,
roundCap: false,
width: 30,
itemStyle: {
color: '#2cabe3',
},
},
//内表盘宽度
axisLine: {
roundCap: false,
lineStyle: {
width: 30,
color: [[1, '#16d0ff']],
},
},
//仪表盘指针
pointer: {
length: '100%',
width: 4, //指针宽度
offsetCenter: ['1%', '-1%'],
},
anchor: {
show: true,
showAbove: true,
size: 9,
itemStyle: {
borderWidth: 9,
borderColor: '#ff7e00',
},
},
//刻度标签
axisTick: {
show: false,
},
//刻度样式
splitLine: {
show: false,
},
//仪表盘轴线
axisLabel: {
show: false,
},
//控制表盘的值
data: [
{
value: num,
},
],
},
],
};
return option;
}
// 病案综合分析柱状图
export function comprebarChart(title: any, tdata: any, tcolor: any) {
const option = {
//提示框组件
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
//提示框样式(直接在tooltip中写)
textStyle: {
fontSize: 10,
},
},
grid: {
left: '2%',
right: '2%',
bottom: '1%',
top: '10%',
containLabel: true,
},
xAxis: [
{
type: 'category',
boundaryGap: true, //设置x轴两边的留白
data: title,
//刻度尺
axisTick: {
show: false, //刻度尺是否显示
alignWithLabel: true, //与标签对齐
},
//线条相关设置
axisLine: {
show: false,
lineStyle: {
color: 'hotpink',
},
},
//网格线
splitLine: {
show: true,
lineStyle: {
type: 'dashed', //设置网格线类型 dotted：虚线 solid:实线
color: '#ededed', //网格线颜色
},
},
//坐标轴刻度标签(刻度值）相关设置
axisLabel: {
show: true, //是否显示刻度值
textStyle: {
//刻度值样式修改
color: '#878787',
fontSize: 12,
},
interval: 0,
rotate: 0, //倾斜的程度
},
},
],
yAxis: [
{
type: 'value',
min: 0,
// min 是最小的值
splitNumber: 5, //刻度间距
//线条相关设置
axisLine: {
show: false,
lineStyle: {
color: '#999',
},
},
//网格线
splitLine: {
show: true,
lineStyle: {
type: 'dashed', //设置网格线类型 dotted：虚线 solid:实线
color: '#ededed', //网格线颜色
},
},
axisLabel: {
show: true, //是否显示刻度值
textStyle: {
//刻度值样式修改
color: '#878787',
fontSize: 12,
},
},
},
],
series: [
{
name: '异常数目',
type: 'bar',
barWidth: 80, //柱子宽度
emphasis: {
//强调(获取焦点时单独显示)
focus: 'series',
},
data: tdata,
label: {
show: true,
color: tcolor,
fontSize: 13,
align: 'center',
position: 'top',
},
},
],
};
return option;
}
// 病案综合分析百分比图
export function aginChart(title1, title2, maxdata: any, rdata: any, cdata: any, wp: any, np: any) {
const option = {
tooltip: {
trigger: 'item',
formatter: (params) => {
const { marker, name, value, componentType } = params;
if (componentType === 'series') {
return `
<div style=" color:#0098d9; text-align: start;">${title2} </div>
<div style="text-align: start;">问题总数: ${maxdata} </div>
<div style="text-align: start;">问题数量：${cdata}</div>
<div style="text-align: start; ">占比:${decimal(np)}% </div>
`;
}
},
},
title: [
{
x: 'center',
top: '38%',
textStyle: {
fontSize: '16', //百分比的样式
color: '#fac85b',
fontFamily: 'Arial',
foontWeight: '600',
},
},
],
polar: {
radius: ['50%', '30%'],
center: ['50%', '50%'],
},
angleAxis: {
max: maxdata,
show: false,
},
radiusAxis: {
type: 'category',
show: false,
},
series: [
{
name: '',
type: 'bar',
barWidth: 15, //圆圈宽度
showBackground: true,
backgroundStyle: {
color: '#f3fafd', //留白颜色
},
data: [cdata], //百分比占比
coordinateSystem: 'polar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#0098d9', //填色颜色
},
]),
},
},
},
// 外圆
{
type: 'pie',
clockWise: true, //顺时加载
radius: ['75%', '65%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: false,
fontSize: '40',
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
tooltip: {
trigger: 'item',
formatter: (params) => {
const { marker, name, value, componentType } = params;
if (componentType === 'series') {
return `
<div style="text-align: start;color:#339ca8; background: rgba(230, 230, 230, 0.36);">${title1} </div>
<div style="text-align: start; background: rgba(230, 230, 230, 0.36);">问题总数: ${maxdata} </div>
<div style="text-align: start;">问题数量：${rdata}</div>
<div style="text-align: start; ">占比: ${decimal(wp)}% </div>
`;
}
},
},
data: [
{ value: maxdata - rdata }, //留白
{ value: rdata }, //填充
],
itemStyle: {
normal: {
color: function (params) {
//自定义颜色
var colorList = ['#f3fafc', '#339ca8']; //全部--部分
return colorList[params.dataIndex];
},
},
},
},
],
};
return option;
}
//柱状图
export function barChart(title: any, xdata: any, serdata: any) {
const option = {
title: { text: title }, //图标中的表题
tooltip: {},
xAxis: {
data: xdata,
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: serdata,
},
],
};
return option;
}
//百分比图 智能分组
export function categoryChart(data, tcolor) {
const option = {
title: [
{
title: [{
text: data + `%`,
x: 'center',
top: '38%',
......@@ -385,8 +50,7 @@ export function categoryChart(data, tcolor) {
fontFamily: 'Arial',
foontWeight: '600',
},
},
],
},],
polar: {
radius: ['100%', '60%'],
center: ['50%', '50%'],
......@@ -399,8 +63,7 @@ export function categoryChart(data, tcolor) {
type: 'category',
show: false,
},
series: [
{
series: [{
name: '',
type: 'bar',
roundCap: true,
......@@ -414,16 +77,13 @@ export function categoryChart(data, tcolor) {
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: tcolor, //填色颜色
},
]),
},
},]),
},
},
],
},],
};
return option;
......@@ -432,8 +92,7 @@ export function categoryChart(data, tcolor) {
//百分比图 病案入组
export function categoryChart11(text, data, tcolor) {
const option = {
title: [
{
title: [{
text: text,
x: 'center',
top: '52%',
......@@ -468,8 +127,7 @@ export function categoryChart11(text, data, tcolor) {
type: 'category',
show: false,
},
series: [
{
series: [{
name: '',
type: 'bar',
roundCap: true,
......@@ -483,528 +141,14 @@ export function categoryChart11(text, data, tcolor) {
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: tcolor, //填色颜色
},]),
},
]),
},
},
},
],
};
return option;
}
//散点图
export function scatterChart(dataCount: any, cmi: any) {
let ymax = 0;
let xmax = 0;
let yarr = [];
let xarr = [];
dataCount.map((item) => {
return yarr.push(Math.abs(item[1]));
});
ymax = Math.ceil(Math.max(...yarr)); //最大值 向上取整
dataCount.map((item) => {
return xarr.push(Math.abs(item[0]));
});
xmax = Math.max(...xarr); //最大值
// console.log(xmax);
if (xmax < cmi) {
// x轴最大值小于cmi, x轴最大值边界为 x轴最大值 向上取整
xmax = Math.ceil(cmi);
}
const option = {
toolbox: {
//缩放
show: true,
top: '-2%',
right: '2%',
showTitle: true, //是否在鼠标 hover 的时候显示每个工具 icon 的标题
itemGap: 20, //工具栏 icon 每项之间的间隔
feature: {
// dataZoom: {
// },
dataView: {
//数据视图
show: false,
},
restore: {
//重置
show: false,
},
dataZoom: {
//数据缩放视图
show: true,
title:{
zoom:'区域缩放',
back:'区域还原'
},
},
saveAsImage: {
//保存图片
show: false,
},
},
},
tooltip: {
backgroundColor: '#ffff', //背景颜色
borderColor: '#fff',
padding: 0,
//设置文字左对齐,文字大小,文字颜色
textStyle: {
fontSize: fontSize(0.17),
align: 'left',
color: '#3D4D65',
},
formatter: (params) => {
const { marker, name, value, componentType } = params;
let color = '';
if (value[0] >= cmi && value[1] > 0) {
color = '#ff7e00';
} else if (value[0] < cmi && value[1] >= 0) {
// return '#d872a4 ';
color = 'red';
} else if (value[0] <= cmi && value[1] < 0) {
color = '#2cabe3';
} else if (value[0] > cmi && value[1] <= 0) {
color = '#23c768';
}
if (componentType === 'series') {
return `<div style="min-width:180px;background:#FFFFFF;box-shadow: 0px 12px 36px 0px rgba(38, 69, 90, 0.2); border-radius: 8px;
font-size:12px;
line-height:20px;
color: #3D4D65;">
<div style="padding-left: 5%;font-size:12px;line-height:25px; color:${color};overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> ${
value[2]
} </div>
<div style="padding-left: 5%; background: rgba(230, 230, 230, 0.36);">CMI: ${decimal(value[0])} </div>
<div style="padding-left: 5%;">指数偏离度：${decimal(value[1])}</div>
<div style="padding-left: 5%; background: rgba(230, 230, 230, 0.36);font-weight: bold;">目标偏离度：${decimal(value[11])}</div>
<div style="padding-left: 5%; ">总分值: ${decimal(value[3])} </div>
<div style="padding-left: 5%; background: rgba(230, 230, 230, 0.36);">例数：${value[4]}</div>
<div style="padding-left: 5%;">标准单价：${value[5]}</div>
<div style="padding-left: 5%;background: rgba(230, 230, 230, 0.36); ">目标指数单价：${decimal(value[14])}</div>
<div style="padding-left: 5%; ">实际单价：${decimal(value[6])}</div>
<div style="padding-left: 5%;background: rgba(230, 230, 230, 0.36);">药占比：${decimal(value[7] * 100)}%</div>
<div style="padding-left: 5%;">目标药占比：${decimal(value[13] * 100)}%</div>
<div style="padding-left: 5%; background: rgba(230, 230, 230, 0.36);">材料占比：${decimal(value[8] * 100)}%</div>
<div style="padding-left: 5%; ">目标材料占比：${decimal(value[15] * 100)}%</div>
</div>`;
}
},
},
grid: {
left: 30,
right: 30,
top: 21,
bottom: 20,
containLabel: true,
},
xAxis: {
splitLine: {
//x轴分割线
lineStyle: {
color: '#C1EBFE',
type: 'dashed', //虚线
},
},
axisLine: {
//x轴
lineStyle: {
color: '#0587C0',
width: 0,
},
},
splitNumber: 5,
// max: xmax,
max: decimal(xmax + cmi),
min: decimal(-xmax + cmi),
},
yAxis: {
splitLine: {
//y轴分割线
lineStyle: {
color: '#C1EBFE',
type: 'dashed', //虚线
},
},
axisLine: {
//y轴
lineStyle: {
color: '#0587C0',
width: 0,
},
},
splitNumber: 5,
max: ymax,
min: -ymax,
},
series: [
{
type: 'scatter',
data: dataCount,
label: {
show: true,
position: 'bottom',
formatter: (params) => {
const { marker, name, value, componentType } = params;
if (componentType === 'series') {
return Split(value[2]);
}
},
fontSize: 12,
},
symbolSize: (params) => {
if (params[4] > 5000) {
return Math.ceil(params[4] / 1000 + 10);
} else {
return Math.ceil(params[4] / 100 + 10);
}
},
markLine: {
label: {
normal: {
formatter: function (params) {
if (params.dataIndex == 0) {
return `CMI`;
} else if (params.dataIndex == 1) {
return ` 偏离度`;
}
return params.value;
},
},
},
lineStyle: {
normal: {
type: 'solid',
},
},
data: [
{
silent: false, //鼠标悬停事件 true没有，false有
lineStyle: {
//警戒线的样式 ，虚实 颜色
type: 'solid',
color: '#0587C0',
},
yAxis: 0,
},
{
lineStyle: {
//警戒线的样式 ，虚实 颜色
type: 'solid',
color: '#0587C0',
},
xAxis: cmi,
},
],
},
itemStyle: {
// shadowBlur: 2,
// shadowColor: 'rgba(120, 36, 50, 0.5)',
// shadowOffsetY: 1,
color: function (params: any) {
const { marker, name, value, componentType } = params;
if (value[0] >= cmi && value[1] > 0) {
return '#ff7e00';
} else if (value[0] < cmi && value[1] >= 0) {
// return '#d872a4 ';
return 'red';
} else if (value[0] <= cmi && value[1] < 0) {
return '#2cabe3';
} else if (value[0] > cmi && value[1] <= 0) {
return '#23c768';
}
},
},
},
],
},],
};
return option;
}
export function safetyChart(data1) {
let color = ['#2CE3D8', '#24C768', '#FF7E00', '#00A1E4', '#FFC107'];
data1.map((item, index) => {
data1.push({ value: 0, name: '', color: 'transparent' });
color.push('transparent');
});
const option = {
grid: {
containLabel: true,
},
tooltip: {
show: true,
trigger: 'item',
formatter: '{b} : {c} ({d}%)',
},
legend: {
textStyle: {
color: '#464A53',
fontWeight: 'normal',
fontSize: fontSize(0.12),
},
icon: 'rect',
itemWidth: 5,
itemHeight: 15,
},
series: [
{
name: '医疗效率',
type: 'pie',
startAngle: 0,
radius: [30, 100],
center: ['50%', '20%'],
roseType: 'area',
avoidLabelOverlap: false,
itemStyle: {
color: function (params) {
return color[params.dataIndex];
},
},
label: {
show: true,
position: 'outside',
fontSize: fontSize(0.14),
formatter: function (params) {
return params.value;
},
// color: function (params) {
// return params.color;
// },
},
labelLine: {
// normal: {
length: 10,
length2: 20,
show: true,
lineStyle: {
width: 1,
},
// },
},
data: data1,
},
],
};
return option;
}
\ No newline at end of file
export function EfficiencyChart(data) {
const option = {
grid: {
left: 0,
right: 0,
top: 20,
bottom: 20,
containLabel: true,
},
tooltip: {
show: false,
// trigger: 'item',
// formatter: '{a} : {c} ({d}%)',
},
xAxis: {
type: 'category',
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: ['#F4F4F4'],
type: 'solid',
},
},
axisLabel: {
show: false,
},
show: false,
},
yAxis: {
type: 'value',
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: ['#F4F4F4'],
type: 'solid',
},
},
axisLabel: {
show: false,
},
show: false,
},
series: [
{
data: data,
type: 'bar',
},
],
barWidth: 30, //柱子宽度
};
return option;
}
export function serviceChart(color1, color2) {
const option = {
// tooltip: {
// show: true,
// trigger: 'axis',
// },
grid: {
left: 0,
right: 0,
top: 0,
bottom: 0,
containLabel: true,
},
xAxis: [
{
type: 'category',
boundaryGap: false,
axisTick: {
show: false,
},
//网格线显示
splitLine: {
show: false,
},
//刻度显示
axisLabel: {
show: false,
},
show: false,
},
],
yAxis: [
{
type: 'value',
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
show: false,
},
],
series: [
{
name: '疾病入组数：888',
type: 'line',
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbolSize: 0,
// smooth: true,
lineStyle: {
// normal: {
color: color1, // 线条颜色
// },
},
itemStyle: {
color: color1,
borderColor: color1,
},
tooltip: {
show: true,
},
areaStyle: {
//区域填充样式
},
data: [0, 100, 104, 109, 125, 54, 60, 90, 100, 94, 180, 200],
},
{
name: '收治病种数量：888',
type: 'line',
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbolSize: 0,
// smooth: true,
lineStyle: {
// normal: {
// color: color2, // 线条颜色
// },
borderColor: color2,
},
itemStyle: {
color: color2,
borderColor: color2,
},
tooltip: {
show: true,
},
areaStyle: {
//区域填充样式
},
data: [0, 150, 160, 140, 200, 160, 180, 230, 190, 230, 245, 280],
},
],
};
return option;
}
export function pieOption(data) {
var radius = ['0%', '60%'];
// 饼图
const optionPie = {
tooltip: {
trigger: 'axis',
},
series: [
{
tooltip: {
trigger: 'item',
formatter: function (params) {
return '占比：' + params.percent.toFixed(2) + '%';
},
},
labelLine: {
normal: {
// show: false,
},
},
label: {
fontSize: fontSize(0.14),
color: '#54657e99',
},
type: 'pie',
radius: radius,
center: ['50%', '50%'],
data: data,
},
],
};
return optionPie;
}
src/utils/formatTime.js 0 → 100644
/**
* 时间日期转换
* @param date 当前时间，new Date() 格式
* @param format 需要转换的时间格式字符串
* @description format 字符串随意，如 `YYYY-mm、YYYY-mm-dd`
* @description format 季度："YYYY-mm-dd HH:MM:SS QQQQ"
* @description format 星期："YYYY-mm-dd HH:MM:SS WWW"
* @description format 几周："YYYY-mm-dd HH:MM:SS ZZZ"
* @description format 季度 + 星期 + 几周："YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ"
* @returns 返回拼接后的时间字符串
*/
export function formatDate(date, format) {
const we = date.getDay(); // 星期
const z = getWeek(date); // 周
const qut = Math.floor((date.getMonth() + 3) / 3).toString(); // 季度
const opt = {
'Y+': date.getFullYear().toString(), // 年
'm+': (date.getMonth() + 1).toString(), // 月(月份从0开始，要+1)
'd+': date.getDate().toString(), // 日
'H+': date.getHours().toString(), // 时
'M+': date.getMinutes().toString(), // 分
'S+': date.getSeconds().toString(), // 秒
'q+': qut, // 季度
};
// 中文数字 (星期)
const week = {
0: '日',
1: '一',
2: '二',
3: '三',
4: '四',
5: '五',
6: '六',
};
// 中文数字（季度）
const quarter = {
1: '一',
2: '二',
3: '三',
4: '四',
};
if (/(W+)/.test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length > 1 ? (RegExp.$1.length > 2 ? '星期' + week[we] : '周' + week[we]) : week[we]);
}
if (/(Q+)/.test(format)) format = format.replace(RegExp.$1, RegExp.$1.length == 4 ? '第' + quarter[qut] + '季度' : quarter[qut]);
if (/(Z+)/.test(format)) format = format.replace(RegExp.$1, RegExp.$1.length == 3 ? '第' + z + '周' : z + '');
for (const k in opt) {
const r = new RegExp('(' + k + ')').exec(format);
// 若输入的长度不为1，则前面补零
if (r) format = format.replace(r[1], RegExp.$1.length == 1 ? opt[k] : opt[k].padStart(RegExp.$1.length, '0'));
}
return format;
}
/**
* 获取当前日期是第几周
* @param dateTime 当前传入的日期值
* @returns 返回第几周数字值
*/
export function getWeek(dateTime) {
const temptTime = new Date(dateTime.getTime());
// 周几
const weekday = temptTime.getDay() || 7;
// 周1+5天=周六
temptTime.setDate(temptTime.getDate() - weekday + 1 + 5);
let firstDay = new Date(temptTime.getFullYear(), 0, 1);
const dayOfWeek = firstDay.getDay();
let spendDay = 1;
if (dayOfWeek != 0) spendDay = 7 - dayOfWeek + 1;
firstDay = new Date(temptTime.getFullYear(), 0, 1 + spendDay);
const d = Math.ceil((temptTime.valueOf() - firstDay.valueOf()) / 86400000);
const result = Math.ceil(d / 7);
return result;
}
/**
* 将时间转换为 `几秒前`、`几分钟前`、`几小时前`、`几天前`
* @param param 当前时间，new Date() 格式或者字符串时间格式
* @param format 需要转换的时间格式字符串
* @description param 10秒： 10 * 1000
* @description param 1分： 60 * 1000
* @description param 1小时： 60 * 60 * 1000
* @description param 24小时：60 * 60 * 24 * 1000
* @description param 3天： 60 * 60* 24 * 1000 * 3
* @returns 返回拼接后的时间字符串
*/
export function formatPast(param, format) {
// 传入格式处理、存储转换值
let t, s;
// 获取js 时间戳
let time = new Date().getTime();
// 是否是对象
typeof param === 'string' || 'object' ? (t = new Date(param).getTime()) : (t = param);
// 当前时间戳 - 传入时间戳
time = Number.parseInt(`${time - t}`);
if (time < 10000) {
// 10秒内
return '刚刚';
} else if (time < 60000 && time >= 10000) {
// 超过10秒少于1分钟内
s = Math.floor(time / 1000);
return `${s}秒前`;
} else if (time < 3600000 && time >= 60000) {
// 超过1分钟少于1小时
s = Math.floor(time / 60000);
return `${s}分钟前`;
} else if (time < 86400000 && time >= 3600000) {
// 超过1小时少于24小时
s = Math.floor(time / 3600000);
return `${s}小时前`;
} else if (time < 259200000 && time >= 86400000) {
// 超过1天少于3天内
s = Math.floor(time / 86400000);
return `${s}天前`;
} else {
// 超过3天
const date = typeof param === 'string' || 'object' ? new Date(param) : param;
return formatDate(date, format);
}
}
/**
* 时间问候语
* @param param 当前时间，new Date() 格式
* @description param 调用 `formatAxis(new Date())` 输出 `上午好`
* @returns 返回拼接后的时间字符串
*/
export function formatAxis(param) {
const hour = new Date(param).getHours();
if (hour < 6) return '凌晨好';
else if (hour < 9) return '早上好';
else if (hour < 12) return '上午好';
else if (hour < 14) return '中午好';
else if (hour < 17) return '下午好';
else if (hour < 19) return '傍晚好';
else if (hour < 22) return '晚上好';
else return '夜里好';
}
export function transformTimestamp(timestamp) {
const date = new Date(timestamp);
const Y = date.getFullYear();
const M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
const D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
const s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds(); // 秒
const dateString = `${Y}-${M}-${D} ${h}${m}${s}`;
return dateString;
}
export function transformTimestamps(timestamp) {
const date = new Date(timestamp);
const Y = date.getFullYear();
const M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
const D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
const s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds(); // 秒
const dateString = `${Y}-${M}-${D}`;
return dateString;
}
src/utils/http.js
......@@ -74,9 +74,9 @@ axios.interceptors.response.use(
export default {
post(url, params, option) {
if (getItem('svtoken')) {
loadingInstance = Vue.prototype.$loading(loadingOption);
}
return new Promise((resolve, reject) => {
axios
.post(domain + url, params, { ...{ headers: createHeader() }, ...option })
......@@ -86,15 +86,15 @@ export default {
reject(res.data);
return;
}
if (getItem('token')) {
loadingInstance.close();
}
resolve(res.data.data || res.data);
})
.catch((error) => {
if (getItem('token')) {
loadingInstance.close();
}
errorMsg(error);
reject(error);
});
......
src/utils/useVueRouter.js 0 → 100644
/*
* @Author: ninglupeng
* @Date: 2022-06-07 11:37:20
* @LastEditors: ninglupeng
* @LastEditTime: 2022-06-07 11:48:40
* @Description:
*/
import {
ComponentInternalInstance,
computed,
getCurrentInstance,
Ref,
} from '@vue/composition-api';
import VueRouter, { Route } from 'vue-router';
export function getVueInstance() {
const instance = getCurrentInstance();
if (instance) {
return instance;
}
throw new Error('Vue instance is missing');
}
export function useRoute() {
const { proxy } = getVueInstance();
return computed(() => proxy.$route);
}
export function useRouter() {
const { proxy } = getVueInstance();
return proxy.$router;
}
export default {
getVueInstance,
useRoute,
useRouter,
};
src/views/outHistorygrouping.vue 0 → 100644
<!--
* @Author: wsq
* @Date: 2022-03-02 16:34:58
* @LastEditors: ninglupeng
* @LastEditTime: 2022-06-07 15:06:17
* @Description:
-->
<template>
<!-- 智能分组 -->
<div class="outsetgrouping" id="setGroupingbox">
<div class="outsetgrouping_button">
<!-- <el-button class="outsetgrouping_button_GoBackbtn" size="mini" @click="goback">
<span class="iconfont icon-daochu"></span> <span class="s2">返回</span>
</el-button> -->
<el-button
class="outsetgrouping_button_Submitbtn"
size="mini"
type="primary"
@click="submit"
>
<span class="iconfont icon-ipr_tijiao"></span>
<span class="s2">提交</span>
</el-button>
</div>
<div class="outsetgrouping_top">
<div class="outsetgrouping_top_message">
<div class="outsetgrouping_top_message_left">
<span class="outsetgrouping_top_message_left_tu1"><img src="../assets/img/peo.png" alt=""> </span>
<div class="outsetgrouping_top_message_left_t1">
住院号:<span>{{ casehisObj ? casehisObj.a48 : "" }}</span>
</div>
</div>
<div class="outsetgrouping_top_message_centert">
<span class="outsetgrouping_top_message_centert_tu2"><img src="../assets/img/ka.png" alt=""></span>
<div class="outsetgrouping_top_message_centert_t2">
住院次数:<span>{{ casehisObj ? casehisObj.a49 : "" }}</span>
</div>
</div>
<div class="outsetgrouping_top_message_right">
<span class="outsetgrouping_top_message_right_tu3"><img src="../assets/img/qian.png" alt=""></span>
<div class="outsetgrouping_top_message_right_t3">
医疗付费方式:<span>{{ casehisObj ? casehisObj.a46C : "" }}</span>
</div>
</div>
</div>
</div>
<div class="outsetgrouping_top2">
<div class="outsetgrouping_top2_message">
<div class="outsetgrouping_top2_message_left">
<span class="outsetgrouping_top2_message_left_tu4"><img src="../assets/img/bianma.png" alt=""> </span>
<div class="outsetgrouping_top2_message_left_t1">
当前入组编码:<span>{{
casehisObj ? casehisObj.drgs.code : ""
}}</span>
</div>
</div>
<div class="outsetgrouping_top2_message_centert">
<span class="outsetgrouping_top2_message_centert_tu5"><img src="../assets/img/daoru.png" alt=""></span>
<div class="outsetgrouping_top2_message_centert_t2">
入组名称:<span>{{ casehisObj ? casehisObj.drgs.name : "" }}</span>
</div>
</div>
<div class="outsetgrouping_top2_message_right">
<span class="outsetgrouping_top2_message_right_tu6"><img src="../assets/img/jiner.png" alt=""></span>
<div class="outsetgrouping_top2_message_right_t3">
预计DRG支付费用:<span>{{
casehisObj ? casehisObj.drgs.actualfee : ""
}}</span>
</div>
</div>
</div>
</div>
<div class="outsetgrouping_top3"></div>
<div class="outsetgrouping_title">
<span class="outsetgrouping_title_span">智能疾病分组</span>
</div>
<div class="outsetgrouping_centent">
<div
class="outsetgrouping_centent_totalnum"
v-for="(item, index) in CorePercents"
:key="index"
>
<div class="outsetgrouping_centent_totalnum_left">
<div class="outsetgrouping_centent_totalnum_left_radios">
<input
type="radio"
name="radios"
:value="item.coreID"
v-model="radio"
/>
</div>
<div class="outsetgrouping_centent_totalnum_left_text">
<div class="outsetgrouping_centent_totalnum_left_text_msg1">
<div class="outsetgrouping_centent_totalnum_left_text_msg1_text1">
<span> 诊断名称:{{ item.diagMapName }}</span>
<span> 诊断类型:{{ item.diagOrder }}</span>
</div>
<div class="outsetgrouping_centent_totalnum_left_text_msg1_text2">
<span>操作名称:{{ item.opsMapName }}</span>
<span>手术类型:{{ item.opsOrder }}</span>
</div>
</div>
<div class="outsetgrouping_centent_totalnum_left_text_msg2">
<div class="outsetgrouping_centent_totalnum_left_text_msg2_text3">
<span>分组编码：{{ item.code }}</span>
<span>入组名称：{{ item.coreName }}</span>
</div>
<div class="outsetgrouping_centent_totalnum_left_text_msg2_text4">
<span>主诊断编码：{{ item.disCode }}</span
><span>主操作编码：{{ item.opsCode }}</span
><span>基准点数：{{ item.score }}</span>
</div>
<div class="outsetgrouping_centent_totalnum_left_text_msg2_text5">
<span>预计DRG支付费用：{{ item.unitfee }}</span
><span>院内历年平均费用：{{ item.avgFee }}</span
><span>院内历年平均住院天数：{{ item.avgInHosDay }}</span>
</div>
</div>
</div>
</div>
<div class="outsetgrouping_centent_totalnum_right">
<div class="outsetgrouping_centent_totalnum_right_text1">
<span class="outsetgrouping_centent_totalnum_right_text1_span1">
药占比:</span
>
<div
:id="`indexChart` + index"
class="outsetgrouping_centent_totalnum_right_text1_echar1"
></div>
</div>
<div class="outsetgrouping_centent_totalnum_right_text2">
<span class="outsetgrouping_centent_totalnum_right_text2_span2">
耗材占比:</span
>
<div
:id="`indexCharttwo` + index"
class="outsetgrouping_centent_totalnum_right_text2_echar2"
></div>
</div>
<div class="outsetgrouping_centent_totalnum_right_text3">
<span class="outsetgrouping_centent_totalnum_right_text3_span3">
检查占比:</span
>
<div
:id="`indexCharttree` + index"
class="outsetgrouping_centent_totalnum_right_text3_echar3"
></div>
</div>
<div class="outsetgrouping_centent_totalnum_right_text4">
<span class="outsetgrouping_centent_totalnum_right_text4_span4">
检验占比:</span
>
<div
:id="`indexChartfore` + index"
class="outsetgrouping_centent_totalnum_right_text4_echar4"
></div>
</div>
<div class="outsetgrouping_centent_totalnum_right_text5">
<span class="outsetgrouping_centent_totalnum_right_text5_span5">
其他占比:</span
>
<div
:id="`indexChartfile` + index"
class="outsetgrouping_centent_totalnum_right_text5_echar5"
></div>
</div>
</div>
</div>
<!-- 如果没有搜索时的样式 -->
<div v-show="nolistShow" class="outsetgrouping_centent_nodata">
<div class="outsetgrouping_centent_nodata_img">
<img src="../assets/img/nodata.png" alt="" />
</div>
<div class="outsetgrouping_centent_nodata_text">暂无数据</div>
</div>
</div>
<div class="outsetgrouping_pagination">
<el-pagination
layout="sizes,prev, pager, next,jumper"
:total="totalCount"
@size-change="sizeChange"
@current-change="currentChange"
:current-page="currentPage"
:page-size="pageSize"
:page-sizes="[10, 30, 50]"
>
</el-pagination>
</div>
</div>
</template>
<script >
import http from "../utils/http";
import {
reactive,
toRefs,
onMounted,
nextTick,
computed,
} from "@vue/composition-api";
import { decimal } from "../utils/decimal";
import { Message } from 'element-ui';
import { useRoute, useRouter } from "../utils/useVueRouter";
import { initEcharts, categoryChart } from "../utils/echarts";
export default {
name: "outHistorygrouping",
setup() {
let state = reactive({
abc: "",
casehisObj: null,
searchForm: {
diagName: "",
opsName: "",
},
CorePercents: [],
totalCount: 0, //总条数
currentPage: 1, //当前页
pageSize: 10,
typesel: 1,
radio: "", //单选框选中值
drug: [],
nodataShow: true, //没有搜索时显示
nolistShow: false, //没有搜索数据的时候显示
groupList: [], //主诊断
groupArr: [],
groupList2: [], //主手术
groupArr2: [],
diagMapList: null, //医保诊断编码集合
opsMapList: null, //医保手术编码集合
});
//返回
const router = useRouter();
const goback = () => {
router.go(-1);
};
//获取基本数据
function getCaseHis(code) {
http
.post(`/medical/Get/casehisData?id=${code}`, {})
.then((data) => {
state.casehisObj = data;
console.log("data", data);
state.diagMapList = data.diagMapList;
state.opsMapList = data.opsMapList;
getlist();
})
.catch((error) => {});
}
//获取列表数据
const getlist = () => {
http
.post(`/medical/get/GetCorePercents`, {
PageNumber: state.currentPage,
Type: 1,
pageSize: state.pageSize,
DiagMapList: state.diagMapList,
OpsMapList: state.opsMapList,
id: route.value.query.id,
})
.then((data) => {
state.CorePercents = data.list;
state.totalCount = data.totalCount;
if (state.CorePercents.length == 0) {
state.nolistShow = true;
// state.nodataShow = false;
}
for (var i = 0; i < state.CorePercents.length; i++) {
initEcharts(
categoryChart(state.CorePercents[i].drugPercent, "#2CABE3"),
`indexChart${i}`
);
initEcharts(
categoryChart(state.CorePercents[i].materialsPercent, "#71D875"),
`indexCharttwo${i}`
);
initEcharts(
categoryChart(state.CorePercents[i].inspectPercent, "#F35E77"),
`indexCharttree${i}`
);
initEcharts(
categoryChart(state.CorePercents[i].testPercent, "#FFB321"),
`indexChartfore${i}`
);
initEcharts(
categoryChart(state.CorePercents[i].otherPercent, "#C05EF3"),
`indexChartfile${i}`
);
}
})
.catch((error) => {});
};
//提交
const submit = () => {
if (state.radio == "") {
Message.warning({
message: "请先选择要入组的病组",
type: 'warning',
});
} else {
http
.post(
`/medical/Update/casehisById?PatientId=${route.value.query.id}`,
[state.radio]
)
.then((data) => {
Message.success({
message: `${data.message}`,
type: 'success',
});
getCaseHis(route.value.query.id);
})
.catch((error) => {});
}
};
/**
* 页码
*/
const currentChange = (val) => {
state.currentPage = val;
getlist();
};
const sizeChange = (val) => {
state.pageSize = val;
getlist();
};
var route = useRoute();
onMounted(() => {
getCaseHis(route.value.query.id);
if (state.searchForm.diagName.length > 0) {
getlist();
}
});
return {
...toRefs(state),
decimal,
getCaseHis,
currentChange,
sizeChange,
getlist,
submit,
goback,
};
},
};
</script>
<style lang="scss" scoped>
@import "../styles/mixin.scss";
// @import '../styles/media/media/outHistorygrouping.scss';
.outsetgrouping {
height: 900px;
background-color: white;
padding: 0px 20px 20px 20px;
overflow: hidden;
position: relative;
&_button {
display: flex;
justify-content: flex-end;
margin-bottom: 10px;
&_GoBackbtn {
color: #2cabe3;
border: 1px solid #2cabe3;
}
&_Submitbtn {
background-color: #2cabe3;
color: #fff;
}
}
&_top {
.span1 {
display: flex;
justify-content: start;
font-size: 14px;
color: #6a707e;
font-family: PingFang SC;
font-weight: 400;
}
&_message {
display: flex;
justify-content: space-between;
&_left {
width: 33%;
height: 51px;
display: flex;
justify-content: start;
align-items: center;
background-color: #f3fafd;
// .iconfont {
// color: #2cabe3;
// padding-left: 29px;
// font-size: 23px;
// }
&_tu1{
padding-left: 29px;
font-size: 23px;
}
&_t1 {
width: 80%;
height: 42px;
display: flex;
justify-content: start;
padding-left: 10px;
align-items: center;
background-color: #fff;
color: #abafb3;
font-size: 14px;
margin-left: 29px;
span {
color: #787e8a;
}
}
}
&_centert {
width: 33%;
height: 51px;
display: flex;
justify-content: start;
align-items: center;
background-color: #f3fafd;
font-family: PingFang SC;
// .iconfont {
// color: #2cabe3;
// padding-left: 29px;
// font-size: 23px;
// }
&_tu2{
padding-left: 29px;
font-size: 23px;
}
&_t2 {
width: 80%;
height: 42px;
display: flex;
justify-content: start;
padding-left: 10px;
align-items: center;
background-color: #fff;
color: #abafb3;
font-size: 14px;
margin-left: 29px;
span {
color: #787e8a;
}
}
}
&_right {
width: 33%;
height: 51px;
display: flex;
justify-content: start;
align-items: center;
background-color: #f3fafd;
font-family: PingFang SC;
// .iconfont {
// color: #2cabe3;
// padding-left: 29px;
// font-size: 23px;
// }
&_tu3{
padding-left: 29px;
font-size: 23px;
}
&_t3 {
width: 80%;
height: 42px;
display: flex;
justify-content: start;
padding-left: 10px;
align-items: center;
background-color: #fff;
color: #abafb3;
font-size: 14px;
margin-left: 29px;
span {
color: #787e8a;
}
}
}
}
}
&_top2 {
.span1 {
display: flex;
justify-content: start;
font-size: 14px;
color: #6a707e;
font-family: PingFang SC;
font-weight: 400;
}
&_message {
display: flex;
justify-content: space-between;
margin-top: 10px;
margin-bottom: 16px;
&_left {
width: 33%;
height: 51px;
display: flex;
justify-content: start;
align-items: center;
background-color: #f3fafd;
// .iconfont {
// color: #2cabe3;
// padding-left: 29px;
// font-size: 23px;
// }
&_tu4{
padding-left: 29px;
font-size: 23px;
}
&_t1 {
width: 80%;
height: 42px;
display: flex;
justify-content: start;
padding-left: 10px;
align-items: center;
background-color: #fff;
color: #abafb3;
font-size: 14px;
margin-left: 29px;
span {
color: #787e8a;
}
}
}
&_centert {
width: 33%;
height: 51px;
display: flex;
justify-content: start;
align-items: center;
background-color: #f3fafd;
font-family: PingFang SC;
// .iconfont {
// color: #2cabe3;
// padding-left: 29px;
// font-size: 23px;
// }
&_tu5{
padding-left: 29px;
font-size: 23px;
}
&_t2 {
width: 80%;
height: 42px;
display: flex;
justify-content: start;
padding-left: 10px;
align-items: center;
background-color: #fff;
color: #abafb3;
font-size: 14px;
margin-left: 29px;
span {
color: #787e8a;
}
}
}
&_right {
width: 33%;
height: 51px;
display: flex;
justify-content: start;
align-items: center;
background-color: #f3fafd;
font-family: PingFang SC;
// .iconfont {
// color: #2cabe3;
// padding-left: 29px;
// font-size: 23px;
// }
&_tu6{
padding-left: 29px;
font-size: 23px;
}
&_t3 {
width: 80%;
height: 42px;
display: flex;
justify-content: start;
padding-left: 10px;
align-items: center;
background-color: #fff;
color: #abafb3;
font-size: 14px;
margin-left: 29px;
span {
color: #787e8a;
}
}
}
}
}
&_top3 {
height: 10px;
background-color: #f3fafd;
border-radius: 10px;
margin-bottom: 16px;
}
&_title {
height: 30px;
background-image: url(../assets/img/bbj.png);
background-size: 100% 100%;
color: white;
font-size: 12px;
display: flex;
align-items: center;
justify-content: start;
margin-bottom: 5px;
&_span {
padding-left: 10px;
}
}
&_centent {
background-color: #f1f5f8;
height: 66%;
overflow-y: auto;
&_totalnum {
height: 290px;
background-color: #fff;
margin: 12px;
display: flex;
flex-direction: column;
align-items: center;
&_left {
flex: 1;
width: 100%;
height: 70%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
&_radios {
width: 3%;
height: 30%;
display: flex;
justify-content: center;
align-items: center;
}
&_text {
width: 97%;
height: 100%;
&_msg1 {
height: 25%;
box-sizing: content-box;
border: 10px solid rgba(44, 171, 227, 0.08);
border-bottom: 5px solid rgba(44, 171, 227, 0.08);
border-top: 5px solid rgba(44, 171, 227, 0.08);
margin-bottom: 5px;
margin-top: 5px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&_text1 {
width: 100%;
height: 50%;
display: flex;
justify-content: space-between;
span {
height: 100%;
width: 50%;
margin: 5px 5px;
display: flex;
justify-content: start;
align-items: center;
font-size: 14px;
padding-left: 10px;
font-family: PingFang SC;
font-weight: 300;
color: #6a707e;
}
}
&_text2 {
width: 100%;
height: 48%;
display: flex;
justify-content: space-between;
span {
height: 100%;
width: 50%;
margin: 0px 5px;
display: flex;
justify-content: start;
align-items: center;
font-size: 14px;
padding-left: 10px;
font-family: PingFang SC;
font-weight: 300;
color: #6a707e;
}
}
}
&_msg2 {
background-color: rgba(44, 171, 227, 0.08);
display: flex;
flex-direction: column;
height: 65%;
justify-content: center;
padding-top: 10px;
&_text3 {
// margin-bottom: 10px;
width: 100%;
height: 30%;
display: flex;
justify-content: space-between;
span {
display: block;
height: 100%;
width: 50%;
margin: 0px 10px;
background-color: #fff;
display: flex;
justify-content: start;
align-items: center;
font-size: 14px;
padding-left: 10px;
font-family: PingFang SC;
font-weight: 300;
color: #6a707e;
}
}
&_text4 {
margin-bottom: 10px;
width: 100%;
height: 30%;
margin-top: 10px;
display: flex;
justify-content: space-between;
span {
height: 100%;
width: 50%;
margin: 0px 10px;
background-color: #fff;
display: flex;
justify-content: start;
align-items: center;
font-size: 14px;
padding-left: 10px;
font-family: PingFang SC;
font-weight: 300;
color: #6a707e;
}
}
&_text5 {
margin-bottom: 10px;
width: 100%;
height: 30%;
display: flex;
justify-content: space-between;
span {
height: 100%;
width: 50%;
margin: 0px 10px;
background-color: #fff;
display: flex;
justify-content: start;
align-items: center;
font-size: 14px;
padding-left: 10px;
font-family: PingFang SC;
font-weight: 300;
color: #6a707e;
}
}
}
}
}
&_right {
width: 100%;
height: 30%;
display: flex;
justify-content: space-around;
&_text1 {
width: 19%;
display: flex;
justify-content: center;
align-items: center;
margin-left: 3%;
&_span1 {
color: #2cabe3;
font-family: PingFang SC;
font-weight: 400;
}
&_echar1 {
width: 50%;
height: 85px;
margin-left: -30px;
margin-top: 10px;
}
}
&_text2 {
width: 19%;
display: flex;
justify-content: center;
align-items: center;
&_span2 {
color: #71d875;
font-family: PingFang SC;
font-weight: 400;
}
&_echar2 {
width: 50%;
height: 85px;
margin-left: -30px;
margin-top: 10px;
}
}
&_text3 {
width: 19%;
display: flex;
justify-content: center;
align-items: center;
&_span3 {
color: #f35e77;
font-family: PingFang SC;
font-weight: 400;
}
&_echar3 {
width: 50%;
height: 85px;
margin-left: -30px;
margin-top: 10px;
}
}
&_text4 {
width: 19%;
display: flex;
justify-content: center;
align-items: center;
&_span4 {
color: #ffb321;
font-family: PingFang SC;
font-weight: 400;
}
&_echar4 {
width: 50%;
height: 85px;
margin-left: -30px;
margin-top: 10px;
}
}
&_text5 {
width: 19%;
display: flex;
justify-content: center;
align-items: center;
&_span5 {
color: #c05ef3;
font-family: PingFang SC;
font-weight: 400;
}
&_echar5 {
width: 50%;
height: 85px;
margin-left: -30px;
margin-top: 10px;
}
}
}
}
// 没有数据
&_nodata {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
&_img {
img {
width: 115px;
height: 102px;
}
}
&_text {
font-size: 18px;
font-family: PingFang SC;
font-weight: 400;
color: #abafb3;
}
}
}
&_pagination {
display: flex;
justify-content: flex-end;
margin-top: 1%;
}
}
</style>
src/views/outpatientDetails.vue 0 → 100644
<!--
* @Author: wsq
* @Date: 2022-04-22 15:20:58
* @LastEditors: wsq
* @LastEditTime: 2022-05-16 18:45:49
* @Description:
-->
<template>
<!-- 患者详情页 -->
<div class="outpatientDetails">
<div class="outpatientDetails_top">
<div class="outpatientDetails_top_div1">
<span class="span1">患者信息</span>
<!-- <el-button size="mini" type="primary" @click="getControl">医嘱质控</el-button> -->
<!-- <el-button size="mini" type="primary">医嘱质控</el-button> -->
</div>
<div class="outpatientDetails_top_message">
<div class="outpatientDetails_top_message_left">
<span class="outpatientDetails_top_message_left_tu1"> <img src="../assets/img/peo.png" alt=""></span>
<div class="outpatientDetails_top_message_left_t1">
住院号:<span>{{ HistoryInfo.id }}</span>
</div>
</div>
<div class="outpatientDetails_top_message_centert">
<span class="outpatientDetails_top_message_centert_tu2"><img src="../assets/img/ka.png" alt=""></span>
<div class="outpatientDetails_top_message_centert_t2">
住院次数:<span>{{ HistoryInfo.a49 }}</span>
</div>
</div>
<div class="outpatientDetails_top_message_right">
<span class="outpatientDetails_top_message_right_tu3"><img src="../assets/img/qian.png" alt=""></span>
<div class="outpatientDetails_top_message_right_t3">
医疗付费方式:<span>{{ HistoryInfo.paymentType }}</span>
</div>
</div>
</div>
</div>
<div class="outpatientDetails_msg">
<span class="outpatientDetails_msg_tu4"><img src="../assets/img/zu.png" alt=""></span>
<span>分组:{{ HistoryInfo.doctorName }}</span>
<span>权重:{{ decimal(HistoryInfo.rw) }}</span>
<span>实际医保费用:{{ decimal(HistoryInfo.actualfee) }}</span>
<span>总费用:{{ decimal(HistoryInfo.totalFee) }}</span>
<span>盈亏:{{ decimal(HistoryInfo.profitLoss) }}</span>
<span>院内历年平均费用:{{ decimal(HistoryInfo.avgFee) }}</span>
<span>院内历年平均住院天数:{{ decimal(HistoryInfo.days) }}</span>
</div>
<div class="outpatientDetails_title">
<span>费用分类</span>
</div>
<div class="outpatientDetails_bottom">
<!-- 有数据 -->
<div class="outpatientDetails_bottom_leftShowBox" v-if="goods.length !== 0">
<div class="outpatientDetails_bottom_leftShowBox_left">
<ul class="outpatientDetails_bottom_leftShowBox_left_ul">
<li v-for="(item, index) in goods" :key="index">
<div
@click="
toggle(index, item);
scrollToFoods(index);
"
:class="{ active: index == checkindex }"
>
<span :class="{ fc2: index == checkindex }" class="sp1">
<span v-show="index == checkindex" style="color: #fff" class="iconfont icon-jiantou1"></span>
{{ item.iteM_TYPE }}:{{ decimal(item.totalFee) }}</span
>
<span :class="{ fc3: index == checkindex }" class="sp2">
<span class="sp2_avg">
平均:
{{ decimal(item.avgFee) }}
</span>
<!-- <span class="sp2_reto" v-ratio="[item.proportion / 100, item.proportion / 100, `${index == checkindex ? '#fff' : '#6a707e'}`]">
</span> -->
<span class="sp2_reto" v-if="item.proportion <= 0">
{{ decimal(item.proportion * -1) + '%' }}
<img style="width: 4px; height: 12px; margin-left: 5px" src="../assets/img/dataCockpit/lvse_zuo.png" />
</span>
<span class="sp2_reto" v-else>
{{ decimal(item.proportion) + '%' }}
<img style="width: 4px; height: 12px; margin-left: 5px" src="../assets/img/dataCockpit/hongse_you.png" />
</span>
</span>
</div>
</li>
</ul>
</div>
<!-- 中间有数据样式 表格-->
<div class="outpatientDetails_bottom_leftShowBox_right" v-if="tableData.length !== 0">
<el-table
:data="tableData"
border
size="medium"
style="width: 100%"
:default-sort="{ prop: 'date', order: 'descending' }"
:row-class-name="tableRowClassName"
height="575"
>
<el-table-column
label="开单日期"
prop="iteM_CODE"
></el-table-column>
<el-table-column
label="项目编码"
prop="chargeTime"
></el-table-column>
<el-table-column
label="项目名称"
prop="iteM_NAME"
></el-table-column>
<el-table-column label="单价" prop="unitprice">
<template slot-scope="scope">
{{ decimal(scope.row.fee) }}
</template>
</el-table-column>
<el-table-column label="数量" prop="quantity"></el-table-column>
<el-table-column label="总金额" prop="fee">
<template slot-scope="scope" >
{{ decimal(scope.row.unitprice) }}
</template>
</el-table-column>
</el-table>
</div>
<!-- 中间表格无数据 -->
<div class="outpatientDetails_bottom_leftShowBox_right" v-else>
<div class="outpatientDetails_bottom_leftShowBox_right_box">
<img class="outpatientDetails_bottom_leftShowBox_right_box_img" src="../assets/img/nodata.png" alt="" />
<div class="outpatientDetails_bottom_leftShowBox_right_box_text">暂无数据</div>
</div>
</div>
</div>
<!-- 表格无数据样式 -->
<div class="outpatientDetails_bottom_leftShowBox" v-else>
<div class="outpatientDetails_bottom_leftShowBox_box">
<img class="outpatientDetails_bottom_leftShowBox_box_img" src="../assets/img/nodata.png" alt="" />
<div class="outpatientDetails_bottom_leftShowBox_box_text">暂无数据</div>
</div>
</div>
<!-- 右侧有数据 -->
<div class="outpatientDetails_bottom_rght2">
<div class="outpatientDetails_bottom_rght2_top">
<div class="outpatientDetails_bottom_rght2_top_title">异常问题</div>
<div class="outpatientDetails_bottom_rght2_top_mes">
<span class="outpatientDetails_bottom_rght2_top_mes_span1" v-for="(item, ind) in typeCountDatas" :key="ind">{{ item.name }}：<span :style="{ color: item.color }">{{ item.count }}</span></span
>
<!-- <span class="outpatientDetails_bottom_rght2_top_mes_span2">检查：<span style="color: #3ad330">0</span></span>
<span class="outpatientDetails_bottom_rght2_top_mes_span3">治疗：<span style="color: #2aaae2">0</span></span>
<span class="outpatientDetails_bottom_rght2_top_mes_span4">其他：<span style="color: red">0</span></span> -->
</div>
</div>
<div class="outpatientDetails_bottom_rght2_bottom">
<div class="outpatientDetails_bottom_rght2_bottom_li" v-for="(item, ind) in options" :key="ind">
<span v-show="item.projectRuleLevel == '禁止'" class="outpatientDetails_bottom_rght2_bottom_li_title" style="background: red">{{
item.projectRuleLevel
}}</span>
<span v-show="item.projectRuleLevel == '提示'" class="outpatientDetails_bottom_rght2_bottom_li_title" style="background: #2aaae2">{{
item.projectRuleLevel
}}</span>
<span v-show="item.projectRuleLevel == '警告'" class="outpatientDetails_bottom_rght2_bottom_li_title" style="background: #e9c621">{{
item.projectRuleLevel
}}</span>
<el-tooltip placement="bottom" trigger="hover">
<template #content>{{item.notes}} </template>
<span class="outpatientDetails_bottom_rght2_bottom_li_cont">{{ item.notes }}</span>
</el-tooltip>
</div>
</div>
</div>
</div>
<!--无数据 -->
<!-- <div class="outpatientDetails_bottom" v-if="goods.length == 0">
<div class="outpatientDetails_bottom_box">
<img class="outpatientDetails_bottom_box_img" src="../assets/img/nodata.png" alt="" />
<div class="outpatientDetails_bottom_box_text">暂无数据</div>
</div>
</div> -->
</div>
</template>
<script >
import http from '../utils/http';
import { reactive, toRefs, onMounted, nextTick, computed } from '@vue/composition-api';
import { decimal } from '../utils/decimal';
import { Message } from 'element-ui';
import { useRoute, useRouter } from '../utils/useVueRouter';
import { setItem, getItem } from '../utils/auth';
export default {
name: 'outpatientDetails',
setup() {
//表格颜色
const tableRowClassName = ({ row}) => {
if (row.rowIndex % 2 == 0) {
return 'isverifyStyle';
} else {
return '';
}
};
//异常问题接口
const GetProjectRulesData = () => {
http
.post(`/medical/get/GetPRHisData?&code=${route.value.query.id}`, {})
.then((data) => {
state.options = data.projectRules;
state.typeCountDatas = data.typeCountDatas;
if (data.typeCountDatas == null) {
state.showCountDatas = false;
}
if (data.projectRules == null) {
state.showbottom = false;
}
})
.catch((error) => {
});
};
//医嘱质控
const getControl = () => {
http
.post(`/global/post/SetCaseProjectRuleHis?id=${route.value.query.id}`)
.then((data) => {
Message.success(data.message);
})
.catch((error) => {
});
};
//获取患者信息数据
const getHistoryInfo = () => {
http
.post(`/medical/Get/getHisInfo?&code=${route.value.query.id}`, {})
.then((data) => {
state.HistoryInfo = data;
state.dipid = data.id;
state.goods = data.inpat_FeeDatas;
if (state.goods.length > 0) {
// debugger
toggle(0, state.goods[0]);
}
})
.catch((error) => {
});
};
//费用分类接口
const getInpatFeesByREGCODE = (item) => {
http
.post(`/medical/Get/getIFHisByREGCODE?&code=${route.value.query.id}&ItemType=${item.iteM_TYPE}`, {})
.then((data) => {
state.tableData = data;
})
.catch((error) => {
});
};
const toggle = (index, item) => {
state.checkindex = index;
getInpatFeesByREGCODE(item);
};
const scrollToFoods = (index) => {
// state.checkindex = index;
};
let state = reactive({
HistoryInfo: {
name: '',
healthyID: '',
paymentType: '',
doctorName: '',
rw: '',
totalFee: '',
avgFee: '',
days: '',
profitLoss: '',
},
checkindex: 0, // 初始化第一个栏块高亮
goods: [], //左侧费用类型
tableListHead: [
{ cloumn: '开单日期', name: 'chargeTime' },
{
cloumn: '项目编码',
name: 'iteM_CODE',
},
{
cloumn: '项目名称',
name: 'iteM_NAME',
},
{
cloumn: '单价',
name: 'unitprice',
},
{
cloumn: '数量',
name: 'quantity',
},
{
cloumn: '总金额',
name: 'fee',
},
],
tableData: [],
options: [], //异常问题数据
medInsNum: 0, //医保数
notdrugsNum: 0, //非药品
drugsNum: 0, //药品
diseaseNum: 0, //疾病
dipid: '',
typeCountDatas: [], //异常数据
showCountDatas: true, //异常问题类型是否显示
showbottom: true, //异常问题详情是否显示
});
//表格自适应高度
const route = useRoute();
onMounted(() => {
GetProjectRulesData();
getHistoryInfo();
});
return {
...toRefs(state),
tableRowClassName,
toggle,
scrollToFoods,
getHistoryInfo,
getInpatFeesByREGCODE,
decimal,
// tableCot,
GetProjectRulesData,
getControl,
};
},
};
</script>
<style lang="scss" scoped>
@import '../styles/mixin.scss';
// @import '../styles/media/components/outpatientDetails.scss';
.outpatientDetails {
// height: calc(100% - 50px);
// background-color: white;
// padding: 20px;
// position: relative;
// overflow: hidden;
height: 850px;
background-color: white;
padding: 20px;
overflow: hidden;
position: relative;
&_top {
margin-bottom: 18px;
&_div1 {
display: flex;
justify-content: space-between;
align-items: center;
.span1 {
display: flex;
justify-content: start;
font-size: 14px;
color: #6a707e;
font-family: PingFang SC;
font-weight: 400;
}
}
&_message {
display: flex;
justify-content: space-between;
margin-top: 16px;
&_left {
width: 33%;
height: 51px;
display: flex;
justify-content: start;
align-items: center;
background-color: #f3fafd;
// .iconfont {
// color: #2cabe3;
// padding-left: 29px;
// font-size: 23px;
// }
&_tu1{
padding-left: 29px;
font-size: 23px;
}
&_t1 {
width: 80%;
height: 42px;
display: flex;
justify-content: start;
padding-left: 10px;
align-items: center;
background-color: #fff;
color: #abafb3;
font-size: 14px;
margin-left: 29px;
span {
color: #787e8a;
}
}
}
&_centert {
width: 33%;
height: 51px;
display: flex;
justify-content: start;
align-items: center;
background-color: #f3fafd;
font-family: PingFang SC;
// .iconfont {
// color: #2cabe3;
// padding-left: 29px;
// font-size: 23px;
// }
&_tu2{
padding-left: 29px;
font-size: 23px;
}
&_t2 {
width: 80%;
height: 42px;
display: flex;
justify-content: start;
padding-left: 10px;
align-items: center;
background-color: #fff;
color: #abafb3;
font-size: 14px;
margin-left: 29px;
span {
color: #787e8a;
}
}
}
&_right {
width: 33%;
height: 51px;
display: flex;
justify-content: start;
align-items: center;
background-color: #f3fafd;
font-family: PingFang SC;
// .iconfont {
// color: #2cabe3;
// padding-left: 29px;
// font-size: 23px;
// }
&_tu3{
padding-left: 29px;
font-size: 23px;
}
&_t3 {
width: 80%;
height: 42px;
display: flex;
justify-content: start;
padding-left: 10px;
align-items: center;
background-color: #fff;
color: #abafb3;
font-size: 14px;
margin-left: 29px;
span {
color: #787e8a;
}
}
}
}
}
&_msg {
height: 51px;
background-color: #f3fafd;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
// .iconfont {
// color: #2cabe3;
// padding-left: 28px;
// font-size: 23px;
// }
&_tu4{
padding-left: 29px;
font-size: 23px;
}
span:nth-child(2) {
margin-left: 21px;
}
span:nth-child(n + 2) {
width: 258px;
height: 39px;
background-color: #fff;
font-size: 14px;
color: #6d7381;
display: flex;
align-items: center;
justify-content: center;
font-family: PingFang SC;
margin-right: 5px;
}
span:nth-child(n + 7) {
margin-right: 5px;
}
}
&_title {
background-image: url('../assets/img/dataMaintenance/title.png');
background-repeat: no-repeat;
display: flex;
justify-content: start;
align-items: center;
margin-bottom: 22px;
background-size: 100% 100%;
background-position: center;
height: 26px;
span {
color: #fff;
font-size: 13px;
font-family: PingFang SC;
font-weight: 500;
margin-left: 17px;
}
}
&_bottom {
display: flex;
justify-content: space-between;
height: 80%;
&_leftShowBox {
width: 80%;
height: 100%;
display: flex;
// 左侧无数据
&_box {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&_img {
width: 155px;
height: 155px;
}
&_text {
font-size: 14px;
color: #6a707e;
}
}
// 有数据
&_left {
list-style-type: none;
width: 37%;
height: 90%;
overflow-y: auto;
&_ul {
margin: 0;
padding-left: 0;
width: 100%;
.active {
display: flex;
justify-content: start;
width: 100%;
height: 100%;
background: linear-gradient(to right, #2cabe3, #57cafd);
color: #fff;
.fc2 {
width: 40%;
height: 100%;
display: flex;
align-items: center;
justify-items: center;
justify-content: flex-start;
padding-left: 3%;
.iconfont {
font-size: 20px;
}
}
.fc3 {
width: 60%;
height: 100%;
display: flex;
align-items: center;
justify-items: center;
justify-content: flex-end;
padding-right: 3%;
}
}
}
li {
list-style-type: none;
width: 100%;
height: 56px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f5f6fa;
margin-bottom: 21px;
font-size: 13px;
color: #6a707e;
div {
width: 98%;
height: 46px;
background-color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
font-family: 'PingFang SC';
.sp1 {
width: 40%;
height: 100%;
display: flex;
align-items: center;
justify-items: center;
justify-content: flex-start;
padding-left: 3%;
font-family: 'PingFang SC';
}
.sp2 {
width: 60%;
height: 100%;
display: flex;
align-items: center;
justify-items: center;
justify-content: flex-end;
padding-right: 3%;
font-family: 'PingFang SC';
&_avg {
display: flex;
flex-direction: row;
align-items: center;
width: 50%;
justify-content: flex-end;
}
&_reto {
display: flex;
flex-direction: row;
align-items: center;
width: 50%;
justify-content: flex-end;
}
}
}
}
}
&_right {
width: 62%;
// 无数据样式
&_box {
width: 100%;
height: 500px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&_img {
width: 100px;
height: 100px;
}
&_text {
font-size: 18px;
color: #6a707e;
font-family: PingFang SC;
font-weight: 400;
}
}
&_table {
height: calc(100% - 100px);
}
.isverifyStyle {
background-color: #f4f5f8;
}
.paginations {
text-align: right;
}
}
}
&_rght2 {
width: 22%;
height: 100%;
border: 1px solid #f6f6f8;
padding: 10px;
&_top {
height: 20%;
width: 100%;
border-bottom: 3px solid #eef8fd;
&_title {
width: 98px;
height: 19px;
text-align: start;
padding-left: 10px;
background-color: #2cabe3;
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
color: #ffffff;
}
&_mes {
width: 100%;
height: 80%;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
&_span1 {
width: 30%;
height: 36px;
display: flex;
align-items: center;
padding-left: 5px;
background: #f6f6f8;
font-size: 16px;
font-family: PingFang SC;
font-weight: 400;
color: #5d5d5d;
margin-right: 5px;
}
&_span2 {
width: 101px;
height: 36px;
display: flex;
align-items: center;
padding-left: 10px;
background: #f6f6f8;
font-size: 16px;
font-family: PingFang SC;
font-weight: 400;
color: #5d5d5d;
margin-right: 5px;
}
&_span3 {
width: 101px;
height: 36px;
display: flex;
align-items: center;
padding-left: 10px;
background: #f6f6f8;
font-size: 16px;
font-family: PingFang SC;
font-weight: 400;
color: #5d5d5d;
margin-right: 5px;
}
&_span4 {
width: 101px;
height: 36px;
display: flex;
align-items: center;
padding-left: 10px;
background: #f6f6f8;
font-size: 16px;
font-family: PingFang SC;
font-weight: 400;
color: #5d5d5d;
}
}
}
&_bottom {
height: 70%;
width: 100%;
overflow-y: scroll;
&_li {
width: 100%;
height: 25%;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-around;
border-bottom: 3px solid #eef8fd;
&_title {
width: 69px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
font-family: PingFang SC;
font-weight: 400;
color: #ffffff;
}
&_cont {
font-size: 16px;
font-family: PingFang SC;
font-weight: 400;
color: #5d5d5d;
text-align: start;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 97%;
}
}
}
}
}
}
</style>
src/views/HelloWorld.vue → src/views/outseeQualityControl.vue
......@@ -2,107 +2,211 @@
* @Author: wsq
* @Date: 2022-04-22 14:21:50
* @LastEditors: ninglupeng
* @LastEditTime: 2022-06-07 09:10:32
* @LastEditTime: 2022-06-07 11:50:00
* @Description:
-->
<template>
<!-- 查看质控 -->
<div class="outseeQualityControl">
<div class="outseeQualityControl_box">
<div class="outseeQualityControl_box_btn">
<!-- <div class="outseeQualityControl_box_btn">
<el-button size="mini" type="primary" @click="getSynchronous">同步数据</el-button>
</div>
</div> -->
<div class="outseeQualityControl_box_header">
<div class="outseeQualityControl_box_header_text"></div>
</div>
<div class="outseeQualityControl_box_Content">
<div class="outseeQualityControl_box_Content_left">
<medical-record-homepage :medicalrecord="medicalrecord" :clicktitle="clicktitle">
<medical-record-homepage
:medicalrecord="medicalrecord"
:clicktitle="clicktitle"
>
</medical-record-homepage>
</div>
<div class="outseeQualityControl_box_Content_right">
<div class="outseeQualityControl_box_Content_right_top">
<!--非编码问题 -->
<div :class="[isleftcodeShow ? 'outseeQualityControl_box_Content_right_top_left' : 'outseeQualityControl_box_Content_right_top_left11']"
@click="leftcode">
<div
:class="[
isleftcodeShow
? 'outseeQualityControl_box_Content_right_top_left'
: 'outseeQualityControl_box_Content_right_top_left11',
]"
@click="leftcode"
>
<div class="outseeQualityControl_box_Content_right_top_left_div1">
<img src="../assets/img/fbm.png" alt="" v-show="isleftcodeShow" />
<img src="../assets/img/bm.png" alt="" v-show="!isleftcodeShow" />
<img
src="../assets/img/fbm.png"
alt=""
v-show="isleftcodeShow"
/>
<img
src="../assets/img/bm.png"
alt=""
v-show="!isleftcodeShow"
/>
</div>
<div class="outseeQualityControl_box_Content_right_top_left_div2">
<span :class="[
<span
:class="[
isleftcodeShow
? 'outseeQualityControl_box_Content_right_top_left_div2_span1'
: 'outseeQualityControl_box_Content_right_top_left_div2_span11',
]">{{ fruleCount }}</span>
<span :class="[
]"
>{{ fruleCount }}</span
>
<span
:class="[
isleftcodeShow
? 'outseeQualityControl_box_Content_right_top_left_div2_span2'
: 'outseeQualityControl_box_Content_right_top_left_div2_span22',
]">非编码问题</span>
]"
>非编码问题</span
>
</div>
</div>
<!-- 编码问题 -->
<div :class="[isleftcodeShow ? 'outseeQualityControl_box_Content_right_top_right' : 'outseeQualityControl_box_Content_right_top_right11']"
@click="rightcode">
<div class="outseeQualityControl_box_Content_right_top_right_div1">
<img src="../assets/img/fbm.png" alt="" v-show="!isleftcodeShow" />
<img src="../assets/img/bm.png" alt="" v-show="isleftcodeShow" />
<div
:class="[
isleftcodeShow
? 'outseeQualityControl_box_Content_right_top_right'
: 'outseeQualityControl_box_Content_right_top_right11',
]"
@click="rightcode"
>
<div
class="outseeQualityControl_box_Content_right_top_right_div1"
>
<img
src="../assets/img/fbm.png"
alt=""
v-show="!isleftcodeShow"
/>
<img
src="../assets/img/bm.png"
alt=""
v-show="isleftcodeShow"
/>
</div>
<div class="outseeQualityControl_box_Content_right_top_right_div2">
<span :class="[
<div
class="outseeQualityControl_box_Content_right_top_right_div2"
>
<span
:class="[
isleftcodeShow
? 'outseeQualityControl_box_Content_right_top_right_div2_span1'
: 'outseeQualityControl_box_Content_right_top_right_div2_span11',
]">{{ ruleCount }}</span>
<span :class="[
]"
>{{ ruleCount }}</span
>
<span
:class="[
isleftcodeShow
? 'outseeQualityControl_box_Content_right_top_right_div2_span2'
: 'outseeQualityControl_box_Content_right_top_right_div2_span22',
]">编码问题</span>
]"
>编码问题</span
>
</div>
</div>
</div>
<div class="outseeQualityControl_box_Content_right_center">
<div class="outseeQualityControl_box_Content_right_center_line" v-show="isleftcodeShow"></div>
<div class="outseeQualityControl_box_Content_right_center_line2" v-show="!isleftcodeShow"></div>
<div
class="outseeQualityControl_box_Content_right_center_line"
v-show="isleftcodeShow"
></div>
<div
class="outseeQualityControl_box_Content_right_center_line2"
v-show="!isleftcodeShow"
></div>
</div>
<div class="outseeQualityControl_box_Content_right_bottom">
<!-- <div class="outseeQualityControl_box_Content_right_bottom_title">患者基本信息</div> -->
<div class="outseeQualityControl_box_Content_right_bottom_tree" v-show="isleftcodeShow">
<el-tree :data="departmentTree" :props="defaultProps" :default-expand-all="false" ref="tree"
node-key="id" @node-click="handleNodeClick">
<div
class="outseeQualityControl_box_Content_right_bottom_tree"
v-show="isleftcodeShow"
>
<el-tree
:data="departmentTree"
:props="defaultProps"
:default-expand-all="false"
ref="tree"
node-key="id"
@node-click="handleNodeClick"
>
<template #default="{ node, data }">
<span class="custom-tree-node">
<div class="leftbox" :class="[data.ruleName != '非编码问题' ? 'leftboxs' : '']">
<span :class="[data.ruleName == '非编码问题' ? 'spans' : '']">{{ data.ruleName
}}</span>
<div
class="leftbox"
:class="[data.ruleName != '非编码问题' ? 'leftboxs' : '']"
>
<el-tooltip placement="bottom" trigger="hover">
<template #content>{{ data.ruleName }} </template>
<span
:class="[
data.ruleName == '非编码问题' ? 'spans' : '',
]"
>{{ data.ruleName }}</span
>
</el-tooltip>
</div>
<!-- <span class="_score"> -{{ data.score }}<span>分</span></span> -->
</span>
</template>
</el-tree>
</div>
<div class="outseeQualityControl_box_Content_right_bottom_tree" v-show="!isleftcodeShow">
<el-tree :data="rightdepartmentTree" :props="defaultProps" :default-expand-all="false"
ref="tree" node-key="id" @node-click="handleNodeClick" v-show="!isnodataShow">
<div
class="outseeQualityControl_box_Content_right_bottom_tree"
v-show="!isleftcodeShow"
>
<el-tree
:data="rightdepartmentTree"
:props="defaultProps"
:default-expand-all="false"
ref="tree"
node-key="id"
@node-click="handleNodeClick"
v-show="!isnodataShow"
>
<template #default="{ node, data }">
<span class="custom-tree-node">
<div class="leftbox" :class="[data.ruleName != '编码问题' ? 'leftboxs' : '']">
<span :class="[data.ruleName == '编码问题' ? 'spans' : '']">{{ data.ruleName
}}</span>
<div
class="leftbox"
:class="[data.ruleName != '编码问题' ? 'leftboxs' : '']"
>
<el-tooltip placement="bottom" trigger="hover">
<template #content>{{ data.ruleName }} </template>
<span
:class="[data.ruleName == '编码问题' ? 'spans' : '']"
>{{ data.ruleName }}</span
>
</el-tooltip>
</div>
</span>
</template>
</el-tree>
<div class="outseeQualityControl_box_Content_right_bottom_tree_nodata"
v-show="isnodataShow">
<img class="outseeQualityControl_box_Content_right_bottom_tree_nodata_img"
src="../assets/img/mininodata.png" alt="" />
<div class="outseeQualityControl_box_Content_right_bottom_tree_nodata_text">暂无数据</div>
<div
class="
outseeQualityControl_box_Content_right_bottom_tree_nodata
"
v-show="isnodataShow"
>
<img
class="
outseeQualityControl_box_Content_right_bottom_tree_nodata_img
"
src="../assets/img/mininodata.png"
alt=""
/>
<div
class="
outseeQualityControl_box_Content_right_bottom_tree_nodata_text
"
>
暂无数据
</div>
</div>
</div>
</div>
......@@ -112,18 +216,25 @@
</div>
</template>
<script lang="ts">
import http from '../utils/http';
import { reactive, toRefs, onMounted, nextTick, computed } from '@vue/composition-api';
// import { ElMessage, ElMessageBox } from 'element-plus';
// import { useRoute, useRouter } from 'vue-router';
import $ from 'jquery';
// import { ElLoading } from 'element-plus';
import { setItem, getItem } from '../utils/auth';
<script>
import http from "../utils/http";
import {
reactive,
toRefs,
onMounted,
nextTick,
computed,
} from "@vue/composition-api";
import medicalRecordHomepage from "../components/medicalRecordHomepage/index.vue";
import { useRoute, useRouter } from "../utils/useVueRouter";
import $ from "jquery";
import { setItem, getItem } from "../utils/auth";
import { Message } from "element-ui";
export default {
components: {
medicalRecordHomepage,
},
name: 'outseeQualityControl',
name: "outseeQualityControl",
setup() {
let state = reactive({
medicalrecord: null,
......@@ -133,57 +244,58 @@ export default {
rightdepartmentTree: [], //编码问题数据
isleftcodeShow: true, //非编码问题数据是否显示
defaultProps: {
children: 'rulesLists',
label: 'ruleName',
children: "rulesLists",
label: "ruleName",
},
clicktitle: '',
fruleCount: '', //非编码问题数据条数
ruleCount: '', //编码问题数据条数
clicktitle: "",
fruleCount: "", //非编码问题数据条数
ruleCount: "", //编码问题数据条数
isnodataShow: false, //编码是否有数据,
inhtml: '',
splithtml: '', //
splithtml2: '', //单位电话
splithtml3: '', //病房
inhtml: "",
splithtml: "", //
splithtml2: "", //单位电话
splithtml3: "", //病房
keys: [], //获取所有的问卷key
values: [], //
});
var route = useRoute();
onMounted(() => {
console.log(route.value);
});
//同步数据
const getSynchronous = (id) => {
// var loadingInstance1 = ElLoading.service(loadingOption1);
http
.post(`/medical/get/Synchronization?id=${route.query.id}`)
.post(`/medical/get/Synchronization?id=${route.value.query.id}`)
.then((data) => {
// loadingInstance1.close();
// ElMessage.success(data.message);
Message.success(data.message);
})
.catch((error) => {
// loadingInstance1.close();
// ElMessage.error(error);
Message.error(error);
});
};
//获取到点击的值
const handleNodeClick = (data) => {
let arr = document.getElementsByClassName(data.columnName);
let dom = $('#medicalRecord').find('#clickColor');
let dom = $("#medicalRecord").find("#clickColor");
if (dom.length != 0) {
dom.removeAttr('id');
dom.removeAttr("id");
}
arr[0].setAttribute('id', 'clickColor');
arr[0].setAttribute("id", "clickColor");
scrollTop();
};
function scrollTop() {
if ($('#clickColor').position()) {
$('.outseeQualityControl_box_Content_left').animate(
if ($("#clickColor").position()) {
$(".outseeQualityControl_box_Content_left").animate(
{
scrollTop:
$('#clickColor').offset().top -
$('.outseeQualityControl_box_Content_left').offset().top +
$('.outseeQualityControl_box_Content_left').scrollTop() -
$("#clickColor").offset().top -
$(".outseeQualityControl_box_Content_left").offset().top +
$(".outseeQualityControl_box_Content_left").scrollTop() -
300,
},
500
......@@ -193,12 +305,11 @@ export default {
const loadingOption1 = {
// 加载loading
fullscreen: true,
text: '正在加载...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.5)',
text: "正在加载...",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.5)",
};
// 获取病案首页数据
function getHomePage(id) {
http
......@@ -207,7 +318,7 @@ export default {
state.medicalrecord = data;
state.keys = Object.keys(data);
})
.catch((error) => { });
.catch((error) => {});
}
//获取患者基本信息树形数据
function getScoringDetails(id) {
......@@ -222,7 +333,7 @@ export default {
state.isnodataShow = true;
}
})
.catch((error) => { });
.catch((error) => {});
}
//点击非编码问题
const leftcode = () => {
......@@ -234,10 +345,10 @@ export default {
};
onMounted(() => {
if (route.query.id) {
getHomePage(route.query.id);
getScoringDetails(route.query.id);
setItem('outpid', route.query.id)
if (route.value.query.id) {
getHomePage(route.value.query.id);
getScoringDetails(route.value.query.id);
setItem("outpid", route.value.query.id);
}
});
......@@ -253,17 +364,12 @@ export default {
</script>
<style lang="scss">
@import 'styles/mixin.scss';
// @import '../styles/mixin.scss';
// @import 'styles/media/components/outseeQualityControl.scss';
.outseeQualityControl {
// height: calc(100% - 50px);
// padding: 10px;
// overflow: hidden;
// background-color: #fff;
height: 100%;
height: 96%;
background-color: white;
padding: 20px;
overflow: hidden;
......@@ -273,7 +379,6 @@ export default {
background-color: #f3bf18;
}
&_box {
height: 100%;
width: 100%;
......@@ -290,7 +395,7 @@ export default {
&_header {
height: r(25, 1920);
background: url('../assets/img/dataMaintenance/title.png') no-repeat;
background: url("../assets/img/dataMaintenance/title.png") no-repeat;
background-size: 100% 100%;
width: 100%;
......@@ -323,7 +428,7 @@ export default {
&_left {
width: 65%;
background-color: #ffffff;
height: 100%;
height: 900px;
padding: 0 8%;
......@@ -333,7 +438,7 @@ export default {
&_right {
width: 34%;
height: 100%;
height: 900px;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
......@@ -355,9 +460,9 @@ export default {
// padding: 3% 10%;
&_left {
flex: 1;
height: 100%;
height: 45%;
border-radius: 8px;
background-image: url('../assets/img/BG.png');
background-image: url("../assets/img/BG.png");
background-repeat: no-repeat;
background-position: center;
display: flex;
......@@ -370,7 +475,7 @@ export default {
img {
width: 82px;
height: 80px;
height: 53px;
}
}
......@@ -413,7 +518,7 @@ export default {
&_left11 {
flex: 1;
height: 100%;
height: 45%;
border-radius: 8px;
background-color: #fff;
background-repeat: no-repeat;
......@@ -428,7 +533,7 @@ export default {
img {
width: 82px;
height: 80px;
height: 63px;
}
}
......@@ -470,7 +575,7 @@ export default {
}
&_right {
height: 100%;
height: 45%;
flex: 1;
border-radius: 8px;
display: flex;
......@@ -483,7 +588,7 @@ export default {
img {
width: 82px;
height: 80px;
height: 53px;
}
}
......@@ -507,13 +612,13 @@ export default {
}
&_span11 {
color: #ffff;
color: white;
font-size: 26px;
font-weight: 700;
}
&_span22 {
color: #ffff;
color: white;
font-size: 16px;
font-weight: 500;
}
......@@ -522,9 +627,9 @@ export default {
&_right11 {
flex: 1;
height: 100%;
height: 45%;
border-radius: 8px;
background-image: url('../assets/img/BG.png');
background-image: url("../assets/img/BG.png");
background-repeat: no-repeat;
background-position: center;
display: flex;
......@@ -537,7 +642,7 @@ export default {
img {
width: 82px;
height: 80px;
height: 53px;
}
}
......@@ -603,7 +708,7 @@ export default {
height: 10%;
@include flexLayout;
// @include flexLayout;
justify-content: left;
}
......@@ -635,6 +740,10 @@ export default {
font-weight: 400;
line-height: 22px;
text-align: start;
overflow: hidden;
width: 92%;
white-space: nowrap;
text-overflow: ellipsis;
}
.spans {
......@@ -670,7 +779,7 @@ export default {
height: 85px;
}
.el-tree-node.is-current>.el-tree-node__content {
.el-tree-node.is-current > .el-tree-node__content {
height: 85px;
/* background: #5fc3f0; */
......@@ -741,7 +850,7 @@ export default {
height: 100%;
}
.el-tree>.el-tree-node {
.el-tree > .el-tree-node {
//父级加下滑线
// border-bottom: 1px dashed #dddddd;
}
......
vue.config.js
......@@ -2,7 +2,7 @@
* @Author: ninglupeng
* @Date: 2022-06-07 00:31:25
* @LastEditors: ninglupeng
* @LastEditTime: 2022-06-07 00:40:32
* @LastEditTime: 2022-06-07 09:36:58
* @Description:
*/
const path = require('path');
......@@ -12,12 +12,14 @@ function resolve(dir) {
}
module.exports = {
publicPath: "./", //导出路径
assetsDir: "web", //静态资源文件夹
productionSourceMap: false,
devServer: { //测试环境代理
port: 8066, //测试端口
proxy: {
'/api': {
target: 'https://testjx.suvalue.com/',
target: 'http://192.168.18.166:8099/',
changeOrigin: true,
pathRewrite: {
'^/': '/'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment