ccsens_wiki
/
pelma_analyse_service
5
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

渲染对比图

master
lijunjie 3 years ago
parent
acd053a9f1
commit
1979db556b
5 changed files with 763 additions and 289 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      app/Http/Controllers/IndexController.php
  2. 4
      config/custom.php
  3. 766
      public/script/http/lora2.js
  4. 124
      public/style/http/lora2.css
  5. 90
      resources/views/http/lora2.blade.php

12
app/Http/Controllers/IndexController.php
View File

@ -454,12 +454,12 @@ class IndexController extends BaseController
70, 70,
] ]
], ],
'设备2' => [ // '设备2' => [
[ // [
$time, // $time,
80, // 80,
] // ]
], // ],
'设备3' => [ '设备3' => [
[ [
$time, $time,

4
config/custom.php
View File

@ -2,8 +2,8 @@
return [ return [
'lora_mac' => [ 'lora_mac' => [
// "616162626364", "616162626364",
// "616162626365", "616162626365",
"616162626366", "616162626366",
], ],
]; ];

766
public/script/http/lora2.js
View File

@ -1,318 +1,620 @@
var device_list = [];
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,
},
}
},
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: {
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
}
},
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 dom1 = document.getElementById('container1');
var dom2 = document.getElementById('container2'); var dom2 = document.getElementById('container2');
lineGraph(dom1, '温度', '℃') var dom4 = document.getElementById('container4');
// lineGraph(dom2, '温度', '℃')
// lineGraph2(dom2, '血氧', '%')
function lineGraph(dom, title, unit){ var data_blood = [];
var myChart = echarts.init(dom, null, { 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', renderer: 'canvas',
useDirtyRect: false useDirtyRect: false
});
var app = {};
var ROOT_PATH = '';
var option;
var dataAll = [];
$.get(
ROOT_PATH + '/loraData',
function (_rawData) {
_rawData.forEach(value => dataAll.push(value));
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 }
]
}
}
}); });
seriesList.push({
type: 'line', var option = {
datasetId: datasetId, color: ['#2ec7c9', '#5ab1ef', '#f5994e', '#c05050', '#c14089', '#9a7fd1'],
showSymbol: false, backgroundColor:'',
smooth: true, grid: {
name: country, left: '25%'
endLabel: {
show: true,
formatter: function (params) {
return params.value[3] + ': ' + params.value[0] + unit;
}
}, },
labelLayout: { tooltip: {
moveOverlap: 'shiftY' trigger: 'axis'
}, },
emphasis: { legend: {
focus: 'series' data: [
{
name: '血氧',
textStyle: {
color: 'auto'
}
}, },
encode: { {
x: 'Year', name: '温度',
y: 'Income', textStyle: {
label: ['Country', 'Income'], color: 'auto'
itemName: 'Year',
tooltip: ['Income']
} }
}); },
});
option = {
animationDuration: 10000,
dataset: [
{ {
id: 'dataset_raw', name: '心率',
source: _rawData textStyle: {
color: 'auto'
}
},
{
name: '湿度',
textStyle: {
color: 'auto'
}
}, },
...datasetWithFilters {
name: '总体',
textStyle: {
color: 'auto'
}
}
], ],
tooltip: { textStyle: {
order: 'valueDesc', fontSize: 20
trigger: 'axis' }
}, },
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: '血氧',
type: 'scatter',
symbolSize: 10,
yAxisIndex: 0,
tooltip: {
valueFormatter: (value) => value.toFixed(2) + ' %'
}
}, },
series: seriesList {
}; name: '温度',
myChart.setOption(option); type: 'scatter',
} symbolSize: 10,
yAxisIndex: 1,
setInterval(function () { tooltip: {
$.get( valueFormatter: (value) => value.toFixed(2) + ' ℃'
ROOT_PATH + '/loraData?item=' + title,
function (_rawData2) {
if (dataAll.length > 40){
dataAll.shift();
dataAll.shift();
} }
},
_rawData2.forEach(value => dataAll.push(value));
_rawData = [["Income","Life Expectancy","Population","Country","Year"]];
dataAll.forEach(value => _rawData.push(value));
myChart.setOption({
dataset: [
{ {
source: _rawData name: '心率',
type: 'scatter',
symbolSize: 10,
yAxisIndex: 2,
tooltip: {
valueFormatter: (value) => value.toFixed(2) + ' 次'
} }
], },
}); {
name: '湿度',
let original = ''; type: 'scatter',
dataAll.forEach((elem, index) => { symbolSize: 10,
original += elem[3] + elem[0]; yAxisIndex: 3,
if (elem[3] == "血氧") { tooltip: {
original += '%' valueFormatter: (value) => value.toFixed(2) + ' %'
} else {
original += '℃'
} }
original += ' ' },
}) {
name: '总体',
type: 'line',
smooth: true,
tooltip: {
valueFormatter: (value) => value.toFixed(2) + ' %'
}
}
],
$(".sound-code-chunk-default-content").html(original); };
if (option && typeof option === 'object') {
myChart.setOption(option);
} }
);
window.addEventListener('resize', myChart.resize);
}, 1000); setInterval(function () {
if (show_type != 1) {
if (clear == 1) {
data_blood = []
data_temperature = [];
data_heart = [];
data_humidity = [];
data_total = [];
clear = 0;
}
return;
}
if (option && typeof option === 'object') { $.get('/loraData2?mac=' + mac).done(function (rawData) {
myChart.setOption(option); 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));
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 = []; axisName: {
const seriesList = []; fontSize: 18,
echarts.util.each(countries, function (country) { color: '#2ec7c9',
var datasetId = 'dataset_' + country; },
datasetWithFilters.push({ },
id: datasetId, series: [
fromDatasetId: 'dataset_raw', {
transform: { type: 'radar',
type: 'filter', }
config: {
and: [
// { dimension: 'Year', gte: 1950 },
{ dimension: 'Country', '=': country }
] ]
};
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;
} }
});
seriesList.push({ let blood = data_blood.slice(-1)[0][1];
type: 'line', let temperature = data_temperature.slice(-1)[0][1];
datasetId: datasetId, let heart = data_temperature.slice(-1)[0][1];
showSymbol: false, let humidity = data_humidity.slice(-1)[0][1];
smooth: true,
name: country, myChart.setOption({
endLabel: { series: [
{
data: [
{
value: [blood, temperature, heart, humidity],
areaStyle: {
color: 'rgba(255, 228, 52, 0.6)'
},
label: {
show: true, show: true,
textStyle: {
color: '#2ec7c9',
fontSize: 16,
},
formatter: function (params) { formatter: function (params) {
return params.value[3] + ': ' + params.value[0] + unit; return params.value;
} }
},
labelLayout: {
moveOverlap: 'shiftY'
},
emphasis: {
focus: 'series'
},
encode: {
x: 'Year',
y: 'Income',
label: ['Country', 'Income'],
itemName: 'Year',
tooltip: ['Income']
} }
}
]
}
]
}); });
}
}
function buildDevice(dom) {
var myChart = echarts.init(dom, 'dark', {
renderer: 'canvas',
useDirtyRect: false
}); });
option = {
animationDuration: 10000, var option = {
dataset: [ backgroundColor:'',
{
id: 'dataset_raw',
source: _rawData
},
...datasetWithFilters
],
tooltip: { tooltip: {
order: 'valueDesc',
trigger: 'axis' trigger: 'axis'
}, },
legend: {
data: ['设备1', '设备2', '设备3',],
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));
}
}, },
yAxis: { nameTextStyle: {
scale: false, fontSize: 16
name: 'Income' }
}, },
grid: { yAxis: [
right: 140 {
type: 'value',
min: 0,
max: 100,
nameTextStyle: {
align: 'right',
fontSize: 16
},
axisLine: {
show: true,
},
axisLabel: {
formatter: '{value}%',
fontSize: 16
}, },
color:[ }
'rgba(231,82,27,0.94)'
], ],
series: seriesList
}; };
myChart.setOption(option);
}
setInterval(function () {
$.get(
ROOT_PATH + '/loraData?item=' + title,
function (_rawData2) {
if (dataAll.length > 40){ if (option && typeof option === 'object') {
dataAll.shift(); myChart.setOption(option);
dataAll.shift();
} }
_rawData2.forEach(value => dataAll.push(value)); window.addEventListener('resize', myChart.resize);
_rawData = [["Income","Life Expectancy","Population","Country","Year"]]; let special_compare_data = [];
dataAll.forEach(value => _rawData.push(value)); 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]
});
}
myChart.setOption({ if (special_compare_data[name].length > 5) {
dataset: [ if (special_compare_data[name][0][0] > expire) {
{ expire = special_compare_data[name][0][0];
source: _rawData
} }
],
});
let original = ''; }
dataAll.forEach((elem, index) => {
original += elem[3] + elem[0];
if (elem[3] == "血氧") {
original += '%'
} else { } else {
original += '℃' device_list[key].online = 0
} }
original += ' '
}) })
$(".sound-code-chunk-default-content").html(original); //删除过期时间，构建图表数据
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()
} }
);
}, 1000); chart_data.push({
name: key,
data: special_compare_data[key],
if (option && typeof option === 'object') { type: 'line',
myChart.setOption(option); smooth: true,
})
} }
window.addEventListener('resize', myChart.resize); myChart.setOption({
series: chart_data
});
});
}, 1000 * 2);
} }

