|
|
|
<!DOCTYPE html>
|
|
|
|
<html lang="zh-CN" style="height: 100%">
|
|
|
|
<head>
|
|
|
|
<meta charset="utf-8">
|
|
|
|
<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>
|
|
|
|
</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>
|
|
|
|
</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 = {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
device_list: [],
|
|
|
|
aaaa:0,
|
|
|
|
}
|
|
|
|
},
|
|
|
|
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)
|
|
|
|
},
|
|
|
|
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);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|