You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
732 lines
21 KiB
732 lines
21 KiB
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_category : show_category,
|
|
mac_id : mac_id,
|
|
original2 : original2,
|
|
}
|
|
},
|
|
mounted() {
|
|
var _this = this;
|
|
axios
|
|
.get('/loraDeviceList')
|
|
.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);
|
|
});
|
|
|
|
// 每隔5分钟定时刷新
|
|
this.timer = setInterval(() => {
|
|
this.getFxItemlist();
|
|
}, 1000 * 3)
|
|
},
|
|
beforeDestroy() {
|
|
clearInterval(this.timer);
|
|
},
|
|
methods: {
|
|
toggleCompare(click_compare) {
|
|
this.show_category = click_compare;
|
|
show_category = click_compare;
|
|
clear1 = 1;
|
|
clear2 = 1;
|
|
},
|
|
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.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 dom1 = document.getElementById('container1');
|
|
var dom2 = document.getElementById('container2');
|
|
var dom4 = document.getElementById('container4');
|
|
|
|
|
|
buildCompare(dom1);
|
|
buildRadar(dom2);
|
|
buildDevice(dom4);
|
|
|
|
/**
|
|
* 各项对比
|
|
* @param dom
|
|
*/
|
|
function buildCompare(dom) {
|
|
var myChart = echarts.init(dom, 'dark', {
|
|
renderer: 'canvas',
|
|
useDirtyRect: false
|
|
});
|
|
|
|
var option = {
|
|
color: ['#2ec7c9', '#5ab1ef', '#f5994e', '#c05050', '#c14089', '#9a7fd1'],
|
|
backgroundColor:'',
|
|
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: 20,
|
|
yAxisIndex: 0,
|
|
tooltip: {
|
|
valueFormatter: (value) => value.toFixed(2) + ' %'
|
|
}
|
|
},
|
|
{
|
|
name: '温度',
|
|
type: 'scatter',
|
|
symbolSize: 20,
|
|
yAxisIndex: 1,
|
|
tooltip: {
|
|
valueFormatter: (value) => value.toFixed(2) + ' ℃'
|
|
}
|
|
},
|
|
{
|
|
name: '心率',
|
|
type: 'scatter',
|
|
symbolSize: 20,
|
|
yAxisIndex: 2,
|
|
tooltip: {
|
|
valueFormatter: (value) => value.toFixed(2) + ' 次'
|
|
}
|
|
},
|
|
{
|
|
name: '湿度',
|
|
type: 'scatter',
|
|
symbolSize: 20,
|
|
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 (clear1 == 1) {
|
|
data_blood = []
|
|
data_temperature = [];
|
|
data_heart = [];
|
|
data_humidity = [];
|
|
data_total = [];
|
|
clear1 = 0;
|
|
setData(data_blood, data_temperature, data_heart, data_humidity);
|
|
}
|
|
if (show_category != 1) {
|
|
return;
|
|
}
|
|
|
|
$.get('/loraData2?node=' + mac_id).done(function (rawData) {
|
|
if (!rawData || rawData.length == 0){
|
|
return;
|
|
}
|
|
|
|
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));
|
|
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: [
|
|
{
|
|
name: '血氧',
|
|
data: data_blood
|
|
}, {
|
|
name: '温度',
|
|
data: data_temperature
|
|
}, {
|
|
name: '心率',
|
|
data: data_heart
|
|
}, {
|
|
name: '湿度',
|
|
data: data_humidity
|
|
},
|
|
// {
|
|
// name: '总体',
|
|
// data: data_total
|
|
// }
|
|
]
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 雷达图
|
|
* @param dom
|
|
*/
|
|
function buildRadar(dom) {
|
|
var myChart = echarts.init(dom, null, {
|
|
renderer: 'canvas',
|
|
useDirtyRect: false,
|
|
});
|
|
// window.onresize = function() {
|
|
// myChart.resize();
|
|
// };
|
|
|
|
var option = {
|
|
color: ['#2ec7c9', '#5ab1ef', '#f5994e', '#c05050', '#c14089', '#9a7fd1'],
|
|
backgroundColor:'',
|
|
|
|
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_category != 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;
|
|
}
|
|
}
|
|
}
|
|
|
|
]
|
|
}
|
|
]
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 专项对比
|
|
* @param dom
|
|
*/
|
|
function buildDevice(dom) {
|
|
var myChart = echarts.init(dom, 'dark', {
|
|
renderer: 'canvas',
|
|
useDirtyRect: false
|
|
});
|
|
|
|
var option = {
|
|
backgroundColor:'',
|
|
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 (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) {
|
|
//追加数据
|
|
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()
|
|
}
|
|
|
|
special_compare_data[key].forEach(function (item) {
|
|
original2 += item[1] + ' ';
|
|
})
|
|
|
|
chart_data.push({
|
|
name: key,
|
|
data: special_compare_data[key],
|
|
type: 'line',
|
|
smooth: true,
|
|
symbolSize:10,
|
|
})
|
|
}
|
|
|
|
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,
|
|
yAxis: yAxis,
|
|
});
|
|
});
|
|
|
|
}, 1000 * 2);
|
|
}
|
|
|