|
|
|
@ -5,613 +5,60 @@ |
|
|
|
<script type="text/javascript" src="/script/jquery.min.js"></script> |
|
|
|
<script type="text/javascript" src="/script/vue.js"></script> |
|
|
|
<script src="/script/axios.min.js"></script> |
|
|
|
|
|
|
|
<!-- 引入样式 --> |
|
|
|
<link rel="stylesheet" href="/style/element-plus.css" rel="external nofollow" target="_blank" /> |
|
|
|
<!-- 引入组件库 --> |
|
|
|
<script src="/script/element-plus.js" rel="external nofollow" ></script> |
|
|
|
</head> |
|
|
|
<body style="height: 100%; margin: 0"> |
|
|
|
|
|
|
|
<div> |
|
|
|
<button onclick="hideDiv()"> |
|
|
|
隐藏 |
|
|
|
</button> |
|
|
|
<div id="app"> |
|
|
|
<div v-for="device in device_list"> |
|
|
|
<div>@{{device.name}}</div> |
|
|
|
<div v-if="device.online == 1"> |
|
|
|
在线 |
|
|
|
</div> |
|
|
|
<div v-else> |
|
|
|
离线 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div id="app"> |
|
|
|
<div class="block"> |
|
|
|
<el-slider v-model="timer_shaft_value" :min="timer_shaft_min" :max="timer_shaft_max" :marks="marks"> </el-slider> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div id="container1" style="height: 60%;"></div> |
|
|
|
<div id="container2" style="height: 40%;"></div> |
|
|
|
<div id="container3" style="height: 100%;"></div> |
|
|
|
|
|
|
|
<script type="text/javascript" src="/script/jquery.min.js"></script> |
|
|
|
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script> |
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript"> |
|
|
|
var device_list = []; |
|
|
|
|
|
|
|
const app = { |
|
|
|
const AppInfo = { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
device_list: [], |
|
|
|
aaaa:0, |
|
|
|
timer_shaft_value: 5, |
|
|
|
timer_shaft_min:1, |
|
|
|
timer_shaft_max:5, |
|
|
|
marks: { |
|
|
|
|
|
|
|
1: "1", |
|
|
|
2: "2", |
|
|
|
3: "3", |
|
|
|
4: "4", |
|
|
|
}, |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
var _this = this; |
|
|
|
axios |
|
|
|
.get('/loraDeviceList') |
|
|
|
.then(function (response) { |
|
|
|
device_list = response.data |
|
|
|
_this.device_list = device_list; |
|
|
|
}) |
|
|
|
.catch(function (error) { // 请求失败处理 |
|
|
|
console.log(error); |
|
|
|
}); |
|
|
|
|
|
|
|
// 每隔5分钟定时刷新 |
|
|
|
this.timer = setInterval(() => { |
|
|
|
this.getFxItemlist(); |
|
|
|
}, 1000 * 3) |
|
|
|
this.timer_shaft_value += 1; |
|
|
|
this.timer_shaft_min += 1; |
|
|
|
this.timer_shaft_max += 1; |
|
|
|
let marks = {}; |
|
|
|
for (let i = this.timer_shaft_max - 5; i < this.timer_shaft_max; i++) { |
|
|
|
marks[i] = i.toString(); |
|
|
|
} |
|
|
|
this.marks = marks; |
|
|
|
console.log(this.marks) |
|
|
|
}, 1000 * 1) |
|
|
|
}, |
|
|
|
beforeDestroy() { |
|
|
|
clearInterval(this.timer); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getFxItemlist() { |
|
|
|
this.device_list = device_list |
|
|
|
this.$forceUpdate(); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
Vue.createApp(app).mount('#app') |
|
|
|
|
|
|
|
|
|
|
|
var mac = '616162626363'; |
|
|
|
var clear = 0; |
|
|
|
//默认显示各项对比 |
|
|
|
var show_type = 1; |
|
|
|
//1血氧 |
|
|
|
var compare_type = 1; |
|
|
|
|
|
|
|
var dom1 = document.getElementById('container1'); |
|
|
|
var dom2 = document.getElementById('container2'); |
|
|
|
var dom3 = document.getElementById('container3'); |
|
|
|
|
|
|
|
var data_blood = []; |
|
|
|
var data_temperature = []; |
|
|
|
var data_heart = []; |
|
|
|
var data_humidity = []; |
|
|
|
var data_total = []; |
|
|
|
|
|
|
|
buildChart1(dom1); |
|
|
|
buildChart2(dom2); |
|
|
|
buildChart3(dom3); |
|
|
|
$("#container3").hide(); |
|
|
|
|
|
|
|
function hideDiv() { |
|
|
|
$("#container1").toggle(); |
|
|
|
$("#container2").toggle(); |
|
|
|
$("#container3").toggle(); |
|
|
|
|
|
|
|
clear = 1 |
|
|
|
show_type = (show_type == 1) ? 2 : 1; |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* 各项对比 |
|
|
|
* @param dom |
|
|
|
*/ |
|
|
|
function buildChart1(dom) { |
|
|
|
var myChart = echarts.init(dom, 'dark', { |
|
|
|
renderer: 'canvas', |
|
|
|
useDirtyRect: false |
|
|
|
}); |
|
|
|
|
|
|
|
var option = { |
|
|
|
color: ['#2ec7c9', '#5ab1ef', '#f5994e', '#c05050', '#c14089', '#9a7fd1'], |
|
|
|
grid: { |
|
|
|
left: '25%' |
|
|
|
}, |
|
|
|
tooltip: { |
|
|
|
trigger: 'axis' |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
data: [ |
|
|
|
{ |
|
|
|
name: '血氧', |
|
|
|
textStyle: { |
|
|
|
color: 'auto' |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '温度', |
|
|
|
textStyle: { |
|
|
|
color: 'auto' |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '心率', |
|
|
|
textStyle: { |
|
|
|
color: 'auto' |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '湿度', |
|
|
|
textStyle: { |
|
|
|
color: 'auto' |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '总体', |
|
|
|
textStyle: { |
|
|
|
color: 'auto' |
|
|
|
} |
|
|
|
} |
|
|
|
], |
|
|
|
textStyle: { |
|
|
|
fontSize: 20 |
|
|
|
} |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
type: 'time', |
|
|
|
name: '时间（/s）', |
|
|
|
axisLabel: { |
|
|
|
fontSize: 16, |
|
|
|
formatter: function (value) { |
|
|
|
return echarts.format.formatTime('mm:ss', new Date(value)); |
|
|
|
} |
|
|
|
}, |
|
|
|
nameTextStyle: { |
|
|
|
fontSize: 16 |
|
|
|
} |
|
|
|
}, |
|
|
|
yAxis: [ |
|
|
|
{ |
|
|
|
name: '血氧', |
|
|
|
min: 0, |
|
|
|
max: 100, |
|
|
|
position: 'left', |
|
|
|
nameTextStyle: { |
|
|
|
align: 'right', |
|
|
|
color: '#2ec7c9', |
|
|
|
fontSize: 16 |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: '#2ec7c9' |
|
|
|
} |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
formatter: '{value}%', |
|
|
|
color: '#2ec7c9', |
|
|
|
fontSize: 16 |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'value', |
|
|
|
name: '温度', |
|
|
|
min: 30, |
|
|
|
max: 45, |
|
|
|
position: 'left', |
|
|
|
offset: 50, |
|
|
|
nameTextStyle: { |
|
|
|
align: 'right', |
|
|
|
color: '#5ab1ef', |
|
|
|
fontSize: 16 |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: '#5ab1ef' |
|
|
|
} |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
formatter: '{value}°C', |
|
|
|
color: '#5ab1ef', |
|
|
|
fontSize: 16 |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'value', |
|
|
|
name: '心率', |
|
|
|
min: 0, |
|
|
|
max: 150, |
|
|
|
position: 'left', |
|
|
|
offset: 100, |
|
|
|
nameTextStyle: { |
|
|
|
align: 'right', |
|
|
|
color: '#f5994e', |
|
|
|
fontSize: 16 |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: '#f5994e' |
|
|
|
} |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
formatter: '{value}次', |
|
|
|
color: '#f5994e', |
|
|
|
fontSize: 16 |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'value', |
|
|
|
name: '湿度', |
|
|
|
min: 0, |
|
|
|
max: 100, |
|
|
|
position: 'left', |
|
|
|
offset: 150, |
|
|
|
nameTextStyle: { |
|
|
|
align: 'right', |
|
|
|
color: '#c05050', |
|
|
|
fontSize: 16 |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: '#c05050' |
|
|
|
} |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
formatter: '{value}%', |
|
|
|
color: '#c05050', |
|
|
|
fontSize: 16 |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'value', |
|
|
|
name: '总体', |
|
|
|
min: 0, |
|
|
|
max: 100, |
|
|
|
position: 'left', |
|
|
|
offset: 200, |
|
|
|
nameTextStyle: { |
|
|
|
align: 'right', |
|
|
|
color: '#c14089', |
|
|
|
fontSize: 16 |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: '#c14089' |
|
|
|
} |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
formatter: '{value}%', |
|
|
|
color: '#c14089', |
|
|
|
fontSize: 16 |
|
|
|
}, |
|
|
|
} |
|
|
|
], |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: '血氧', |
|
|
|
type: 'scatter', |
|
|
|
symbolSize: 10, |
|
|
|
yAxisIndex: 0, |
|
|
|
tooltip: { |
|
|
|
valueFormatter: (value) => value.toFixed(2) + ' %' |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '温度', |
|
|
|
type: 'scatter', |
|
|
|
symbolSize: 10, |
|
|
|
yAxisIndex: 1, |
|
|
|
tooltip: { |
|
|
|
valueFormatter: (value) => value.toFixed(2) + ' ℃' |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '心率', |
|
|
|
type: 'scatter', |
|
|
|
symbolSize: 10, |
|
|
|
yAxisIndex: 2, |
|
|
|
tooltip: { |
|
|
|
valueFormatter: (value) => value.toFixed(2) + ' 次' |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '湿度', |
|
|
|
type: 'scatter', |
|
|
|
symbolSize: 10, |
|
|
|
yAxisIndex: 3, |
|
|
|
tooltip: { |
|
|
|
valueFormatter: (value) => value.toFixed(2) + ' %' |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '总体', |
|
|
|
type: 'line', |
|
|
|
smooth: true, |
|
|
|
tooltip: { |
|
|
|
valueFormatter: (value) => value.toFixed(2) + ' %' |
|
|
|
} |
|
|
|
} |
|
|
|
], |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
if (option && typeof option === 'object') { |
|
|
|
myChart.setOption(option); |
|
|
|
} |
|
|
|
|
|
|
|
window.addEventListener('resize', myChart.resize); |
|
|
|
|
|
|
|
|
|
|
|
setInterval(function () { |
|
|
|
if (show_type != 1) { |
|
|
|
if (clear == 1) { |
|
|
|
data_blood = [] |
|
|
|
data_temperature = []; |
|
|
|
data_heart = []; |
|
|
|
data_humidity = []; |
|
|
|
data_total = []; |
|
|
|
clear = 0; |
|
|
|
} |
|
|
|
|
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
$.get('/loraData2?mac=' + mac).done(function (_rawData) { |
|
|
|
let limit = 5 |
|
|
|
if (data_blood.length >= limit) { |
|
|
|
data_blood.shift(); |
|
|
|
} |
|
|
|
if (data_temperature.length >= limit) { |
|
|
|
data_temperature.shift(); |
|
|
|
} |
|
|
|
if (data_heart.length >= limit) { |
|
|
|
data_heart.shift(); |
|
|
|
} |
|
|
|
if (data_humidity.length >= limit) { |
|
|
|
data_humidity.shift(); |
|
|
|
} |
|
|
|
if (data_total.length >= 10 * limit) { |
|
|
|
data_total.splice(0, 10); |
|
|
|
} |
|
|
|
_rawData.blood.forEach(value => data_blood.push(value)); |
|
|
|
_rawData.temperature.forEach(value => data_temperature.push(value)); |
|
|
|
_rawData.heart.forEach(value => data_heart.push(value)); |
|
|
|
_rawData.humidity.forEach(value => data_humidity.push(value)); |
|
|
|
// _rawData.total_data.forEach(value => data_total.push(value)); |
|
|
|
|
|
|
|
myChart.setOption({ |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: '血氧', |
|
|
|
data: data_blood |
|
|
|
}, { |
|
|
|
name: '温度', |
|
|
|
data: data_temperature |
|
|
|
}, { |
|
|
|
name: '心率', |
|
|
|
data: data_heart |
|
|
|
}, { |
|
|
|
name: '湿度', |
|
|
|
data: data_humidity |
|
|
|
}, |
|
|
|
// { |
|
|
|
// name: '总体', |
|
|
|
// data: data_total |
|
|
|
// } |
|
|
|
] |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
}, 2000); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* 雷达图 |
|
|
|
* @param dom |
|
|
|
*/ |
|
|
|
function buildChart2(dom) { |
|
|
|
var myChart = echarts.init(dom, 'dark', { |
|
|
|
renderer: 'canvas', |
|
|
|
useDirtyRect: false |
|
|
|
}); |
|
|
|
|
|
|
|
var option = { |
|
|
|
color: ['#2ec7c9', '#5ab1ef', '#f5994e', '#c05050', '#c14089', '#9a7fd1'], |
|
|
|
|
|
|
|
radar: { |
|
|
|
// shape: 'circle', |
|
|
|
indicator: [ |
|
|
|
{name: '血氧', max: 100}, |
|
|
|
{name: '温度', max: 45}, |
|
|
|
{name: '心率', max: 150}, |
|
|
|
{name: '湿度', max: 100}, |
|
|
|
], |
|
|
|
axisName: { |
|
|
|
fontSize: 18, |
|
|
|
color: '#2ec7c9', |
|
|
|
}, |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
type: 'radar', |
|
|
|
} |
|
|
|
] |
|
|
|
}; |
|
|
|
|
|
|
|
if (option && typeof option === 'object') { |
|
|
|
myChart.setOption(option); |
|
|
|
} |
|
|
|
|
|
|
|
window.addEventListener('resize', myChart.resize); |
|
|
|
|
|
|
|
setInterval(buildData, 1000 * 5); |
|
|
|
|
|
|
|
function buildData() { |
|
|
|
if (show_type != 1 || data_blood.length == 0) { |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
let blood = data_blood.slice(-1)[0][1]; |
|
|
|
let temperature = data_temperature.slice(-1)[0][1]; |
|
|
|
let heart = data_temperature.slice(-1)[0][1]; |
|
|
|
let humidity = data_humidity.slice(-1)[0][1]; |
|
|
|
|
|
|
|
myChart.setOption({ |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
data: [ |
|
|
|
{ |
|
|
|
value: [blood, temperature, heart, humidity], |
|
|
|
areaStyle: { |
|
|
|
color: 'rgba(255, 228, 52, 0.6)' |
|
|
|
}, |
|
|
|
label: { |
|
|
|
show: true, |
|
|
|
textStyle: { |
|
|
|
color: '#2ec7c9', |
|
|
|
fontSize: 16, |
|
|
|
}, |
|
|
|
formatter: function (params) { |
|
|
|
return params.value; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
] |
|
|
|
} |
|
|
|
] |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
function buildChart3(dom) { |
|
|
|
var myChart = echarts.init(dom, 'dark', { |
|
|
|
renderer: 'canvas', |
|
|
|
useDirtyRect: false |
|
|
|
}); |
|
|
|
|
|
|
|
var option = { |
|
|
|
tooltip: { |
|
|
|
trigger: 'axis' |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
data: ['设备1', '设备2', '设备3',], |
|
|
|
textStyle: { |
|
|
|
fontSize: 20 |
|
|
|
} |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
type: 'time', |
|
|
|
name: '时间（/s）', |
|
|
|
axisLabel: { |
|
|
|
fontSize: 16, |
|
|
|
formatter: function (value) { |
|
|
|
return echarts.format.formatTime('mm:ss', new Date(value)); |
|
|
|
} |
|
|
|
}, |
|
|
|
nameTextStyle: { |
|
|
|
fontSize: 16 |
|
|
|
} |
|
|
|
}, |
|
|
|
yAxis: [ |
|
|
|
{ |
|
|
|
type: 'value', |
|
|
|
min: 0, |
|
|
|
max: 100, |
|
|
|
nameTextStyle: { |
|
|
|
align: 'right', |
|
|
|
fontSize: 16 |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
show: true, |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
formatter: '{value}%', |
|
|
|
fontSize: 16 |
|
|
|
}, |
|
|
|
} |
|
|
|
], |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
if (option && typeof option === 'object') { |
|
|
|
myChart.setOption(option); |
|
|
|
} |
|
|
|
|
|
|
|
window.addEventListener('resize', myChart.resize); |
|
|
|
|
|
|
|
let special_compare_data = []; |
|
|
|
setInterval(function () { |
|
|
|
// if (show_type != 2) { |
|
|
|
// if (clear == 1) { |
|
|
|
// special_compare_data = []; |
|
|
|
// clear = 0; |
|
|
|
// } |
|
|
|
// |
|
|
|
// return; |
|
|
|
// } |
|
|
|
|
|
|
|
|
|
|
|
let chart_data = []; |
|
|
|
let expire = 0; |
|
|
|
$.get('/getSpecialCompare?compare_type=' + compare_type).done(function (rawData) { |
|
|
|
//追加数据 |
|
|
|
device_list.forEach(function (item, key) { |
|
|
|
let name = item.name; |
|
|
|
let device_data = rawData[name]; |
|
|
|
if (device_data) { |
|
|
|
device_list[key].online = 1 |
|
|
|
if (special_compare_data[name]) { |
|
|
|
device_data.forEach(value => special_compare_data[name].push(value)); |
|
|
|
} else { |
|
|
|
device_data.forEach(function (value) { |
|
|
|
special_compare_data[name] = [value] |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
if (special_compare_data[name].length > 5) { |
|
|
|
if (special_compare_data[name][0][0] > expire) { |
|
|
|
expire = special_compare_data[name][0][0]; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} else { |
|
|
|
device_list[key].online = 0 |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
//删除过期时间，构建图表数据 |
|
|
|
for (key in special_compare_data) { |
|
|
|
if (special_compare_data[key] |
|
|
|
&& special_compare_data[key].length > 0 |
|
|
|
&& special_compare_data[key][0][0] <= expire) { |
|
|
|
special_compare_data[key].shift() |
|
|
|
} |
|
|
|
|
|
|
|
chart_data.push({ |
|
|
|
name: key, |
|
|
|
data: special_compare_data[key], |
|
|
|
type: 'line', |
|
|
|
smooth: true, |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
myChart.setOption({ |
|
|
|
series: chart_data |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
}, 1000 * 2); |
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
const app = Vue.createApp(AppInfo); |
|
|
|
app.use(ElementPlus); |
|
|
|
app.mount("#app"); |
|
|
|
|
|
|
|
</script> |
|
|
|
</body> |
|
|
|
|
