|
|
@ -1,311 +1,552 @@ |
|
|
var dom1 = document.getElementById('container1'); |
|
|
var device_list = []; |
|
|
var dom2 = document.getElementById('container2'); |
|
|
|
|
|
lineGraph(dom1, '温度', '℃') |
|
|
const app = { |
|
|
// lineGraph(dom2, '温度', '℃')
|
|
|
data() { |
|
|
// lineGraph2(dom2, '血氧', '%')
|
|
|
return { |
|
|
|
|
|
device_list: [], |
|
|
|
|
|
show_category1:false, |
|
|
|
|
|
show_category2:true, |
|
|
|
|
|
menu_selected:1, |
|
|
|
|
|
compare:{ |
|
|
|
|
|
compare1:true, |
|
|
|
|
|
compare2:false, |
|
|
|
|
|
compare3:false, |
|
|
|
|
|
compare4:false, |
|
|
|
|
|
compare5:false, |
|
|
|
|
|
}, |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
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); |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
function lineGraph(dom, title, unit){ |
|
|
// 每隔5分钟定时刷新
|
|
|
var myChart = echarts.init(dom, null, { |
|
|
this.timer = setInterval(() => { |
|
|
renderer: 'canvas', |
|
|
this.getFxItemlist(); |
|
|
useDirtyRect: false |
|
|
}, 1000 * 3) |
|
|
}); |
|
|
}, |
|
|
var app = {}; |
|
|
beforeDestroy() { |
|
|
var ROOT_PATH = ''; |
|
|
clearInterval(this.timer); |
|
|
var option; |
|
|
}, |
|
|
var dataAll = []; |
|
|
methods: { |
|
|
|
|
|
toggleCompare(click_compare) { |
|
|
$.get( |
|
|
if (click_compare == 1){ |
|
|
ROOT_PATH + '/loraData', |
|
|
this.show_category = true |
|
|
function (_rawData) { |
|
|
} else { |
|
|
_rawData.forEach(value => dataAll.push(value)); |
|
|
this.show_category = false |
|
|
run(_rawData); |
|
|
|
|
|
} |
|
|
|
|
|
); |
|
|
|
|
|
function run(_rawData) { |
|
|
|
|
|
_rawData.unshift(["Income","Life Expectancy","Population","Country","Year"]) |
|
|
|
|
|
// var countries = ['Australia', 'Canada', 'China', 'Cuba', 'Finland', 'France', 'Germany', 'Iceland', 'India', 'Japan', 'North Korea', 'South Korea', 'New Zealand', 'Norway', 'Poland', 'Russia', 'Turkey', 'United Kingdom', 'United States'];
|
|
|
|
|
|
const countries = [title]; |
|
|
|
|
|
const datasetWithFilters = []; |
|
|
|
|
|
const seriesList = []; |
|
|
|
|
|
echarts.util.each(countries, function (country) { |
|
|
|
|
|
var datasetId = 'dataset_' + country; |
|
|
|
|
|
datasetWithFilters.push({ |
|
|
|
|
|
id: datasetId, |
|
|
|
|
|
fromDatasetId: 'dataset_raw', |
|
|
|
|
|
transform: { |
|
|
|
|
|
type: 'filter', |
|
|
|
|
|
config: { |
|
|
|
|
|
and: [ |
|
|
|
|
|
// { dimension: 'Year', gte: 1950 },
|
|
|
|
|
|
{ dimension: 'Country', '=': country } |
|
|
|
|
|
] |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
}); |
|
|
this.menu_selected = click_compare; |
|
|
seriesList.push({ |
|
|
|
|
|
type: 'line', |
|
|
for(key in this.compare){ |
|
|
datasetId: datasetId, |
|
|
this.compare[key] = false |
|
|
showSymbol: false, |
|
|
this.compare['compare' + click_compare] = true |
|
|
smooth: true, |
|
|
|
|
|
name: country, |
|
|
|
|
|
endLabel: { |
|
|
|
|
|
show: true, |
|
|
|
|
|
formatter: function (params) { |
|
|
|
|
|
return params.value[3] + ': ' + params.value[0] + unit; |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
labelLayout: { |
|
|
|
|
|
moveOverlap: 'shiftY' |
|
|
|
|
|
}, |
|
|
|
|
|
emphasis: { |
|
|
|
|
|
focus: 'series' |
|
|
|
|
|
}, |
|
|
|
|
|
encode: { |
|
|
|
|
|
x: 'Year', |
|
|
|
|
|
y: 'Income', |
|
|
|
|
|
label: ['Country', 'Income'], |
|
|
|
|
|
itemName: 'Year', |
|
|
|
|
|
tooltip: ['Income'] |
|
|
|
|
|
} |
|
|
} |
|
|
}); |
|
|
}, |
|
|
|
|
|
toggleDevice(device_mac){ |
|
|
|
|
|
console.log(device_mac) |
|
|
|
|
|
}, |
|
|
|
|
|
//定时刷新设备在线状态
|
|
|
|
|
|
getFxItemlist() { |
|
|
|
|
|
this.device_list = device_list |
|
|
|
|
|
this.$forceUpdate(); |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
computed: { |
|
|
|
|
|
menuSelected(menu_selected_num) { |
|
|
|
|
|
return { |
|
|
|
|
|
'menu-button-selected': true, |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
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 |
|
|
|
|
|
*/ |
|
|
|
|
|
function buildCompare(dom) { |
|
|
|
|
|
var myChart = echarts.init(dom, 'dark', { |
|
|
|
|
|
renderer: 'canvas', |
|
|
|
|
|
useDirtyRect: false |
|
|
}); |
|
|
}); |
|
|
option = { |
|
|
|
|
|
animationDuration: 10000, |
|
|
var option = { |
|
|
dataset: [ |
|
|
color: ['#2ec7c9', '#5ab1ef', '#f5994e', '#c05050', '#c14089', '#9a7fd1'], |
|
|
{ |
|
|
backgroundColor:'', |
|
|
id: 'dataset_raw', |
|
|
grid: { |
|
|
source: _rawData |
|
|
left: '25%' |
|
|
}, |
|
|
}, |
|
|
...datasetWithFilters |
|
|
|
|
|
], |
|
|
|
|
|
tooltip: { |
|
|
tooltip: { |
|
|
order: 'valueDesc', |
|
|
|
|
|
trigger: 'axis' |
|
|
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: { |
|
|
xAxis: { |
|
|
type: 'category', |
|
|
type: 'time', |
|
|
nameLocation: 'middle' |
|
|
name: '时间（/s）', |
|
|
|
|
|
axisLabel: { |
|
|
|
|
|
fontSize: 16, |
|
|
|
|
|
formatter: function (value) { |
|
|
|
|
|
return echarts.format.formatTime('mm:ss', new Date(value)); |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
nameTextStyle: { |
|
|
|
|
|
fontSize: 16 |
|
|
|
|
|
} |
|
|
}, |
|
|
}, |
|
|
yAxis: [ |
|
|
yAxis: [ |
|
|
{ |
|
|
{ |
|
|
scale: false, |
|
|
name: '血氧', |
|
|
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, |
|
|
min: 30, |
|
|
max: 40, |
|
|
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', |
|
|
type: 'value', |
|
|
name: '血氧', |
|
|
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, |
|
|
min: 0, |
|
|
max: 100, |
|
|
max: 100, |
|
|
position: 'left', |
|
|
position: 'left', |
|
|
offset: 30, |
|
|
offset: 150, |
|
|
|
|
|
nameTextStyle: { |
|
|
|
|
|
align: 'right', |
|
|
|
|
|
color: '#c05050', |
|
|
|
|
|
fontSize: 16 |
|
|
|
|
|
}, |
|
|
|
|
|
axisLine: { |
|
|
|
|
|
show: true, |
|
|
|
|
|
lineStyle: { |
|
|
|
|
|
color: '#c05050' |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
axisLabel: { |
|
|
axisLabel: { |
|
|
formatter: '{value} °C' |
|
|
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 |
|
|
|
|
|
}, |
|
|
} |
|
|
} |
|
|
], |
|
|
], |
|
|
grid: { |
|
|
series: [ |
|
|
right: 140 |
|
|
{ |
|
|
}, |
|
|
name: '血氧', |
|
|
series: seriesList |
|
|
type: 'scatter', |
|
|
}; |
|
|
symbolSize: 10, |
|
|
myChart.setOption(option); |
|
|
yAxisIndex: 0, |
|
|
} |
|
|
tooltip: { |
|
|
|
|
|
valueFormatter: (value) => value.toFixed(2) + ' %' |
|
|
setInterval(function () { |
|
|
} |
|
|
$.get( |
|
|
}, |
|
|
ROOT_PATH + '/loraData?item=' + title, |
|
|
{ |
|
|
function (_rawData2) { |
|
|
name: '温度', |
|
|
|
|
|
type: 'scatter', |
|
|
if (dataAll.length > 40){ |
|
|
symbolSize: 10, |
|
|
dataAll.shift(); |
|
|
yAxisIndex: 1, |
|
|
dataAll.shift(); |
|
|
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) + ' %' |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
], |
|
|
|
|
|
|
|
|
_rawData2.forEach(value => dataAll.push(value)); |
|
|
}; |
|
|
|
|
|
|
|
|
_rawData = [["Income","Life Expectancy","Population","Country","Year"]]; |
|
|
|
|
|
dataAll.forEach(value => _rawData.push(value)); |
|
|
|
|
|
|
|
|
|
|
|
myChart.setOption({ |
|
|
if (option && typeof option === 'object') { |
|
|
dataset: [ |
|
|
myChart.setOption(option); |
|
|
{ |
|
|
} |
|
|
source: _rawData |
|
|
|
|
|
} |
|
|
|
|
|
], |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
let original = ''; |
|
|
window.addEventListener('resize', myChart.resize); |
|
|
dataAll.forEach((elem, index) => { |
|
|
|
|
|
original += elem[3] + elem[0]; |
|
|
|
|
|
if (elem[3] == "血氧") { |
|
|
|
|
|
original += '%' |
|
|
|
|
|
} else { |
|
|
|
|
|
original += '℃' |
|
|
|
|
|
} |
|
|
|
|
|
original += ' ' |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
$(".sound-code-chunk-default-content").html(original); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setInterval(function () { |
|
|
|
|
|
if (show_type != 1) { |
|
|
|
|
|
if (clear == 1) { |
|
|
|
|
|
data_blood = [] |
|
|
|
|
|
data_temperature = []; |
|
|
|
|
|
data_heart = []; |
|
|
|
|
|
data_humidity = []; |
|
|
|
|
|
data_total = []; |
|
|
|
|
|
clear = 0; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return; |
|
|
} |
|
|
} |
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}, 1000); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$.get('/loraData2?mac=' + mac).done(function (rawData) { |
|
|
|
|
|
if (!rawData || rawData.length == 0){ |
|
|
|
|
|
return; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
if (option && typeof option === 'object') { |
|
|
let limit = 5 |
|
|
myChart.setOption(option); |
|
|
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));
|
|
|
|
|
|
|
|
|
window.addEventListener('resize', myChart.resize); |
|
|
myChart.setOption({ |
|
|
|
|
|
series: [ |
|
|
|
|
|
{ |
|
|
|
|
|
name: '血氧', |
|
|
|
|
|
data: data_blood |
|
|
|
|
|
}, { |
|
|
|
|
|
name: '温度', |
|
|
|
|
|
data: data_temperature |
|
|
|
|
|
}, { |
|
|
|
|
|
name: '心率', |
|
|
|
|
|
data: data_heart |
|
|
|
|
|
}, { |
|
|
|
|
|
name: '湿度', |
|
|
|
|
|
data: data_humidity |
|
|
|
|
|
}, |
|
|
|
|
|
// {
|
|
|
|
|
|
// name: '总体',
|
|
|
|
|
|
// data: data_total
|
|
|
|
|
|
// }
|
|
|
|
|
|
] |
|
|
|
|
|
}); |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
}, 2000); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function lineGraph2(dom, title, unit){ |
|
|
/** |
|
|
|
|
|
* 雷达图 |
|
|
|
|
|
* @param dom |
|
|
|
|
|
*/ |
|
|
|
|
|
function buildRadar(dom) { |
|
|
var myChart = echarts.init(dom, null, { |
|
|
var myChart = echarts.init(dom, null, { |
|
|
renderer: 'canvas', |
|
|
renderer: 'canvas', |
|
|
useDirtyRect: false |
|
|
useDirtyRect: false, |
|
|
}); |
|
|
}); |
|
|
var app = {}; |
|
|
// window.onresize = function() {
|
|
|
var ROOT_PATH = ''; |
|
|
// myChart.resize();
|
|
|
var option; |
|
|
// };
|
|
|
var dataAll = []; |
|
|
|
|
|
|
|
|
var option = { |
|
|
$.get( |
|
|
color: ['#2ec7c9', '#5ab1ef', '#f5994e', '#c05050', '#c14089', '#9a7fd1'], |
|
|
ROOT_PATH + '/loraData', |
|
|
backgroundColor:'', |
|
|
function (_rawData) { |
|
|
|
|
|
_rawData.forEach(value => dataAll.push(value)); |
|
|
radar: { |
|
|
run(_rawData); |
|
|
// shape: 'circle',
|
|
|
} |
|
|
indicator: [ |
|
|
); |
|
|
{name: '血氧', max: 100}, |
|
|
function run(_rawData) { |
|
|
{name: '温度', max: 45}, |
|
|
_rawData.unshift(["Income","Life Expectancy","Population","Country","Year"]) |
|
|
{name: '心率', max: 150}, |
|
|
// var countries = ['Australia', 'Canada', 'China', 'Cuba', 'Finland', 'France', 'Germany', 'Iceland', 'India', 'Japan', 'North Korea', 'South Korea', 'New Zealand', 'Norway', 'Poland', 'Russia', 'Turkey', 'United Kingdom', 'United States'];
|
|
|
{name: '湿度', max: 100}, |
|
|
const countries = [title]; |
|
|
|
|
|
const datasetWithFilters = []; |
|
|
|
|
|
const seriesList = []; |
|
|
|
|
|
echarts.util.each(countries, function (country) { |
|
|
|
|
|
var datasetId = 'dataset_' + country; |
|
|
|
|
|
datasetWithFilters.push({ |
|
|
|
|
|
id: datasetId, |
|
|
|
|
|
fromDatasetId: 'dataset_raw', |
|
|
|
|
|
transform: { |
|
|
|
|
|
type: 'filter', |
|
|
|
|
|
config: { |
|
|
|
|
|
and: [ |
|
|
|
|
|
// { dimension: 'Year', gte: 1950 },
|
|
|
|
|
|
{ dimension: 'Country', '=': country } |
|
|
|
|
|
] |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
seriesList.push({ |
|
|
|
|
|
type: 'line', |
|
|
|
|
|
datasetId: datasetId, |
|
|
|
|
|
showSymbol: false, |
|
|
|
|
|
smooth: true, |
|
|
|
|
|
name: country, |
|
|
|
|
|
endLabel: { |
|
|
|
|
|
show: true, |
|
|
|
|
|
formatter: function (params) { |
|
|
|
|
|
return params.value[3] + ': ' + params.value[0] + unit; |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
labelLayout: { |
|
|
|
|
|
moveOverlap: 'shiftY' |
|
|
|
|
|
}, |
|
|
|
|
|
emphasis: { |
|
|
|
|
|
focus: 'series' |
|
|
|
|
|
}, |
|
|
|
|
|
encode: { |
|
|
|
|
|
x: 'Year', |
|
|
|
|
|
y: 'Income', |
|
|
|
|
|
label: ['Country', 'Income'], |
|
|
|
|
|
itemName: 'Year', |
|
|
|
|
|
tooltip: ['Income'] |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
}); |
|
|
|
|
|
option = { |
|
|
|
|
|
animationDuration: 10000, |
|
|
|
|
|
dataset: [ |
|
|
|
|
|
{ |
|
|
|
|
|
id: 'dataset_raw', |
|
|
|
|
|
source: _rawData |
|
|
|
|
|
}, |
|
|
|
|
|
...datasetWithFilters |
|
|
|
|
|
], |
|
|
], |
|
|
tooltip: { |
|
|
axisName: { |
|
|
order: 'valueDesc', |
|
|
fontSize: 18, |
|
|
trigger: 'axis' |
|
|
color: '#2ec7c9', |
|
|
}, |
|
|
}, |
|
|
xAxis: { |
|
|
}, |
|
|
type: 'category', |
|
|
series: [ |
|
|
nameLocation: 'middle' |
|
|
{ |
|
|
}, |
|
|
type: 'radar', |
|
|
yAxis: { |
|
|
} |
|
|
scale: false, |
|
|
] |
|
|
name: 'Income' |
|
|
}; |
|
|
}, |
|
|
|
|
|
grid: { |
|
|
if (option && typeof option === 'object') { |
|
|
right: 140 |
|
|
|
|
|
}, |
|
|
|
|
|
color:[ |
|
|
|
|
|
'rgba(231,82,27,0.94)' |
|
|
|
|
|
], |
|
|
|
|
|
series: seriesList |
|
|
|
|
|
}; |
|
|
|
|
|
myChart.setOption(option); |
|
|
myChart.setOption(option); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
setInterval(function () { |
|
|
window.addEventListener('resize', myChart.resize); |
|
|
$.get( |
|
|
|
|
|
ROOT_PATH + '/loraData?item=' + title, |
|
|
|
|
|
function (_rawData2) { |
|
|
|
|
|
|
|
|
|
|
|
if (dataAll.length > 40){ |
|
|
setInterval(buildData, 1000 * 5); |
|
|
dataAll.shift(); |
|
|
|
|
|
dataAll.shift(); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
_rawData2.forEach(value => dataAll.push(value)); |
|
|
function buildData() { |
|
|
|
|
|
if (show_type != 1 || data_blood.length == 0) { |
|
|
|
|
|
return; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
_rawData = [["Income","Life Expectancy","Population","Country","Year"]]; |
|
|
let blood = data_blood.slice(-1)[0][1]; |
|
|
dataAll.forEach(value => _rawData.push(value)); |
|
|
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({ |
|
|
myChart.setOption({ |
|
|
dataset: [ |
|
|
series: [ |
|
|
|
|
|
{ |
|
|
|
|
|
data: [ |
|
|
{ |
|
|
{ |
|
|
source: _rawData |
|
|
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; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
], |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
let original = ''; |
|
|
|
|
|
dataAll.forEach((elem, index) => { |
|
|
|
|
|
original += elem[3] + elem[0]; |
|
|
|
|
|
if (elem[3] == "血氧") { |
|
|
|
|
|
original += '%' |
|
|
|
|
|
} else { |
|
|
|
|
|
original += '℃' |
|
|
|
|
|
} |
|
|
|
|
|
original += ' ' |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
$(".sound-code-chunk-default-content").html(original); |
|
|
] |
|
|
|
|
|
} |
|
|
|
|
|
] |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
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 |
|
|
|
|
|
}, |
|
|
|
|
|
} |
|
|
|
|
|
], |
|
|
|
|
|
|
|
|
}, 1000); |
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (option && typeof option === 'object') { |
|
|
if (option && typeof option === 'object') { |
|
|
@ -314,5 +555,66 @@ function lineGraph2(dom, title, unit){ |
|
|
|
|
|
|
|
|
window.addEventListener('resize', myChart.resize); |
|
|
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); |
|
|
|
|
|
} |
|
|
|
