nicky
5 months ago
199 changed files with 121528 additions and 0 deletions
@ -0,0 +1,23 @@ |
|||||
|
node_modules |
||||
|
/dist |
||||
|
test.zip |
||||
|
api.zip |
||||
|
dist.zip |
||||
|
.DS_Store |
||||
|
|
||||
|
|
||||
|
# local env files |
||||
|
.env.local |
||||
|
.env.*.local |
||||
|
|
||||
|
# Log files |
||||
|
npm-debug.log* |
||||
|
|
||||
|
# Editor directories and files |
||||
|
.idea |
||||
|
.vscode |
||||
|
*.suo |
||||
|
*.ntvs* |
||||
|
*.njsproj |
||||
|
*.sln |
||||
|
*.sw? |
||||
@ -0,0 +1,36 @@ |
|||||
|
# Bfy_Pad_v4 |
||||
|
|
||||
|
#### Description |
||||
|
{**When you're done, you can delete the content in this README and update the file with details for others getting started with your repository**} |
||||
|
|
||||
|
#### Software Architecture |
||||
|
Software architecture description |
||||
|
|
||||
|
#### Installation |
||||
|
|
||||
|
1. xxxx |
||||
|
2. xxxx |
||||
|
3. xxxx |
||||
|
|
||||
|
#### Instructions |
||||
|
|
||||
|
1. xxxx |
||||
|
2. xxxx |
||||
|
3. xxxx |
||||
|
|
||||
|
#### Contribution |
||||
|
|
||||
|
1. Fork the repository |
||||
|
2. Create Feat_xxx branch |
||||
|
3. Commit your code |
||||
|
4. Create Pull Request |
||||
|
|
||||
|
|
||||
|
#### Gitee Feature |
||||
|
|
||||
|
1. You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md |
||||
|
2. Gitee blog [blog.gitee.com](https://blog.gitee.com) |
||||
|
3. Explore open source project [https://gitee.com/explore](https://gitee.com/explore) |
||||
|
4. The most valuable open source project [GVP](https://gitee.com/gvp) |
||||
|
5. The manual of Gitee [https://gitee.com/help](https://gitee.com/help) |
||||
|
6. The most popular members [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/) |
||||
@ -0,0 +1,19 @@ |
|||||
|
# ht-ageing |
||||
|
|
||||
|
## Project setup |
||||
|
``` |
||||
|
npm install |
||||
|
``` |
||||
|
|
||||
|
### Compiles and hot-reloads for development |
||||
|
``` |
||||
|
npm run serve |
||||
|
``` |
||||
|
|
||||
|
### Compiles and minifies for production |
||||
|
``` |
||||
|
npm run build |
||||
|
``` |
||||
|
|
||||
|
### Customize configuration |
||||
|
See [Configuration Reference](https://cli.vuejs.org/config/). |
||||
@ -0,0 +1 @@ |
|||||
|
CARBASICS2023-WEB-PAD |
||||
@ -0,0 +1,5 @@ |
|||||
|
module.exports = { |
||||
|
presets: [ |
||||
|
'@vue/cli-plugin-babel/preset' |
||||
|
] |
||||
|
} |
||||
File diff suppressed because it is too large
@ -0,0 +1,42 @@ |
|||||
|
{ |
||||
|
"name": "storm-pad", |
||||
|
"version": "2.0.0", |
||||
|
"private": true, |
||||
|
"scripts": { |
||||
|
"serve": "vue-cli-service serve", |
||||
|
"test": "vue-cli-service build --mode test", |
||||
|
"build": "vue-cli-service build" |
||||
|
}, |
||||
|
"dependencies": { |
||||
|
"@nutui/nutui-jdl": "^1.0.5", |
||||
|
"ant-design-vue": "^1.7.2", |
||||
|
"axios": "^1.4.0", |
||||
|
"core-js": "^3.6.5", |
||||
|
"dayjs": "^1.11.9", |
||||
|
"echarts": "^5.6.0", |
||||
|
"install": "^0.13.0", |
||||
|
"npm": "^11.1.0", |
||||
|
"reqwest": "^2.0.5", |
||||
|
"scss": "^0.2.4", |
||||
|
"scss-loader": "^0.0.1", |
||||
|
"stylus-loader": "^3.0.2", |
||||
|
"vant": "^2.12.54", |
||||
|
"vue": "^2.6.11", |
||||
|
"vue-esign": "^1.1.4", |
||||
|
"vue-infinite-scroll": "^2.0.2", |
||||
|
"vue-quill-editor": "^3.0.6", |
||||
|
"vue-router": "^3.2.0", |
||||
|
"vuex": "^3.4.0", |
||||
|
"vuex-persistedstate": "^4.1.0" |
||||
|
}, |
||||
|
"devDependencies": { |
||||
|
"@vue/cli-plugin-babel": "~4.5.19", |
||||
|
"@vue/cli-plugin-router": "~4.5.19", |
||||
|
"@vue/cli-plugin-vuex": "~4.5.19", |
||||
|
"@vue/cli-service": "~4.5.19", |
||||
|
"less": "^3.0.4", |
||||
|
"less-loader": "^5.0.0", |
||||
|
"postcss-px-to-viewport": "^1.1.1", |
||||
|
"vue-template-compiler": "^2.6.11" |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,22 @@ |
|||||
|
module.exports = { |
||||
|
plugins: { |
||||
|
'postcss-px-to-viewport': { |
||||
|
// options
|
||||
|
unitToConvert: 'px', |
||||
|
viewportWidth: 1100, |
||||
|
unitPrecision: 2, |
||||
|
propList: ['*'], |
||||
|
viewportUnit: 'vw', |
||||
|
fontViewportUnit: 'vw', |
||||
|
selectorBlackList: [], |
||||
|
minPixelValue: 1, |
||||
|
mediaQuery: false, |
||||
|
replace: true, |
||||
|
exclude: undefined, |
||||
|
include: undefined, |
||||
|
landscape: false, |
||||
|
landscapeUnit: 'vw', |
||||
|
landscapeWidth: 700 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,30 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang=""> |
||||
|
|
||||
|
<head> |
||||
|
<meta charset="utf-8"> |
||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
|
<meta name="viewport" |
||||
|
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> |
||||
|
<link rel="icon" href="<%= BASE_URL %>logo.jpg"> |
||||
|
<title>绿道质控</title> |
||||
|
<meta http-equiv="Pragma" content="no-cache"> |
||||
|
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"> |
||||
|
<meta http-equiv="Expires" content="0"> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
<noscript> |
||||
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. |
||||
|
Please enable it to continue.</strong> |
||||
|
</noscript> |
||||
|
<div id="app"></div> |
||||
|
<!-- built files will be auto injected --> |
||||
|
<!-- <script type="text/javascript" src="./vconsole.js"></script> --> |
||||
|
<script type="text/javascript" src="./uni.webview.1.5.4.js"></script> |
||||
|
<script> |
||||
|
// var vConsole = new VConsole() |
||||
|
</script> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
|
After Width: | Height: | Size: 9.9 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,368 @@ |
|||||
|
<!-- |
||||
|
* @Author: gaowenya |
||||
|
* @email: gaowenya_a@163.com |
||||
|
* @Date: 2023-06-19 09:38:10 |
||||
|
* @LastEditors: |
||||
|
* @LastEditTime: |
||||
|
--> |
||||
|
<template> |
||||
|
<a-config-provider :locale="locale"> |
||||
|
<div id="app" class="storm"> |
||||
|
<a-spin tip="正在请求..." class="zhezhao" :spinning="spinning"> |
||||
|
<div class="storm-container"> |
||||
|
<!-- <Nav /> --> |
||||
|
<div class="storm-content"> |
||||
|
<router-view /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</a-spin> |
||||
|
<!-- 全局计时 $route.name !== 'PatientList' && --> |
||||
|
<Dragger v-if="getCount" ref="timer" class="count-container"> |
||||
|
<div class="count-name">静脉溶栓</div> |
||||
|
<!-- <van-count-down :time="getCount" format="mm:ss" /> --> |
||||
|
<Count /> |
||||
|
</Dragger> |
||||
|
<!-- 测评提示信息弹窗 --> |
||||
|
<a-modal class="patient-create patient-form" :width="518" :maskClosable="false" :closable="false" |
||||
|
:destroyOnClose="true" v-model="tip.visible" title="提示" @ok="tipConfirm" okText="去测评" cancelText="忽略"> |
||||
|
<div class="modal-content"> |
||||
|
{{ tip.content }} |
||||
|
</div> |
||||
|
</a-modal> |
||||
|
<!-- --> |
||||
|
<a-modal class="patient-create patient-form" :width="518" :maskClosable="false" :closable="false" |
||||
|
:destroyOnClose="true" v-model="tip.Lnspect" title="提示" @ok="LnspectConfirm" @cancel="LnspectCancel" |
||||
|
okText="查看" cancelText="忽略"> |
||||
|
<div class="modal-content">检验结果已完成, 请前往查看</div> |
||||
|
</a-modal> |
||||
|
</div> |
||||
|
</a-config-provider> |
||||
|
</template> |
||||
|
<script> |
||||
|
import zhCN from 'ant-design-vue/es/locale/zh_CN'; // 引入中文语言包 |
||||
|
import Dragger from './components/dragger.vue'; |
||||
|
import Count from './components/count.vue'; |
||||
|
import { |
||||
|
messageQuery |
||||
|
} from 'api'; |
||||
|
import { |
||||
|
mapMutations, |
||||
|
mapState |
||||
|
} from 'vuex'; |
||||
|
import Nav from 'components/Nav.vue'; |
||||
|
export default { |
||||
|
components: { |
||||
|
Nav, |
||||
|
Dragger, |
||||
|
Count, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
locale: zhCN, // 设置为中文 |
||||
|
routeName: '', |
||||
|
tip: { |
||||
|
// 提示信息 |
||||
|
visible: false, //测评 |
||||
|
Lnspect: false, //检验 |
||||
|
content: '', |
||||
|
k: null, |
||||
|
}, |
||||
|
request: 0, |
||||
|
pushRouter: { |
||||
|
0: 'Inspect', |
||||
|
1: 'Image', |
||||
|
2: 'Min', |
||||
|
}, |
||||
|
titleForm: { |
||||
|
'0min': 'JMRS-Q-NIHSS', |
||||
|
'15min': 'JMRS-15-NIHSS', |
||||
|
'30min': 'JMRS-30-NIHSS', |
||||
|
'45min': 'JMRS-45-NIHSS', |
||||
|
'60min': 'JMRS-60-NIHSS', |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapState('storm', ['spinning', 'showNav']), |
||||
|
...mapState('patient', ['patientData', 'timerData', 'overviewType']), |
||||
|
getCount() { |
||||
|
const { |
||||
|
timerData, |
||||
|
patientData |
||||
|
} = this; |
||||
|
if (!timerData && !patientData) return null; |
||||
|
if (timerData.firstAidId !== patientData.firstAidId) return null; |
||||
|
const { |
||||
|
countdown |
||||
|
} = timerData; |
||||
|
if (!countdown) return null; |
||||
|
// const totalSeconds = countdown; |
||||
|
// // ?️ 获取完整分钟数 |
||||
|
// const minutes = Math.floor(totalSeconds / 60); |
||||
|
// // ?️ 获得剩余的秒数 |
||||
|
// const seconds = totalSeconds % 60; |
||||
|
// // ✅ 格式化为 MM:SS |
||||
|
// const result = `${this.padTo2Digits(minutes)}:${this.padTo2Digits(seconds)}`; |
||||
|
// console.log(result); // ?️ "09:25" |
||||
|
return parseInt(countdown) * 1000; |
||||
|
}, |
||||
|
}, |
||||
|
watch: { |
||||
|
overviewType: { |
||||
|
deep: true, |
||||
|
handler(n, o) { |
||||
|
if (n === 'overview' || n === 'info') { |
||||
|
this.queryMessage(); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
$route: { |
||||
|
deep: true, |
||||
|
handler(n, o) { |
||||
|
if (n.name === 'PatientList') { |
||||
|
this.setTimerData({}); |
||||
|
} |
||||
|
if (n.name === 'PatientDetails') { |
||||
|
// this.request = 0; |
||||
|
} |
||||
|
if ( |
||||
|
n.path !== '/' && |
||||
|
n.name !== 'PatientList' && |
||||
|
n.name !== 'Min' |
||||
|
) { |
||||
|
this.init(); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
methods: { |
||||
|
...mapMutations('patient', ['setTimerData']), |
||||
|
padTo2Digits(num) { |
||||
|
return num.toString().padStart(2, '0'); |
||||
|
}, |
||||
|
async init() { |
||||
|
const { |
||||
|
firstAidId |
||||
|
} = this.patientData; |
||||
|
if (!firstAidId) return; |
||||
|
// this.queryMessage(); |
||||
|
await this.handMessageQuery(); |
||||
|
console.log('init', this.$route.name); |
||||
|
this.request = 0; |
||||
|
this.utils.AnimationFrame.create( |
||||
|
'timerTask', |
||||
|
10000, |
||||
|
true, |
||||
|
(min) => { |
||||
|
this.getMessageQuery(min); |
||||
|
} |
||||
|
); |
||||
|
}, |
||||
|
async queryMessage() { |
||||
|
const { |
||||
|
firstAidId |
||||
|
} = this.patientData; |
||||
|
const res = await messageQuery(firstAidId); |
||||
|
const { |
||||
|
code, |
||||
|
msg |
||||
|
} = res; |
||||
|
if (code === 200) { |
||||
|
this.setTimerData(res.data); |
||||
|
} |
||||
|
}, |
||||
|
// 测评确认 |
||||
|
tipConfirm() { |
||||
|
this.tip.visible = false; |
||||
|
const name = this.pushRouter[this.tip.k]; |
||||
|
console.log('name: ', name); |
||||
|
this.$router.push({ |
||||
|
name, |
||||
|
}); |
||||
|
}, |
||||
|
// 检验调取确认 |
||||
|
LnspectConfirm() { |
||||
|
this.LnspectCancel(); |
||||
|
this.$router.push({ |
||||
|
name: 'Inspect', |
||||
|
}); |
||||
|
}, |
||||
|
LnspectCancel() { |
||||
|
this.tip.Lnspect = false; |
||||
|
this.$forceUpdate(); |
||||
|
}, |
||||
|
// 消息提示 |
||||
|
async handMessageQuery() { |
||||
|
// 异步 |
||||
|
const { |
||||
|
firstAidId |
||||
|
} = this.patientData; |
||||
|
if (firstAidId) { |
||||
|
const res = await messageQuery(firstAidId); |
||||
|
const { |
||||
|
code, |
||||
|
msg |
||||
|
} = res; |
||||
|
if (code === 200) { |
||||
|
this.setTimerData(res.data); |
||||
|
const { |
||||
|
map, |
||||
|
haveFlagInspect |
||||
|
} = res.data; |
||||
|
console.log('firstAidInspectDataDtos: ', haveFlagInspect); |
||||
|
for (let k in map) { |
||||
|
if (map[k]) { |
||||
|
this.taskList = { |
||||
|
text: map[k], |
||||
|
status: false, |
||||
|
}; |
||||
|
} |
||||
|
if (map[k] && this.taskList.status === false) { |
||||
|
// 记录不重复弹窗 |
||||
|
if (this.taskList.text === map[k]) { |
||||
|
this.taskList.status = true; |
||||
|
} |
||||
|
if ( |
||||
|
this.$route.name !== 'Min' && |
||||
|
this.$route.name !== 'PatientList' |
||||
|
) { |
||||
|
this.tip = { |
||||
|
visible: true, |
||||
|
k, |
||||
|
content: map[k], |
||||
|
}; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
// 检验调取 判断是否有急诊号 1 弹窗, 0 不弹窗 |
||||
|
if (haveFlagInspect) { |
||||
|
if ( |
||||
|
this.$route.name !== 'Inspect' && |
||||
|
this.$route.name !== 'PatientList' |
||||
|
) { |
||||
|
this.tip.Lnspect = true; |
||||
|
} |
||||
|
} |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
async getMessageQuery(min, firstAidId) { |
||||
|
const n = min; |
||||
|
if (this.request === n) { |
||||
|
// 符合轮训条件 |
||||
|
console.log('十秒'); |
||||
|
this.request = n + 1; |
||||
|
await this.handMessageQuery(); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style lang="less"> |
||||
|
.zhezhao { |
||||
|
position: fixed; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
z-index: 999; |
||||
|
} |
||||
|
|
||||
|
#app { |
||||
|
font-family: Avenir, Helvetica, Arial, sans-serif; |
||||
|
-webkit-font-smoothing: antialiased; |
||||
|
-moz-osx-font-smoothing: grayscale; |
||||
|
// text-align: center; |
||||
|
color: #2c3e50; |
||||
|
background: #f6f8fa; |
||||
|
height: 100%; |
||||
|
position: relative; |
||||
|
|
||||
|
::-webkit-scrollbar { |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// .count-container { |
||||
|
// width: 200px; |
||||
|
// background: rgba(255, 255, 255, 0.1); |
||||
|
// border: 1px solid #ffffff; |
||||
|
// box-shadow: 0px 6px 10px 0px rgba(0, 59, 172, 0.2); |
||||
|
// border-radius: 4px; |
||||
|
// overflow: hidden; |
||||
|
// backdrop-filter: blur(4px); |
||||
|
// text-align: center; |
||||
|
// display: flex; |
||||
|
// flex-direction: column; |
||||
|
// align-items: center; |
||||
|
// padding: 16px 0; |
||||
|
// z-index: 999; |
||||
|
|
||||
|
// .count-name { |
||||
|
// font-size: 26px; |
||||
|
// font-family: Source Han Sans CN, Source Han Sans CN-Bold; |
||||
|
// font-weight: 700; |
||||
|
// color: #393d4e; |
||||
|
// line-height: 26px; |
||||
|
// padding-bottom: 7px; |
||||
|
// } |
||||
|
|
||||
|
// .van-count-down { |
||||
|
// font-size: 44px; |
||||
|
// font-family: Source Han Sans CN, Source Han Sans CN-Bold; |
||||
|
// font-weight: 700; |
||||
|
// color: #393d4e; |
||||
|
// line-height: 44px; |
||||
|
// } |
||||
|
// } |
||||
|
</style> |
||||
|
<style lang="stylus"> |
||||
|
// @import './assets/portrait.styl'; |
||||
|
@import './assets/less/common.less'; |
||||
|
|
||||
|
html { |
||||
|
overflow: hidden !important; |
||||
|
} |
||||
|
|
||||
|
html, |
||||
|
body, |
||||
|
#app { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
font-size: 1.2rem |
||||
|
} |
||||
|
|
||||
|
.zhezhao .ant-spin-container { |
||||
|
height: 100% |
||||
|
} |
||||
|
|
||||
|
.ant-modal div[aria-hidden="true"] { |
||||
|
display: none !important; |
||||
|
} |
||||
|
|
||||
|
.storm { |
||||
|
display: flex; |
||||
|
flex: 1; |
||||
|
|
||||
|
.storm-container { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
height: 100%; |
||||
|
background: linear-gradient(180deg, #dbeaff, #fbfdff); |
||||
|
|
||||
|
.header { |
||||
|
// height: 88px; |
||||
|
} |
||||
|
|
||||
|
.storm-content { |
||||
|
flex: 1; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
overflow-y: auto; |
||||
|
display: flex; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,333 @@ |
|||||
|
import axios from 'axios'; |
||||
|
let { |
||||
|
proxyUrl |
||||
|
} = require('@/config/setting'); |
||||
|
let proxyUrl1 = proxyUrl + '/workstation'; |
||||
|
//查询民族列表
|
||||
|
export const getNation = () => axios.post(`${proxyUrl1}/sys/nation/list`); |
||||
|
// 查询菜单
|
||||
|
export const getRouters = (params) => |
||||
|
axios.get(`${proxyUrl1}/getRouters`, params); |
||||
|
|
||||
|
// 查询平车、平板设备列表
|
||||
|
export const selectList = (params) => |
||||
|
axios.post(`${proxyUrl1}/remoteDevice/selectList `, params); |
||||
|
|
||||
|
// 查询患者列表
|
||||
|
export const getList = (params) => |
||||
|
axios.post(`${proxyUrl1}/firstAid/list`, params); |
||||
|
|
||||
|
// 查询分诊患者列表
|
||||
|
export const queryTriageList = (params) => |
||||
|
axios.post(`${proxyUrl1}/firstAid/queryTriageList`, params); |
||||
|
|
||||
|
// 创建患者
|
||||
|
export const create = (params) => |
||||
|
axios.post(`${proxyUrl1}/firstAid/create`, params); |
||||
|
|
||||
|
|
||||
|
//根据id，查询患者信息，回写患者信息
|
||||
|
export const queryById = (params) => |
||||
|
axios.post(`${proxyUrl1}/firstAid/queryById`, params); |
||||
|
|
||||
|
// 编辑患者
|
||||
|
|
||||
|
export const eduitPatient = (params) => |
||||
|
axios.post(`${proxyUrl1}//firstAid/eduitPatient`, params); |
||||
|
|
||||
|
|
||||
|
// 查病历数据
|
||||
|
export const queryAidRecord = (firstAidId, codeList) => |
||||
|
axios.post(`${proxyUrl1}/firstAid/queryAidRecord`, { |
||||
|
param: { |
||||
|
firstAidId, |
||||
|
codeList |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
// 更新急救code信息
|
||||
|
export const saveAidRecord = (param) => |
||||
|
axios.post(`${proxyUrl1}/firstAid/saveAidRecord`, { |
||||
|
param |
||||
|
}); |
||||
|
|
||||
|
// 更新急救基本信息
|
||||
|
export const updateAidBase = (param) => |
||||
|
axios.post(`${proxyUrl1}/firstAid/update`, { |
||||
|
param |
||||
|
}); |
||||
|
|
||||
|
//溶栓记录
|
||||
|
export const queryLog = (param) => |
||||
|
axios.post(`${proxyUrl1}/firstAid/queryLog`, { |
||||
|
param |
||||
|
}); |
||||
|
|
||||
|
//医嘱查询
|
||||
|
export const adviceQuery = (param) => |
||||
|
axios.post(`${proxyUrl1}/advice/query`, { |
||||
|
param |
||||
|
}); |
||||
|
|
||||
|
//下发医嘱
|
||||
|
export const adviceAdd = (params) => |
||||
|
axios.post(`${proxyUrl1}/advice/add`, { |
||||
|
...params |
||||
|
}); |
||||
|
|
||||
|
//推送结果
|
||||
|
export const messageQuery = (firstAidId) => |
||||
|
axios.post(`${proxyUrl1}/message/query`, { |
||||
|
firstAidId |
||||
|
}); |
||||
|
|
||||
|
export function uploadIdcard(data) { |
||||
|
return axios({ |
||||
|
url: `${proxyUrl1}/sys/ocr/idcardInfo`, |
||||
|
method: 'POST', |
||||
|
data: data, |
||||
|
headers: { |
||||
|
'Content-Type': 'multipart/form-data', |
||||
|
}, |
||||
|
}); |
||||
|
} |
||||
|
export const idcardInfo = `${proxyUrl1}/sys/ocr/idcardInfo`; |
||||
|
|
||||
|
// 创建急救身份证扫描
|
||||
|
|
||||
|
export const idcardInfoBase64 = (picBase64) => |
||||
|
axios.post(`${proxyUrl1}/sys/ocr/idcardInfoBase64`, { |
||||
|
picBase64 |
||||
|
}); |
||||
|
|
||||
|
//知情同意新增
|
||||
|
export const saveInformedConsent = (params) => |
||||
|
axios.post(`${proxyUrl1}/informed/saveInformedConsent`, { |
||||
|
...params |
||||
|
}); |
||||
|
|
||||
|
// 查询是否有进行中的急救
|
||||
|
export const queryFree = (params) => |
||||
|
axios.post(`${proxyUrl1}/firstAid/queryFree`, { |
||||
|
...params |
||||
|
}); |
||||
|
|
||||
|
export const endFirstAid = (params) => |
||||
|
axios.post(`${proxyUrl1}/firstAid/endFirstAid `, {}); |
||||
|
//知情同意查询
|
||||
|
export const queryConsentResult = (params) => |
||||
|
axios.post(`${proxyUrl1}/informed/queryConsentResult`, { |
||||
|
param: { |
||||
|
...params |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
//查看知情同意时添加谈话时间
|
||||
|
export const thTime = (params) => |
||||
|
axios.post(`${proxyUrl1}/firstAid/thTime`, { |
||||
|
...params |
||||
|
}); |
||||
|
|
||||
|
// 上传文件
|
||||
|
export function uploadfile(data) { |
||||
|
return axios({ |
||||
|
url: `${proxyUrl}/file/upload`, |
||||
|
method: 'POST', |
||||
|
data: data, |
||||
|
headers: { |
||||
|
'Content-Type': 'multipart/form-data', |
||||
|
}, |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// 上传文件
|
||||
|
export function uploadBase64(data) { |
||||
|
return axios({ |
||||
|
url: `${proxyUrl}/file/uploadBase64`, |
||||
|
method: 'POST', |
||||
|
data: data, |
||||
|
headers: { |
||||
|
'Content-Type': 'multipart/form-data', |
||||
|
}, |
||||
|
}); |
||||
|
} |
||||
|
// 查询平车状态
|
||||
|
export const queryByPadNo = (params) => |
||||
|
axios.post(`${proxyUrl1}/car/queryByPadNo`, { |
||||
|
param: { |
||||
|
...params |
||||
|
} |
||||
|
}); |
||||
|
// 血样报告
|
||||
|
export const queryFirstAidInspectData = (params) => |
||||
|
axios.post(`${proxyUrl1}/firstAid/queryFirstAidInspectData`, { |
||||
|
...params, |
||||
|
}); |
||||
|
// 查询下一个节点
|
||||
|
export const getNextNode = (params) => |
||||
|
axios.post(`${proxyUrl1}/firstAid/next`, { |
||||
|
param: { |
||||
|
...params |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
//导出急救记录
|
||||
|
export const exportFirstAid = (params) => |
||||
|
axios.post(`${proxyUrl1}/firstAid/export`, { |
||||
|
param: { |
||||
|
...params |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 溶栓介入视频
|
||||
|
export const queryVideo = (param) => |
||||
|
axios.post(`${proxyUrl1}/video/query`, { |
||||
|
param: { |
||||
|
...param |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 溶栓介入视频
|
||||
|
export const queryBook = (param) => |
||||
|
axios.post(`${proxyUrl1}/informed/queryConsentTemplate`, { |
||||
|
param: { |
||||
|
...param |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
// 溶栓介入视频
|
||||
|
export const queryWeight = (firstAidId) => |
||||
|
axios.post(`${proxyUrl1}/firstAid/weight`, { |
||||
|
firstAidId: firstAidId, |
||||
|
}); |
||||
|
|
||||
|
// 修改急救信息
|
||||
|
export const updateFirstAid = (params) => |
||||
|
axios.post(`${proxyUrl1}/firstAid/update`, { |
||||
|
param: { |
||||
|
...params |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// ------------平车相关操作------------
|
||||
|
// 授权
|
||||
|
export const remoteAuth = (params) => |
||||
|
axios.post(`${proxyUrl1}/mqtt/remoteAuth`, { |
||||
|
...params |
||||
|
}); |
||||
|
|
||||
|
// 电池容量
|
||||
|
export const remoteKljCapacity = (params) => |
||||
|
axios.post(`${proxyUrl1}/mqtt/remoteKljCapacity`, { |
||||
|
...params |
||||
|
}); |
||||
|
// 设备重启
|
||||
|
export const remoteReboot = (params) => |
||||
|
axios.post( |
||||
|
`${proxyUrl1}/mqtt/remoteReboot
|
||||
|
`, {
|
||||
|
...params |
||||
|
} |
||||
|
); |
||||
|
// 发送远程rfid消息
|
||||
|
export const remoteRfid = (params) => |
||||
|
axios.post( |
||||
|
`${proxyUrl1}/mqtt/remoteRfid
|
||||
|
`, {
|
||||
|
...params |
||||
|
} |
||||
|
); |
||||
|
// 发送远程设备心跳（校时）消息
|
||||
|
export const remoteTime = (params) => |
||||
|
axios.post( |
||||
|
`${proxyUrl1}/mqtt/remoteTime
|
||||
|
`, {
|
||||
|
...params |
||||
|
} |
||||
|
); |
||||
|
// 称重校准
|
||||
|
export const remoteWeightCalibration = (params) => |
||||
|
axios.post( |
||||
|
`${proxyUrl1}/mqtt/remoteWeightCalibration
|
||||
|
`, {
|
||||
|
...params |
||||
|
} |
||||
|
); |
||||
|
|
||||
|
// 病例统计
|
||||
|
export const getCtInfoPath = (params) => |
||||
|
axios.post(`${proxyUrl1}/firstAid/getCtInfoPath`, { |
||||
|
...params |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
// 我的
|
||||
|
export const loginInfo = (params) => |
||||
|
axios.post(`${proxyUrl1}/home/loginInfo`, { |
||||
|
...params |
||||
|
}); |
||||
|
|
||||
|
// RPT统计
|
||||
|
export const queryRptResult = (params) => |
||||
|
axios.post(`${proxyUrl1}/home/queryRptResult`, { |
||||
|
...params |
||||
|
}); |
||||
|
// DPT统计 / 血管内治疗率
|
||||
|
export const queryDptResult = (params) => |
||||
|
axios.post(`${proxyUrl1}/home/queryDptResult`, { |
||||
|
...params |
||||
|
}); |
||||
|
// 血管内治疗数据对比
|
||||
|
export const selectXgzl = (params) => |
||||
|
axios.post(`${proxyUrl1}/home/selectXgzl`, { |
||||
|
...params |
||||
|
}); |
||||
|
// SICH发生率
|
||||
|
export const querySichResult = (params) => |
||||
|
axios.post(`${proxyUrl1}/home/querySichResult`, { |
||||
|
...params |
||||
|
}); |
||||
|
// SICHDNT分布
|
||||
|
export const queryDntResult = (params) => |
||||
|
axios.post(`${proxyUrl1}/home/queryDntResult`, { |
||||
|
...params |
||||
|
}); |
||||
|
// 静脉溶栓数据对比 / 静脉溶栓率
|
||||
|
export const queryJmrs = (params) => |
||||
|
axios.post(`${proxyUrl1}/home/queryJmrs`, { |
||||
|
...params |
||||
|
}); |
||||
|
// 病例统计数据分析
|
||||
|
export const queryByDatePatient = (params) => |
||||
|
axios.post(`${proxyUrl1}/home/queryByDatePatient`, { |
||||
|
...params |
||||
|
}); |
||||
|
// 病例统计
|
||||
|
export const queryPatient = (params) => |
||||
|
axios.post(`${proxyUrl1}/home/queryPatient`, { |
||||
|
...params |
||||
|
}); |
||||
|
// 介入手术记录/总报告/DNT时间表
|
||||
|
export const operationLog = (params) => |
||||
|
axios.post(`${proxyUrl1}/interfere/operationLog`, { |
||||
|
...params |
||||
|
}); |
||||
|
|
||||
|
// 介入手术记录/总报告/DNT时间表
|
||||
|
export const operationLogEx = (params) => |
||||
|
axios.post(`${proxyUrl1}//export/operationLog`, { |
||||
|
...params |
||||
|
}); |
||||
|
// 创建急救
|
||||
|
export const createFirstAid = (params) => |
||||
|
axios.post(`${proxyUrl1}/firstAid/createFirstAid`, { |
||||
|
...params |
||||
|
}); |
||||
|
export const createPatient = (params) => |
||||
|
axios.post(`${proxyUrl1}/firstAid/createPatient`, { |
||||
|
...params |
||||
|
}); |
||||
|
// export const eduitPatient = (params) =>
|
||||
|
// axios.post(`${proxyUrl1}/firstAid/eduitPatient`, {
|
||||
|
// ...params
|
||||
|
// });
|
||||
@ -0,0 +1,14 @@ |
|||||
|
import axios from 'axios'; |
||||
|
let { |
||||
|
proxyUrl |
||||
|
} = require('@/config/setting'); |
||||
|
let proxyUrl1 = proxyUrl + '/workstation'; |
||||
|
// 登录
|
||||
|
export const Login = (params) => |
||||
|
axios.post(`${proxyUrl}/auth/pad/login`, params); |
||||
|
|
||||
|
export const Loginnew = (params) => |
||||
|
axios.post(`${proxyUrl}/auth/login`, params); |
||||
|
// 登录
|
||||
|
export const queryUser = (params) => |
||||
|
axios.post(`${proxyUrl1}/sys/queryUsername`, params); |
||||
|
After Width: | Height: | Size: 76 KiB |
|
After Width: | Height: | Size: 70 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 70 KiB |
|
After Width: | Height: | Size: 90 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 108 KiB |
|
After Width: | Height: | Size: 75 KiB |
|
After Width: | Height: | Size: 99 KiB |
|
After Width: | Height: | Size: 200 KiB |
|
After Width: | Height: | Size: 673 KiB |
|
After Width: | Height: | Size: 888 KiB |
|
After Width: | Height: | Size: 9.9 KiB |
|
After Width: | Height: | Size: 69 KiB |
|
After Width: | Height: | Size: 72 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 72 KiB |
|
After Width: | Height: | Size: 446 B |
|
After Width: | Height: | Size: 512 B |
|
After Width: | Height: | Size: 551 B |
|
After Width: | Height: | Size: 360 B |
|
After Width: | Height: | Size: 6.1 KiB |
|
After Width: | Height: | Size: 894 B |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 71 KiB |
|
After Width: | Height: | Size: 198 KiB |
|
After Width: | Height: | Size: 230 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 978 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 145 B |
|
After Width: | Height: | Size: 65 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 746 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 567 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 580 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 655 B |
|
After Width: | Height: | Size: 482 B |
|
After Width: | Height: | Size: 524 B |
|
After Width: | Height: | Size: 631 B |
|
After Width: | Height: | Size: 613 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 978 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
@ -0,0 +1,315 @@ |
|||||
|
.border-b { |
||||
|
border-bottom: 1px solid #ccc; |
||||
|
} |
||||
|
|
||||
|
.relative { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.absolute { |
||||
|
position: absolute; |
||||
|
} |
||||
|
|
||||
|
.d-flex { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.flex-wrap { |
||||
|
flex-wrap: wrap; |
||||
|
} |
||||
|
|
||||
|
.flex-nowrap { |
||||
|
flex-wrap: nowrap; |
||||
|
} |
||||
|
|
||||
|
.flex-column { |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.flex-column-reverse { |
||||
|
flex-direction: column-reverse; |
||||
|
} |
||||
|
|
||||
|
.flex-row { |
||||
|
flex-direction: row; |
||||
|
} |
||||
|
|
||||
|
.flex-row-reverse { |
||||
|
flex-direction: row-reverse; |
||||
|
} |
||||
|
|
||||
|
.justify-center { |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.justify-space-between { |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.align-center { |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.flex-1 { |
||||
|
display: flex; |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.flex-2 { |
||||
|
display: flex; |
||||
|
flex: 2; |
||||
|
} |
||||
|
|
||||
|
.flex-3 { |
||||
|
display: flex; |
||||
|
flex: 3; |
||||
|
} |
||||
|
|
||||
|
.pointer { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.ellipsis-2 { |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
display: -webkit-box; |
||||
|
-webkit-line-clamp: 2; |
||||
|
-webkit-box-orient: vertical; |
||||
|
} |
||||
|
|
||||
|
.ellipsis-3 { |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
display: -webkit-box; |
||||
|
-webkit-line-clamp: 3; |
||||
|
-webkit-box-orient: vertical; |
||||
|
} |
||||
|
|
||||
|
.fz22 { |
||||
|
font-size: 30px; |
||||
|
} |
||||
|
|
||||
|
.border-bottom { |
||||
|
border-bottom: 1px solid #dfe6ec; |
||||
|
} |
||||
|
|
||||
|
.borderNone { |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
|
||||
|
.common-picker { |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
z-index: 999; |
||||
|
} |
||||
|
|
||||
|
.common-button { |
||||
|
width: 200px; |
||||
|
margin: 0 auto; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.common-slider { |
||||
|
width: 90%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
flex-direction: column; |
||||
|
position: relative; |
||||
|
margin: 40px 0 20px; |
||||
|
} |
||||
|
|
||||
|
.common-slider .van-stepper--round { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.common-slider .van-stepper--round .van-stepper__minus { |
||||
|
width: 30px; |
||||
|
height: 30px; |
||||
|
color: #7690e5; |
||||
|
border-color: #7690e5; |
||||
|
} |
||||
|
|
||||
|
.common-slider .van-stepper--round .van-stepper__plus { |
||||
|
width: 30px; |
||||
|
height: 30px; |
||||
|
background-color: #7690e5; |
||||
|
} |
||||
|
|
||||
|
.common-slider .van-stepper--round .van-stepper__input { |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
right: 50%; |
||||
|
transform: translate(-50%, -50%); |
||||
|
bottom: 5px; |
||||
|
background: #7690e5; |
||||
|
border-radius: 6px; |
||||
|
font-size: 24px; |
||||
|
font-family: OPPOSans, OPPOSans-Bold; |
||||
|
font-weight: 700; |
||||
|
text-align: center; |
||||
|
color: #ffffff; |
||||
|
padding: 10px 0; |
||||
|
width: 100px; |
||||
|
margin-bottom: 10px; |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.common-slider .common-slider-slider { |
||||
|
width: 80%; |
||||
|
position: absolute; |
||||
|
bottom: 6px; |
||||
|
height: 16px; |
||||
|
background: #e4edff; |
||||
|
border-radius: 8px; |
||||
|
} |
||||
|
|
||||
|
.common-slider .common-slider-slider .van-slider__button-wrapper { |
||||
|
width: 30px; |
||||
|
height: 30px; |
||||
|
background: #7690e5; |
||||
|
border-radius: 50%; |
||||
|
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
.common-slider .common-slider-slider .ant-input-number { |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
right: 50%; |
||||
|
bottom: 20px; |
||||
|
transform: translate(-50%, -50%); |
||||
|
font-size: 24px; |
||||
|
font-family: OPPOSans, OPPOSans-Bold; |
||||
|
font-weight: 700; |
||||
|
height: auto; |
||||
|
padding: 4px 0; |
||||
|
text-align: center; |
||||
|
background: #7690e5; |
||||
|
border-radius: 6px; |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.common-slider .common-slider-slider .ant-input-number .ant-input-number-input { |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.common-slider .common-slider-slider .ant-input-number .ant-input-number-handler-wrap { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.common-slider .common-slider-slider .slider-icon { |
||||
|
position: absolute; |
||||
|
top: -23px; |
||||
|
left: 2px; |
||||
|
color: #7690e5; |
||||
|
font-size: 26px; |
||||
|
} |
||||
|
|
||||
|
.ant-form .ant-form-item-label { |
||||
|
text-align: left; |
||||
|
} |
||||
|
|
||||
|
.ant-form label { |
||||
|
font-size: 26px !important; |
||||
|
font-weight: 500; |
||||
|
color: #565e6f; |
||||
|
} |
||||
|
|
||||
|
.ant-form .ant-form-item { |
||||
|
margin-bottom: 18px !important; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.ant-form .ant-form-item:not(:last-child) { |
||||
|
border-bottom: 1px solid #dfe6ec; |
||||
|
padding-bottom: 18px; |
||||
|
} |
||||
|
|
||||
|
.ant-form .dose-item { |
||||
|
margin-bottom: 40px !important; |
||||
|
} |
||||
|
|
||||
|
.ant-form .mb0 { |
||||
|
margin-bottom: 0px !important; |
||||
|
} |
||||
|
|
||||
|
.ant-form .borderNone { |
||||
|
border-bottom: none !important; |
||||
|
} |
||||
|
|
||||
|
.ant-form .ant-radio-button-wrapper { |
||||
|
padding: 0 18px; |
||||
|
height: 40px; |
||||
|
line-height: 40px; |
||||
|
font-size: 18px !important; |
||||
|
margin-right: 20px; |
||||
|
margin-bottom: 10px; |
||||
|
background: #f8f8f9; |
||||
|
border: 0.5px solid #a3acbf; |
||||
|
border-radius: 6px; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
|
||||
|
.ant-form .ant-radio-button-wrapper:before, |
||||
|
.ant-form .ant-radio-button-wrapper .ant-radio-button-wrapper-checked:before { |
||||
|
display: none !important; |
||||
|
} |
||||
|
|
||||
|
.ant-form .ant-radio-button-wrapper:first-child, |
||||
|
.ant-form .ant-radio-button-wrapper:last-child { |
||||
|
border-radius: 6px !important; |
||||
|
} |
||||
|
|
||||
|
.ant-form .ant-radio-button-wrapper:last-child { |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
|
||||
|
.ant-form .ant-form-item-control { |
||||
|
text-align: left; |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
|
||||
|
.solid .ant-checkbox-wrapper { |
||||
|
background: #f8f8f9; |
||||
|
border: 0.5px solid #a3acbf; |
||||
|
border-radius: 6px; |
||||
|
vertical-align: middle; |
||||
|
margin-right: 20px; |
||||
|
margin-bottom: 10px; |
||||
|
font-size: 1.2vw !important; |
||||
|
line-height: 40px; |
||||
|
padding: 0 18px; |
||||
|
height: 40px; |
||||
|
} |
||||
|
|
||||
|
.solid .ant-checkbox-wrapper.ant-checkbox-wrapper-checked { |
||||
|
background: #7690e5; |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.solid .ant-checkbox-wrapper .ant-checkbox { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.ant-tabs-nav-container .ant-tabs-tab { |
||||
|
font-size: 20px; |
||||
|
font-family: Source Han Sans CN, Source Han Sans CN-Medium; |
||||
|
font-weight: 500; |
||||
|
text-align: left; |
||||
|
color: #70798c; |
||||
|
} |
||||
|
|
||||
|
.ant-tabs-nav-container .ant-tabs-tab-active { |
||||
|
font-weight: 700; |
||||
|
font-family: Source Han Sans CN, Source Han Sans CN-Bold; |
||||
|
color: #393d4e !important; |
||||
|
} |
||||
|
|
||||
|
.ant-tabs-nav-container .ant-tabs-ink-bar { |
||||
|
background: #7690e5 !important; |
||||
|
} |
||||
@ -0,0 +1,819 @@ |
|||||
|
.border-b { |
||||
|
border-bottom: 1px solid #ccc; |
||||
|
} |
||||
|
|
||||
|
// position |
||||
|
.relative { |
||||
|
position: relative; |
||||
|
} |
||||
|
.absolute { |
||||
|
position: absolute; |
||||
|
} |
||||
|
|
||||
|
// flex |
||||
|
.d-flex{ |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.flex-wrap{ |
||||
|
flex-wrap: wrap; |
||||
|
} |
||||
|
|
||||
|
.flex-nowrap{ |
||||
|
flex-wrap: nowrap; |
||||
|
} |
||||
|
|
||||
|
.flex-column{ |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.flex-column-reverse{ |
||||
|
flex-direction: column-reverse; |
||||
|
} |
||||
|
|
||||
|
.flex-row{ |
||||
|
flex-direction: row; |
||||
|
} |
||||
|
|
||||
|
.flex-row-reverse{ |
||||
|
flex-direction: row-reverse; |
||||
|
} |
||||
|
|
||||
|
.justify-center{ |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.justify-space-between{ |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.align-center{ |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.flex-1{ |
||||
|
display: flex; |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.flex-2{ |
||||
|
display: flex; |
||||
|
flex: 2; |
||||
|
} |
||||
|
.flex-3{ |
||||
|
display: flex; |
||||
|
flex: 3; |
||||
|
} |
||||
|
|
||||
|
// other |
||||
|
.pointer{ |
||||
|
cursor:pointer; |
||||
|
} |
||||
|
.ellipsis-2 { |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
display: -webkit-box; |
||||
|
-webkit-line-clamp: 2; |
||||
|
-webkit-box-orient: vertical; |
||||
|
} |
||||
|
.ellipsis-3 { |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
display: -webkit-box; |
||||
|
-webkit-line-clamp: 3; |
||||
|
-webkit-box-orient: vertical; |
||||
|
} |
||||
|
.font-bold{ |
||||
|
font: bold; |
||||
|
} |
||||
|
.text-left{ |
||||
|
text-align: left; |
||||
|
} |
||||
|
.text-right{ |
||||
|
text-align: right; |
||||
|
} |
||||
|
.text-center{ |
||||
|
text-align: center; |
||||
|
} |
||||
|
.fz20{ |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
.fz22{ |
||||
|
font-size: 30px; |
||||
|
} |
||||
|
.fz24{ |
||||
|
font-size: 24px; |
||||
|
} |
||||
|
.border-bottom{ |
||||
|
border-bottom: 1px solid #dfe6ec; |
||||
|
} |
||||
|
.borderNone{ |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
|
||||
|
.common-picker{ |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
z-index: 999; |
||||
|
} |
||||
|
.common-button { |
||||
|
width: 200px; |
||||
|
margin: 0 auto; |
||||
|
margin-bottom: 12px; |
||||
|
border-radius: 20px; |
||||
|
} |
||||
|
.common-slider{ |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
flex-direction: column; |
||||
|
position: relative; |
||||
|
margin: 80px 0 20px; |
||||
|
.van-stepper--round{ |
||||
|
width: 90%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
position: relative; |
||||
|
.van-stepper__input{ |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
right: 50%; |
||||
|
transform: translate(-50%, -50%); |
||||
|
bottom: 5px; |
||||
|
background: #007AFF; |
||||
|
border-radius: 6px; |
||||
|
font-size: 24px; |
||||
|
font-family: OPPOSans, OPPOSans-Bold; |
||||
|
font-weight: 700; |
||||
|
text-align: center; |
||||
|
color: #ffffff; |
||||
|
padding: 10px 0; |
||||
|
width: 100px; |
||||
|
margin-bottom: 10px; |
||||
|
display: none; |
||||
|
} |
||||
|
.van-stepper__minus{ |
||||
|
width: 30px; |
||||
|
height: 30px; |
||||
|
color: #fff; |
||||
|
color: #007AFF; |
||||
|
border-color: #007AFF; |
||||
|
} |
||||
|
.van-stepper__plus{ |
||||
|
width: 30px; |
||||
|
height: 30px; |
||||
|
background-color: #007AFF; |
||||
|
} |
||||
|
&.one{ |
||||
|
.van-stepper__minus{ |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 40px; |
||||
|
width: 30px; |
||||
|
height: 30px; |
||||
|
color: #fff; |
||||
|
border-color: #007AFF; |
||||
|
// background-color: #007AFF; |
||||
|
background: linear-gradient(to right, rgba(82, 165, 255, 1), rgba(0, 122, 255, 1)); |
||||
|
} |
||||
|
.van-stepper__plus{ |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
right: 40px; |
||||
|
width: 30px; |
||||
|
height: 30px; |
||||
|
// background-color: #007AFF; |
||||
|
background: linear-gradient(to right, rgba(82, 165, 255, 1), rgba(0, 122, 255, 1)); |
||||
|
} |
||||
|
} |
||||
|
&.five{ |
||||
|
.van-stepper__minus{ |
||||
|
width: 30px; |
||||
|
height: 30px; |
||||
|
color: #fff; |
||||
|
border-color: #007AFF; |
||||
|
// background-color: #007AFF; |
||||
|
background: linear-gradient(to right, rgba(82, 165, 255, 1), rgba(0, 122, 255, 1)); |
||||
|
&::before{ |
||||
|
content: '-5'; |
||||
|
font-size: 14px; |
||||
|
font-weight: bold; |
||||
|
position: absolute; |
||||
|
top: 4px; |
||||
|
left: 13px; |
||||
|
height: 0; |
||||
|
} |
||||
|
} |
||||
|
.van-stepper__plus{ |
||||
|
width: 30px; |
||||
|
height: 30px; |
||||
|
color: #fff; |
||||
|
border-color: #007AFF; |
||||
|
// background-color: #007AFF; |
||||
|
background: linear-gradient(to right, rgba(82, 165, 255, 1), rgba(0, 122, 255, 1)); |
||||
|
position: relative; |
||||
|
&::before{ |
||||
|
content: '+5'; |
||||
|
font-size: 14px; |
||||
|
font-weight: bold; |
||||
|
position: absolute; |
||||
|
top: 4px; |
||||
|
left: 13px; |
||||
|
height: 0; |
||||
|
// letter-spacing: -1px; |
||||
|
} |
||||
|
&::after{ |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
&.ten{ |
||||
|
.van-stepper__minus{ |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: -35px; |
||||
|
width: 30px; |
||||
|
height: 30px; |
||||
|
color: #fff; |
||||
|
border-color: #007AFF; |
||||
|
// background-color: #007AFF; |
||||
|
background: linear-gradient(to right, rgba(82, 165, 255, 1), rgba(0, 122, 255, 1)); |
||||
|
&::before{ |
||||
|
content: '-10'; |
||||
|
font-size: 14px; |
||||
|
font-weight: bold; |
||||
|
position: absolute; |
||||
|
top: 4px; |
||||
|
left: 11px; |
||||
|
height: 0; |
||||
|
// letter-spacing: -1px; |
||||
|
} |
||||
|
} |
||||
|
.van-stepper__plus{ |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: -35px; |
||||
|
width: 30px; |
||||
|
height: 30px; |
||||
|
color: #fff; |
||||
|
// background-color: #52A5FF; |
||||
|
background: linear-gradient(to right, rgba(82, 165, 255, 1), rgba(0, 122, 255, 1)); |
||||
|
&::before{ |
||||
|
content: '+10'; |
||||
|
font-size: 14px; |
||||
|
font-weight: bold; |
||||
|
position: absolute; |
||||
|
top: 4px; |
||||
|
left: 11px; |
||||
|
height: 0; |
||||
|
// letter-spacing: -1px; |
||||
|
} |
||||
|
&::after{ |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
.common-slider-slider{ |
||||
|
width: 68%; |
||||
|
position: absolute; |
||||
|
bottom: 6px; |
||||
|
height: 16px; |
||||
|
// background: #e4edff; |
||||
|
background: linear-gradient(to right, #007AFF, #52A5FF); |
||||
|
border-radius: 8px; |
||||
|
.van-slider__button-wrapper{ |
||||
|
width: 30px; |
||||
|
height: 30px; |
||||
|
background-color: #007AFF; |
||||
|
border-radius: 50%; |
||||
|
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1); |
||||
|
|
||||
|
.inner-circle{ |
||||
|
width: 15px; |
||||
|
height: 15px; |
||||
|
border-radius: 50%; /* 圆形 */ |
||||
|
background-color: white; /* 白色背景 */ |
||||
|
position: absolute; /* 绝对定位 */ |
||||
|
top: 50%; |
||||
|
left: 50%; |
||||
|
transform: translate(-50%, -50%); /* 居中 */ |
||||
|
} |
||||
|
} |
||||
|
.ant-input-number{ |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
right: 50%; |
||||
|
bottom: 18px; |
||||
|
transform: translate(-50%, -50%); |
||||
|
font-size: 24px; |
||||
|
font-family: OPPOSans, OPPOSans-Bold; |
||||
|
font-weight: 700; |
||||
|
height: auto; |
||||
|
padding: 4px 0; |
||||
|
text-align: center; |
||||
|
// background: #7690e5; |
||||
|
background: linear-gradient(to right, rgba(0, 122, 255, 0.7), rgba(0, 122, 255, 1)); |
||||
|
border-radius: 6px; |
||||
|
color: #fff; |
||||
|
.ant-input-number-input{ |
||||
|
text-align: center; |
||||
|
} |
||||
|
.ant-input-number-handler-wrap{ |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
|
.van-slider__bar{ |
||||
|
background: linear-gradient(to right, #007AFF, #52A5FF); |
||||
|
// background: linear-gradient(to right, rgba(0, 122, 255, 0.7), rgba(0, 122, 255, 1)); |
||||
|
} |
||||
|
.slider-icon{ |
||||
|
position: absolute; |
||||
|
top: -20px; |
||||
|
left: 2px; |
||||
|
color: #007AFF; |
||||
|
font-size: 26px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
.ant-form { |
||||
|
.ant-form-item-label{ |
||||
|
text-align: left; |
||||
|
} |
||||
|
label{ |
||||
|
font-size: 26px ; |
||||
|
font-weight: 500; |
||||
|
color: #565e6f; |
||||
|
} |
||||
|
.ant-form-item{ |
||||
|
&:not(:last-child) { |
||||
|
border-bottom: 1px solid #dfe6ec; |
||||
|
} |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.dose-item{ |
||||
|
margin-bottom: 40px!important; |
||||
|
} |
||||
|
.mb0{ |
||||
|
margin-bottom: 10px!important; |
||||
|
} |
||||
|
.borderNone{ |
||||
|
border-bottom: none!important; |
||||
|
} |
||||
|
.ant-radio-button-wrapper{ |
||||
|
padding: 0 18px; |
||||
|
height: 40px; |
||||
|
line-height: 40px; |
||||
|
font-size: 18px!important; |
||||
|
margin-right: 20px; |
||||
|
margin-bottom: 10px; |
||||
|
background: #f9f9f9; |
||||
|
border: 0.5px solid #a3acbf; |
||||
|
border-radius: 6px; |
||||
|
vertical-align: middle; |
||||
|
&:before, .ant-radio-button-wrapper-checked:before{ |
||||
|
display: none!important; |
||||
|
} |
||||
|
&:first-child, &:last-child{ |
||||
|
border-radius: 6px!important; |
||||
|
} |
||||
|
&:last-child{ |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
} |
||||
|
.ant-form-item-control{ |
||||
|
text-align: left; |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
} |
||||
|
// .solid{ |
||||
|
// .ant-checkbox-wrapper { |
||||
|
// background: #f9f9f9; |
||||
|
// border: 0.5px solid #a3acbf; |
||||
|
// border-radius: 6px; |
||||
|
// vertical-align: middle; |
||||
|
// margin-right: 20px; |
||||
|
// margin-bottom: 10px; |
||||
|
// font-size: 18px!important; |
||||
|
// line-height: 40px; |
||||
|
// padding: 0 18px; |
||||
|
// height: 40px; |
||||
|
// min-width: 0!important; |
||||
|
// &.ant-checkbox-wrapper-checked{ |
||||
|
// background: #7690e5; |
||||
|
// color: #fff; |
||||
|
// } |
||||
|
// .ant-checkbox{ |
||||
|
// display: none; |
||||
|
// } |
||||
|
// } |
||||
|
// } |
||||
|
.ant-tabs-nav-container{ |
||||
|
.ant-tabs-tab{ |
||||
|
// font-size: 20px; |
||||
|
// font-family: Source Han Sans CN, Source Han Sans CN-Medium; |
||||
|
// font-weight: 500; |
||||
|
// text-align: left; |
||||
|
// color: #70798c; |
||||
|
} |
||||
|
.ant-tabs-tab-active{ |
||||
|
// // font-weight: 700; |
||||
|
// font-family: Source Han Sans CN, Source Han Sans CN-Bold; |
||||
|
// color: #393d4e!important; |
||||
|
} |
||||
|
.ant-tabs-ink-bar{ |
||||
|
// background: #7690e5 !important; |
||||
|
border-bottom: 3px solid transparent; /* 设置透明的底部边框 */ |
||||
|
border-image: linear-gradient(to right, #fff, #007AFF) 1; /* 使用渐变色填充边框 */ |
||||
|
border-radius: 10px; /* 设置圆角 */ |
||||
|
} |
||||
|
} |
||||
|
.ant-modal-wrap { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
.ant-modal{ |
||||
|
top: 0; |
||||
|
padding-bottom: 0; |
||||
|
.ant-modal-body { |
||||
|
padding: 26px 26px 20px !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.container-left-header { |
||||
|
display: flex; |
||||
|
margin-top: 20px; |
||||
|
margin-bottom: 20px; |
||||
|
span { |
||||
|
width: 12px; |
||||
|
height: 32px; |
||||
|
display: inline-block; |
||||
|
border-radius: 12px; |
||||
|
background: #8FB3FB; |
||||
|
margin-right: 16px; |
||||
|
} |
||||
|
|
||||
|
p { |
||||
|
line-height: 32px; |
||||
|
font-size: 32px; |
||||
|
font-weight: 600; |
||||
|
margin: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
//急诊溶栓记录 |
||||
|
.basic-btn { |
||||
|
height: 72px; |
||||
|
background: linear-gradient(180deg, #b1caff, #83aafa); |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
border-radius: 36px; |
||||
|
margin: 60px 20px 0 20px; |
||||
|
|
||||
|
.basic-ico { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
|
||||
|
p { |
||||
|
line-height: 72px; |
||||
|
font-weight: 600; |
||||
|
color: #fff; |
||||
|
font-size: 24px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.container-left-basic { |
||||
|
min-height: 80px; |
||||
|
background: #7690E5; |
||||
|
border-radius: 12px; |
||||
|
margin-bottom: 24px; |
||||
|
color: #70798c; |
||||
|
// 下一节点 |
||||
|
.container-basic-node { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
padding: 0 24px; |
||||
|
|
||||
|
.basic-p { |
||||
|
font-size: 24px; |
||||
|
color: #fff; |
||||
|
font-weight: 600; |
||||
|
text-align: left; |
||||
|
line-height: 62px; |
||||
|
margin: 0; |
||||
|
max-width: 74%; |
||||
|
white-space: nowrap; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
|
||||
|
// 节点倒计时 |
||||
|
.basic-node-time { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
p { |
||||
|
margin: 0; |
||||
|
background: #fff; |
||||
|
padding: 2px 6px; |
||||
|
color: #758FE4; |
||||
|
font-weight: 600; |
||||
|
font-size: 18px; |
||||
|
border-radius: 6px; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
span { |
||||
|
font-weight: 600; |
||||
|
font-size: 30px; |
||||
|
color: #fff; |
||||
|
margin: 0 8px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.leftbasic-centbox { |
||||
|
height: 80px; |
||||
|
background: #fff; |
||||
|
margin-left: 6px; |
||||
|
border-radius: 12px; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
padding: 0 16px; |
||||
|
} |
||||
|
|
||||
|
.leftbasic-centbox-title { |
||||
|
font-size: 24px; |
||||
|
font-weight: 600; |
||||
|
line-height: 80px; |
||||
|
} |
||||
|
|
||||
|
.leftbasic-centbox-ico { |
||||
|
margin-top: 32px; |
||||
|
} |
||||
|
&.active{ |
||||
|
background: #fff; |
||||
|
.leftbasic-centbox{ |
||||
|
background: #7690E5; |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.container-left-header { |
||||
|
display: flex; |
||||
|
span { |
||||
|
width: 12px; |
||||
|
height: 32px; |
||||
|
display: inline-block; |
||||
|
border-radius: 12px; |
||||
|
background: #8FB3FB; |
||||
|
margin-right: 16px; |
||||
|
} |
||||
|
|
||||
|
p { |
||||
|
line-height: 32px; |
||||
|
font-size: 32px; |
||||
|
font-weight: 600; |
||||
|
margin: 0; |
||||
|
} |
||||
|
} |
||||
|
.basicr-back { |
||||
|
border-radius: 12px; |
||||
|
background: #fff; |
||||
|
padding: 0 28px; |
||||
|
box-shadow: 0 2px 12px 0 rgba(52, 52, 52, .1); |
||||
|
} |
||||
|
.container { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.container-left { |
||||
|
flex: 1; |
||||
|
padding-left: 20px; |
||||
|
margin-top: 24px; |
||||
|
} |
||||
|
.container-right{ |
||||
|
flex: 2; |
||||
|
overflow-y: auto; |
||||
|
display: flex; |
||||
|
padding-right: 20px; |
||||
|
border-left: 1px solid #C9D1DF; |
||||
|
padding-left: 20px; |
||||
|
margin-left: 20px; |
||||
|
margin-top: 24px; |
||||
|
margin-bottom: 24px; |
||||
|
} |
||||
|
} |
||||
|
.ant-select-dropdown{ |
||||
|
.ant-select-dropdown-menu-item{ |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
} |
||||
|
.detail-form { |
||||
|
.detail-form-control{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.ant-form-item { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 12px 0 !important; |
||||
|
margin-bottom: 0 !important; |
||||
|
|
||||
|
.ant-form-item-label { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
label { |
||||
|
font-size: 24px !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ant-radio-wrapper { |
||||
|
height: 30px !important; |
||||
|
font-size: 20px !important; |
||||
|
} |
||||
|
} |
||||
|
.ant-select{ |
||||
|
min-width: 300px; |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
} |
||||
|
.ant-select-selection-selected-value{ |
||||
|
padding-right: 10px; |
||||
|
} |
||||
|
.ant-select-selection__rendered{ |
||||
|
line-height: 40px; |
||||
|
max-width: 300px; |
||||
|
} |
||||
|
.ant-form-item-control-wrapper { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: flex-end; |
||||
|
text-align: right; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.Overviewbasicr { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
// 复选框 |
||||
|
.ant-checkbox-group{ |
||||
|
display: flex!important; |
||||
|
flex-wrap: wrap; |
||||
|
.ant-checkbox-wrapper{ |
||||
|
min-width: 30%; |
||||
|
} |
||||
|
.ant-checkbox-checked{ |
||||
|
.ant-checkbox-inner{ |
||||
|
background-color: #7690e5!important; |
||||
|
border-color: #7690e5!important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 详情form-item |
||||
|
.jmrs-form-item { |
||||
|
.jmrs-form-item-con { |
||||
|
|
||||
|
&.checkbox { |
||||
|
flex-direction: column; |
||||
|
.content-right{ |
||||
|
margin-top: 10px; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
.content-right{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.operate { |
||||
|
font-size: 24px; |
||||
|
color: #000000; |
||||
|
padding-right: 12px; |
||||
|
} |
||||
|
.label-info{ |
||||
|
color: #000000; |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
// 折叠面板 |
||||
|
// .collapse-content{ |
||||
|
// display: flex; |
||||
|
// justify-content: space-between; |
||||
|
// padding: 5px 0; |
||||
|
// } |
||||
|
// .ant-collapse-arrow, .ant-select-arrow{ |
||||
|
// font-size: 20px!important; |
||||
|
// color: #70798C!important; |
||||
|
// } |
||||
|
|
||||
|
// 知情同意 |
||||
|
.Informed-container { |
||||
|
// padding: 0 0 30px; |
||||
|
|
||||
|
.mt2 { |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
|
||||
|
.informed-info { |
||||
|
font-size: 1.2rem; |
||||
|
font-weight: bold; |
||||
|
text-align: left; |
||||
|
line-height: 36px; |
||||
|
&.indent { |
||||
|
text-indent: 2em; |
||||
|
} |
||||
|
&.pl{ |
||||
|
padding-left: 20px; |
||||
|
} |
||||
|
|
||||
|
&.informed-info-sky{ |
||||
|
color: #007AFF; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.informed-list { |
||||
|
display: flex; |
||||
|
// flex-wrap: wrap; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-top: 20px; |
||||
|
|
||||
|
.informed-item { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
// justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 15px; |
||||
|
margin-right: 10px; |
||||
|
|
||||
|
// margin: 0 10px 20px; |
||||
|
>span { |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
.item-input { |
||||
|
width: 45%; |
||||
|
} |
||||
|
|
||||
|
.item-sign { |
||||
|
width: 50%; |
||||
|
} |
||||
|
|
||||
|
.item-btn { |
||||
|
color: #7690e5; |
||||
|
border: 1px solid #7690e5; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.item-img { |
||||
|
min-width: 120px; |
||||
|
// flex: 1; |
||||
|
height: 40px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
box-sizing: border-box; |
||||
|
margin: 0 5px; |
||||
|
img { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
&.item-img-black{ |
||||
|
background-color: black; |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
.item-img-non { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
.informed-item1{ |
||||
|
width: 40%; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 15px; |
||||
|
|
||||
|
.item-input { |
||||
|
width: 60%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
@ -0,0 +1,274 @@ |
|||||
|
.white--text{ |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.text-left { |
||||
|
text-align: left !important; |
||||
|
} |
||||
|
|
||||
|
// padding |
||||
|
.pa-3 { |
||||
|
padding: 12px; |
||||
|
} |
||||
|
|
||||
|
.px-2{ |
||||
|
padding-left: 8px; |
||||
|
padding-right: 8px; |
||||
|
} |
||||
|
|
||||
|
.px-3{ |
||||
|
padding-left: 12px; |
||||
|
padding-right: 12px; |
||||
|
} |
||||
|
|
||||
|
.px-10{ |
||||
|
padding-left: 30px; |
||||
|
padding-right: 30px; |
||||
|
} |
||||
|
|
||||
|
.pb-2 { |
||||
|
padding-bottom: 8px; |
||||
|
} |
||||
|
|
||||
|
.pb-3 { |
||||
|
padding-bottom: 12px; |
||||
|
} |
||||
|
|
||||
|
.pb-4 { |
||||
|
padding-bottom: 16px; |
||||
|
} |
||||
|
|
||||
|
.pb-5 { |
||||
|
padding-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.pb-10 { |
||||
|
padding-bottom: 40px; |
||||
|
} |
||||
|
.pr-1 { |
||||
|
padding-right: 4px; |
||||
|
} |
||||
|
.pr-2 { |
||||
|
padding-right: 8px; |
||||
|
} |
||||
|
.pr-3 { |
||||
|
padding-right: 12px; |
||||
|
} |
||||
|
.pr-4 { |
||||
|
padding-right: 18px; |
||||
|
} |
||||
|
.pr-5 { |
||||
|
padding-right: 20px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
// margin |
||||
|
.ma-2 { |
||||
|
margin: 8px; |
||||
|
} |
||||
|
|
||||
|
.ma-3 { |
||||
|
margin: 12px; |
||||
|
} |
||||
|
|
||||
|
.mx-2{ |
||||
|
margin-left: 8px; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
|
||||
|
.my-2{ |
||||
|
margin-top: 8px; |
||||
|
margin-bottom: 8px; |
||||
|
} |
||||
|
|
||||
|
.my-3{ |
||||
|
margin-top: 12px; |
||||
|
margin-bottom: 12px; |
||||
|
} |
||||
|
|
||||
|
.my-4{ |
||||
|
margin-top: 16px; |
||||
|
margin-bottom: 16px; |
||||
|
} |
||||
|
|
||||
|
.my-6{ |
||||
|
margin-top: 24px; |
||||
|
margin-bottom: 24px; |
||||
|
} |
||||
|
|
||||
|
.mt-1{ |
||||
|
margin-top: 4px; |
||||
|
} |
||||
|
|
||||
|
.mt-2{ |
||||
|
margin-top: 8px; |
||||
|
} |
||||
|
|
||||
|
.mt-3{ |
||||
|
margin-top: 12px; |
||||
|
} |
||||
|
|
||||
|
.mt-4{ |
||||
|
margin-top: 16px; |
||||
|
} |
||||
|
|
||||
|
.mb-1{ |
||||
|
margin-bottom: 4px; |
||||
|
} |
||||
|
|
||||
|
.mb-2{ |
||||
|
margin-bottom: 8px; |
||||
|
} |
||||
|
|
||||
|
.mb-3{ |
||||
|
margin-bottom: 12px; |
||||
|
} |
||||
|
|
||||
|
.mb-4{ |
||||
|
margin-bottom: 16px; |
||||
|
} |
||||
|
|
||||
|
.mb-5{ |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.mb-6{ |
||||
|
margin-bottom: 24px; |
||||
|
} |
||||
|
|
||||
|
.ml-2{ |
||||
|
margin-left: 8px; |
||||
|
} |
||||
|
|
||||
|
.ml-3{ |
||||
|
margin-left: 12px; |
||||
|
} |
||||
|
|
||||
|
.ml-4{ |
||||
|
margin-left: 16px; |
||||
|
} |
||||
|
|
||||
|
.ml-5{ |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
|
||||
|
.ml-6{ |
||||
|
margin-left: 24px; |
||||
|
} |
||||
|
|
||||
|
.ml-7{ |
||||
|
margin-left: 28px; |
||||
|
} |
||||
|
|
||||
|
.ml-8{ |
||||
|
margin-left: 32px; |
||||
|
} |
||||
|
|
||||
|
.mr-1{ |
||||
|
margin-right: 4px; |
||||
|
} |
||||
|
|
||||
|
.mr-2{ |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
|
||||
|
.mr-3{ |
||||
|
margin-right: 12px; |
||||
|
} |
||||
|
|
||||
|
.mr-4{ |
||||
|
margin-right: 16px; |
||||
|
} |
||||
|
|
||||
|
.mr-5{ |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
|
||||
|
.mr-6{ |
||||
|
margin-right: 24px; |
||||
|
} |
||||
|
|
||||
|
// background |
||||
|
.white { |
||||
|
background: white; |
||||
|
} |
||||
|
|
||||
|
// font |
||||
|
.font-bold-24{ |
||||
|
font-size: 24px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.font-24{ |
||||
|
font-size: 24px; |
||||
|
} |
||||
|
|
||||
|
.font-bold-16{ |
||||
|
font-size: 16px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.font-16{ |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
.font-bold-14{ |
||||
|
font-size: 14px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.font-14{ |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
.font-18{ |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.icon-size{ |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
|
||||
|
h2{ |
||||
|
font-size: 24px; |
||||
|
font-weight: bold; |
||||
|
color: rgba(0,0,0,.85) |
||||
|
} |
||||
|
|
||||
|
.textColor{ |
||||
|
color: rgba(0,0,0,.65) |
||||
|
} |
||||
|
|
||||
|
.baseColor{ |
||||
|
color: #7690e5 |
||||
|
} |
||||
|
|
||||
|
.bg{ |
||||
|
background: #F5F5F5 |
||||
|
} |
||||
|
|
||||
|
.ant-btn-primary, .ant-radio-button-wrapper-checked{ |
||||
|
background-color: #017aff!important; |
||||
|
border-color: #017aff!important; |
||||
|
} |
||||
|
.ant-radio-checked{ |
||||
|
border-color: #7690e5!important; |
||||
|
} |
||||
|
.ant-radio-inner{ |
||||
|
border-color: #7690e5!important; |
||||
|
} |
||||
|
.ant-radio-inner:after{ |
||||
|
background-color: #7690e5!important; |
||||
|
} |
||||
|
.ant-btn-link:hover, .ant-btn-link:focus{ |
||||
|
color: #7690e5!important; |
||||
|
} |
||||
|
|
||||
|
.fill-width{ |
||||
|
width:100%; |
||||
|
} |
||||
|
|
||||
|
.fill-height{ |
||||
|
height:100%; |
||||
|
} |
||||
@ -0,0 +1,161 @@ |
|||||
|
<!-- |
||||
|
* @desc: 导航 |
||||
|
* @Author: gaowenya |
||||
|
* @Date: 2023-06-21 11:00 |
||||
|
* @LastEditors: |
||||
|
* @LastEditTime: |
||||
|
--> |
||||
|
<template> |
||||
|
<header class="header" :class="getPatient === false ? 'mt' : ''"> |
||||
|
<div class="header-content" v-if="getChangeText.title || getPatient"> |
||||
|
<div class="header-back" v-if="isBack" @click="toBack"> |
||||
|
<a-icon type="left" />返回 |
||||
|
</div> |
||||
|
<div class="header-title"> |
||||
|
<span v-if="getChangeText.title"> |
||||
|
{{ getChangeText.title }} |
||||
|
</span> |
||||
|
<p v-else class="caret-top"> |
||||
|
姓名: |
||||
|
<span> {{ patientData.patientName || '暂无' }} </span> |
||||
|
性别: |
||||
|
<span> |
||||
|
{{ sex[patientData.patientGender] || '暂无' }} |
||||
|
</span> |
||||
|
年龄: |
||||
|
<span> {{ patientData.patientAge || '暂无' }} </span> |
||||
|
证件号: |
||||
|
<span> {{ patientData.jzh || '暂无' }} </span> |
||||
|
急诊号: |
||||
|
<span> 暂无 </span> |
||||
|
</p> |
||||
|
</div> |
||||
|
<div class="header-right" v-if="isMore" @click="changeOverviewType"> |
||||
|
{{ getChangeText.text }}<a-icon type="swap" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</header> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapMutations, mapState } from 'vuex'; |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
sex: { |
||||
|
0: '男', |
||||
|
1: '女', |
||||
|
}, |
||||
|
overview: { |
||||
|
title: '', |
||||
|
text: '', |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapState('patient', ['patientData', 'overviewType']), |
||||
|
...mapState('storm', ['isBack', 'isMore']), |
||||
|
getChangeText() { |
||||
|
if (this.overviewType === 'info') { |
||||
|
return { |
||||
|
title: '患者信息', |
||||
|
text: '切换至概览', |
||||
|
}; |
||||
|
} else if (this.overviewType === 'overview') { |
||||
|
return { |
||||
|
title: '患者概览', |
||||
|
text: '切换至详情', |
||||
|
}; |
||||
|
} |
||||
|
return { |
||||
|
title: '', |
||||
|
text: '', |
||||
|
}; |
||||
|
}, |
||||
|
getPatient() { |
||||
|
if (!this.patientData) return false; |
||||
|
const { patientName, patientGender, patientAge, patientIdCardNo } = |
||||
|
this.patientData; |
||||
|
console.log(' this.patientData: ', this.patientData); |
||||
|
let sex = { |
||||
|
0: '男', |
||||
|
1: '女', |
||||
|
}; |
||||
|
if (!patientName) return false; |
||||
|
return `姓名: ${patientName} 性别: ${sex[patientGender]} 年龄: ${ |
||||
|
patientAge || '' |
||||
|
} 证件号: ${patientIdCardNo} 急诊号: 暂无`; |
||||
|
}, |
||||
|
}, |
||||
|
methods: { |
||||
|
...mapMutations('patient', ['setOverviewType']), |
||||
|
toBack() { |
||||
|
window.history.go(-1); |
||||
|
}, |
||||
|
changeOverviewType() { |
||||
|
if (this.overviewType === 'info') { |
||||
|
this.overview = { |
||||
|
title: '患者概览', |
||||
|
text: '切换至概览', |
||||
|
}; |
||||
|
this.setOverviewType('overview'); |
||||
|
} else if (this.overviewType === 'overview') { |
||||
|
this.overview = { |
||||
|
title: '患者信息', |
||||
|
text: '切换至详情', |
||||
|
}; |
||||
|
this.setOverviewType('info'); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="less"> |
||||
|
.header { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
background: linear-gradient(180deg, #dbeaff, #fbfdff 50%); |
||||
|
box-shadow: 0px 0.25px 0px 0px rgba(0, 0, 0, 0.2); |
||||
|
.caret-top { |
||||
|
margin: 0; |
||||
|
span { |
||||
|
color: #70798c; |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
} |
||||
|
&.mt { |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
.header-content { |
||||
|
flex: 1; |
||||
|
height: 60px; |
||||
|
display: flex; |
||||
|
position: relative; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.header-back { |
||||
|
position: absolute; |
||||
|
top: 16px; |
||||
|
left: 24px; |
||||
|
font-size: 24px; |
||||
|
} |
||||
|
.header-right { |
||||
|
position: absolute; |
||||
|
top: 16px; |
||||
|
right: 24px; |
||||
|
font-size: 24px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.header-title { |
||||
|
flex: 1; |
||||
|
font-size: 24px; |
||||
|
font-family: Source Han Sans CN, Source Han Sans CN-Bold; |
||||
|
font-weight: 700; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,115 @@ |
|||||
|
<template> |
||||
|
<div class="count">{{ time }}{{ markerList.runTime }}</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapState } from 'vuex'; |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
markerList: { |
||||
|
runTotal: '3600', |
||||
|
runTime: '00:00', |
||||
|
}, |
||||
|
minute: 0, |
||||
|
second: 0, |
||||
|
requestCount: 0, |
||||
|
lastTime: 0, |
||||
|
currentTime: 0, |
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapState('patient', ['patientData', 'timerData']), |
||||
|
time() { |
||||
|
const { timerData, patientData } = this; |
||||
|
if (!timerData && !patientData) return null; |
||||
|
if (timerData.firstAidId !== patientData.firstAidId) return null; |
||||
|
const { countdown } = timerData; |
||||
|
if (countdown === null && !countdown) return null; |
||||
|
const totalSeconds = countdown; |
||||
|
// ?️ 获取完整分钟数 |
||||
|
const minutes = Math.floor(totalSeconds / 60); |
||||
|
this.minute = minutes; |
||||
|
// ?️ 获得剩余的秒数 |
||||
|
const seconds = totalSeconds % 60; |
||||
|
this.second = seconds; |
||||
|
// ✅ 格式化为 MM:SS |
||||
|
const result = `${this.padTo2Digits(minutes)}:${this.padTo2Digits( |
||||
|
seconds |
||||
|
)}`; |
||||
|
this.markerList.runTime = result; |
||||
|
if (this.markerList.runTotal === countdown) { |
||||
|
this.utils.AnimationFrame.done('countTask'); |
||||
|
} else { |
||||
|
this.utils.AnimationFrame.create( |
||||
|
'countTask', |
||||
|
1000, |
||||
|
true, |
||||
|
(min) => { |
||||
|
this.runStart(min); |
||||
|
} |
||||
|
); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
methods: { |
||||
|
padTo2Digits(num) { |
||||
|
return num.toString().padStart(2, '0'); |
||||
|
}, |
||||
|
runStart(min) { |
||||
|
// 改版 防抖 |
||||
|
// 当前定时器一直在执行,并非隔一秒才执行, 而是每隔一秒1 |
||||
|
// 通过防抖来限制该函数一秒内只执行一次 |
||||
|
this.currentTime = new Date().getTime(); |
||||
|
if (this.currentTime - this.lastTime > 1000) { |
||||
|
this.lastTime = this.currentTime; |
||||
|
// //开始计时 |
||||
|
this.second = this.second + 1; |
||||
|
if (this.second >= 60) { |
||||
|
this.second = 0; |
||||
|
this.minute = this.minute + 1; |
||||
|
} |
||||
|
// console.log(this.minute) |
||||
|
if (this.minute >= 60) { |
||||
|
this.minute = 60; |
||||
|
this.second = 0; |
||||
|
} |
||||
|
this.markerList.runTime = |
||||
|
this.Zero(this.minute) + ':' + this.Zero(this.second); |
||||
|
} |
||||
|
// 窗口小化定时器校验无法进入, requestCount 的值停留在了窗口小化那一瞬间 |
||||
|
// if (this.requestCount === n) { |
||||
|
// console.log('countTask::', n); |
||||
|
// this.requestCount = n + 1; |
||||
|
// //开始计时 |
||||
|
// this.second = this.second + 1; |
||||
|
// if (this.second >= 60) { |
||||
|
// this.second = 0; |
||||
|
// this.minute = this.minute + 1; |
||||
|
// } |
||||
|
// // console.log(this.minute) |
||||
|
// if (this.minute >= 60) { |
||||
|
// this.minute = 60; |
||||
|
// this.second = 0; |
||||
|
// } |
||||
|
// this.markerList.runTime = |
||||
|
// this.Zero(this.minute) + ':' + this.Zero(this.second); |
||||
|
// } |
||||
|
}, |
||||
|
//补零 |
||||
|
Zero(n) { |
||||
|
return n < 10 ? '0' + n : '' + n; |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.count { |
||||
|
font-size: 44px; |
||||
|
font-family: Source Han Sans CN, Source Han Sans CN-Bold; |
||||
|
font-weight: 700; |
||||
|
color: #393d4e; |
||||
|
line-height: 44px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,80 @@ |
|||||
|
<!-- |
||||
|
* @desc: 拖拽 |
||||
|
* @Author: gaowenya |
||||
|
* @Date: 2023-07-06 11:00 |
||||
|
* @LastEditors: |
||||
|
* @LastEditTime: |
||||
|
--> |
||||
|
<template> |
||||
|
<div |
||||
|
@touchstart="onTouchStart" |
||||
|
@touchmove="onTouchMove" |
||||
|
@touchend="onTouchEnd" |
||||
|
ref="floatWindow" |
||||
|
:style="{ right: right + 'px', top: top + 'px' }" |
||||
|
class="dragger" |
||||
|
> |
||||
|
<slot> </slot> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { mapState } from 'vuex'; |
||||
|
export default { |
||||
|
props: {}, |
||||
|
data() { |
||||
|
return { |
||||
|
startX: 0, |
||||
|
startY: 0, |
||||
|
offsetX: 0, |
||||
|
offsetY: 0, |
||||
|
right: 0, |
||||
|
top: 300, |
||||
|
isScrolling: false, |
||||
|
}; |
||||
|
}, |
||||
|
computed: {}, |
||||
|
methods: { |
||||
|
onTouchStart(e) { |
||||
|
this.startX = e.touches[0].clientX; |
||||
|
this.startY = e.touches[0].clientY; |
||||
|
this.offsetX = this.right; |
||||
|
this.offsetY = this.top; |
||||
|
this.isScrolling = false; |
||||
|
}, |
||||
|
onTouchMove(e) { |
||||
|
const x = this.startX - e.touches[0].clientX + this.offsetX; |
||||
|
const y = e.touches[0].clientY - this.startY + this.offsetY; |
||||
|
const maxX = window.innerWidth - this.$refs.floatWindow.offsetWidth; |
||||
|
const maxY = |
||||
|
window.innerHeight - this.$refs.floatWindow.offsetHeight; |
||||
|
this.right = x < 0 ? 0 : x > maxX ? maxX : x; |
||||
|
this.top = y < 0 ? 0 : y > maxY ? maxY : y; |
||||
|
if ( |
||||
|
Math.abs(this.startX - e.touches[0].clientX) > 5 || |
||||
|
Math.abs(e.touches[0].clientY - this.startY) > 5 |
||||
|
) { |
||||
|
this.isScrolling = true; |
||||
|
} |
||||
|
}, |
||||
|
onTouchEnd(e) { |
||||
|
if (!this.isScrolling) { |
||||
|
if (e.changedTouches[0].clientX > window.innerWidth / 2) { |
||||
|
this.right = 0; |
||||
|
} else { |
||||
|
this.right = |
||||
|
window.innerWidth - this.$refs.floatWindow.offsetWidth; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style scoped lang="less"> |
||||
|
.dragger { |
||||
|
position: fixed; |
||||
|
right: 0; |
||||
|
top: 0; |
||||
|
transform: translate3d(0, 0, 0); |
||||
|
transition: right 0.3s ease-out; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,546 @@ |
|||||
|
<template> |
||||
|
<div class="myKeyboard" @click.stop="handleFocus" @blur="handleBlur" tabindex="0"> |
||||
|
<div class="input-container"> |
||||
|
<div class="input-top"> |
||||
|
<div class="input-label" :style="labelStyle" :class="labelClass"> |
||||
|
{{ inputLabel }} |
||||
|
</div> |
||||
|
<div class="inputText" id="inputText" :style="inputStyle" :class="inputClass"> |
||||
|
<span class="cursor"> |
||||
|
<span class="holder showWhite">|</span> |
||||
|
</span> |
||||
|
<span class="place-holder">{{ placeHolder }}</span> |
||||
|
<span class="right-space" :style="{ color: zcolor }" @click="moveCursor"> </span> |
||||
|
<span class="right-btn"> |
||||
|
<a-icon class="clear" v-if="clearShow" type="close-circle" @click="handleClear" /> |
||||
|
<slot></slot> |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="error" :style="errorStyle" v-if="errorShow"> |
||||
|
{{ errorMessage }} |
||||
|
</div> |
||||
|
<div class="errorSpace" v-else></div> |
||||
|
</div> |
||||
|
<div class="number hidden" :class="numberClass" :style="numberStyle"> |
||||
|
<div class="mybtn" @click.stop="handleBlur"> |
||||
|
<a-icon type="down" /> |
||||
|
</div> |
||||
|
<div class="mynum"> |
||||
|
<div class="num" @click="handleNum('1')">1</div> |
||||
|
<div class="num" @click="handleNum('2')">2</div> |
||||
|
<div class="num" @click="handleNum('3')">3</div> |
||||
|
<div class="num" @click="handleNum('4')">4</div> |
||||
|
<div class="num" @click="handleNum('5')">5</div> |
||||
|
<div class="num" @click="handleNum('6')">6</div> |
||||
|
<div class="num" @click="handleNum('7')">7</div> |
||||
|
<div class="num" @click="handleNum('8')">8</div> |
||||
|
<div class="num" @click="handleNum('9')">9</div> |
||||
|
<div class="num" @click="handleNum('0')">0</div> |
||||
|
<div v-if="keyboard == 'card'" class="num" @click="handleNum('X')"> |
||||
|
X |
||||
|
</div> |
||||
|
<div v-if="keyboard == 'tel'" class="num" @click="handleNum('0')"> |
||||
|
0 |
||||
|
</div> |
||||
|
<div class="num" @click.stop="handleDelete" @touchstart="gtouchstart" @touchend="gtouchend" |
||||
|
@touchmove="gtouchmove"> |
||||
|
<a-icon type="close-circle" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
props: { |
||||
|
// inputS: { |
||||
|
// type: String, |
||||
|
// default: '', |
||||
|
// }, |
||||
|
// inputH: { |
||||
|
// type: String, |
||||
|
// default: '2.5rem', |
||||
|
// }, |
||||
|
// inputB: { |
||||
|
// type: String, |
||||
|
// default: 'none', |
||||
|
// }, |
||||
|
// inputW: { |
||||
|
// type: String, |
||||
|
// default: '', |
||||
|
// }, |
||||
|
// inputBgc: { |
||||
|
// type: String, |
||||
|
// default: '#fff', |
||||
|
// }, |
||||
|
// labelS: { |
||||
|
// type: String, |
||||
|
// default: '', |
||||
|
// }, |
||||
|
// labelC: { |
||||
|
// type: String, |
||||
|
// default: '', |
||||
|
// }, |
||||
|
// labelW: { |
||||
|
// type: String, |
||||
|
// default: '', |
||||
|
// }, |
||||
|
// 输入框索引（必填字段） |
||||
|
indexNum: { |
||||
|
type: Number, |
||||
|
default: 0, |
||||
|
}, |
||||
|
// 是否聚焦（true:不聚焦，false:聚焦） |
||||
|
numberDis: { |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
// 是否必填（true:出现红星，false:不出现） |
||||
|
required: { |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
// 键盘类型（card:身份证，tel:数字） |
||||
|
keyboard: { |
||||
|
type: String, |
||||
|
default: 'card', |
||||
|
}, |
||||
|
// 父组件存的值 |
||||
|
oldValue: { |
||||
|
type: String, |
||||
|
default: '', |
||||
|
}, |
||||
|
// 占位符颜色（建议设置和输入框背景同色） |
||||
|
zcolor: { |
||||
|
type: String, |
||||
|
default: 'transparent', |
||||
|
}, |
||||
|
// label文字 |
||||
|
inputLabel: { |
||||
|
type: String, |
||||
|
default: '', |
||||
|
}, |
||||
|
// 当输入框内无文字时显示 |
||||
|
placeHolder: { |
||||
|
type: String, |
||||
|
default: '请输入', |
||||
|
}, |
||||
|
// 错误提示信息 |
||||
|
errorMessage: { |
||||
|
type: String, |
||||
|
default: '请输入正确的信息', |
||||
|
}, |
||||
|
// 是否显示错误提示信息 |
||||
|
errorShow: { |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
// 错误提示信息样式 |
||||
|
errorStyle: { |
||||
|
type: Object, |
||||
|
default: function() { |
||||
|
return {} |
||||
|
}, |
||||
|
}, |
||||
|
// 是否显示清除键 |
||||
|
clearShow: { |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
// label动态类名 |
||||
|
labelClass: { |
||||
|
type: String, |
||||
|
default: '', |
||||
|
}, |
||||
|
// label样式 |
||||
|
labelStyle: { |
||||
|
type: Object, |
||||
|
default: function() { |
||||
|
return {} |
||||
|
}, |
||||
|
}, |
||||
|
// input动态类名 |
||||
|
inputClass: { |
||||
|
type: String, |
||||
|
default: '', |
||||
|
}, |
||||
|
// input样式 |
||||
|
inputStyle: { |
||||
|
type: Object, |
||||
|
default: function() { |
||||
|
return {} |
||||
|
}, |
||||
|
}, |
||||
|
// number类名 |
||||
|
numberClass: { |
||||
|
type: String, |
||||
|
default: '', |
||||
|
}, |
||||
|
// number样式 |
||||
|
numberStyle: { |
||||
|
type: Object, |
||||
|
default: function() { |
||||
|
return {} |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
inputArea: '', |
||||
|
stop: false, |
||||
|
clickNum: false, |
||||
|
show: false, |
||||
|
value: '', |
||||
|
inputValue: '', |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
oldValue(val) { |
||||
|
if (val != this.inputValue) { |
||||
|
this.handleClear() |
||||
|
this.handleOld() |
||||
|
} |
||||
|
}, |
||||
|
required(val) { |
||||
|
this.handleRequired(val) |
||||
|
}, |
||||
|
}, |
||||
|
created() { |
||||
|
this.$toast.clear() |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.handleRequired(this.required) |
||||
|
this.handleOld() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 是否必填 |
||||
|
handleRequired(val) { |
||||
|
const inputLabel = |
||||
|
document.getElementsByClassName('input-label')[this.indexNum] |
||||
|
if (val) { |
||||
|
inputLabel.className = 'input-label required' |
||||
|
} else { |
||||
|
inputLabel.className = 'input-label' |
||||
|
} |
||||
|
}, |
||||
|
// 父组件改变值 |
||||
|
handleOld() { |
||||
|
// 获取父组件存的值后画数字 |
||||
|
if (this.oldValue != '') { |
||||
|
for (const item of this.oldValue) { |
||||
|
const span = document.createElement('span') //创建包含值的元素 |
||||
|
span.className = 'val' |
||||
|
span.innerText = item |
||||
|
const space = document.createElement('span') |
||||
|
space.className = 'space' |
||||
|
space.innerText = '' |
||||
|
span.addEventListener('click', this.moveCursor) |
||||
|
const cursor = |
||||
|
document.getElementsByClassName('cursor')[this.indexNum] |
||||
|
const inputArea = |
||||
|
document.getElementsByClassName('inputText')[this.indexNum] |
||||
|
inputArea.insertBefore(space, cursor) //插入空列 |
||||
|
inputArea.insertBefore(span, cursor) //插入值 |
||||
|
} |
||||
|
} |
||||
|
const placeHolder = |
||||
|
document.getElementsByClassName('place-holder')[this.indexNum] |
||||
|
|
||||
|
if (this.oldValue == '') { |
||||
|
placeHolder.className = 'place-holder' |
||||
|
} else { |
||||
|
placeHolder.className = 'place-holder hidden' |
||||
|
} |
||||
|
this.inputValue = this.oldValue |
||||
|
this.$emit('keyboard-input', this.inputValue) |
||||
|
}, |
||||
|
// 聚焦 |
||||
|
handleFocus(event) { |
||||
|
if (!this.numberDis) { |
||||
|
this.$emit('indexNum', this.indexNum) |
||||
|
const number = document.getElementsByClassName('number')[this.indexNum] |
||||
|
number.className = 'number' |
||||
|
this.setCursorFlash() |
||||
|
this.handleValue() |
||||
|
} |
||||
|
}, |
||||
|
//字符插入，在光标前插入字符 |
||||
|
handleNum(value) { |
||||
|
const number = document.getElementsByClassName('number')[this.indexNum] |
||||
|
number.className = 'number' |
||||
|
const span = document.createElement('span') //创建包含值的元素 |
||||
|
span.className = 'val' |
||||
|
span.innerText = value |
||||
|
|
||||
|
const space = document.createElement('span') |
||||
|
space.className = 'space' |
||||
|
space.innerText = '' |
||||
|
span.addEventListener('click', this.moveCursor) |
||||
|
const cursor = document.getElementsByClassName('cursor')[this.indexNum] |
||||
|
const inputArea = |
||||
|
document.getElementsByClassName('inputText')[this.indexNum] |
||||
|
inputArea.insertBefore(space, cursor) //插入空列 |
||||
|
inputArea.insertBefore(span, cursor) //插入值 |
||||
|
this.handleValue() |
||||
|
}, |
||||
|
// 失焦 |
||||
|
handleBlur(e) { |
||||
|
clearInterval(this.intervalId) |
||||
|
const placeHolder = |
||||
|
document.getElementsByClassName('holder')[this.indexNum] |
||||
|
placeHolder.className = 'holder showWhite' |
||||
|
const number = document.getElementsByClassName('number')[this.indexNum] |
||||
|
number.className = 'number hidden' |
||||
|
const inputText = |
||||
|
document.getElementsByClassName('inputText')[this.indexNum] |
||||
|
inputText.className = 'inputText' |
||||
|
this.handleValue() |
||||
|
const inputArea = |
||||
|
document.getElementsByClassName('inputText')[this.indexNum] |
||||
|
const reset = |
||||
|
document.getElementsByClassName('place-holder')[this.indexNum] |
||||
|
const cursor = document.getElementsByClassName('cursor')[this.indexNum] //获取光标 |
||||
|
const ele = inputArea.replaceChild(reset.previousSibling, cursor) |
||||
|
inputArea.insertBefore(ele, reset) |
||||
|
}, |
||||
|
// 移动光标位置 |
||||
|
moveCursor(event) { |
||||
|
const inputArea = |
||||
|
document.getElementsByClassName('inputText')[this.indexNum] |
||||
|
const cursor = document.getElementsByClassName('cursor')[this.indexNum] //获取光标 |
||||
|
if (event.currentTarget.className == 'right-space') { |
||||
|
const ele = inputArea.replaceChild( |
||||
|
event.currentTarget.previousSibling.previousSibling, |
||||
|
cursor, |
||||
|
) |
||||
|
inputArea.insertBefore(ele, event.currentTarget.previousSibling) |
||||
|
} else { |
||||
|
const tempEle = event.currentTarget |
||||
|
const nodeName = event.currentTarget.nextSibling.nodeName |
||||
|
const temp = event.currentTarget.previousSibling |
||||
|
const ele = inputArea.replaceChild(temp, cursor) //把光标替换成当前元素 |
||||
|
inputArea.insertBefore(ele, event.currentTarget) |
||||
|
} |
||||
|
}, |
||||
|
// 删除 |
||||
|
handleDelete() { |
||||
|
const inputArea = |
||||
|
document.getElementsByClassName('inputText')[this.indexNum] |
||||
|
// this.setCursorFlash() |
||||
|
const cursor = document.getElementsByClassName('cursor')[this.indexNum] |
||||
|
let n = 2 //两个删除动作 |
||||
|
while (cursor.previousSibling && n > 0) { |
||||
|
inputArea.removeChild(cursor.previousSibling) |
||||
|
n-- |
||||
|
} |
||||
|
this.handleValue() |
||||
|
}, |
||||
|
//开始按 |
||||
|
gtouchstart(e) { |
||||
|
this.timeOutEvent = setTimeout(() => { |
||||
|
this.longPress() |
||||
|
}, 500) |
||||
|
return false |
||||
|
}, |
||||
|
gtouchend() { |
||||
|
clearTimeout(this.timeOutEvent) |
||||
|
clearInterval(this.press) |
||||
|
if (this.timeOutEvent != 0) { |
||||
|
// alert('你这是点击，不是长按') |
||||
|
} |
||||
|
return false |
||||
|
}, |
||||
|
gtouchmove() { |
||||
|
clearTimeout(this.timeOutEvent) |
||||
|
clearInterval(this.press) |
||||
|
this.timeOutEvent = 0 |
||||
|
}, |
||||
|
longPress() { |
||||
|
this.timeOutEvent = 0 |
||||
|
this.press = setInterval(() => { |
||||
|
this.handleDelete() |
||||
|
}, 300) |
||||
|
}, |
||||
|
//设置光标定时任务 |
||||
|
setCursorFlash() { |
||||
|
const placeHolder = |
||||
|
document.getElementsByClassName('holder')[this.indexNum] |
||||
|
let isShowCursor = false |
||||
|
if (this.intervalId) { |
||||
|
clearInterval(this.intervalId) |
||||
|
} |
||||
|
this.intervalId = setInterval(function() { |
||||
|
isShowCursor = !isShowCursor |
||||
|
if (isShowCursor) { |
||||
|
placeHolder.className = 'holder' |
||||
|
} else { |
||||
|
placeHolder.className = 'holder showWhite' |
||||
|
} |
||||
|
}, 500) |
||||
|
}, |
||||
|
// 全清 |
||||
|
handleClear() { |
||||
|
const father = document.getElementsByClassName('inputText')[this.indexNum] |
||||
|
const child = |
||||
|
document.getElementsByClassName('inputText')[this.indexNum].childNodes |
||||
|
for (let i = child.length - 1; i >= 0; i--) { |
||||
|
if (child[i].className == 'val' || child[i].className == 'space') { |
||||
|
father.removeChild(child[i]) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
// 获取值 |
||||
|
handleValue() { |
||||
|
const val = document |
||||
|
.getElementsByClassName('inputText')[this.indexNum].querySelectorAll('.val') |
||||
|
const arr = [] |
||||
|
arr[this.indexNum] = [] |
||||
|
for (let i = 0; i < val.length; i++) { |
||||
|
arr[this.indexNum].push(val[i].innerHTML) |
||||
|
} |
||||
|
this.inputValue = arr[this.indexNum].toString() |
||||
|
this.inputValue = this.inputValue.split(',').join('') |
||||
|
this.$emit('keyboard-input', this.inputValue) |
||||
|
const placeHolder = |
||||
|
document.getElementsByClassName('place-holder')[this.indexNum] |
||||
|
|
||||
|
if (this.inputValue == '') { |
||||
|
placeHolder.className = 'place-holder' |
||||
|
} else { |
||||
|
placeHolder.className = 'place-holder hidden' |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="less"> |
||||
|
.myKeyboard{ |
||||
|
padding-top: 0.15vw; |
||||
|
} |
||||
|
.myKeyboard:focus { |
||||
|
outline: none; |
||||
|
} |
||||
|
|
||||
|
.input-container { |
||||
|
display: flex; |
||||
|
// align-items: center; |
||||
|
flex-direction: column; |
||||
|
box-sizing: border-box; |
||||
|
width: 100%; |
||||
|
font-size: 1rem; |
||||
|
border: 1px solid #d9d9d9; |
||||
|
background: #f9f9f9; |
||||
|
padding-left: 12px; |
||||
|
border-radius: .3rem; |
||||
|
box-sizing: border-box; |
||||
|
.acitve { |
||||
|
border: 1px solid #2e8fff !important; |
||||
|
} |
||||
|
|
||||
|
.input-top { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
box-sizing: border-box; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.error { |
||||
|
color: #ee0a24; |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
|
||||
|
.errorSpace {} |
||||
|
|
||||
|
.required::before { |
||||
|
position: absolute; |
||||
|
left: 6px; |
||||
|
color: #ee0a24; |
||||
|
content: '*'; |
||||
|
font-size: 22px; |
||||
|
} |
||||
|
|
||||
|
.inputText { |
||||
|
position: relative; |
||||
|
flex: 1; |
||||
|
width: 80%; |
||||
|
border: none; |
||||
|
height: 2.91vw; |
||||
|
} |
||||
|
|
||||
|
.right-btn { |
||||
|
position: absolute; |
||||
|
right: 2%; |
||||
|
|
||||
|
.clear { |
||||
|
width: 1.5rem; |
||||
|
} |
||||
|
|
||||
|
// :nth-child(1) { |
||||
|
// width: 1.5rem; |
||||
|
// } |
||||
|
:nth-child(2) {} |
||||
|
} |
||||
|
|
||||
|
.right-space { |
||||
|
// color: #fff; |
||||
|
} |
||||
|
|
||||
|
.place-holder { |
||||
|
color: #c8c8c8; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.number { |
||||
|
position: fixed; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
z-index: 999999; |
||||
|
width: 100%; |
||||
|
background-color: #f0f0f0; |
||||
|
font-size: 24px; |
||||
|
|
||||
|
.mybtn { |
||||
|
padding: 5px 0; |
||||
|
text-align: center; |
||||
|
line-height: 24px; |
||||
|
|
||||
|
img { |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.mynum { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
padding-bottom: 10px; |
||||
|
.num { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
flex: 1 0 25%; |
||||
|
justify-content: center; |
||||
|
padding: 5px 0; |
||||
|
border-top: 1px solid #eee; |
||||
|
border-left: 1px solid #eee; |
||||
|
background-color: #fff; |
||||
|
text-align: center; |
||||
|
|
||||
|
&:active { |
||||
|
background-color: rgb(202, 202, 202); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.hidden { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.showWhite { |
||||
|
color: transparent; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,4 @@ |
|||||
|
@font-face { |
||||
|
font-family: SONG; |
||||
|
src: url(./仿宋字体.ttf); |
||||
|
} |
||||
@ -0,0 +1,104 @@ |
|||||
|
<template> |
||||
|
<div class="canvaspanel-conntainer"> |
||||
|
<div class="canvaspanel"> |
||||
|
<div class="canvasborder"> |
||||
|
<vue-esign |
||||
|
ref="esign" |
||||
|
:width="width" |
||||
|
:height="300" |
||||
|
:isCrop="isCrop" |
||||
|
:lineWidth="lineWidth" |
||||
|
:lineColor="lineColor" |
||||
|
:bgColor.sync="bgColor" |
||||
|
style="width: 100% !important" |
||||
|
/> |
||||
|
</div> |
||||
|
<div class="buttongroup"> |
||||
|
<a-button type="gray" size="large" @click="handleReset" icon="delete"> 清除 </a-button> |
||||
|
<a-button type="link" size="large" @click="handleGenerate" icon="check-circle"> 保存 </a-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<img :src="resultImg" alt="" v-show="false" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'esign', |
||||
|
components: {}, |
||||
|
data() { |
||||
|
return { |
||||
|
title: '手写签名', |
||||
|
width: 0, |
||||
|
lineWidth: 10, |
||||
|
lineColor: '#000000', |
||||
|
bgColor: '', |
||||
|
resultImg: '', |
||||
|
isCrop: false, |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
this.width = window.innerWidth - 16*2 - 16*2; |
||||
|
}, |
||||
|
methods: { |
||||
|
handleReset() { |
||||
|
this.$refs['esign'].reset(); //清空画布 |
||||
|
this.$emit('reset'); |
||||
|
}, |
||||
|
handleGenerate() { |
||||
|
this.$refs['esign'] |
||||
|
.generate() |
||||
|
.then(res => { |
||||
|
this.resultImg = res; // 得到了签字生成的base64图片 |
||||
|
this.base64ImgtoFile(this.resultImg); |
||||
|
let data = this.base64ImgtoFile(this.resultImg); |
||||
|
//调用接口 |
||||
|
this.$emit('close', data); |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
this.$message.error('请签名后再保存'); |
||||
|
}); |
||||
|
}, |
||||
|
// 将base64，转换成图片 |
||||
|
base64ImgtoFile(dataurl, filename = 'file') { |
||||
|
const arr = dataurl.split(','); |
||||
|
const mime = arr[0].match(/:(.*?);/)[1]; |
||||
|
const suffix = mime.split('/')[1]; |
||||
|
const bstr = atob(arr[1]); |
||||
|
let n = bstr.length; |
||||
|
const u8arr = new Uint8Array(n); |
||||
|
while (n--) { |
||||
|
u8arr[n] = bstr.charCodeAt(n); |
||||
|
} |
||||
|
return new File([u8arr], `${filename}.${suffix}`, { |
||||
|
type: mime, |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style lang="less" scope> |
||||
|
.canvasborder { |
||||
|
background: #efefef; |
||||
|
border-radius: 8px; |
||||
|
width: 100%; |
||||
|
|
||||
|
} |
||||
|
.canvaspanel { |
||||
|
display: flex; |
||||
|
position: relative; |
||||
|
margin: 16px 0; |
||||
|
} |
||||
|
|
||||
|
.buttongroup { |
||||
|
position: absolute; |
||||
|
right: 16px; |
||||
|
bottom: 16px; |
||||
|
} |
||||
|
|
||||
|
.autograph { |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
.clos { |
||||
|
width: 88px; |
||||
|
} |
||||
|
</style> |
||||
Binary file not shown.
@ -0,0 +1,288 @@ |
|||||
|
<template> |
||||
|
<div style="width: 100%; height: 100%"> |
||||
|
<div id="dicomImage"></div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// 加载相关库文件 |
||||
|
import cornerstone from './dist/cornerstone.js'; |
||||
|
import cornerstoneTools from './dist/cornerstoneTools'; |
||||
|
import cornerstoneWADOImageLoader from './dist/cornerstoneWADOImageLoader.bundle.min'; |
||||
|
import Hammer from './dist/hammer'; |
||||
|
import dicomParser from './dist/dicomParser.min'; |
||||
|
import cornerstoneMath from './dist/cornerstoneMath.min'; |
||||
|
|
||||
|
export default { |
||||
|
name: 'dcmview', |
||||
|
props: { |
||||
|
currentDcm: { |
||||
|
type: Array, |
||||
|
default: [], |
||||
|
}, |
||||
|
imgurl: { |
||||
|
type: String, |
||||
|
default: '', |
||||
|
}, |
||||
|
toolType: { |
||||
|
type: String, |
||||
|
default: '', |
||||
|
}, |
||||
|
width: { |
||||
|
type: String, |
||||
|
default: '750rpx', |
||||
|
}, |
||||
|
height: { |
||||
|
type: String, |
||||
|
default: '1000rpx', |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
imageIds: [], |
||||
|
}; |
||||
|
}, |
||||
|
watch: { |
||||
|
toolType: { |
||||
|
handler(newVal, lodVal) { |
||||
|
console.log(newVal, lodVal); |
||||
|
this.viewDcm1(); |
||||
|
}, |
||||
|
}, |
||||
|
currentDcm: { |
||||
|
handler(newVal, lodVal) { |
||||
|
console.log('newVal', newVal); |
||||
|
this.handleDcm(newVal); |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
console.log(11111111, '1212'); |
||||
|
this.handleDcm(this.currentDcm); |
||||
|
console.log(11111111, this.currentDcm); |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
// 处理获取图像数组 |
||||
|
async handleDcm(_Arr) { |
||||
|
let that = this; |
||||
|
this.imageIds = []; |
||||
|
await _Arr.forEach((item) => { |
||||
|
this.imageIds.push('dicomweb:' + item.dcmPath); |
||||
|
}); |
||||
|
this.viewDcm(); |
||||
|
}, |
||||
|
// 显示dcm图片函数 |
||||
|
viewDcm() { |
||||
|
cornerstoneTools.external.cornerstone = cornerstone; |
||||
|
cornerstoneTools.external.cornerstoneMath = cornerstoneMath; |
||||
|
cornerstoneTools.external.Hammer = Hammer; |
||||
|
cornerstoneWADOImageLoader.external.dicomParser = dicomParser; |
||||
|
cornerstoneWADOImageLoader.external.cornerstone = cornerstone; |
||||
|
cornerstoneWADOImageLoader.webWorkerManager.initialize({ |
||||
|
maxWebWorkers: navigator.hardwareConcurrency || 1, |
||||
|
startWebWorkersOnDemand: true, |
||||
|
taskConfiguration: { |
||||
|
decodeTask: { |
||||
|
initializeCodecsOnStartup: false, |
||||
|
}, |
||||
|
}, |
||||
|
webWorkerPath: './dist/cornerstoneWADOImageLoader.bundleCopy.min.js', |
||||
|
}); |
||||
|
cornerstoneTools.init({ |
||||
|
mouseEnabled: true, //触摸 |
||||
|
touchEnabled: true, //鼠标 |
||||
|
showSVGCursors: true, |
||||
|
autoResizeViewports: true, |
||||
|
}); |
||||
|
const element = document.getElementById('dicomImage'); |
||||
|
|
||||
|
cornerstone.enable(element); |
||||
|
|
||||
|
// const PanTool = cornerstoneTools.PanTool; |
||||
|
|
||||
|
const StackScrollTool = cornerstoneTools.StackScrollTool; |
||||
|
const StackScrollMouseWheelTool = |
||||
|
cornerstoneTools.StackScrollMouseWheelTool; |
||||
|
const imageIds = this.imageIds; |
||||
|
const stack = { |
||||
|
currentImageIdIndex: 0, |
||||
|
imageIds: imageIds, |
||||
|
}; |
||||
|
console.log('imageIds', imageIds); |
||||
|
element.addEventListener('cornerstonenewimage', (event) => { |
||||
|
console.log('event: ', event); |
||||
|
// console.log(event.detail.oldImage, stack.currentImageIdIndex, 'event') |
||||
|
this.hanldeByValue(stack.currentImageIdIndex); |
||||
|
}); |
||||
|
element.addEventListener('cornerstonetap', (event) => { |
||||
|
console.log('cornerstonetap: ', cornerstonetap); |
||||
|
const direction = event.detail.direction; |
||||
|
if (direction === 'LEFT') { |
||||
|
// 向左划动 |
||||
|
stack.currentImageIdIndex++; |
||||
|
} else if (direction === 'RIGHT') { |
||||
|
// 向右划动 |
||||
|
stack.currentImageIdIndex--; |
||||
|
} |
||||
|
|
||||
|
// 更新堆栈中的当前图像 |
||||
|
const imageIds = stack.imageIds; |
||||
|
const newImageIdIndex = stack.currentImageIdIndex; |
||||
|
const newImageId = imageIds[newImageIdIndex]; |
||||
|
cornerstone |
||||
|
.loadAndCacheImage(newImageId) |
||||
|
.then((loadedImage) => { |
||||
|
cornerstone.displayImage(element, loadedImage); |
||||
|
}); |
||||
|
}); |
||||
|
console.log('imageIds,', imageIds) |
||||
|
cornerstone.loadImage(imageIds[0]).then((image) => { |
||||
|
console.log(image, 'image'); |
||||
|
cornerstone.displayImage(element, image); |
||||
|
cornerstoneTools.addStackStateManager(element, ['stack']); |
||||
|
cornerstoneTools.addToolState(element, 'stack', stack); |
||||
|
// cornerstoneTools.addTool(PanTool); |
||||
|
cornerstoneTools.addTool(StackScrollTool, { |
||||
|
configuration: { |
||||
|
loop: true, |
||||
|
allowSkipping: true, |
||||
|
}, |
||||
|
}); |
||||
|
cornerstoneTools.addTool(StackScrollMouseWheelTool, { |
||||
|
configuration: { |
||||
|
loop: true, |
||||
|
allowSkipping: true, |
||||
|
invert: false, |
||||
|
}, |
||||
|
}); |
||||
|
// cornerstoneTools.setToolActive('Pan', { mouseButtonMask: 1 }); |
||||
|
cornerstoneTools.setToolActive('StackScroll', { |
||||
|
mouseButtonMask: 1, |
||||
|
}); |
||||
|
cornerstoneTools.setToolActive('StackScrollMouseWheel', { |
||||
|
mouseButtonMask: 4, |
||||
|
}); |
||||
|
}); |
||||
|
}, |
||||
|
// 显示dcm图片函数 |
||||
|
viewDcm1() { |
||||
|
var element = document.getElementById('dicomImage'); |
||||
|
//激活获取到的用于图片加载的区域 |
||||
|
console.log('this.toolType: ', this.toolType); |
||||
|
switch (this.toolType) { |
||||
|
case 'ScrollTool': |
||||
|
const StackScrollTool = cornerstoneTools.StackScrollTool; |
||||
|
const StackScrollMouseWheelTool = |
||||
|
cornerstoneTools.StackScrollMouseWheelTool; |
||||
|
cornerstoneTools.addTool(StackScrollTool, { |
||||
|
configuration: { |
||||
|
loop: true, |
||||
|
allowSkipping: true, |
||||
|
}, |
||||
|
}); |
||||
|
cornerstoneTools.addTool(StackScrollMouseWheelTool, { |
||||
|
configuration: { |
||||
|
loop: true, |
||||
|
allowSkipping: true, |
||||
|
invert: false, |
||||
|
}, |
||||
|
}); |
||||
|
// cornerstoneTools.setToolActive('Pan', { mouseButtonMask: 1 }); |
||||
|
cornerstoneTools.setToolActive('StackScroll', { |
||||
|
mouseButtonMask: 1, |
||||
|
}); |
||||
|
cornerstoneTools.setToolActive('StackScrollMouseWheel', { |
||||
|
mouseButtonMask: 4, |
||||
|
}); |
||||
|
break; |
||||
|
case 'Wwwc': |
||||
|
// 从cornerstoneTools库中获取窗宽,窗高工具 |
||||
|
const WwwcTool = cornerstoneTools.WwwcTool; |
||||
|
//添加WwwcTool窗宽,窗高工具 |
||||
|
cornerstoneTools.addTool(WwwcTool); |
||||
|
// 绑定工具操作功能到鼠标左键 |
||||
|
cornerstoneTools.setToolActive('Wwwc', { |
||||
|
mouseButtonMask: 1, |
||||
|
}); |
||||
|
break; |
||||
|
case 'Angle': |
||||
|
// 角度工具 |
||||
|
const AngleTool = cornerstoneTools.AngleTool; |
||||
|
cornerstoneTools.addTool(AngleTool); |
||||
|
cornerstoneTools.setToolActive('Angle', { |
||||
|
mouseButtonMask: 1, |
||||
|
}); |
||||
|
break; |
||||
|
case 'RectangleRoi': |
||||
|
// 矩形Roi工具 |
||||
|
const RectangleRoiTool = cornerstoneTools.RectangleRoiTool; |
||||
|
cornerstoneTools.addTool(RectangleRoiTool); |
||||
|
cornerstoneTools.setToolActive('RectangleRoi', { |
||||
|
mouseButtonMask: 1, |
||||
|
}); |
||||
|
break; |
||||
|
case 'DragProbe': |
||||
|
// 拖动探针工具 |
||||
|
const DragProbeTool = cornerstoneTools.DragProbeTool; |
||||
|
cornerstoneTools.addTool(DragProbeTool); |
||||
|
cornerstoneTools.setToolActive('DragProbe', { |
||||
|
mouseButtonMask: 1, |
||||
|
}); |
||||
|
break; |
||||
|
case 'Length': |
||||
|
// 长度工具 |
||||
|
const LengthTool = cornerstoneTools.LengthTool; |
||||
|
cornerstoneTools.addTool(LengthTool); |
||||
|
cornerstoneTools.setToolActive('Length', { |
||||
|
mouseButtonMask: 1, |
||||
|
}); |
||||
|
break; |
||||
|
case 'Zoom': |
||||
|
// 放大缩小 |
||||
|
const ZoomMouseWheelTool = |
||||
|
cornerstoneTools.ZoomMouseWheelTool; |
||||
|
cornerstoneTools.addTool(ZoomMouseWheelTool); |
||||
|
cornerstoneTools.setToolActive('ZoomMouseWheel', { |
||||
|
mouseButtonMask: 1, |
||||
|
}); |
||||
|
break; |
||||
|
case 'eliminate': |
||||
|
// 清空效果 |
||||
|
cornerstoneTools.clearToolState(element, 'Length'); |
||||
|
break; |
||||
|
default: |
||||
|
throw new Error('工具参数错误'); |
||||
|
break; |
||||
|
} |
||||
|
}, |
||||
|
clearAllTool() { |
||||
|
for (let k in this.name) { |
||||
|
cornerstoneTools.clearToolState(this.element, this.name[k]); |
||||
|
} |
||||
|
// 写了他才能让界面也更新清除了tool的视图 |
||||
|
cornerstone.updateImage(this.element); |
||||
|
// reset viewport将视图重置位置 |
||||
|
cornerstone.reset(this.element); |
||||
|
}, |
||||
|
// 给父组件传值 |
||||
|
hanldeByValue(_index) { |
||||
|
this.$emit('byValue', _index); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
/* 定义图片显示区域div大小 */ |
||||
|
#dicomImage { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.btn { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
flex-wrap: wrap; |
||||
|
} |
||||
|
</style> |
||||
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,3 @@ |
|||||
|
/*! cornerstone-web-image-loader - 2.1.1 - 2018-12-05 | (c) 2016 Chris Hafey | https://github.com/cornerstonejs/cornerstoneWebImageLoader */ |
||||
|
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("cornerstoneWebImageLoader",[],t):"object"==typeof exports?exports.cornerstoneWebImageLoader=t():e.cornerstoneWebImageLoader=t()}(window,function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=5)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.external=void 0;var r,o=n(4),a=(r=o)&&r.__esModule?r:{default:r};var u=void 0,i={set cornerstone(e){u=e,(0,a.default)(u)},get cornerstone(){return u}};t.external=i},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.loadImage=function(e){var t=r.external.cornerstone,n=new XMLHttpRequest;return n.open("GET",e,!0),n.responseType="arraybuffer",i.beforeSend(n),n.onprogress=function(n){if(n.lengthComputable){var r=n.loaded,o=n.total,a=Math.round(r/o*100),u={imageId:e,loaded:r,total:o,percentComplete:a};t.triggerEvent(t.events,"cornerstoneimageloadprogress",u)}},{promise:new Promise(function(t,r){n.onload=function(){(0,o.default)(this.response).then(function(n){var r=(0,a.default)(n,e);t(r)},r)},n.send()}),cancelFn:function(){n.abort()}}},t.configure=function(e){i=e};var r=n(0),o=u(n(3)),a=u(n(2));function u(e){return e&&e.__esModule?e:{default:e}}var i={beforeSend:function(){}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){var n=e.naturalHeight,u=e.naturalWidth;return{imageId:t,minPixelValue:0,maxPixelValue:255,slope:1,intercept:0,windowCenter:128,windowWidth:255,render:r.external.cornerstone.renderWebImage,getPixelData:function(){return(n=void 0,a===t?n=o.getContext("2d"):(o.height=e.naturalHeight,o.width=e.naturalWidth,(n=o.getContext("2d")).drawImage(e,0,0),a=t),n.getImageData(0,0,e.naturalWidth,e.naturalHeight)).data;var n},getCanvas:function(){return a===t?o:(o.height=e.naturalHeight,o.width=e.naturalWidth,o.getContext("2d").drawImage(e,0,0),a=t,o)},getImage:function(){return e},rows:n,columns:u,height:n,width:u,color:!0,rgba:!1,columnPixelSpacing:void 0,rowPixelSpacing:void 0,invert:!1,sizeInBytes:n*u*4}};var r=n(0),o=document.createElement("canvas"),a=void 0},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){return new Promise(function(t,n){var r=new Image,o=new Uint8Array(e),a=new Blob([o]),u=window.URL||window.webkitURL,i=u.createObjectURL(a);r.src=i,r.onload=function(){t(r),u.revokeObjectURL(i)},r.onerror=function(e){u.revokeObjectURL(i),n(e)}})}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){e.registerImageLoader("http",r.loadImage),e.registerImageLoader("https",r.loadImage)};var r=n(1)},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.external=t.configure=t.loadImage=t.createImage=t.arrayBufferToImage=void 0;var r=i(n(3)),o=i(n(2)),a=n(1),u=n(0);function i(e){return e&&e.__esModule?e:{default:e}}var d={arrayBufferToImage:r.default,createImage:o.default,loadImage:a.loadImage,configure:a.configure,external:u.external};t.arrayBufferToImage=r.default,t.createImage=o.default,t.loadImage=a.loadImage,t.configure=a.configure,t.external=u.external,t.default=d}])}); |
||||
|
//# sourceMappingURL=cornerstoneWebImageLoader.min.js.map
|
||||
File diff suppressed because it is too large
File diff suppressed because it is too large
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue