|
|
|
@ -1,19 +1,23 @@ |
|
|
|
var device_list = []; |
|
|
|
var show_category = 1; |
|
|
|
var mac_id = ''; |
|
|
|
var clear1 = 0; |
|
|
|
var clear2 = 0; |
|
|
|
var data_blood = []; |
|
|
|
var data_temperature = []; |
|
|
|
var data_heart = []; |
|
|
|
var data_humidity = []; |
|
|
|
var data_total = []; |
|
|
|
var original2 = ''; |
|
|
|
|
|
|
|
|
|
|
|
const app = { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
device_list: [], |
|
|
|
show_category1:false, |
|
|
|
show_category2:true, |
|
|
|
menu_selected:1, |
|
|
|
compare:{ |
|
|
|
compare1:true, |
|
|
|
compare2:false, |
|
|
|
compare3:false, |
|
|
|
compare4:false, |
|
|
|
compare5:false, |
|
|
|
}, |
|
|
|
device_list : [], |
|
|
|
show_category : show_category, |
|
|
|
mac_id : mac_id, |
|
|
|
original2 : original2, |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
@ -23,6 +27,8 @@ const app = { |
|
|
|
.then(function (response) { |
|
|
|
device_list = response.data |
|
|
|
_this.device_list = device_list; |
|
|
|
_this.mac_id = device_list[0].mac; |
|
|
|
mac_id = device_list[0].mac; |
|
|
|
}) |
|
|
|
.catch(function (error) { // 请求失败处理
|
|
|
|
console.log(error); |
|
|
|
@ -38,69 +44,47 @@ const app = { |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
toggleCompare(click_compare) { |
|
|
|
if (click_compare == 1){ |
|
|
|
this.show_category = true |
|
|
|
} else { |
|
|
|
this.show_category = false |
|
|
|
} |
|
|
|
this.menu_selected = click_compare; |
|
|
|
|
|
|
|
for(key in this.compare){ |
|
|
|
this.compare[key] = false |
|
|
|
this.compare['compare' + click_compare] = true |
|
|
|
} |
|
|
|
this.show_category = click_compare; |
|
|
|
show_category = click_compare; |
|
|
|
clear1 = 1; |
|
|
|
clear2 = 1; |
|
|
|
}, |
|
|
|
toggleDevice(device_mac){ |
|
|
|
console.log(device_mac) |
|
|
|
toggleDevice(mac){ |
|
|
|
this.show_category = 1; |
|
|
|
show_category = 1; |
|
|
|
clear1 = 1; |
|
|
|
clear2 = 1; |
|
|
|
this.mac_id = mac; |
|
|
|
mac_id = mac; |
|
|
|
|
|
|
|
}, |
|
|
|
//定时刷新设备在线状态
|
|
|
|
getFxItemlist() { |
|
|
|
this.device_list = device_list |
|
|
|
this.$forceUpdate(); |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
menuSelected(menu_selected_num) { |
|
|
|
return { |
|
|
|
'menu-button-selected': true, |
|
|
|
} |
|
|
|
this.device_list = device_list; |
|
|
|
this.data_blood = data_blood; |
|
|
|
this.data_temperature = data_temperature; |
|
|
|
this.data_heart = data_heart; |
|
|
|
this.data_humidity = data_humidity; |
|
|
|
this.data_total = data_total; |
|
|
|
this.original2 = original2; |
|
|
|
|
|
|
|
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 dom4 = document.getElementById('container4'); |
|
|
|
|
|
|
|
var data_blood = []; |
|
|
|
var data_temperature = []; |
|
|
|
var data_heart = []; |
|
|
|
var data_humidity = []; |
|
|
|
var data_total = []; |
|
|
|
|
|
|
|
buildCompare(dom1); |
|
|
|
buildRadar(dom2); |
|
|
|
buildDevice(dom4); |
|
|
|
|
|
|
|
function hideDiv() { |
|
|
|
$("#container1").toggle(); |
|
|
|
$("#container2").toggle(); |
|
|
|
$("#container3").toggle(); |
|
|
|
|
|
|
|
clear = 1 |
|
|
|
show_type = (show_type == 1) ? 2 : 1; |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* 各项对比 |
|
|
|
* @param dom |
|
|
|
@ -348,20 +332,20 @@ function buildCompare(dom) { |
|
|
|
|
|
|
|
|
|
|
|
setInterval(function () { |
|
|
|
if (show_type != 1) { |
|
|
|
if (clear == 1) { |
|
|
|
if (clear1 == 1) { |
|
|
|
data_blood = [] |
|
|
|
data_temperature = []; |
|
|
|
data_heart = []; |
|
|
|
data_humidity = []; |
|
|
|
data_total = []; |
|
|
|
clear = 0; |
|
|
|
clear1 = 0; |
|
|
|
setData(data_blood, data_temperature, data_heart, data_humidity); |
|
|
|
} |
|
|
|
|
|
|
|
if (show_category != 1) { |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
$.get('/loraData2?mac=' + mac).done(function (rawData) { |
|
|
|
$.get('/loraData2?node=' + mac_id).done(function (rawData) { |
|
|
|
if (!rawData || rawData.length == 0){ |
|
|
|
return; |
|
|
|
} |
|
|
|
@ -385,9 +369,18 @@ function buildCompare(dom) { |
|
|
|
rawData.blood.forEach(value => data_blood.push(value)); |
|
|
|
rawData.temperature.forEach(value => data_temperature.push(value)); |
|
|
|
rawData.heart.forEach(value => data_heart.push(value)); |
|
|
|
if (rawData.humidity && rawData.humidity.length > 0){ |
|
|
|
rawData.humidity.forEach(value => data_humidity.push(value)); |
|
|
|
} |
|
|
|
|
|
|
|
// rawData.total_data.forEach(value => data_total.push(value));
|
|
|
|
setData(data_blood, data_temperature, data_heart, data_humidity); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
}, 2000); |
|
|
|
|
|
|
|
function setData(data_blood, data_temperature, data_heart, data_humidity){ |
|
|
|
myChart.setOption({ |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
@ -409,9 +402,7 @@ function buildCompare(dom) { |
|
|
|
// }
|
|
|
|
] |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
}, 2000); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ -460,7 +451,7 @@ function buildRadar(dom) { |
|
|
|
setInterval(buildData, 1000 * 5); |
|
|
|
|
|
|
|
function buildData() { |
|
|
|
if (show_type != 1 || data_blood.length == 0) { |
|
|
|
if (show_category != 1 || data_blood.length == 0) { |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
@ -497,6 +488,10 @@ function buildRadar(dom) { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* 专项对比 |
|
|
|
* @param dom |
|
|
|
*/ |
|
|
|
function buildDevice(dom) { |
|
|
|
var myChart = echarts.init(dom, 'dark', { |
|
|
|
renderer: 'canvas', |
|
|
|
@ -555,19 +550,20 @@ function buildDevice(dom) { |
|
|
|
|
|
|
|
window.addEventListener('resize', myChart.resize); |
|
|
|
|
|
|
|
|
|
|
|
let special_compare_data = []; |
|
|
|
setInterval(function () { |
|
|
|
// if (show_type != 2) {
|
|
|
|
// if (clear == 1) {
|
|
|
|
// special_compare_data = [];
|
|
|
|
// clear = 0;
|
|
|
|
// }
|
|
|
|
//
|
|
|
|
if (clear2 == 1) { |
|
|
|
special_compare_data = []; |
|
|
|
clear2 = 0; |
|
|
|
} |
|
|
|
// if (show_category == 1) {
|
|
|
|
// return;
|
|
|
|
// }
|
|
|
|
|
|
|
|
let compare_type = show_category - 1; |
|
|
|
|
|
|
|
let chart_data = []; |
|
|
|
original2 = ''; |
|
|
|
let expire = 0; |
|
|
|
$.get('/getSpecialCompare?compare_type=' + compare_type).done(function (rawData) { |
|
|
|
//追加数据
|
|
|
|
@ -603,6 +599,10 @@ function buildDevice(dom) { |
|
|
|
special_compare_data[key].shift() |
|
|
|
} |
|
|
|
|
|
|
|
special_compare_data[key].forEach(function (item) { |
|
|
|
original2 += item[1] + ' '; |
|
|
|
}) |
|
|
|
|
|
|
|
chart_data.push({ |
|
|
|
name: key, |
|
|
|
data: special_compare_data[key], |
|
|
|
@ -611,8 +611,119 @@ function buildDevice(dom) { |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
let yAxis = []; |
|
|
|
|
|
|
|
switch (compare_type) { |
|
|
|
case 1: |
|
|
|
yAxis = [ |
|
|
|
{ |
|
|
|
name: '血氧', |
|
|
|
min: 0, |
|
|
|
max: 100, |
|
|
|
nameTextStyle: { |
|
|
|
align: 'right', |
|
|
|
color: '#2ec7c9', |
|
|
|
fontSize: 16 |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: '#2ec7c9' |
|
|
|
} |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
formatter: '{value}%', |
|
|
|
color: '#2ec7c9', |
|
|
|
fontSize: 16 |
|
|
|
}, |
|
|
|
}, |
|
|
|
]; |
|
|
|
break; |
|
|
|
case 2: |
|
|
|
yAxis = [ |
|
|
|
{ |
|
|
|
type: 'value', |
|
|
|
name: '温度', |
|
|
|
min: 30, |
|
|
|
max: 45, |
|
|
|
nameTextStyle: { |
|
|
|
align: 'right', |
|
|
|
color: '#5ab1ef', |
|
|
|
fontSize: 16 |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: '#5ab1ef' |
|
|
|
} |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
formatter: '{value}°C', |
|
|
|
color: '#5ab1ef', |
|
|
|
fontSize: 16 |
|
|
|
}, |
|
|
|
} |
|
|
|
]; |
|
|
|
break; |
|
|
|
case 3: |
|
|
|
yAxis = [ |
|
|
|
{ |
|
|
|
type: 'value', |
|
|
|
name: '心率', |
|
|
|
min: 0, |
|
|
|
max: 150, |
|
|
|
nameTextStyle: { |
|
|
|
align: 'right', |
|
|
|
color: '#f5994e', |
|
|
|
fontSize: 16 |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: '#f5994e' |
|
|
|
} |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
formatter: '{value}次', |
|
|
|
color: '#f5994e', |
|
|
|
fontSize: 16 |
|
|
|
}, |
|
|
|
} |
|
|
|
]; |
|
|
|
break; |
|
|
|
case 4: |
|
|
|
yAxis = [ |
|
|
|
{ |
|
|
|
type: 'value', |
|
|
|
name: '湿度', |
|
|
|
min: 0, |
|
|
|
max: 100, |
|
|
|
nameTextStyle: { |
|
|
|
align: 'right', |
|
|
|
color: '#c05050', |
|
|
|
fontSize: 16 |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: '#c05050' |
|
|
|
} |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
formatter: '{value}%', |
|
|
|
color: '#c05050', |
|
|
|
fontSize: 16 |
|
|
|
}, |
|
|
|
} |
|
|
|
]; |
|
|
|
break; |
|
|
|
default: |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
myChart.setOption({ |
|
|
|
series: chart_data |
|
|
|
series: chart_data, |
|
|
|
yAxis: yAxis, |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
