mirror of
https://gitee.com/xiongmao1988/rax-medical.git
synced 2025-08-24 13:04:57 +08:00
This commit is contained in:
gaofy
parent
ad925d7b7c
commit
adc0b455e0
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,74 @@
|
|||
.el-select-dropdown__item.selected {
|
||||
color: $main-color;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
--el-select-input-focus-border-color: $main-color;
|
||||
}
|
||||
|
||||
.el-radio {
|
||||
.el-radio__input.is-checked .el-radio__inner {
|
||||
border-color: $main-color;
|
||||
background: $main-color;
|
||||
}
|
||||
.el-radio__input.is-checked+.el-radio__label {
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
|
||||
.el-button.el-button--primary {
|
||||
background-color: $main-color;
|
||||
border-color: $main-color;
|
||||
opacity: 1;
|
||||
transition: all .6;
|
||||
&:hover, &:active {
|
||||
opacity: .7;
|
||||
transition: all .6;
|
||||
}
|
||||
&:focus {
|
||||
opacity: .9;
|
||||
transition: all .6;
|
||||
}
|
||||
}
|
||||
.el-dropdown-menu__item:not(.is-disabled):focus {
|
||||
background-color: rgba($main-color, .1);
|
||||
color: $main-color;
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
.el-dialog__header {
|
||||
|
||||
.el-dialog__headerbtn:focus .el-dialog__close,
|
||||
.el-dialog__headerbtn:hover .el-dialog__close {
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
--el-button-hover-text-color: $main-color;
|
||||
--el-button-hover-bg-color: rgba(0, 96, 128, .1);
|
||||
--el-button-hover-border-color: rgba(0, 96, 128, .8);
|
||||
--el-button-active-text-color: $main-color;
|
||||
--el-button-active-border-color: rgba(0, 96, 128, .8);
|
||||
--el-button-active-bg-color: rgba(0, 96, 128, .1);
|
||||
}
|
||||
|
||||
.el-button--primary {
|
||||
--el-button-text-color: white;
|
||||
--el-button-bg-color: $main-color;
|
||||
--el-button-border-color: $main-color;
|
||||
--el-button-outline-color: rgba(0, 96, 128, .5);
|
||||
--el-button-active-color: rgba(0, 96, 128, .8);
|
||||
--el-button-hover-text-color: white;
|
||||
--el-button-hover-link-text-color: rgba(0, 96, 128, .5);
|
||||
--el-button-hover-bg-color: rgba(0, 96, 128, .7);
|
||||
--el-button-hover-border-color: rgba(0, 96, 128, .7);
|
||||
--el-button-active-bg-color: rgba(0, 96, 128, .8);
|
||||
--el-button-active-border-color: rgba(0, 96, 128, .8);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -6,20 +6,13 @@ body {
|
|||
height: 100%;
|
||||
overflow: hidden;
|
||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
|
||||
}
|
||||
|
||||
span,
|
||||
p {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
p,
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h3,
|
||||
ul,
|
||||
li {
|
||||
word-wrap: break-word;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
|
@ -28,6 +21,7 @@ li {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
|
|
@ -41,6 +35,34 @@ li {
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.main-color {
|
||||
color: $main-color;
|
||||
}
|
||||
.text-color {
|
||||
color: $text-color;
|
||||
}
|
||||
.text1-color {
|
||||
color: $text1-color;
|
||||
}
|
||||
.text2-color {
|
||||
color: $text2-color;
|
||||
}
|
||||
.text3-color {
|
||||
color: $text3-color;
|
||||
}
|
||||
.f14 {
|
||||
font-size: 14px;
|
||||
}
|
||||
.f16 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.f18 {
|
||||
font-size: 18px;
|
||||
}
|
||||
.f20 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
|
|
@ -63,264 +85,11 @@ li {
|
|||
background-color: $main-color;
|
||||
}
|
||||
|
||||
// 震动
|
||||
.shake_1 {
|
||||
animation: shake_1 .2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes shake_1 {
|
||||
2% {
|
||||
transform: translate(-.5px, .5px) rotate(-.5deg);
|
||||
}
|
||||
|
||||
4% {
|
||||
transform: translate(2.5px, .5px) rotate(-.5deg);
|
||||
}
|
||||
|
||||
6% {
|
||||
transform: translate(-.5px, 1.5px) rotate(1.5deg);
|
||||
}
|
||||
|
||||
8% {
|
||||
transform: translate(.5px, .5px) rotate(-.5deg);
|
||||
}
|
||||
|
||||
10% {
|
||||
transform: translate(-.5px, -1.5px) rotate(-.5deg);
|
||||
}
|
||||
|
||||
12% {
|
||||
transform: translate(.5px, -.5px) rotate(1.5deg);
|
||||
}
|
||||
|
||||
14% {
|
||||
transform: translate(1.5px, 2.5px) rotate(-.5deg);
|
||||
}
|
||||
|
||||
16% {
|
||||
transform: translate(-.5px, -.5px) rotate(.5deg);
|
||||
}
|
||||
|
||||
18% {
|
||||
transform: translate(2.5px, .5px) rotate(.5deg);
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: translate(.5px, -1.5px) rotate(-.5deg);
|
||||
}
|
||||
|
||||
22% {
|
||||
transform: translate(2.5px, 2.5px) rotate(-.5deg);
|
||||
}
|
||||
|
||||
24% {
|
||||
transform: translate(2.5px, 1.5px) rotate(1.5deg);
|
||||
}
|
||||
|
||||
26% {
|
||||
transform: translate(.5px, 1.5px) rotate(-.5deg);
|
||||
}
|
||||
|
||||
28% {
|
||||
transform: translate(1.5px, .5px) rotate(.5deg);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: translate(-1.5px, 2.5px) rotate(1.5deg);
|
||||
}
|
||||
|
||||
32% {
|
||||
transform: translate(.5px, .5px) rotate(.5deg);
|
||||
}
|
||||
|
||||
34% {
|
||||
transform: translate(.5px, 1.5px) rotate(1.5deg);
|
||||
}
|
||||
|
||||
36% {
|
||||
transform: translate(2.5px, -.5px) rotate(1.5deg);
|
||||
}
|
||||
|
||||
38% {
|
||||
transform: translate(.5px, 1.5px) rotate(1.5deg);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: translate(2.5px, 1.5px) rotate(1.5deg);
|
||||
}
|
||||
|
||||
42% {
|
||||
transform: translate(2.5px, -1.5px) rotate(.5deg);
|
||||
}
|
||||
|
||||
44% {
|
||||
transform: translate(.5px, -.5px) rotate(.5deg);
|
||||
}
|
||||
|
||||
46% {
|
||||
transform: translate(1.5px, -1.5px) rotate(.5deg);
|
||||
}
|
||||
|
||||
48% {
|
||||
transform: translate(-1.5px, -.5px) rotate(.5deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(2.5px, -1.5px) rotate(1.5deg);
|
||||
}
|
||||
|
||||
52% {
|
||||
transform: translate(.5px, 1.5px) rotate(.5deg);
|
||||
}
|
||||
|
||||
54% {
|
||||
transform: translate(2.5px, -.5px) rotate(.5deg);
|
||||
}
|
||||
|
||||
56% {
|
||||
transform: translate(2.5px, 2.5px) rotate(.5deg);
|
||||
}
|
||||
|
||||
58% {
|
||||
transform: translate(2.5px, 1.5px) rotate(-.5deg);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translate(1.5px, 1.5px) rotate(-.5deg);
|
||||
}
|
||||
|
||||
62% {
|
||||
transform: translate(-.5px, .5px) rotate(-.5deg);
|
||||
}
|
||||
|
||||
64% {
|
||||
transform: translate(2.5px, 1.5px) rotate(-.5deg);
|
||||
}
|
||||
|
||||
66% {
|
||||
transform: translate(-1.5px, .5px) rotate(1.5deg);
|
||||
}
|
||||
|
||||
68% {
|
||||
transform: translate(1.5px, -1.5px) rotate(.5deg);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: translate(.5px, .5px) rotate(-.5deg);
|
||||
}
|
||||
|
||||
72% {
|
||||
transform: translate(-.5px, 1.5px) rotate(1.5deg);
|
||||
}
|
||||
|
||||
74% {
|
||||
transform: translate(-1.5px, 1.5px) rotate(1.5deg);
|
||||
}
|
||||
|
||||
76% {
|
||||
transform: translate(2.5px, -.5px) rotate(.5deg);
|
||||
}
|
||||
|
||||
78% {
|
||||
transform: translate(2.5px, 2.5px) rotate(.5deg);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translate(-1.5px, 2.5px) rotate(.5deg);
|
||||
}
|
||||
|
||||
82% {
|
||||
transform: translate(-1.5px, -.5px) rotate(.5deg);
|
||||
}
|
||||
|
||||
84% {
|
||||
transform: translate(.5px, 1.5px) rotate(-.5deg);
|
||||
}
|
||||
|
||||
86% {
|
||||
transform: translate(-.5px, 2.5px) rotate(.5deg);
|
||||
}
|
||||
|
||||
88% {
|
||||
transform: translate(2.5px, 2.5px) rotate(1.5deg);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translate(-.5px, -1.5px) rotate(-.5deg);
|
||||
}
|
||||
|
||||
92% {
|
||||
transform: translate(1.5px, .5px) rotate(.5deg);
|
||||
}
|
||||
|
||||
94% {
|
||||
transform: translate(-.5px, -.5px) rotate(.5deg);
|
||||
}
|
||||
|
||||
96% {
|
||||
transform: translate(1.5px, .5px) rotate(1.5deg);
|
||||
}
|
||||
|
||||
98% {
|
||||
transform: translate(.5px, -.5px) rotate(1.5deg);
|
||||
}
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translate(0, 0) rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
.el-select-dropdown__item.selected {
|
||||
color: #006080;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
--el-select-input-focus-border-color: #006080;
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
.el-dialog__header {
|
||||
|
||||
.el-dialog__headerbtn:focus .el-dialog__close,
|
||||
.el-dialog__headerbtn:hover .el-dialog__close {
|
||||
color: #006080;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
--el-button-hover-text-color: #006080;
|
||||
--el-button-hover-bg-color: rgba(0, 96, 128, .1);
|
||||
--el-button-hover-border-color: rgba(0, 96, 128, .8);
|
||||
--el-button-active-text-color: #006080;
|
||||
--el-button-active-border-color: rgba(0, 96, 128, .8);
|
||||
--el-button-active-bg-color: rgba(0, 96, 128, .1);
|
||||
}
|
||||
|
||||
.el-button--primary {
|
||||
--el-button-text-color: white;
|
||||
--el-button-bg-color: #006080;
|
||||
--el-button-border-color: #006080;
|
||||
--el-button-outline-color: rgba(0, 96, 128, .5);
|
||||
--el-button-active-color: rgba(0, 96, 128, .8);
|
||||
--el-button-hover-text-color: white;
|
||||
--el-button-hover-link-text-color: rgba(0, 96, 128, .5);
|
||||
--el-button-hover-bg-color: rgba(0, 96, 128, .7);
|
||||
--el-button-hover-border-color: rgba(0, 96, 128, .7);
|
||||
--el-button-active-bg-color: rgba(0, 96, 128, .8);
|
||||
--el-button-active-border-color: rgba(0, 96, 128, .8);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 验证弹窗
|
||||
#plugin-slider-verify_containe {
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
#slider-verify {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
|
|
@ -330,3 +99,58 @@ li {
|
|||
background: white;
|
||||
}
|
||||
}
|
||||
|
||||
// 选择医院
|
||||
.el-select.select-hospital {
|
||||
width: auto;
|
||||
|
||||
.el-input__wrapper {
|
||||
padding: 1px 12px;
|
||||
border-radius: 20px;
|
||||
|
||||
.el-input__inner {
|
||||
color: $main-color;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-tabs {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
bottom: 0;
|
||||
background: $border-color;
|
||||
}
|
||||
.tabs-item {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
color: $main-color;
|
||||
font-weight: 400;
|
||||
& ~ .tabs-item {
|
||||
margin-left: 15px;
|
||||
}
|
||||
&.active {
|
||||
font-weight: 600;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 3px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: $main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,17 +1,6 @@
|
|||
$main-color: #006080;
|
||||
$border-color: #EBEEF5;
|
||||
|
||||
.el-button.el-button--primary {
|
||||
background-color: $main-color;
|
||||
border-color: $main-color;
|
||||
opacity: 1;
|
||||
transition: all .6;
|
||||
&:hover, &:active {
|
||||
opacity: .7;
|
||||
transition: all .6;
|
||||
}
|
||||
&:focus {
|
||||
opacity: .9;
|
||||
transition: all .6;
|
||||
}
|
||||
}
|
||||
$text-color: #303133;
|
||||
$text1-color: #606266;
|
||||
$text2-color: #909399;
|
||||
$text3-color: #C0C4CC;
|
||||
|
|
|
|||
|
|
@ -54,6 +54,48 @@
|
|||
<div class="content unicode" style="display: block;">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">users 用户组</div>
|
||||
<div class="code-name">&#xe6e3;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">3.1 设置</div>
|
||||
<div class="code-name">&#xe600;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">远程费</div>
|
||||
<div class="code-name">&#xe669;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">24gl-userGroup</div>
|
||||
<div class="code-name">&#xeb25;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">后台管理</div>
|
||||
<div class="code-name">&#xe653;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">人员管理</div>
|
||||
<div class="code-name">&#xe62d;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">首页-置灰</div>
|
||||
<div class="code-name">&#xe61d;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">down-circle</div>
|
||||
|
|
@ -78,9 +120,9 @@
|
|||
<pre><code class="language-css"
|
||||
>@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('iconfont.woff2?t=1702534663582') format('woff2'),
|
||||
url('iconfont.woff?t=1702534663582') format('woff'),
|
||||
url('iconfont.ttf?t=1702534663582') format('truetype');
|
||||
src: url('iconfont.woff2?t=1702606581584') format('woff2'),
|
||||
url('iconfont.woff?t=1702606581584') format('woff'),
|
||||
url('iconfont.ttf?t=1702606581584') format('truetype');
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
||||
|
|
@ -106,6 +148,69 @@
|
|||
<div class="content font-class">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-users"></span>
|
||||
<div class="name">
|
||||
users 用户组
|
||||
</div>
|
||||
<div class="code-name">.icon-users
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-31shezhi"></span>
|
||||
<div class="name">
|
||||
3.1 设置
|
||||
</div>
|
||||
<div class="code-name">.icon-31shezhi
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-yuanchengfei"></span>
|
||||
<div class="name">
|
||||
远程费
|
||||
</div>
|
||||
<div class="code-name">.icon-yuanchengfei
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-24gl-userGroup"></span>
|
||||
<div class="name">
|
||||
24gl-userGroup
|
||||
</div>
|
||||
<div class="code-name">.icon-24gl-userGroup
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-houtaiguanli"></span>
|
||||
<div class="name">
|
||||
后台管理
|
||||
</div>
|
||||
<div class="code-name">.icon-houtaiguanli
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-renyuanguanli"></span>
|
||||
<div class="name">
|
||||
人员管理
|
||||
</div>
|
||||
<div class="code-name">.icon-renyuanguanli
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-shouye-zhihui"></span>
|
||||
<div class="name">
|
||||
首页-置灰
|
||||
</div>
|
||||
<div class="code-name">.icon-shouye-zhihui
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-down-circle"></span>
|
||||
<div class="name">
|
||||
|
|
@ -142,6 +247,62 @@
|
|||
<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-users"></use>
|
||||
</svg>
|
||||
<div class="name">users 用户组</div>
|
||||
<div class="code-name">#icon-users</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-31shezhi"></use>
|
||||
</svg>
|
||||
<div class="name">3.1 设置</div>
|
||||
<div class="code-name">#icon-31shezhi</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-yuanchengfei"></use>
|
||||
</svg>
|
||||
<div class="name">远程费</div>
|
||||
<div class="code-name">#icon-yuanchengfei</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-24gl-userGroup"></use>
|
||||
</svg>
|
||||
<div class="name">24gl-userGroup</div>
|
||||
<div class="code-name">#icon-24gl-userGroup</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-houtaiguanli"></use>
|
||||
</svg>
|
||||
<div class="name">后台管理</div>
|
||||
<div class="code-name">#icon-houtaiguanli</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-renyuanguanli"></use>
|
||||
</svg>
|
||||
<div class="name">人员管理</div>
|
||||
<div class="code-name">#icon-renyuanguanli</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-shouye-zhihui"></use>
|
||||
</svg>
|
||||
<div class="name">首页-置灰</div>
|
||||
<div class="code-name">#icon-shouye-zhihui</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-down-circle"></use>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 4373116 */
|
||||
src: url('iconfont.woff2?t=1702534663582') format('woff2'),
|
||||
url('iconfont.woff?t=1702534663582') format('woff'),
|
||||
url('iconfont.ttf?t=1702534663582') format('truetype');
|
||||
src: url('iconfont.woff2?t=1702606581584') format('woff2'),
|
||||
url('iconfont.woff?t=1702606581584') format('woff'),
|
||||
url('iconfont.ttf?t=1702606581584') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
|
|
@ -13,6 +13,34 @@
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-users:before {
|
||||
content: "\e6e3";
|
||||
}
|
||||
|
||||
.icon-31shezhi:before {
|
||||
content: "\e600";
|
||||
}
|
||||
|
||||
.icon-yuanchengfei:before {
|
||||
content: "\e669";
|
||||
}
|
||||
|
||||
.icon-24gl-userGroup:before {
|
||||
content: "\eb25";
|
||||
}
|
||||
|
||||
.icon-houtaiguanli:before {
|
||||
content: "\e653";
|
||||
}
|
||||
|
||||
.icon-renyuanguanli:before {
|
||||
content: "\e62d";
|
||||
}
|
||||
|
||||
.icon-shouye-zhihui:before {
|
||||
content: "\e61d";
|
||||
}
|
||||
|
||||
.icon-down-circle:before {
|
||||
content: "\e77f";
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -5,6 +5,55 @@
|
|||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "8474410",
|
||||
"name": "users 用户组",
|
||||
"font_class": "users",
|
||||
"unicode": "e6e3",
|
||||
"unicode_decimal": 59107
|
||||
},
|
||||
{
|
||||
"icon_id": "201646",
|
||||
"name": "3.1 设置",
|
||||
"font_class": "31shezhi",
|
||||
"unicode": "e600",
|
||||
"unicode_decimal": 58880
|
||||
},
|
||||
{
|
||||
"icon_id": "1793613",
|
||||
"name": "远程费",
|
||||
"font_class": "yuanchengfei",
|
||||
"unicode": "e669",
|
||||
"unicode_decimal": 58985
|
||||
},
|
||||
{
|
||||
"icon_id": "7596821",
|
||||
"name": "24gl-userGroup",
|
||||
"font_class": "24gl-userGroup",
|
||||
"unicode": "eb25",
|
||||
"unicode_decimal": 60197
|
||||
},
|
||||
{
|
||||
"icon_id": "8948997",
|
||||
"name": "后台管理",
|
||||
"font_class": "houtaiguanli",
|
||||
"unicode": "e653",
|
||||
"unicode_decimal": 58963
|
||||
},
|
||||
{
|
||||
"icon_id": "17730149",
|
||||
"name": "人员管理",
|
||||
"font_class": "renyuanguanli",
|
||||
"unicode": "e62d",
|
||||
"unicode_decimal": 58925
|
||||
},
|
||||
{
|
||||
"icon_id": "33986999",
|
||||
"name": "首页-置灰",
|
||||
"font_class": "shouye-zhihui",
|
||||
"unicode": "e61d",
|
||||
"unicode_decimal": 58909
|
||||
},
|
||||
{
|
||||
"icon_id": "4765729",
|
||||
"name": "down-circle",
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,167 @@
|
|||
<template>
|
||||
<div class="user-info-part">
|
||||
<div class="header-box">
|
||||
<h3>个人信息</h3>
|
||||
<el-icon @click="close">
|
||||
<Close />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="custom-tabs">
|
||||
<div class="tabs-item" v-for="(item, index) in ['基础信息', '安全信息']" :key="item"
|
||||
:class="{ 'active': tabActive === index }" @click="tabActive = index">{{ item }}</div>
|
||||
</div>
|
||||
<el-form ref="formRef" :model="formData" :rules="rules" label-width="100">
|
||||
<template v-if="tabActive === 0">
|
||||
<el-upload action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :limit="1"
|
||||
:show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
|
||||
<img v-if="formData.avatar" :src="formData.avatar" class="avatar" />
|
||||
<img v-else src="@/assets/imgs/home/avatar.png" class="avatar" />
|
||||
</el-upload>
|
||||
<el-form-item label="用户名" prop="account">
|
||||
<el-input v-model="formData.account" disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="电话" prop="phone">
|
||||
<el-input v-model="formData.phone" placeholder="请输入手机号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入姓名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="mailbox">
|
||||
<el-input v-model="formData.mailbox" placeholder="请输入邮箱"></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input v-model="formData.password" type="password" placeholder="请输入密码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" prop="newPassword">
|
||||
<el-input v-model="formData.newPassword" type="password" placeholder="请输入新密码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="confirmPassword">
|
||||
<el-input v-model="formData.confirmPassword" type="password" placeholder="请输入新密码"></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
<div class="submit-box">
|
||||
<el-button type="primary" @click="submitForm">{{ tabActive === 0 ? '更新个人信息' : '修改密码' }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import type { UploadProps } from 'element-plus'
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
const formRef = ref()
|
||||
|
||||
const validatePassword = (rule: any, value: any, callback: any) => {
|
||||
if (formData.value.newPassword !== formData.value.confirmPassword) {
|
||||
callback(new Error('两次密码不一致'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
const rules = reactive({
|
||||
phone: [
|
||||
{ required: true, message: '请输入手机号', trigger: 'blur' },
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
||||
],
|
||||
mailbox: [
|
||||
{ type: 'email', message: '邮箱格式不正确', trigger: ['blur', 'change'] },
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||
],
|
||||
newPassword: [
|
||||
{ required: true, message: '请选择新密码', trigger: 'blur' },
|
||||
{ validator: validatePassword, trigger: 'blur' }
|
||||
],
|
||||
confirmPassword: [
|
||||
{ required: true, message: '请选择新密码', trigger: 'blur' },
|
||||
{ validator: validatePassword, trigger: 'blur' }
|
||||
]
|
||||
})
|
||||
const tabActive = ref(0)
|
||||
const formData = ref({
|
||||
avatar: '',
|
||||
account: '',
|
||||
phone: '',
|
||||
name: '',
|
||||
mailbox: '',
|
||||
password: '',
|
||||
newPassword: '',
|
||||
confirmPassword: ''
|
||||
})
|
||||
|
||||
const close = () => {
|
||||
emit('close')
|
||||
}
|
||||
const handleAvatarSuccess: UploadProps['onSuccess'] = (
|
||||
response,
|
||||
uploadFile
|
||||
) => {
|
||||
formData.value.avatar = URL.createObjectURL(uploadFile.raw!)
|
||||
}
|
||||
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
|
||||
if (rawFile.type !== 'image/jpeg') {
|
||||
ElMessage.error('图片必须为jpg格式!')
|
||||
return false
|
||||
} else if (rawFile.size / 1024 / 1024 > 2) {
|
||||
ElMessage.error('图片大小不得超过2MB!')
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
const submitForm = async () => {
|
||||
await formRef.value.validate((valid: any, fields: any) => {
|
||||
if (valid) {
|
||||
console.log('submit!')
|
||||
ElMessage.success('更新成功')
|
||||
close()
|
||||
} else {
|
||||
console.log('error submit!', fields)
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.user-info-part {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 30px;
|
||||
|
||||
.header-box {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
h3 {
|
||||
color: $main-color;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
cursor: pointer;
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
img.avatar {
|
||||
width: 128px;
|
||||
height: 148px;
|
||||
object-fit: contain;
|
||||
margin: 0 0 20px 50px;
|
||||
}
|
||||
.submit-box {
|
||||
padding-left: 50px ;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -12,6 +12,8 @@ import 'slider-verify-v3/lib/SliderVerify.css'
|
|||
import 'element-plus/dist/index.css';
|
||||
import './assets/css/global.scss';
|
||||
import './assets/font/iconfont.css';
|
||||
import '@/assets/css/custom-element.scss'
|
||||
import '@/assets/css/animastore.css'
|
||||
|
||||
const pinia = createPinia()
|
||||
const app = createApp(main)
|
||||
|
|
|
|||
|
|
@ -13,16 +13,37 @@ const router = createRouter({
|
|||
{
|
||||
path: '/',
|
||||
redirect: '/home',
|
||||
component: () => import('@/views/index.vue'),
|
||||
children: [
|
||||
{
|
||||
path: '/home',
|
||||
name: '首页',
|
||||
component: () => import('@/views/home/home.vue'),
|
||||
},
|
||||
{
|
||||
path: '/permissions-manage',
|
||||
name: '权限管理',
|
||||
component: () => import('@/views/permissions-manage/permissions-manage.vue'),
|
||||
},
|
||||
{
|
||||
path: '/patients-manage',
|
||||
name: '患者管理',
|
||||
component: () => import('@/views/patients-manage/patients-manage.vue'),
|
||||
},
|
||||
{
|
||||
path: '/remote-manage',
|
||||
name: '远程管理',
|
||||
component: () => import('@/views/remote-manage/remote-manage.vue'),
|
||||
},
|
||||
{
|
||||
path: '/system-manage',
|
||||
name: '后台管理',
|
||||
component: () => import('@/views/system-manage/system-manage.vue'),
|
||||
},
|
||||
{
|
||||
path: '/logs-manage',
|
||||
name: '日志管理',
|
||||
component: () => import('@/views/logs-manage/logs-manage.vue'),
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,44 +1,11 @@
|
|||
import Mock from 'mockjs'
|
||||
|
||||
var template = {
|
||||
'title': 'Syntax Demo',
|
||||
|
||||
'string1|1-10': '★',
|
||||
'string2|3': 'value',
|
||||
|
||||
'number1|+1': 100,
|
||||
'number2|1-100': 100,
|
||||
'number3|1-100.1-10': 1,
|
||||
'number4|123.1-10': 1,
|
||||
'number5|123.3': 1,
|
||||
'number6|123.10': 1.123,
|
||||
|
||||
'boolean1|1': true,
|
||||
'boolean2|1-2': true,
|
||||
|
||||
'object1|2-4': {
|
||||
'110000': '北京市',
|
||||
'120000': '天津市',
|
||||
'130000': '河北省',
|
||||
'140000': '山西省'
|
||||
},
|
||||
'object2|2': {
|
||||
'310000': '上海市',
|
||||
'320000': '江苏省',
|
||||
'330000': '浙江省',
|
||||
'340000': '安徽省'
|
||||
},
|
||||
|
||||
'array1|1': ['AMD', 'CMD', 'KMD', 'UMD'],
|
||||
'array2|1-10': ['Mock.js'],
|
||||
'array3|3': ['Mock.js'],
|
||||
|
||||
'function': function () {
|
||||
return this.title
|
||||
}
|
||||
export const getHospitalsData = () => {
|
||||
const hospitals = []
|
||||
hospitals.push({ label: '北京朝阳医院', value: '北京朝阳医院' })
|
||||
hospitals.push({ label: '北京朝阳医院1', value: '北京朝阳医院1' })
|
||||
hospitals.push({ label: '北京朝阳医院2', value: '北京朝阳医院2' })
|
||||
return hospitals
|
||||
}
|
||||
|
||||
var data = []
|
||||
data.push(Mock.mock(template))
|
||||
data.push(Mock.mock(template))
|
||||
console.log(data)
|
||||
export const getPhoneAreasData = () => {
|
||||
return ['中国 +86']
|
||||
}
|
||||
|
|
@ -5,8 +5,11 @@ export const useLoginStore = defineStore('login', {
|
|||
state: () => {
|
||||
return {
|
||||
login: {
|
||||
isLogin: false,
|
||||
name: ''
|
||||
isLogin: true,
|
||||
account: 'admin',
|
||||
name: '管理员',
|
||||
permissions: '超级管理员',
|
||||
hospital: '北京第一医院'
|
||||
} as any
|
||||
}
|
||||
},
|
||||
|
|
@ -18,6 +21,9 @@ export const useLoginStore = defineStore('login', {
|
|||
},
|
||||
setlogin(key: string, e: any) {
|
||||
this.login[key] = e
|
||||
},
|
||||
logout() {
|
||||
this.login.isLogin = false
|
||||
}
|
||||
},
|
||||
})
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
/**
|
||||
* 格式化时间
|
||||
* @returns
|
||||
*/
|
||||
export function dateFormater(formater: string, time?: any) {
|
||||
let date = time ? new Date(time) : new Date(),
|
||||
Y = date.getFullYear() + '',
|
||||
M = date.getMonth() + 1,
|
||||
D = date.getDate(),
|
||||
H = date.getHours(),
|
||||
m = date.getMinutes(),
|
||||
s = date.getSeconds();
|
||||
return formater
|
||||
.replace(/YYYY|yyyy/g, Y)
|
||||
.replace(/YY|yy/g, Y.substr(2, 2))
|
||||
.replace(/MM/g, (M < 10 ? '0' : '') + M)
|
||||
.replace(/DD|dd/g, (D < 10 ? '0' : '') + D)
|
||||
.replace(/HH|hh/g, (H < 10 ? '0' : '') + H)
|
||||
.replace(/mm/g, (m < 10 ? '0' : '') + m)
|
||||
.replace(/ss/g, (s < 10 ? '0' : '') + s);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取指定月份天数
|
||||
* @param {*} time
|
||||
* @returns
|
||||
*/
|
||||
export function getMonthDays(time) {
|
||||
if (!time) time = new Date();
|
||||
const now = new Date(time);
|
||||
const year = now.getFullYear();
|
||||
const month = now.getMonth() + 1;
|
||||
|
||||
const isLeapYear = (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
|
||||
|
||||
const daysInMonth = month === 2
|
||||
? isLeapYear ? 29 : 28
|
||||
: month === 4 || month === 6 || month === 9 || month === 11
|
||||
? 30
|
||||
: 31;
|
||||
|
||||
return daysInMonth;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前日期的周几 i:1,2,3,4,5,6,7
|
||||
* @returns
|
||||
*/
|
||||
export function getFirstDayOfWeek(date: Date, i: number) {
|
||||
if (i < 1 || i > 7) {
|
||||
return null;
|
||||
}
|
||||
const day = date.getDay() || 7;
|
||||
return new Date(date.getFullYear(), date.getMonth(), date.getDate() + i - day);
|
||||
}
|
||||
|
|
@ -1,14 +1,98 @@
|
|||
<template>
|
||||
<div class="home-page">
|
||||
<div class="background-box">
|
||||
<div class="left-content">
|
||||
<div class="header-box">
|
||||
<div class="header-item">
|
||||
<span class="main-color f20" style="font-weight: 600;">{{ userInfo.name }}</span>
|
||||
<span class="text2-color f14">{{ userInfo.permissions }}</span>
|
||||
</div>
|
||||
<div class="header-item">
|
||||
<el-icon class="text1-color" style="font-size: 26px;margin-right: 20px;"><Calendar /></el-icon>
|
||||
<div>
|
||||
首页
|
||||
<p class="text1-color f14">待办任务</p>
|
||||
<p class="main-color f20">{{ total }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echart-box">
|
||||
<div class="echart-item"><NumberChart/></div>
|
||||
<div class="echart-item"><TimeChart/></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-content">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||||
import { useLoginStore } from '@/stores/user-info-store'
|
||||
import NumberChart from "./number-chart.vue";
|
||||
import TimeChart from "./time-chart.vue";
|
||||
|
||||
const userInfo = useLoginStore().getlogin()
|
||||
|
||||
const total = ref(0) // 日历添加的记录提醒统计
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.home-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 15px;
|
||||
|
||||
</style>
|
||||
.background-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
padding: 20px 35px;
|
||||
}
|
||||
|
||||
.left-content {
|
||||
width: calc(100% - 550px);
|
||||
height: 100%;
|
||||
.header-box {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.header-item {
|
||||
width: calc(50% - 10px);
|
||||
height: 100%;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 5px;
|
||||
padding: 0 90px;
|
||||
line-height: 1.5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
& ~ .header-item {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.echart-box {
|
||||
width: 100%;
|
||||
height: calc(100% - 160px);
|
||||
margin-top: 20px;
|
||||
.echart-item {
|
||||
width: 100%;
|
||||
height: calc(50% - 20px);
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-content {
|
||||
width: 530px;
|
||||
height: 100%;
|
||||
}
|
||||
}</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,177 @@
|
|||
<template>
|
||||
<div class="chart-box">
|
||||
<div class="date-btn text-color">
|
||||
<div :class="{'text2-color': calcTime(upMonth)}" @click="getData(upMonth)">
|
||||
<p>{{ dateFormater('yyyy年MM月', upMonth) }}</p>
|
||||
<el-icon><ArrowLeft /></el-icon>
|
||||
</div>
|
||||
<div :class="{'text2-color': calcTime(downMonth)}" style="text-align: right;" @click="getData(downMonth)">
|
||||
<p>{{ dateFormater('yyyy年MM月', downMonth) }}</p>
|
||||
<el-icon><ArrowRight /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="chartDom" class="chart-dom"></div>
|
||||
<div class="total">
|
||||
<span class="f18">总计<br>手术<br>数量:</span>
|
||||
<span style="font-size: 24px;font-weight: 600;">{{ total }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||||
import * as echarts from 'echarts';
|
||||
import { dateFormater, getMonthDays } from '@/utils/date-util';
|
||||
|
||||
const chartDom = ref()
|
||||
|
||||
const currentMonth = ref(new Date())
|
||||
const upMonth = ref()
|
||||
const downMonth = ref()
|
||||
const total = ref(0)
|
||||
|
||||
onMounted(() => {
|
||||
getData(new Date())
|
||||
})
|
||||
|
||||
// 大于当前时间返回 true
|
||||
function calcTime(time: any) {
|
||||
return Boolean(new Date().getTime() < new Date(time).getTime())
|
||||
}
|
||||
function initChart(chartData: any) {
|
||||
const chart = echarts.init(chartDom.value as HTMLElement);
|
||||
chart.clear();
|
||||
const option = {
|
||||
color: [],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: (params: any) => {
|
||||
return dateFormater('yyyy年MM月', currentMonth.value) + params[0].axisValue + '<br>手术数量 <b>' + params[0].value + '</b> 台'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 50,
|
||||
bottom: 5,
|
||||
top: 50,
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
name: '日期',
|
||||
show: true,
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
nameTextStyle: { color: '#303133' },
|
||||
axisLine: { show: true, lineStyle: { color: '#006080', width: 2 } },
|
||||
axisTick: { show: false },
|
||||
axisLabel: { show: true, interval: chartData.xData.length - 2 },
|
||||
splitLine: { show: true, lineStyle: { color: 'rgba(0, 96, 128, .05)', width: 1, type: 'solid' } },
|
||||
data: chartData.xData,
|
||||
},
|
||||
yAxis: {
|
||||
name: '手术数量/台',
|
||||
show: true,
|
||||
type: 'value',
|
||||
min: 0,
|
||||
nameTextStyle: { color: '#303133', align: 'left', verticalAlign: 'top', padding: [0, 20] },
|
||||
axisLine: { show: true, lineStyle: { color: '#006080', width: 2 } },
|
||||
axisTick: { show: false },
|
||||
axisLabel: { show: false },
|
||||
splitLine: { show: false, lineStyle: { color: '#D4E8F0', width: 1, type: 'solid' } },
|
||||
},
|
||||
series: [{
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
color: 'rgb(0, 96, 128)',
|
||||
width: 2,
|
||||
shadowColor: 'rgba(0, 96, 128, .3)',
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 20
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(0, 96, 128, 1)'
|
||||
}, {
|
||||
offset: 0.8,
|
||||
color: 'rgba(255, 255, 255, 0.1)'
|
||||
}], false)
|
||||
},
|
||||
data: chartData.data
|
||||
}],
|
||||
};
|
||||
chart.setOption(option);
|
||||
chart.resize();
|
||||
window.addEventListener('resize', () => {
|
||||
chart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
const getData = (date: any) => {
|
||||
currentMonth.value = new Date(date)
|
||||
upMonth.value = new Date(currentMonth.value.getFullYear(), currentMonth.value.getMonth() - 1, 1)
|
||||
downMonth.value = new Date(currentMonth.value.getFullYear(), currentMonth.value.getMonth() + 1, 1)
|
||||
const days = getMonthDays(currentMonth.value)
|
||||
const xData = []
|
||||
const data = []
|
||||
let num = 0
|
||||
for (let i = 0; i < days; i++) {
|
||||
xData.push((i < 9 ? '0' : '') + (i + 1))
|
||||
data.push(Math.ceil(Math.random() * 10))
|
||||
num += data[i]
|
||||
}
|
||||
total.value = num
|
||||
initChart({ xData, data })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.chart-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.date-btn {
|
||||
position: absolute;
|
||||
height: 50px;
|
||||
top: 0;
|
||||
left: 20px;
|
||||
right: 230px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
z-index: 1;
|
||||
&>div {
|
||||
cursor: pointer;
|
||||
p {
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chart-dom {
|
||||
width: calc(100% - 180px);
|
||||
height: 100%;
|
||||
}
|
||||
.total {
|
||||
flex-shrink: 0;
|
||||
width: 160px;
|
||||
height: 80%;
|
||||
border: 2px solid $main-color;
|
||||
border-radius: 5px;
|
||||
background: rgba($main-color, .1);
|
||||
color: $main-color;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
span {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,177 @@
|
|||
<template>
|
||||
<div class="chart-box">
|
||||
<div class="date-btn text-color">
|
||||
<div :class="{'text2-color': calcTime(upMonth)}" @click="getData(upMonth)">
|
||||
<p>{{ dateFormater('yyyy年MM月', upMonth) }}</p>
|
||||
<el-icon><ArrowLeft /></el-icon>
|
||||
</div>
|
||||
<div :class="{'text2-color': calcTime(downMonth)}" style="text-align: right;" @click="getData(downMonth)">
|
||||
<p>{{ dateFormater('yyyy年MM月', downMonth) }}</p>
|
||||
<el-icon><ArrowRight /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="chartDom" class="chart-dom"></div>
|
||||
<div class="total">
|
||||
<span class="f18">总计<br>手术<br>时长:</span>
|
||||
<span style="font-size: 24px;font-weight: 600;">{{ total.toFixed(0) }}h<br>{{ Number((total % 1).toFixed(1)) * 60 }}min</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||||
import * as echarts from 'echarts';
|
||||
import { dateFormater, getMonthDays } from '@/utils/date-util';
|
||||
|
||||
const chartDom = ref()
|
||||
|
||||
const currentMonth = ref(new Date())
|
||||
const upMonth = ref()
|
||||
const downMonth = ref()
|
||||
const total = ref(0)
|
||||
|
||||
onMounted(() => {
|
||||
getData(new Date())
|
||||
})
|
||||
|
||||
// 大于当前时间返回 true
|
||||
function calcTime(time: any) {
|
||||
return Boolean(new Date().getTime() < new Date(time).getTime())
|
||||
}
|
||||
function initChart(chartData: any) {
|
||||
const chart = echarts.init(chartDom.value as HTMLElement);
|
||||
chart.clear();
|
||||
const option = {
|
||||
color: [],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: (params: any) => {
|
||||
return dateFormater('yyyy年MM月', currentMonth.value) + params[0].axisValue + '<br>手术时长 <b>' + params[0].value + '</b> h'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 50,
|
||||
bottom: 5,
|
||||
top: 50,
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
name: '日期',
|
||||
show: true,
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
nameTextStyle: { color: '#303133' },
|
||||
axisLine: { show: true, lineStyle: { color: '#D58301', width: 2 } },
|
||||
axisTick: { show: false },
|
||||
axisLabel: { show: true, interval: chartData.xData.length - 2 },
|
||||
splitLine: { show: true, lineStyle: { color: 'rgba(212, 130, 1, .05)', width: 1, type: 'solid' } },
|
||||
data: chartData.xData,
|
||||
},
|
||||
yAxis: {
|
||||
name: '手术时长/h',
|
||||
show: true,
|
||||
type: 'value',
|
||||
min: 0,
|
||||
nameTextStyle: { color: '#303133', align: 'left', verticalAlign: 'top', padding: [0, 20] },
|
||||
axisLine: { show: true, lineStyle: { color: '#D58301', width: 2 } },
|
||||
axisTick: { show: false },
|
||||
axisLabel: { show: false },
|
||||
splitLine: { show: false, lineStyle: { color: '#D4E8F0', width: 1, type: 'solid' } },
|
||||
},
|
||||
series: [{
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
color: 'rgb(212, 130, 1)',
|
||||
width: 2,
|
||||
shadowColor: 'rgba(212, 130, 1, .3)',
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 20
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(212, 130, 1, 1)'
|
||||
}, {
|
||||
offset: 0.8,
|
||||
color: 'rgba(255, 255, 255, 0.1)'
|
||||
}], false)
|
||||
},
|
||||
data: chartData.data
|
||||
}],
|
||||
};
|
||||
chart.setOption(option);
|
||||
chart.resize();
|
||||
window.addEventListener('resize', () => {
|
||||
chart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
const getData = (date: any) => {
|
||||
currentMonth.value = new Date(date)
|
||||
upMonth.value = new Date(currentMonth.value.getFullYear(), currentMonth.value.getMonth() - 1, 1)
|
||||
downMonth.value = new Date(currentMonth.value.getFullYear(), currentMonth.value.getMonth() + 1, 1)
|
||||
const days = getMonthDays(currentMonth.value)
|
||||
const xData = []
|
||||
const data = []
|
||||
let num = 0
|
||||
for (let i = 0; i < days; i++) {
|
||||
xData.push((i < 9 ? '0' : '') + (i + 1))
|
||||
data.push( Number( (Math.random() * 16 + 2).toFixed(1) ) )
|
||||
num += data[i]
|
||||
}
|
||||
total.value = Number(num.toFixed(1))
|
||||
initChart({ xData, data })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.chart-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.date-btn {
|
||||
position: absolute;
|
||||
height: 50px;
|
||||
top: 0;
|
||||
left: 20px;
|
||||
right: 230px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
z-index: 1;
|
||||
&>div {
|
||||
cursor: pointer;
|
||||
p {
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chart-dom {
|
||||
width: calc(100% - 180px);
|
||||
height: 100%;
|
||||
}
|
||||
.total {
|
||||
flex-shrink: 0;
|
||||
width: 160px;
|
||||
height: 80%;
|
||||
border: 2px solid #D58301;
|
||||
border-radius: 5px;
|
||||
background: rgba(#D58301, .1);
|
||||
color: #D58301;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
span {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,14 +1,231 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="page-content">
|
||||
<div class="head-box">
|
||||
<div class="logo-box">
|
||||
<img src="@/assets/imgs/logo.png" />
|
||||
</div>
|
||||
<ul class="menu-box">
|
||||
<li class="menu-item" v-for="item in menus" :key="item.path" :class="{ 'active': menuActive === item.path }"
|
||||
@click="menuToPath(item)"><i :class="item.icon"></i><span>{{ item.label
|
||||
}}</span></li>
|
||||
</ul>
|
||||
<div class="user-box">
|
||||
<!-- 超级管理员可切换医院 -->
|
||||
<el-select v-if="userInfo.permissions === '超级管理员'" class="select-hospital"
|
||||
:model-value="userInfo.hospital" size="small" @change="selectHospital">
|
||||
<el-option v-for="item in hospitals" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<span v-else class="area">{{ userInfo.hospital }}</span>
|
||||
<el-button text>
|
||||
<el-icon>
|
||||
<Search />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<el-button text>
|
||||
<el-badge is-dot>
|
||||
<el-icon>
|
||||
<Bell />
|
||||
</el-icon>
|
||||
</el-badge>
|
||||
</el-button>
|
||||
<el-button text @click="toggleFullscreen">
|
||||
<el-icon>
|
||||
<FullScreen />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<el-dropdown trigger="click" @command="userCommand">
|
||||
<span class="el-dropdown-link">
|
||||
{{ userInfo.name }}
|
||||
<el-icon class="el-icon--right">
|
||||
<arrow-down />
|
||||
</el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="info">个人信息</el-dropdown-item>
|
||||
<el-dropdown-item command="logout">退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-content">
|
||||
<RouterView />
|
||||
</div>
|
||||
<el-drawer v-model="isShowUserInfoDrawer" title="I am the title" :with-header="false">
|
||||
<userInfoForm @close="isShowUserInfoDrawer = false" />
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { useLoginStore } from '@/stores/user-info-store'
|
||||
import { getHospitalsData } from '@/static-data/core'
|
||||
import userInfoForm from '@/components/user-info.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
const userInfo = useLoginStore().getlogin()
|
||||
const hospitals: any = getHospitalsData()
|
||||
|
||||
const menus = [
|
||||
{ label: '首页', path: '/home', icon: 'icon-shouye-zhihui' },
|
||||
{ label: '权限管理', path: '/permissions-manage', icon: 'icon-24gl-userGroup' },
|
||||
{ label: '患者管理', path: '/patients-manage', icon: 'icon-renyuanguanli' },
|
||||
{ label: '远程管理', path: '/remote-manage', icon: 'icon-yuanchengfei' },
|
||||
{ label: '后台管理', path: '/system-manage', icon: 'icon-houtaiguanli' },
|
||||
{ label: '日志管理', path: '/logs-manage', icon: 'icon-31shezhi' }
|
||||
]
|
||||
|
||||
const isShowUserInfoDrawer = ref(false)
|
||||
const menuActive = ref('/home')
|
||||
|
||||
router.isReady().then(() => {
|
||||
console.log(route)
|
||||
menuActive.value = route.path
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
|
||||
const menuToPath = (e: any) => {
|
||||
menuActive.value = e.path
|
||||
router.push(e.path)
|
||||
}
|
||||
// 切换医院
|
||||
const selectHospital = (e: any) => {
|
||||
// 根据实际情况看是否需要重新登录
|
||||
ElMessageBox.confirm(
|
||||
'是否跳转到登录页面登录到所选择医院？',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'success',
|
||||
}
|
||||
).then(() => {
|
||||
useLoginStore().setlogin('hospital', e)
|
||||
router.push('/login')
|
||||
}).catch(() => { })
|
||||
}
|
||||
const toggleFullscreen = () => {
|
||||
if (document.fullscreenElement) {
|
||||
document.exitFullscreen();
|
||||
} else {
|
||||
document.documentElement.requestFullscreen();
|
||||
}
|
||||
}
|
||||
const userCommand = (e: string) => {
|
||||
switch (e) {
|
||||
case 'logout':
|
||||
useLoginStore().logout()
|
||||
router.push('/login')
|
||||
break;
|
||||
case 'info':
|
||||
isShowUserInfoDrawer.value = true
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.page-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.head-box {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
padding: 0 24px;
|
||||
background: white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.logo-box {
|
||||
height: 100%;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.menu-item {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: $main-color;
|
||||
line-height: 50px;
|
||||
padding: 0 20px;
|
||||
margin: 0;
|
||||
transition: all .3s;
|
||||
-webkit-transition: all .3s;
|
||||
|
||||
&:hover {
|
||||
background: #F5F7FA;
|
||||
transition: all .3s;
|
||||
-webkit-transition: all .3s;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: rgba($main-color, .1);
|
||||
}
|
||||
|
||||
img {
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.select-hospital {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.area {
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: $main-color;
|
||||
line-height: 1.6;
|
||||
padding: 0 20px;
|
||||
border: 1px solid #8c9094;
|
||||
border-radius: 7px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
&>.el-button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&>.el-dropdown {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.el-dropdown-link {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
&>.main-content {
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
background: #f5f7fa;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,20 @@
|
|||
<template>
|
||||
<div class="login-page">
|
||||
<div class="left-content"></div>
|
||||
<div class="left-content move_4"></div>
|
||||
<div class="right-content">
|
||||
<div class="select-hospital">
|
||||
<el-select v-model="currentHospital" size="small" @change="selectHospital">
|
||||
<div class="select-hospital-box">
|
||||
<el-select class="select-hospital" v-model="currentHospital" size="small" @change="selectHospital">
|
||||
<el-option v-for="item in hospitals" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<img v-show="!isShowRegister" class="logo" src="@/assets/imgs/logo.png">
|
||||
<div class="login-block" v-if="!isShowRegister">
|
||||
<img v-show="!isShowRegister" class="logo move_2" src="@/assets/imgs/logo.png">
|
||||
<div v-if="!isShowRegister" class="login-block move_2">
|
||||
<div class="login-way">
|
||||
<span :class="passwordLogin && 'active'" @click="passwordLogin = true">密码登录</span>
|
||||
<span :class="!passwordLogin && 'active'" @click="passwordLogin = false">验证码登录</span>
|
||||
</div>
|
||||
<el-form ref="loginFormRef" :model="loginParams" :rules="loginRules" label-width="0" size="small"
|
||||
status-icon>
|
||||
<el-form ref="loginFormRef" :model="loginParams" :rules="loginRules" label-width="0" size="small">
|
||||
<div class="login-form password-login" v-if="passwordLogin">
|
||||
<el-form-item prop="account">
|
||||
<el-input v-model="loginParams.account" placeholder="请输入用户名">
|
||||
|
|
@ -40,11 +39,11 @@
|
|||
</div>
|
||||
<div class="login-form code-login" v-else>
|
||||
<el-form-item prop="phone">
|
||||
<el-input v-model="loginParams.phone" type="password" placeholder="请输入手机号">
|
||||
<el-input v-model="loginParams.phone" placeholder="请输入手机号">
|
||||
<template #prepend>
|
||||
<div @click.stop style="display: flex;align-items: center;">
|
||||
<el-dropdown @command="selectPhoneArea">
|
||||
<span>{{ loginParams.phoneArea }}<el-icon>
|
||||
<span style="color: #909399;">{{ loginParams.phoneArea }}<el-icon>
|
||||
<DCaret />
|
||||
</el-icon></span>
|
||||
<template #dropdown>
|
||||
|
|
@ -59,7 +58,7 @@
|
|||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code">
|
||||
<el-input v-model="loginParams.code" placeholder="">
|
||||
<el-input v-model="loginParams.code" placeholder="请输入6位短信验证码">
|
||||
<template #append>
|
||||
<span class="send-btn" @click="sendCode">{{ loginParams.sendText }}</span>
|
||||
</template>
|
||||
|
|
@ -69,14 +68,13 @@
|
|||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div v-else class="register-block">
|
||||
<div v-else class="register-block move_2">
|
||||
<div class="header-box">
|
||||
<span class="title">新用户申请</span>
|
||||
<el-icon @click="isShowRegister = false"><Close /></el-icon>
|
||||
</div>
|
||||
|
||||
<el-form ref="registerFormRef" :model="registerParams" :rules="registerRules" label-width="100"
|
||||
status-icon>
|
||||
<el-form ref="registerFormRef" :model="registerParams" :rules="registerRules" label-width="100">
|
||||
<el-form-item label="用户名" prop="account">
|
||||
<el-input v-model="registerParams.account" placeholder="请输入用户名"></el-input>
|
||||
</el-form-item>
|
||||
|
|
@ -90,7 +88,7 @@
|
|||
<el-input v-model="registerParams.phone" type placeholder="请输入手机号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="医院" prop="hospital">
|
||||
<el-select v-model="registerParams.hospital">
|
||||
<el-select v-model="registerParams.hospital" style="width: 100%;">
|
||||
<el-option v-for="item in hospitals" :key="item.value" :label="item.label"
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
|
|
@ -101,15 +99,15 @@
|
|||
<el-radio label="女" />
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="验证码" prop="phone">
|
||||
<el-input v-model="registerParams.phone" type placeholder="请输入验证码"></el-input>
|
||||
<img src="" />
|
||||
<el-form-item label="验证码" prop="code">
|
||||
<el-input v-model="registerParams.code" type placeholder="请输入验证码" style="width: calc(100% - 110px);"></el-input>
|
||||
<img width="100" height="32" style="margin-left: 10px;" src="" />
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<div class="footer-box">
|
||||
<el-button type="primary">注 册</el-button>
|
||||
<span @click="isShowRegister = false">已有账号？</span>
|
||||
<el-button type="primary" @click="register">注 册</el-button>
|
||||
<span @click="isShowRegister = false">已有账号?</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -122,13 +120,14 @@
|
|||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { useLoginStore } from '@/stores/user-info-store'
|
||||
import { getHospitalsData, getPhoneAreasData } from '@/static-data/core'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const hospitals: any = []
|
||||
const phoneAreas: any = ['中国 +86']
|
||||
const hospitals: any = getHospitalsData()
|
||||
const phoneAreas: any = getPhoneAreasData()
|
||||
|
||||
const loginRules = reactive({
|
||||
account: [
|
||||
|
|
@ -168,7 +167,7 @@ const registerRules = reactive({
|
|||
const loginFormRef = ref()
|
||||
const registerFormRef = ref()
|
||||
const slideVerifyRef = ref()
|
||||
const currentHospital = ref('')
|
||||
const currentHospital = ref(useLoginStore().getlogin().hospital)
|
||||
const isShowRegister = ref(false)
|
||||
const passwordLogin = ref(true)
|
||||
const loginParams = ref({
|
||||
|
|
@ -178,6 +177,7 @@ const loginParams = ref({
|
|||
phoneArea: phoneAreas[0],
|
||||
code: '',
|
||||
isSendCode: false,
|
||||
sendTimer: 0,
|
||||
sendText: '获取短信验证码'
|
||||
})
|
||||
const registerParams = ref({
|
||||
|
|
@ -191,27 +191,51 @@ const registerParams = ref({
|
|||
})
|
||||
const sliderVConf = ref({
|
||||
isShowSelf: false,
|
||||
width: 500,
|
||||
width: 400,
|
||||
height: 200
|
||||
})
|
||||
|
||||
hospitals.push({ label: '北京朝阳医院', value: '北京朝阳医院' })
|
||||
hospitals.push({ label: '北京朝阳医院1', value: '北京朝阳医院1' })
|
||||
hospitals.push({ label: '北京朝阳医院2', value: '北京朝阳医院2' })
|
||||
currentHospital.value = hospitals[0].value
|
||||
|
||||
|
||||
const selectHospital = (e: string) => {
|
||||
console.log(e)
|
||||
}
|
||||
const register = () => {
|
||||
|
||||
const register = async () => {
|
||||
await registerFormRef.value.validate((valid: any, fields: any) => {
|
||||
if (valid) {
|
||||
ElMessageBox.confirm(
|
||||
'注册成功，是否登录？',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'success',
|
||||
}
|
||||
).then(() => {
|
||||
toHome()
|
||||
}).catch(() => { })
|
||||
} else {
|
||||
console.log('error submit!', fields)
|
||||
}
|
||||
})
|
||||
}
|
||||
const selectPhoneArea = (e: string) => {
|
||||
loginParams.value.phoneArea = e
|
||||
}
|
||||
const sendCode = () => {
|
||||
if(loginParams.value.isSendCode) return
|
||||
let num = 60
|
||||
ElMessage.success('发送成功！')
|
||||
loginParams.value.isSendCode = true
|
||||
loginParams.value.sendText = '请' + num + '秒后重新发送'
|
||||
loginParams.value.sendTimer = setInterval(() => {
|
||||
num--
|
||||
if(num > 0) {
|
||||
loginParams.value.sendText = '请' + num + '秒后重新发送'
|
||||
}else {
|
||||
loginParams.value.isSendCode = false
|
||||
loginParams.value.sendText = '重新获取短信验证码'
|
||||
clearInterval(loginParams.value.sendTimer)
|
||||
}
|
||||
|
||||
}, 1000);
|
||||
}
|
||||
const login = async (type: string) => {
|
||||
const obj = loginParams.value
|
||||
|
|
@ -253,26 +277,10 @@ const toHome = () => {
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.select-hospital {
|
||||
.select-hospital-box {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: 50px;
|
||||
|
||||
:deep(.el-select) {
|
||||
width: auto;
|
||||
|
||||
.el-input__wrapper {
|
||||
padding: 1px 12px;
|
||||
border-radius: 20px;
|
||||
|
||||
.el-input__inner {
|
||||
color: $main-color;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.logo {
|
||||
|
|
@ -290,7 +298,7 @@ const toHome = () => {
|
|||
|
||||
.login-way {
|
||||
font-size: 18px;
|
||||
color: #606266;
|
||||
color: #909399;
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
|
|
@ -350,9 +358,9 @@ const toHome = () => {
|
|||
margin-top: 40px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
padding: 20px 0 20px 0.5em;
|
||||
padding: 25px 0 25px 0.3em;
|
||||
border-radius: 10px;
|
||||
letter-spacing: 0.5em;
|
||||
letter-spacing: 0.3em;
|
||||
}
|
||||
|
||||
.register-btn {
|
||||
|
|
@ -368,7 +376,7 @@ const toHome = () => {
|
|||
min-width: 500px;
|
||||
min-height: 300px;
|
||||
padding: 50px;
|
||||
margin-top: 200px;
|
||||
margin-top: 150px;
|
||||
background: white;
|
||||
.header-box {
|
||||
display: flex;
|
||||
|
|
@ -379,11 +387,19 @@ const toHome = () => {
|
|||
color: $main-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
.el-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.footer-box {
|
||||
padding-left: 100px;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.el-button {
|
||||
font-size: 16px;
|
||||
padding: 5px 50px;
|
||||
}
|
||||
&>span {
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
<template>
|
||||
<div>
|
||||
日志
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<template>
|
||||
<div>
|
||||
患者管理
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<template>
|
||||
<div>
|
||||
权限管理
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { dateFormater } from './date-util';
|
||||
import { dateFormater } from '@/utils/date-util';
|
||||
|
||||
const chartDom = ref();
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { dateFormater } from './date-util';
|
||||
import { dateFormater } from '@/utils/date-util';
|
||||
|
||||
const chartDom = ref();
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
export function dateFormater(formater: string, time?: any) {
|
||||
let date = time ? new Date(time) : new Date(),
|
||||
Y = date.getFullYear() + '',
|
||||
M = date.getMonth() + 1,
|
||||
D = date.getDate(),
|
||||
H = date.getHours(),
|
||||
m = date.getMinutes(),
|
||||
s = date.getSeconds();
|
||||
return formater
|
||||
.replace(/YYYY|yyyy/g, Y)
|
||||
.replace(/YY|yy/g, Y.substr(2, 2))
|
||||
.replace(/MM/g, (M < 10 ? '0' : '') + M)
|
||||
.replace(/DD|dd/g, (D < 10 ? '0' : '') + D)
|
||||
.replace(/HH|hh/g, (H < 10 ? '0' : '') + H)
|
||||
.replace(/mm/g, (m < 10 ? '0' : '') + m)
|
||||
.replace(/ss/g, (s < 10 ? '0' : '') + s);
|
||||
}
|
||||
|
|
@ -1,52 +1,5 @@
|
|||
<template>
|
||||
<div class="remote-box" id="screenBox">
|
||||
<div class="head-box">
|
||||
<div class="logo-box">
|
||||
<img src="@/assets/imgs/logo.png" />
|
||||
</div>
|
||||
<ul class="menu-box">
|
||||
<li class="menu-item"><img src="@/assets/imgs/menu_1.png" /><span>首页</span></li>
|
||||
<li class="menu-item"><img src="@/assets/imgs/menu_1.png" /><span>权限管理</span></li>
|
||||
<li class="menu-item"><img src="@/assets/imgs/menu_1.png" /><span>患者管理</span></li>
|
||||
<li class="menu-item active"><img src="@/assets/imgs/menu_1.png" /><span>远程管理</span></li>
|
||||
<li class="menu-item"><img src="@/assets/imgs/menu_1.png" /><span>后台管理</span></li>
|
||||
<li class="menu-item"><img src="@/assets/imgs/menu_1.png" /><span>系统管理</span></li>
|
||||
<li class="area">北京第一医院</li>
|
||||
</ul>
|
||||
<div class="user-box">
|
||||
<el-button text>
|
||||
<el-icon>
|
||||
<Search />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<el-button text>
|
||||
<el-badge is-dot :hidden="!messageSum">
|
||||
<el-icon>
|
||||
<Bell />
|
||||
</el-icon>
|
||||
</el-badge>
|
||||
</el-button>
|
||||
<el-button text @click="toggleFullscreen">
|
||||
<el-icon>
|
||||
<FullScreen />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<el-dropdown trigger="click">
|
||||
<span class="el-dropdown-link">
|
||||
{{ userName }}
|
||||
<el-icon class="el-icon--right">
|
||||
<arrow-down />
|
||||
</el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>设置</el-dropdown-item>
|
||||
<el-dropdown-item>退出</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-box">
|
||||
<div class="left-box">
|
||||
<h3>远程控制 1</h3>
|
||||
|
|
@ -179,7 +132,7 @@
|
|||
<script lang="ts" setup>
|
||||
import { onMounted, ref, reactive } from 'vue';
|
||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||
import { dateFormater } from './date-util';
|
||||
import { dateFormater } from '@/utils/date-util';
|
||||
import { post } from "@/axios/index";
|
||||
import chartLine from './chart-line.vue';
|
||||
import chartEcg from './chart-ecg.vue';
|
||||
|
|
@ -437,8 +390,8 @@ function getTableData(e: boolean) {
|
|||
}
|
||||
function keepFit(designWidth: number, designHeight: number, renderDomId: string) {
|
||||
let width = designWidth || 1920,
|
||||
height = designHeight || 1080;
|
||||
let clientHeight = document.documentElement.clientHeight;
|
||||
height = designHeight || 1030;
|
||||
let clientHeight = document.documentElement.clientHeight - 50;
|
||||
let clientWidth = document.documentElement.clientWidth;
|
||||
let scale = 1;
|
||||
scale = clientHeight / height;
|
||||
|
|
@ -451,7 +404,7 @@ function keepFit(designWidth: number, designHeight: number, renderDomId: string)
|
|||
}
|
||||
function initScale() {
|
||||
let w = 1920,
|
||||
h = 1080;
|
||||
h = 1030;
|
||||
keepFit(w, h, 'screenBox');
|
||||
window.addEventListener('resize', () => {
|
||||
keepFit(w, h, 'screenBox');
|
||||
|
|
@ -560,94 +513,16 @@ onMounted(() => {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.remote-box {
|
||||
$main-color: #006080;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
height: 1020px;
|
||||
background: #f1f3f5;
|
||||
padding-top: 10px;
|
||||
transform-origin: top left;
|
||||
overflow-y: auto;
|
||||
|
||||
.head-box {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
padding: 0 24px;
|
||||
background: white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.logo-box {
|
||||
height: 100%;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.menu-item {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: $main-color;
|
||||
line-height: 50px;
|
||||
padding: 0 20px;
|
||||
margin: 0 10px;
|
||||
transition: all .3s;
|
||||
-webkit-transition: all .3s;
|
||||
|
||||
&:hover {
|
||||
background: #F5F7FA;
|
||||
transition: all .3s;
|
||||
-webkit-transition: all .3s;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: rgba($main-color, .1);
|
||||
}
|
||||
|
||||
img {
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.area {
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: $main-color;
|
||||
line-height: 1.6;
|
||||
padding: 0 20px;
|
||||
border: 1px solid #8c9094;
|
||||
border-radius: 7px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&>.el-button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&>.el-dropdown {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-box {
|
||||
width: 100%;
|
||||
height: calc(100% - 60px);
|
||||
height: 100%;
|
||||
// min-height: 1080px;
|
||||
margin-top: 10px;
|
||||
background: white;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
<template>
|
||||
<div>
|
||||
后台管理
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user