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
10fd9f5d97
commit
acd053a9f1
3 changed files with 139 additions and 33 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. 4
      public/script/http/lora2.js
  2. 143
      public/style/http/lora2.css
  3. 21
      resources/views/http/lora2.blade.php

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

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

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

@ -1,7 +1,6 @@
* {margin:0; padding:0;}
html,body{height:100%;}
.box {
height:100%;
background: #020723;
background-image:url("/image/lora2/background1.png");
background-size: 100% 100%;
@ -157,7 +156,7 @@ html {
position: relative;
}
.compare-left{
width: 0.24rem;
width: 0.23rem;
height: auto;
background-image:url("/image/lora2/kk1_1.png");
background-size: 100% 100%;
@ -190,6 +189,7 @@ html {
text-align: center;
font-family: Source Han Sans CN;
color: #FFFFFF;
z-index: 100;
}
.compare-middle-left{
@ -223,7 +223,7 @@ html {
background-repeat: repeat-x;
}
.compare-right{
width: 0.24rem;
width: 0.23rem;
height: auto;
background-image:url("/image/lora2/kk1_1.png");
background-size: 100% 100%;
@ -244,28 +244,30 @@ html {
.compare2{
display: -webkit-flex;
display: flex;
margin-top: 0.33rem;
margin-bottom: 0.24rem;
}
/*雷达图*/
.radar{
width: 15.9rem;
height: 6.42rem;
width: 4.71rem;
height: 3.01rem;
display: -webkit-flex;
display: flex;
position: relative;
}
.radar-left{
width: 0.24rem;
width: 0.23rem;
height: auto;
background-image:url("/image/lora2/kk1_1.png");
background-image:url("/image/lora2/kk2_1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.radar-left2{
width: 6.28rem;
width: 0.69rem;
height: auto;
background-image:url("/image/lora2/kk1_2.png");
background-image:url("/image/lora2/kk2_2.png");
background-size: 100% 100%;
background-repeat: repeat-x;
}
@ -288,12 +290,12 @@ html {
text-align: center;
font-family: Source Han Sans CN;
color: #FFFFFF;
z-index: 100;
}
.radar-middle-left{
width: 0.5rem;
height: auto;
background-image:url("/image/lora2/kk1_3.png");
background-image:url("/image/lora2/kk2_3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
@ -308,32 +310,125 @@ html {
.radar-middle-right{
width: 0.5rem;
height: auto;
background-image:url("/image/lora2/kk1_3.png");
background-image:url("/image/lora2/kk2_3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
transform: rotateY(180deg);
}
.radar-right2{
width: 6.28rem;
width: 0.68rem;
height: auto;
background-image:url("/image/lora2/kk1_2.png");
background-image:url("/image/lora2/kk2_2.png");
background-size: 100% 100%;
background-repeat: repeat-x;
}
.radar-right{
width: 0.24rem;
width: 0.23rem;
height: auto;
background-image:url("/image/lora2/kk1_1.png");
background-image:url("/image/lora2/kk2_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;*/
#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;*/
/*}*/
z-index: 100;
}
/*雷达图*/
.original{
margin-left: 0.21rem;
width: 10.98rem;
height: 3.01rem;
display: -webkit-flex;
display: flex;
position: relative;
}
.original-left{
width: 0.23rem;
height: auto;
background-image:url("/image/lora2/kk2_1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.original-left2{
width: 3.82rem;
height: auto;
background-image:url("/image/lora2/kk2_2.png");
background-size: 100% 100%;
background-repeat: repeat-x;
}
.original-middle{
height: auto;
display: -webkit-flex;
display: flex;
position: relative;
}
.original-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;
z-index: 100;
}
.original-middle-left{
width: 0.5rem;
height: auto;
background-image:url("/image/lora2/kk2_3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.original-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;
}
.original-middle-right{
width: 0.5rem;
height: auto;
background-image:url("/image/lora2/kk2_3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
transform: rotateY(180deg);
}
.original-right2{
width: 3.82rem;
height: auto;
background-image:url("/image/lora2/kk2_2.png");
background-size: 100% 100%;
background-repeat: repeat-x;
}
.original-right{
width: 0.23rem;
height: auto;
background-image:url("/image/lora2/kk2_1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
transform: rotateY(180deg);
}
#container3{
position:absolute;
left: 0; right: 0; top: 0; bottom: 0;
padding-top: 0.33rem;
margin: auto;
/*width: 15.5rem;*/
/*height: 6rem;*/
z-index: 100;
}

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

@ -48,7 +48,7 @@
</div>
<div class="diagram">
<div class="compare">
<div id="container1">aa</div>
<div id="container1"></div>
<div class="compare-left"></div>
<div class="compare-left2"></div>
<div class="compare-middle">
@ -64,12 +64,12 @@
</div>
<div class="compare2">
<div class="radar">
<div id="container2">aa</div>
<div id="container2"></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>
@ -78,9 +78,20 @@
<div class="radar-right2"></div>
<div class="radar-right"></div>
</div>
原始数据
<div class="original">
<div id="container3"></div>
<div class="original-left"></div>
<div class="original-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="original-right2"></div>
<div class="original-right"></div>
</div>
</div>

Write Preview
Loading…
Cancel
Save