root/rax-medical
1
0
Fork 0
mirror of https://gitee.com/xiongmao1988/rax-medical.git synced 2025-08-24 04:54:58 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

🚧

This commit is contained in:
gaofy 2023-12-15 18:08:45 +08:00
parent ad925d7b7c
commit adc0b455e0
30 changed files with 4313 additions and 552 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2833
src/assets/css/animastore.css Normal file
View File

File diff suppressed because it is too large Load Diff

74
src/assets/css/custom-element.scss Normal file
View File

@ -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);
}
}

370
src/assets/css/global.scss
View File

@ -6,27 +6,21 @@ 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;
}
span,
p,
h3,
ul,
li {
word-wrap: break-word;
margin: 0;
list-style: none;
}
p,
h3 {
margin: 0;
}
ul,
li {
margin: 0;
list-style: none;
}
#app {
width: 100%;
height: 100%;
#app {
width: 100%;
height: 100%;
}
}
* {
@ -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%;
@ -329,4 +98,59 @@ li {
-webkit-transform: translate(-50%, -50%);
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;
}
}
}
}

19
src/assets/css/variable.scss
View File

@ -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;

167
src/assets/font/demo_index.html
View File

@ -54,6 +54,48 @@
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe6e3;</span>
<div class="name">users 用户组</div>
<div class="code-name">&amp;#xe6e3;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe600;</span>
<div class="name">3.1 设置</div>
<div class="code-name">&amp;#xe600;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe669;</span>
<div class="name">远程费</div>
<div class="code-name">&amp;#xe669;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xeb25;</span>
<div class="name">24gl-userGroup</div>
<div class="code-name">&amp;#xeb25;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe653;</span>
<div class="name">后台管理</div>
<div class="code-name">&amp;#xe653;</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">&#xe61d;</span>
<div class="name">首页-置灰</div>
<div class="code-name">&amp;#xe61d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe77f;</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>

34
src/assets/font/iconfont.css
View File

@ -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";
}

2
src/assets/font/iconfont.js
View File

File diff suppressed because one or more lines are too long

49
src/assets/font/iconfont.json
View File

@ -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",

BIN
src/assets/font/iconfont.ttf
View File

Binary file not shown.

BIN
src/assets/font/iconfont.woff
View File

Binary file not shown.

BIN
src/assets/font/iconfont.woff2
View File

Binary file not shown.

167
src/components/user-info.vue Normal file
View File

@ -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>

2
src/main.ts
View File

@ -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)

21
src/router/index.ts
View File

@ -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'),
}
]
}

51
src/static-data/core.ts
View File

@ -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']
}

14
src/stores/user-info-store.ts
View File

@ -3,10 +3,13 @@ import { defineStore } from 'pinia'
export const useLoginStore = defineStore('login', {
state: () => {
return {
return {
login: {
isLogin: false,
name: ''
isLogin: true,
account: 'admin',
name: '管理员',
permissions: '超级管理员',
hospital: '北京第一医院'
} as any
}
},
@ -16,8 +19,11 @@ export const useLoginStore = defineStore('login', {
getlogin() {
return this.login
},
setlogin(key: string,e: any) {
setlogin(key: string, e: any) {
this.login[key] = e
},
logout() {
this.login.isLogin = false
}
},
})

55
src/utils/date-util.ts Normal file
View File

@ -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);
}

90
src/views/home/home.vue
View File

@ -1,14 +1,98 @@
<template>
<div>
首页
<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>

177
src/views/home/number-chart.vue Normal file
View File

@ -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>

177
src/views/home/time-chart.vue Normal file
View File

@ -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>

221
src/views/index.vue
View File

@ -1,14 +1,231 @@
<template>
<div>
<RouterView />
<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>

126
src/views/login/login.vue
View File

@ -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;

14
src/views/logs-manage/logs-manage.vue Normal file
View File

@ -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>

14
src/views/patients-manage/patients-manage.vue Normal file
View File

@ -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>

14
src/views/permissions-manage/permissions-manage.vue Normal file
View File

@ -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>

2
src/views/remote-manage/chart-ecg.vue
View File

@ -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();

2
src/views/remote-manage/chart-line.vue
View File

@ -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();

17
src/views/remote-manage/date-util.ts
View File

@ -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);
}

139
src/views/remote-manage/remote-manage.vue
View File

@ -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;

14
src/views/system-manage/system-manage.vue Normal file
View File

@ -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>