124
public/style/http/lora2.css
View File

@ -1,5 +1,11 @@
* {margin:0; padding:0;} * {margin:0; padding:0;}
html,body{height:100%;} html,body{height:100%;}
html{
background: #020723;
background-image:url("/image/lora2/background1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.box { .box {
background: #020723; background: #020723;
background-image:url("/image/lora2/background1.png"); background-image:url("/image/lora2/background1.png");
@ -51,11 +57,53 @@ html {
left: 0; left: 0;
right: 0; right: 0;
margin:auto; margin:auto;
width: 15.43rem;
height: 0.64rem; height: 0.64rem;
background-image:url("/image/lora2/top.png"); background-image:url("/image/lora2/top.png");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
display: -webkit-flex;
display: flex;
padding-left: 4rem;
}
.menu-button{
width: 1.2rem;
height: auto;
padding-left: 0.1rem;
padding-right: 0.1rem;
text-align: center;
line-height:0.64rem;
font-size: 0.18rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FFFFFF;
cursor:pointer;
}
.menu-button-selected{
background-image:url("/image/lora2/top_1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.menu-middle{
width: 5.6rem;
height: auto;
text-align: center;
line-height:0.64rem;
font-size: 0.25rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FFFFFF;
}
.version{
position:absolute;
right: 0.33rem;
top:0.38rem;
width: 0.56rem;
height: 0.14rem;
font-size: 0.18rem;
font-family: Source Han Sans CN;
font-weight: 300;
color: #FFFFFF;
} }
/*主体*/ /*主体*/
@ -76,6 +124,9 @@ html {
height: 100%; height: 100%;
margin-left: 0.34rem; margin-left: 0.34rem;
} }
.device-cell{
cursor:pointer;
}
.device-cell1{ .device-cell1{
width: 2.4rem; width: 2.4rem;
height: 0.64rem; height: 0.64rem;
@ -94,7 +145,7 @@ html {
background: linear-gradient(90deg, rgba(0,250,255,0.5), rgba(0,250,255,0.1)); background: linear-gradient(90deg, rgba(0,250,255,0.5), rgba(0,250,255,0.1));
border-radius: 0.32rem; border-radius: 0.32rem;
} }
.device-cell{ .device-border{
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #101010; background: #101010;
@ -332,15 +383,14 @@ html {
} }
#container2{ #container2{
position:absolute; position:absolute;
left: 0; right: 0; top: 0; bottom: 0; left: 0; right: 0; top:0.35rem;
padding-top: 0.33rem;
margin: auto; margin: auto;
/*width: 15.5rem;*/ width: 2.6rem;
/*height: 6rem;*/ height: 2.7rem;
z-index: 100; z-index: 100;
} }
/*雷达图*/ /*数据图*/
.original{ .original{
margin-left: 0.21rem; margin-left: 0.21rem;
width: 10.98rem; width: 10.98rem;
@ -349,6 +399,14 @@ html {
display: flex; display: flex;
position: relative; position: relative;
} }
.original2{
width: 15.9rem;
height: 3.01rem;
display: -webkit-flex;
display: flex;
position: relative;
}
.original-left{ .original-left{
width: 0.23rem; width: 0.23rem;
height: auto; height: auto;
@ -364,6 +422,15 @@ html {
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: repeat-x; background-repeat: repeat-x;
} }
.original2-left2{
width: 6.82rem;
height: auto;
background-image:url("/image/lora2/kk2_2.png");
background-size: 100% 100%;
background-repeat: repeat-x;
}
.original-middle{ .original-middle{
height: auto; height: auto;
display: -webkit-flex; display: -webkit-flex;
@ -415,6 +482,13 @@ html {
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: repeat-x; background-repeat: repeat-x;
} }
.original2-right2{
width: 6.82rem;
height: auto;
background-image:url("/image/lora2/kk2_2.png");
background-size: 100% 100%;
background-repeat: repeat-x;
}
.original-right{ .original-right{
width: 0.23rem; width: 0.23rem;
height: auto; height: auto;
@ -428,7 +502,39 @@ html {
left: 0; right: 0; top: 0; bottom: 0; left: 0; right: 0; top: 0; bottom: 0;
padding-top: 0.33rem; padding-top: 0.33rem;
margin: auto; margin: auto;
/*width: 15.5rem;*/ width: 10.52rem;
/*height: 6rem;*/ height: 2.4rem;
z-index: 100;
font-size: 0.18rem;
font-family: Source Han Sans CN;
font-weight: 300;
color: #FFFFFF;
overflow: hidden;
}
#container4{
position:absolute;
left: 0; right: 0; top: 0; bottom: 0;
padding-top: 0.33rem;
margin: auto;
width: 15.5rem;
height: 6rem;
z-index: 100;
}
#container5{
position:absolute;
left: 0; right: 0; top: 0; bottom: 0;
padding-top: 0.33rem;
margin: auto;
width: 15.5rem;
height: 2.4rem;
z-index: 100; z-index: 100;
font-size: 0.18rem;
font-family: Source Han Sans CN;
font-weight: 300;
color: #FFFFFF;
overflow: hidden;
} }

90
resources/views/http/lora2.blade.php
View File

@ -4,10 +4,11 @@
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/style/http/lora2.css"> <link rel="stylesheet" type="text/css" href="/style/http/lora2.css">
<script type="text/javascript" src="/script/jquery.min.js"></script> <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> </head>
<body> <body>
<div class="box"> <div id="app" class="box">
<div class="title"> <div class="title">
<div class="school"> <div class="school">
<img class="school-logo" src="/image/lora2/logo.png"> <img class="school-logo" src="/image/lora2/logo.png">
@ -18,15 +19,36 @@
</div> </div>
</div> </div>
<div class="menu"> <div class="menu">
<div @click="toggleCompare(1)" :class="menuSelected" class="menu-button">
数据对比
</div>
<div @click="toggleCompare(2)" :class="{ 'menu-button-selected': compare.compare2 }" class="menu-button">
血氧对比
</div>
<div class="menu-middle">
LoRa手环数据分析
</div>
<div @click="toggleCompare(3)" :class="{ 'menu-button-selected': compare.compare3 }" class="menu-button">
体温对比
</div>
<div @click="toggleCompare(4)" :class="{ 'menu-button-selected': compare.compare4 }" class="menu-button">
心跳对比
</div>
<div @click="toggleCompare(5)" :class="{ 'menu-button-selected': compare.compare5 }" class="menu-button">
脉搏对比
</div>
</div>
<div class="version">
V0.0.1
</div> </div>
</div> </div>
<div class="main"> <div class="main">
{{-- 设备列表--}} {{-- 设备列表--}}
<div class="device"> <div class="device">
<div class="device-frame"> <div class="device-frame">
<div class="device-cell1"> <div v-for="device in device_list">
<div class="device-info1">设备1</div> <div class="device-cell1 device-cell" v-if="device.online == 1" @click="toggleDevice(device.mac)">
<div class="device-info1">@{{device.name}}</div>
<div class="device-info2"> <div class="device-info2">
<div class="device-online"></div> <div class="device-online"></div>
@ -34,19 +56,21 @@
<div class="device-info3">在线</div> <div class="device-info3">在线</div>
</div> </div>
<div class="device-cell2"> <div class="device-cell2 device-cell" v-else @click="toggleDevice(device.mac)">
<div class="device-cell"> <div class="device-border">
<div class="device-info1">设备2</div> <div class="device-info1">@{{device.name}}</div>
<div class="device-info2"> <div class="device-info2">
<div class="device-online2"></div> <div class="device-online2"></div>
</div> </div>
<div class="device-info3">在线</div> <div class="device-info3">离线</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="diagram"> <div v-show="show_category1" class="diagram">
<div class="compare"> <div class="compare">
<div id="container1"></div> <div id="container1"></div>
<div class="compare-left"></div> <div class="compare-left"></div>
@ -79,12 +103,12 @@
<div class="radar-right"></div> <div class="radar-right"></div>
</div> </div>
<div class="original"> <div class="original">
<div id="container3"></div> <div id="container3">0000000000000000000000 000000000000000</div>
<div class="original-left"></div> <div class="original-left"></div>
<div class="original-left2"></div> <div class="original-left2"></div>
<div class="original-middle"> <div class="original-middle">
<div class="original-middle-title"> <div class="original-middle-title">
雷达图 数据
</div> </div>
<div class="original-middle-left"></div> <div class="original-middle-left"></div>
<div class="original-middle-middle"></div> <div class="original-middle-middle"></div>
@ -96,6 +120,48 @@
</div> </div>
</div> </div>
{{-- 不同设备对比--}}
<div v-show="show_category2" class="diagram">
<div class="compare">
<div id="container4"></div>
<div class="compare-left"></div>
<div class="compare-left2"></div>
<div class="compare-middle">
<div class="compare-middle-title">
对比图
</div>
<div class="compare-middle-left"></div>
<div class="compare-middle-middle"></div>
<div class="compare-middle-right"></div>
</div>
<div class="compare-right2"></div>
<div class="compare-right"></div>
</div>
<div class="compare2">
<div class="original2">
<div id="container5">00000000000000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000 00000000000000</div>
<div class="original-left"></div>
<div class="original2-left2"></div>
<div class="original-middle">
<div class="original-middle-title">
数据
</div>
<div class="original-middle-left"></div>
<div class="original-middle-middle"></div>
<div class="original-middle-right"></div>
</div>
<div class="original2-right2"></div>
<div class="original-right"></div>
</div>
</div>
</div>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save