14 changed files with 482 additions and 151 deletions
@ -0,0 +1,147 @@ |
|||||
|
<template> |
||||
|
<div class="fast-box"> |
||||
|
<div style="flex: 1" class="bg-box"> |
||||
|
<div v-for="a in 4" :key="a"></div> |
||||
|
</div> |
||||
|
<div class="con-box" id="bobaodiv"> |
||||
|
<div v-for="item in dataList" :key="item.a" style="height: 25%" class="flex-1 flex-row"> |
||||
|
<div class="flex-1">{{ item.a }}</div> |
||||
|
<div class="flex-1">{{ item.b }}</div> |
||||
|
<div class="flex-1">{{ item.c }}</div> |
||||
|
</div> |
||||
|
<div v-for="item in dataList" :key="item.b" style="height: 25%" class="flex-1 flex-row"> |
||||
|
<div class="flex-1">{{ item.a }}</div> |
||||
|
<div class="flex-1">{{ item.b }}</div> |
||||
|
<div class="flex-1">{{ item.c }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'FastEd', |
||||
|
data() { |
||||
|
return { |
||||
|
str: 'FAST ED结果', |
||||
|
height: '', |
||||
|
width: '', |
||||
|
liHeight: '', |
||||
|
dataList: [ |
||||
|
{ |
||||
|
a: '1.面部对侧', |
||||
|
b: '正常', |
||||
|
c: '0分', |
||||
|
}, |
||||
|
{ |
||||
|
a: '2.上肢', |
||||
|
b: '中度无力', |
||||
|
c: '1分', |
||||
|
}, |
||||
|
{ |
||||
|
a: '3.语言运动', |
||||
|
b: '正常', |
||||
|
c: '0分', |
||||
|
}, |
||||
|
{ |
||||
|
a: '4.语言感觉', |
||||
|
b: '异常', |
||||
|
c: '1分', |
||||
|
}, |
||||
|
{ |
||||
|
a: '5.眼球凝视', |
||||
|
b: '一测活动困难', |
||||
|
c: '1分', |
||||
|
}, |
||||
|
], |
||||
|
oMarquee: null, //播报的容器 |
||||
|
BBLineH: null, |
||||
|
BBScrollAmount: 1, |
||||
|
BBLineCount: 5, |
||||
|
rollRestTime: 500, |
||||
|
rollTime: 10, |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.BBLineH = document.getElementsByClassName('fast-box')[0].offsetHeight * 0.25; |
||||
|
this.scrollBox(); |
||||
|
}, |
||||
|
methods: { |
||||
|
scrollBox() { |
||||
|
/* |
||||
|
* 启动播报滚动事件 |
||||
|
*/ |
||||
|
const that = this; |
||||
|
window.onload = function() { |
||||
|
// BBAllTime = 0; |
||||
|
that.oMarquee = document.getElementById('bobaodiv'); //滚动对象 |
||||
|
window.setTimeout(function() { |
||||
|
that.run(); |
||||
|
}, that.rollRestTime); |
||||
|
}; |
||||
|
}, |
||||
|
/* |
||||
|
* 播报滚动事件主逻辑 |
||||
|
*/ |
||||
|
run() { |
||||
|
const that = this; |
||||
|
if (that.BBScrollAmount == 0) { |
||||
|
//若单次滚动的距离为0，则开始下一次监听，不计数 |
||||
|
window.setTimeout(function() { |
||||
|
that.run(); |
||||
|
}, that.rollTime); |
||||
|
return; |
||||
|
} |
||||
|
if (that.oMarquee.scrollTop >= that.BBLineCount * that.BBLineH) { |
||||
|
//滚动完一次数据后，复位 |
||||
|
that.oMarquee.scrollTop = 0; |
||||
|
} |
||||
|
that.oMarquee.scrollTop += that.BBScrollAmount; |
||||
|
if (that.oMarquee.scrollTop % that.BBLineH < 1 && that.oMarquee.scrollTop > 0) { |
||||
|
window.setTimeout(function() { |
||||
|
that.run(); |
||||
|
}, that.rollRestTime); |
||||
|
} else { |
||||
|
window.setTimeout(function() { |
||||
|
that.run(); |
||||
|
}, that.rollTime); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="stylus" scoped> |
||||
|
.bg-box { |
||||
|
height: 100%; |
||||
|
|
||||
|
div { |
||||
|
height: 25%; |
||||
|
} |
||||
|
|
||||
|
div:nth-of-type(even) { |
||||
|
background: #023567; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.fast-box { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.con-box { |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
position: absolute; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
overflow: hidden; |
||||
|
font-weight: 600; |
||||
|
font-size: 14px; |
||||
|
color: #eee; |
||||
|
|
||||
|
div { |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,112 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="panel-box"> |
||||
|
<div class="d-flex"> |
||||
|
<div class="flex-1"> |
||||
|
<span class="panel-tips">患者体重（kg）</span> |
||||
|
<span class="panel-con">60.00</span> |
||||
|
</div> |
||||
|
<div class="flex-1"> |
||||
|
<span class="panel-tips">药物剂量（mg）</span> |
||||
|
<span class="panel-con">55.00</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="d-flex"> |
||||
|
<div class="flex-1"> |
||||
|
<span class="panel-tips">团注剂量（mg）</span> |
||||
|
<span class="panel-con">5.40</span> |
||||
|
</div> |
||||
|
<div class="flex-1"> |
||||
|
<span class="panel-tips">维持剂量（mg）</span> |
||||
|
<span class="panel-con">48.60</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="width: 95%; padding-left: 5%"> |
||||
|
<div style="width: 120%"> |
||||
|
<span class="tips" :style="{ marginLeft: percentA }"> |
||||
|
123 |
||||
|
<a-icon type="caret-down" class="down-icon" /> |
||||
|
</span> |
||||
|
</div> |
||||
|
<a-progress :percent="percent" :show-info="false" :stroke-width="strokeWidth" :stroke-color="strokeColor" /> |
||||
|
<div>123</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'Panel', |
||||
|
data() { |
||||
|
return { |
||||
|
str: '智慧平车面板数据', |
||||
|
dataList: [], |
||||
|
percent: 0, |
||||
|
percentA: 0, |
||||
|
strokeWidth: 6, |
||||
|
strokeColor: { |
||||
|
from: '#1362B8', |
||||
|
to: '#06D0CA', |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
const that = this; |
||||
|
var add = setInterval(function() { |
||||
|
if (that.percent === 100) { |
||||
|
that.percent = 0; |
||||
|
that.percentA = 0; |
||||
|
} else { |
||||
|
that.percent++; |
||||
|
that.percentA = (that.percent * 100) / 120 + '%'; |
||||
|
} |
||||
|
}, 1000); |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="stylus" scoped> |
||||
|
.panel-box { |
||||
|
height: 100%; |
||||
|
width: 100%; |
||||
|
padding: 10px; |
||||
|
|
||||
|
div { |
||||
|
height: 33%; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
span { |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.panel-tips { |
||||
|
font-size: 20px; |
||||
|
color: #ccc; |
||||
|
} |
||||
|
|
||||
|
.panel-con { |
||||
|
font-size: 40px; |
||||
|
color: 'white'; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.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%; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,49 @@ |
|||||
|
var option = { |
||||
|
tooltip: {}, |
||||
|
backgroundColor: 'none', |
||||
|
visualMap: { |
||||
|
show: false, |
||||
|
dimension: 2, |
||||
|
min: -1, |
||||
|
max: 1, |
||||
|
inRange: { |
||||
|
name: '', |
||||
|
color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026'], |
||||
|
}, |
||||
|
}, |
||||
|
xAxis3D: { type: 'value' }, |
||||
|
yAxis3D: { type: 'value' }, |
||||
|
zAxis3D: { |
||||
|
type: 'value', |
||||
|
max: 1, |
||||
|
splitNumber: 2, |
||||
|
}, |
||||
|
grid3D: { |
||||
|
viewControl: {}, |
||||
|
boxHeight: 40, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
type: 'surface', |
||||
|
wireframe: { show: false }, |
||||
|
shading: 'color', |
||||
|
equation: { |
||||
|
x: { |
||||
|
step: 0.05, |
||||
|
min: -3, |
||||
|
max: 3, |
||||
|
}, |
||||
|
y: { |
||||
|
step: 0.05, |
||||
|
min: -3, |
||||
|
max: 3, |
||||
|
}, |
||||
|
z: function(x, y) { |
||||
|
return (Math.sin(x * x + y * y) * x) / 3.14; |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
|
||||
|
export default option; |
||||
Loading…
Reference in new issue