14 changed files with 410 additions and 72 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,119 @@ |
|||
<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 :style="{ marginLeft: percentA }" class="tips"> |
|||
123 |
|||
<a-icon class="down-icon" type="caret-down" /> |
|||
</span> |
|||
</div> |
|||
<a-progress |
|||
:percent="percent" |
|||
:show-info="false" |
|||
:stroke-color="strokeColor" |
|||
:stroke-width="strokeWidth" |
|||
/> |
|||
<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: 48px; |
|||
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); |
|||
} |
|||
|
|||
.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