You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
189 lines
4.3 KiB
189 lines
4.3 KiB
<template>
|
|
<div>
|
|
<div class="panel-box">
|
|
<div class="d-flex panel-box-1">
|
|
<div class="flex-1">
|
|
<span class="panel-tips">患者体重（kg）</span>
|
|
<span class="panel-con">{{ weightMessage }}</span>
|
|
</div>
|
|
<div class="flex-1">
|
|
<span class="panel-tips">药物剂量（mg）</span>
|
|
<span class="panel-con">{{ thrombolyticDose }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex panel-box-1">
|
|
<div class="flex-1">
|
|
<span class="panel-tips">团注剂量（mg）</span>
|
|
<span class="panel-con">{{ bolusDose }}</span>
|
|
</div>
|
|
<div class="flex-1">
|
|
<span class="panel-tips">维持剂量（mg）</span>
|
|
<span class="panel-con">{{ maintenanceDose }}</span>
|
|
</div>
|
|
</div>
|
|
<div style="width: 95%; padding-left: 5%">
|
|
<div style="width: 120%">
|
|
<span :style="{ marginLeft: percentA }" class="tips">
|
|
{{ info }}
|
|
<a-icon class="down-icon" type="caret-down" />
|
|
</span>
|
|
</div>
|
|
<a-progress :percent="percent" :show-info="false" :stroke-color="strokeColor" :stroke-width="strokeWidth" status="active" />
|
|
<div class="flex-1" style="width: 106%; margin-left: -3%">
|
|
<div class="flex-1" style="justify-content: center" v-for="(item, index) in lists" :key="index">{{ item }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState, mapMutations } from 'vuex';
|
|
export default {
|
|
name: 'Panel',
|
|
data() {
|
|
return {
|
|
str: '智慧平车面板数据',
|
|
dataList: [],
|
|
percent: 0,
|
|
percentA: 0,
|
|
strokeWidth: 6,
|
|
strokeColor: {
|
|
from: '#1362B8',
|
|
to: '#06D0CA',
|
|
},
|
|
lists: [
|
|
'呼叫',
|
|
'到场',
|
|
'评估',
|
|
'采血',
|
|
'CT',
|
|
'谈话',
|
|
'签字',
|
|
'注射',
|
|
'介入',
|
|
'手术',
|
|
'穿刺',
|
|
'DSA',
|
|
'溶栓',
|
|
'再通',
|
|
'支架',
|
|
'解脱',
|
|
'结束',
|
|
],
|
|
info: '呼叫',
|
|
};
|
|
},
|
|
computed: mapState('messages', ['weightMessage', 'bolusDose', 'maintenanceDose', 'thrombolyticDose', 'startMessages', 'rfidMessage']),
|
|
watch: {
|
|
rfidMessage(val) {
|
|
console.log(val);
|
|
if (this.startMessages) {
|
|
this.percent = 0;
|
|
this.percentA = 0;
|
|
this.info = '呼叫';
|
|
this.setStartMessages(false);
|
|
} else {
|
|
if (val.step && val.step - 0 > (this.percent * 16) / 100 && val.step - 0 <= 16) {
|
|
console.log(val.step - 0, this.percent);
|
|
this.percent = ((val.step - 0) * 100) / 16;
|
|
this.percentA = (this.percent * 100) / 120 + '%';
|
|
this.info = this.lists[val.step - 0];
|
|
}
|
|
}
|
|
},
|
|
startMessages(val) {
|
|
if (val) {
|
|
this.percent = 0;
|
|
this.percentA = 0;
|
|
this.info = '呼叫';
|
|
this.setStartMessages(false);
|
|
}
|
|
},
|
|
},
|
|
methods: { ...mapMutations('messages', ['setStartMessages']) },
|
|
// mounted() {
|
|
// const that = this;
|
|
// var add = setInterval(function() {
|
|
// if (that.percent === 100) {
|
|
// that.percent = 0;
|
|
// that.percentA = 0;
|
|
// } else {
|
|
// that.percent += 100 / 16;
|
|
// that.percentA = (that.percent * 100) / 120 + '%';
|
|
// }
|
|
// }, 1000);
|
|
// },
|
|
};
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.panel-box {
|
|
height: 100%;
|
|
width: 100%;
|
|
padding: 10px;
|
|
|
|
.panel-box-1 {
|
|
padding: 0 3rem;
|
|
}
|
|
|
|
div {
|
|
height: 33%;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
span {
|
|
flex: 1;
|
|
text-align: center;
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
.panel-tips {
|
|
font-size: 1.2rem;
|
|
color: #ccc;
|
|
}
|
|
|
|
.panel-con {
|
|
font-size: 3rem;
|
|
font-weight: 600;
|
|
text-shadow: #0075ff 0px 0px 8px;
|
|
letter-spacing: 8px;
|
|
transform: rotateX(0deg) rotateY(0deg) scaleX(1) scaleY(0.8) translate(0px, 0px);
|
|
left: auto !important;
|
|
right: 3rem;
|
|
}
|
|
|
|
.tips {
|
|
position: relative;
|
|
padding: 0 4px;
|
|
border-radius: 5px 5px 5px 0;
|
|
margin-left: 0;
|
|
transition: all 1s;
|
|
border: 1px solid #ccc;
|
|
}
|
|
|
|
.down-icon {
|
|
position: absolute;
|
|
font-size: 10px;
|
|
bottom: -8px;
|
|
left: -10%;
|
|
}
|
|
|
|
@media (max-width: 1500px) {
|
|
.panel-box .panel-box-1 {
|
|
padding: 0 2rem;
|
|
}
|
|
|
|
.panel-tips {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.panel-con {
|
|
font-size: 2rem;
|
|
right: 1rem;
|
|
}
|
|
}
|
|
</style>
|
|
|