16 changed files with 644 additions and 22 deletions
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
@ -0,0 +1,121 @@ |
|||
<template> |
|||
<!-- <div>数据统计组件</div> --> |
|||
<div class="flex-1 flex-column"> |
|||
<div |
|||
:key="item.id" |
|||
class="flex-1 flex-nowrap mt-2 align-center justify-space-between box" |
|||
v-for="item in lists" |
|||
> |
|||
<div class="title">{{ item.name }}</div> |
|||
<div class="number flex-1"> |
|||
<div class="num_item"> |
|||
<span>1</span> |
|||
</div> |
|||
<div class="num_item"> |
|||
<span>5</span> |
|||
</div> |
|||
<div class="num_item" style="padding-right:5%"> |
|||
<span>.</span> |
|||
</div> |
|||
<div class="num_item"> |
|||
<span>1</span> |
|||
</div> |
|||
<div class="num_item"> |
|||
<span>5</span> |
|||
</div> |
|||
<div class="num_item"> |
|||
<span>8</span> |
|||
</div> |
|||
<div class="num_item"> |
|||
<span>6</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: 'LoadCells', |
|||
data() { |
|||
return { |
|||
width: '', |
|||
height: '', |
|||
lists: [ |
|||
{ |
|||
id: 1, |
|||
name: '称重传感器1', |
|||
number: '15.2346', |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: '称重传感器2', |
|||
number: '15.3456', |
|||
}, |
|||
{ |
|||
id: 3, |
|||
name: '称重传感器3', |
|||
number: '14.8946', |
|||
}, |
|||
{ |
|||
id: 4, |
|||
name: '称重传感器4', |
|||
number: '15.0167', |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
|
|||
methods: {}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="stylus" scoped > |
|||
.box { |
|||
width: 88%; |
|||
left: 6%; |
|||
position: relative; |
|||
} |
|||
|
|||
.title { |
|||
font-size: 17px; |
|||
color: #C8CED5; |
|||
letter-spacing: 2px; |
|||
} |
|||
|
|||
.number { |
|||
height: 80%; |
|||
position: absolute; |
|||
right: 0; |
|||
bottom: 0; |
|||
} |
|||
|
|||
.number .num_item { |
|||
background: url('~assets/cz-bg.png') no-repeat bottom left; |
|||
background-size: auto 90%; |
|||
} |
|||
|
|||
.number span { |
|||
display: inline-block; |
|||
position: relative; |
|||
top: -10px; |
|||
left: 2px; |
|||
font-size: 38px; |
|||
font-style: oblique; |
|||
font-weight: 400; |
|||
letter-spacing: 18px; |
|||
height: 100%; |
|||
} |
|||
|
|||
@media (max-width: 1500px) { |
|||
.title { |
|||
font-size: 12px; |
|||
letter-spacing: 0; |
|||
} |
|||
|
|||
.number span { |
|||
top: -10px; |
|||
font-size: 23px; |
|||
letter-spacing: 16px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,98 @@ |
|||
<template> |
|||
<div class="flex-1 flex-column rfid" id="rfid"> |
|||
<!-- <div class="box" id="box"> |
|||
<span>专科护士</span> |
|||
</div> |
|||
<div class="box active"> |
|||
<span>专科护士</span> |
|||
</div>--> |
|||
<div :key="index" class="list" v-for="(list,index) in lists"> |
|||
<span>{{ list.name }}</span> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: 'RFID', |
|||
data() { |
|||
return { |
|||
lists: [ |
|||
{ top: '10px', left: '10px', name: '专科护士' }, |
|||
{ top: '50px', left: '50px', name: '专科医生' }, |
|||
{ top: '70px', left: '70px', name: '采血推车' }, |
|||
{ top: '90px', left: '90px', name: '心电图推车' }, |
|||
{ top: '100px', left: '100px', name: '介入室' }, |
|||
{ top: '80px', left: '80px', name: 'CT室' }, |
|||
{ top: '60px', left: '60px', name: '急救室' }, |
|||
{ top: '40px', left: '40px', name: '急诊医生' }, |
|||
], |
|||
}; |
|||
}, |
|||
|
|||
mounted() { |
|||
console.log('开始'); |
|||
// 获取元素 |
|||
let wrap = document.getElementById('rfid'); |
|||
// let box = document.getElementById('box'); |
|||
let box = document.getElementsByClassName('list'); |
|||
console.log('box: ', box); |
|||
|
|||
//让元素动起来 |
|||
// 添加两个变量，用于更换运动方向 |
|||
let a = 1; |
|||
let b = 1; |
|||
// 获取元素的可运动空间，用父元素的宽高减去子元素的宽高 |
|||
let w = wrap.offsetWidth - box.offsetWidth; |
|||
let h = wrap.offsetHeight - box.offsetHeight; |
|||
|
|||
setInterval(function() { |
|||
// 获取元素当前left |
|||
let l = box.offsetLeft; |
|||
if (l == w || l == 0) { |
|||
// 如果到达可运动空间最大值和最小值的时候，a 变成负值 |
|||
a *= -1; |
|||
} |
|||
// 把元素距离左边的值每10ms加1px |
|||
// a变成负值可以改变运动方向 |
|||
box.style.left = l + a + 'px'; |
|||
console.log('box.style.left: ', box.style.left); |
|||
|
|||
// 垂直方向同水平方向 |
|||
let t = box.offsetTop; |
|||
if (t == h || t == 0) { |
|||
b *= -1; |
|||
} |
|||
box.style.top = t + b + 'px'; |
|||
}, 100); |
|||
}, |
|||
|
|||
methods: {}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="stylus" scoped > |
|||
.rfid { |
|||
position: relative; |
|||
} |
|||
|
|||
.list { |
|||
width: 69px; |
|||
height: 69px; |
|||
line-height: 69px; |
|||
text-align: center; |
|||
font-size: 12px; |
|||
color: #C8CED5; |
|||
background: url('~assets/rfid-bg.png') no-repeat center; |
|||
position: absolute; |
|||
top: 100px; |
|||
left: 200px; |
|||
} |
|||
|
|||
.active { |
|||
width: 86px; |
|||
height: 86px; |
|||
line-height: 86px; |
|||
font-size: 12px; |
|||
background: url('~assets/rfid-bg-active.png') no-repeat center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,108 @@ |
|||
var option = { |
|||
title: { |
|||
left: '10%', |
|||
textStyle: { |
|||
fontWeight: 'normal', |
|||
color: '#fff', //标题颜色
|
|||
}, |
|||
text: '震动传感器', |
|||
}, |
|||
legend: { |
|||
x: 'center', |
|||
y: 'top', |
|||
data: ['传感器1', '传感器2'], |
|||
textStyle: { |
|||
fontWeight: 'normal', |
|||
color: '#fff', //标题颜色
|
|||
}, |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
axisLine: { |
|||
//y轴
|
|||
show: false, |
|||
}, |
|||
}, |
|||
yAxis: { |
|||
show: true, |
|||
type: 'value', |
|||
splitLine: { show: false }, //去除网格线
|
|||
nameTextStyle: { |
|||
color: '#abb8ce', |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
color: '#abb8ce', |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
//y轴刻度线
|
|||
show: false, |
|||
}, |
|||
axisLine: { |
|||
//y轴
|
|||
show: false, |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '传感器1', |
|||
data: [120, 932, 401, 534, 290, 530, 320], |
|||
type: 'line', |
|||
smooth: true, |
|||
itemStyle: { |
|||
color: { |
|||
type: 'linear', |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ |
|||
offset: 0, |
|||
color: '#0A4982', // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: '#243859', // 100% 处的颜色
|
|||
}, |
|||
], |
|||
global: false, // 缺省为 false
|
|||
}, |
|||
}, |
|||
areaStyle: {}, |
|||
lineStyle: { normal: { width: 4 } }, |
|||
}, |
|||
{ |
|||
name: '传感器2', |
|||
data: [220, 632, 101, 834, 490, 630, 220], |
|||
type: 'line', |
|||
smooth: true, |
|||
itemStyle: { |
|||
color: { |
|||
type: 'linear', |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ |
|||
offset: 0, |
|||
color: '#B2F2FC', // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: '#5BE1FB', // 100% 处的颜色
|
|||
}, |
|||
], |
|||
global: false, // 缺省为 false
|
|||
}, |
|||
}, |
|||
areaStyle: {}, |
|||
lineStyle: { normal: { width: 4 } }, |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
export default option; |
|||
@ -0,0 +1,232 @@ |
|||
<template> |
|||
<div class="flex-1 flex-column rfid" id="rfid"> |
|||
<!-- <div :key="index" class="list" v-for="(list,index) in lists"> |
|||
<span>{{ list.name }}</span> |
|||
</div> |
|||
<div class="list active"> |
|||
<span>专科护士</span> |
|||
</div>--> |
|||
<div id="wrap"></div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: 'RFID', |
|||
data() { |
|||
return { |
|||
lists: [ |
|||
{ top: '10px', left: '10px', name: '专科护士' }, |
|||
{ top: '50px', left: '50px', name: '专科医生' }, |
|||
{ top: '70px', left: '70px', name: '采血推车' }, |
|||
{ top: '90px', left: '90px', name: '心电图推车' }, |
|||
{ top: '100px', left: '100px', name: '介入室' }, |
|||
{ top: '80px', left: '80px', name: 'CT室' }, |
|||
{ top: '60px', left: '60px', name: '急救室' }, |
|||
{ top: '40px', left: '40px', name: '急诊医生' }, |
|||
], |
|||
picSrc: '~assets/rfid-bg.png', |
|||
}; |
|||
}, |
|||
|
|||
mounted() { |
|||
let wrap = document.getElementById('wrap'); |
|||
let lists = this.lists; |
|||
|
|||
/** |
|||
* 生成并返回一个从m到n全区间的随机数 |
|||
* @param {Object} m |
|||
* @param {Object} n |
|||
*/ |
|||
function randomNum(m, n) { |
|||
return Math.floor(Math.random() * (n - m + 1) + m); |
|||
} |
|||
|
|||
/** |
|||
* 生成一个随机颜色，并返回rgb字符串值 |
|||
*/ |
|||
function randomColor() { |
|||
var r = randomNum(0, 255); |
|||
var g = randomNum(0, 255); |
|||
var b = randomNum(0, 255); |
|||
return 'rgb(' + r + ',' + g + ',' + b + ')'; |
|||
} |
|||
|
|||
//获得wrapDiv |
|||
var wrapDiv = document.getElementById('wrap'); //定义数组存储所有的小球 |
|||
var balls = []; |
|||
|
|||
//生成小球函数 |
|||
function createBalls() { |
|||
for (var i = 0; lists.length > i; i++) { |
|||
var ball = document.createElement('div'); //随机小球起始的X坐标和小球的Y坐标 |
|||
ball.x = randomNum(0, 120); |
|||
ball.y = randomNum(0, 70); //随机小球的移动速度 |
|||
ball.speed = randomNum(1, 2); //随机小球移动的方向 |
|||
if (Math.random() - 0.5 > 0) { |
|||
ball.xflag = true; |
|||
} else { |
|||
ball.xflag = false; |
|||
} |
|||
if (Math.random() - 0.5 > 0) { |
|||
ball.yflag = true; |
|||
} else { |
|||
ball.yflag = false; |
|||
} |
|||
ball.innerHTML = lists[i].name; //将小球插入当wrapDiv中 |
|||
wrapDiv.appendChild(ball); //将所有的小球存储到数组中 |
|||
// ball.classList = 'box'; |
|||
ball.style.backgroundColor = randomColor(); |
|||
// ball.style = |
|||
// 'width: 69px;height: 69px;line-height: 69px;text-align: center;font-size: 12px; color: #C8CED5; position: absolute;top: 100px; left: 200px;'; |
|||
balls.push(ball); |
|||
} |
|||
} |
|||
createBalls(); |
|||
|
|||
//小球移动函数，判断小球的位置 |
|||
function moveBalls(ballObj) { |
|||
setInterval(function() { |
|||
ballObj.style.top = ballObj.y + 'px'; |
|||
ballObj.style.left = ballObj.x + 'px'; //判断小球的标志量，对小球作出相应操作 |
|||
if (ballObj.yflag) { |
|||
//小球向下移动 |
|||
ballObj.y += ballObj.speed; |
|||
if (ballObj.y >= wrap.offsetHeight - ballObj.offsetHeight) { |
|||
ballObj.y = wrap.offsetHeight - ballObj.offsetHeight; |
|||
ballObj.yflag = false; |
|||
} |
|||
} else { |
|||
//小球向上移动 |
|||
ballObj.y -= ballObj.speed; |
|||
if (ballObj.y <= 0) { |
|||
ballObj.y = 0; |
|||
ballObj.yflag = true; |
|||
} |
|||
} |
|||
if (ballObj.xflag) { |
|||
//小球向右移动 |
|||
ballObj.x += ballObj.speed; |
|||
if (ballObj.x >= wrap.offsetWidth - ballObj.offsetWidth) { |
|||
ballObj.x = wrap.offsetWidth - ballObj.offsetWidth; |
|||
ballObj.xflag = false; |
|||
} |
|||
} else { |
|||
//小球向左移动 |
|||
ballObj.x -= ballObj.speed; |
|||
if (ballObj.x <= 0) { |
|||
ballObj.x = 0; |
|||
ballObj.xflag = true; |
|||
} |
|||
} |
|||
crash(ballObj); |
|||
}, 100); |
|||
} |
|||
var x1, y1, x2, y2; |
|||
|
|||
//碰撞函数 |
|||
function crash(ballObj) { |
|||
//通过传过来的小球对象来获取小球的X坐标和Y坐标 |
|||
x1 = ballObj.x; |
|||
y1 = ballObj.y; |
|||
for (var i = 0; i < balls.length; i++) { |
|||
//确保不和自己对比 |
|||
if (ballObj != balls[i]) { |
|||
x2 = balls[i].x; |
|||
y2 = balls[i].y; //判断位置的平方和小球的圆心坐标的关系 |
|||
if (Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2) + 800 <= Math.pow(ballObj.offsetWidth + balls[i].offsetWidth, 2)) { |
|||
//判断传过来的小球对象，相对于碰撞小球的哪个方位 |
|||
if (ballObj.x < balls[i].x) { |
|||
if (ballObj.y < balls[i].y) { |
|||
//小球对象在被碰小球的左上角 |
|||
ballObj.yflag = false; |
|||
ballObj.xflag = false; |
|||
} else if (ballObj.y > balls[i].y) { |
|||
//小球对象在被碰小球的左下角 |
|||
ballObj.xflag = false; |
|||
ballObj.yflag = true; |
|||
} else { |
|||
//小球对象在被撞小球的正左方 |
|||
ballObj.xflag = false; |
|||
} |
|||
} else if (ballObj.x > balls[i].x) { |
|||
if (ballObj.y < balls[i].y) { |
|||
//小球对象在被碰撞小球的右上方 |
|||
ballObj.yflag = false; |
|||
ballObj.xflag = true; |
|||
} else if (ballObj.y > balls[i].y) { |
|||
//小球对象在被碰撞小球的右下方 |
|||
ballObj.xflag = true; |
|||
ballObj.yflag = true; |
|||
} else { |
|||
//小球对象在被撞小球的正右方 |
|||
ballObj.xflag = true; |
|||
} |
|||
} else if (ballObj.y > balls[i].y) { |
|||
//小球对象在被撞小球的正下方 |
|||
ballObj.yflag = true; |
|||
} else if (ballObj.y < balls[i].y) { |
|||
//小球对象在被撞小球的正上方 |
|||
ballObj.yflag = false; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
for (var i = 0; i < balls.length; i++) { |
|||
//将所有的小球传到函数中,来实现对小球的移动 |
|||
moveBalls(balls[i]); |
|||
} |
|||
}, |
|||
|
|||
methods: {}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="stylus" scoped > |
|||
#wrap { |
|||
height: 100%; |
|||
width: 100%; |
|||
/* 小球设置相对定位 */ |
|||
position: relative; |
|||
margin: 0 auto; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
// p.box { |
|||
// width: 40px; |
|||
// height: 40px; |
|||
// border-radius: 50%; |
|||
// background-color: red; |
|||
// position: absolute; |
|||
// top: 0; |
|||
// left: 0; |
|||
// color: white; |
|||
// font-size: 25px; |
|||
// text-align: center; |
|||
// line-height: 40px; |
|||
// } |
|||
.rfid { |
|||
position: relative; |
|||
} |
|||
|
|||
.list { |
|||
width: 69px; |
|||
height: 69px; |
|||
line-height: 69px; |
|||
text-align: center; |
|||
font-size: 12px; |
|||
color: #C8CED5; |
|||
background: url('~assets/rfid-bg.png') no-repeat center; |
|||
position: absolute; |
|||
left: 200px; |
|||
top: 100px; |
|||
} |
|||
|
|||
.active { |
|||
width: 86px; |
|||
height: 86px; |
|||
line-height: 86px; |
|||
font-size: 12px; |
|||
background: url('~assets/rfid-bg-active.png') no-repeat center; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue