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