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
28d6fb8153
commit
b487a7c950
4 changed files with 277 additions and 14 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      app/Http/Controllers/IndexController.php
  2. 5
      public/script/http/lora2.js
  3. 240
      public/style/http/lora2.css
  4. 44
      resources/views/http/lora2.blade.php

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

@ -248,7 +248,7 @@ class IndexController extends BaseController
public function lora2()
{
return view('http.lora2');
return view('http.lora22');
}
public function getPelmaStore()

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

@ -1,7 +1,8 @@
var dom1 = document.getElementById('container1');
var dom2 = document.getElementById('container2');
console.log('a')
// var dom2 = document.getElementById('container2');
lineGraph(dom1, '温度', '℃')
lineGraph2(dom2, '血氧', '%')
// lineGraph2(dom2, '血氧', '%')
function lineGraph(dom, title, unit){
var myChart = echarts.init(dom, null, {

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

@ -59,10 +59,17 @@ html {
background-repeat: no-repeat;
}
/*主体*/
.main{
height: auto;
display: -webkit-flex;
display: flex;
}
/*设备列表*/
.device{
width: 2.99rem;
height: 18.56rem;
height: auto;
padding-top: 0.56rem;
}
.device-frame{
@ -74,10 +81,10 @@ html {
width: 2.4rem;
height: 0.64rem;
margin-bottom: 0.1rem;
padding-left: 0.36rem;
background: linear-gradient(90deg, rgba(0,250,255,0.84), rgba(0,250,255,0));
border-radius: 0.32rem;
display: -webkit-flex;
display: flex;
}
.device-cell2{
@ -94,12 +101,239 @@ html {
background: #101010;
border-radius: 0.32rem;
background-image:url("/image/lora2/background1.png");
display: -webkit-flex;
display: flex;
}
.device-info1{
margin-left: 0.36rem;
width: 1rem;
height: auto;
line-height:0.64rem;
font-size: 0.24rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FFFFFF;
}
.device-info2{
width: 0.12rem;
height: auto;
display: -webkit-flex;
display: flex;
}
.device-online{
width: 0.12rem;
height: 0.12rem;
margin: auto;
background: #31EDB1;
border-radius: 0.06rem;
}
.device-online2{
width: 0.12rem;
height: 0.12rem;
margin: auto;
background: #F4543F;
border-radius: 0.06rem;
}
.device-info3{
width: 0.36rem;
height: auto;
margin-left: 0.07rem;
line-height:0.64rem;
font-size: 0.18rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FFFFFF;
}
/*对比图*/
.diagram{
margin-top: 0.16rem;
}
.compare{
width: 15.9rem;
height: 6.42rem;
display: -webkit-flex;
display: flex;
position: relative;
}
.compare-left{
width: 0.24rem;
height: auto;
background-image:url("/image/lora2/kk1_1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.compare-left2{
width: 6.28rem;
height: auto;
background-image:url("/image/lora2/kk1_2.png");
background-size: 100% 100%;
background-repeat: repeat-x;
}
.compare-middle{
height: auto;
display: -webkit-flex;
display: flex;
position: relative;
}
.compare-middle-title{
position:absolute;
left: 0; right: 0;
margin: auto;
width: 2.1rem;
height: 0.32rem;
background-image:url("/image/lora2/kk_biaoti.png");
background-size: 100% 100%;
background-repeat: no-repeat;
opacity: 0.7;
text-align: center;
font-family: Source Han Sans CN;
color: #FFFFFF;
}
.compare-middle-left{
width: 0.5rem;
height: auto;
background-image:url("/image/lora2/kk1_3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.compare-middle-middle{
margin-top: 0.32rem;
width: 1.88rem;
height: auto;
background-image:url("/image/lora2/kk1_4.png");
background-size: 100% 100%;
background-repeat: repeat-x;
}
.compare-middle-right{
width: 0.5rem;
height: auto;
background-image:url("/image/lora2/kk1_3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
transform: rotateY(180deg);
}
.compare-right2{
width: 6.28rem;
height: auto;
background-image:url("/image/lora2/kk1_2.png");
background-size: 100% 100%;
background-repeat: repeat-x;
}
.compare-right{
width: 0.24rem;
height: auto;
background-image:url("/image/lora2/kk1_1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
transform: rotateY(180deg);
}
#container1{
position:absolute;
left: 0; right: 0; top: 0; bottom: 0;
padding-top: 0.33rem;
margin: auto;
width: 15.5rem;
height: 6rem;
z-index: 100;
}
/*下部*/
.compare2{
display: -webkit-flex;
display: flex;
}
/*雷达图*/
.radar{
width: 15.9rem;
height: 6.42rem;
display: -webkit-flex;
display: flex;
position: relative;
}
.radar-left{
width: 0.24rem;
height: auto;
background-image:url("/image/lora2/kk1_1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.radar-left2{
width: 6.28rem;
height: auto;
background-image:url("/image/lora2/kk1_2.png");
background-size: 100% 100%;
background-repeat: repeat-x;
}
.radar-middle{
height: auto;
display: -webkit-flex;
display: flex;
position: relative;
}
.radar-middle-title{
position:absolute;
left: 0; right: 0;
margin: auto;
width: 2.1rem;
height: 0.32rem;
background-image:url("/image/lora2/kk_biaoti.png");
background-size: 100% 100%;
background-repeat: no-repeat;
opacity: 0.7;
text-align: center;
font-family: Source Han Sans CN;
color: #FFFFFF;
}
.radar-middle-left{
width: 0.5rem;
height: auto;
background-image:url("/image/lora2/kk1_3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.radar-middle-middle{
margin-top: 0.32rem;
width: 1.88rem;
height: auto;
background-image:url("/image/lora2/kk1_4.png");
background-size: 100% 100%;
background-repeat: repeat-x;
}
.radar-middle-right{
width: 0.5rem;
height: auto;
background-image:url("/image/lora2/kk1_3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
transform: rotateY(180deg);
}
.radar-right2{
width: 6.28rem;
height: auto;
background-image:url("/image/lora2/kk1_2.png");
background-size: 100% 100%;
background-repeat: repeat-x;
}
.radar-right{
width: 0.24rem;
height: auto;
background-image:url("/image/lora2/kk1_1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
transform: rotateY(180deg);
}
/*#container2{*/
/* position:absolute;*/
/* left: 0; right: 0; top: 0; bottom: 0;*/
/* padding-top: 0.33rem;*/
/* margin: auto;*/
/* width: 15.5rem;*/
/* height: 6rem;*/
/* z-index: 100;*/
/*}*/

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

@ -26,31 +26,59 @@
<div class="device">
<div class="device-frame">
<div class="device-cell1">
<div>设备1</div>
<div>
<div class="device-info1">设备1</div>
<div class="device-info2">
<div class="device-online"></div>
<div>在线</div>
</div>
<div class="device-info3">在线</div>
</div>
<div class="device-cell2">
<div class="device-cell">
<div class="device-info1">设备2</div>
<div class="device-info2">
<div class="device-online2"></div>
</div>
<div class="device-info3">在线</div>
</div>
</div>
</div>
</div>
<div class="diagram">
{{-- 对比图--}}
<div class="compare">
<div id="container1">aa</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="radar">
<div id="container2">aa</div>
<div class="radar-left"></div>
<div class="radar-left2"></div>
<div class="radar-middle">
<div class="radar-middle-title">
对比图
</div>
<div class="radar-middle-left"></div>
<div class="radar-middle-middle"></div>
<div class="radar-middle-right"></div>
</div>
<div class="radar-right2"></div>
<div class="radar-right"></div>
</div>
{{-- 原始数据--}}
原始数据
<div class="original">
</div>

Write Preview
Loading…
Cancel
Save