lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat 安全检测

Browse Source
This commit is contained in:
duanliang
2024-12-18 17:00:46 +08:00
parent 4a12039789
commit 8114a56034
21 changed files with 1338 additions and 1270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
src/views/testing/components/box-5.vue
View File

@@ -3,9 +3,8 @@
<div class="box-detection">
<!-- 地图 -->
<div class="detection-top">
<!-- <img class="map-img" src="@/assets/images/map-img-1.jpg" alt="" /> -->
<Map />
<img class="map-img" src="@/assets/images/map-img-1.jpg" alt="" />
<!-- <Map /> -->
</div>
<div class="detection-bom flex">
<!-- 数据 -->
@@ -41,24 +40,31 @@
<span>交通信息</span>
</div>
<div class="t-census flex">
<img class="t-icon" src="@/assets/images/t-ico-1.png" alt="" />
<img class="t-icon" src="@/assets/images/t-ico-2.png" alt="" />
<div class="item">
监控点位 <div class="color1"><countup endVal="895" /></div>
监控点位 <div class="color1 color2"><countup endVal="895" /></div>
</div>
<div class="item">
核心点位 <div class="color1"><countup endVal="895" /></div>
核心点位 <div class="color1 color2"><countup endVal="895" /></div>
</div>
<div class="item">
拥堵次数 <div class="color1"><countup endVal="895" /></div>
拥堵次数 <div class="color1 color3"><countup endVal="895" /></div>
</div>
</div>
<div class="box">
<div class="title-3"><span>异常告警占比</span></div>
<div class="pt-20 h-flex">
<div class="left">
<v-chart class="line-chart" :option="optionLine" autoresize />
</div>
<div class="left">
<v-chart class="chart" :option="option1" autoresize />
</div>
<div class="right">
<div class="li li-1"><span class="rk-img" >1</span> 核心监控1</div>
<div class="li li-2"><span class="rk-img" >1</span>核心监控1</div>
<div class="li li-3"><span class="rk-img" >1</span>核心监控1</div>
<div class="li"><span class="rk-img" >1</span>核心监控1</div>
<div class="li"><span class="rk-img" >1</span>核心监控1</div>
<div class="li"><span class="rk-img" >1</span>核心监控</div>
</div>
</div>
</div>
</div>
@@ -81,20 +87,25 @@
trigger: 'item'
},
legend: {
type: 'scroll',
orient: 'vertical',
right: 30,
top: 30,
bottom: 20,
itemWidth:5,
itemHeight:5,
type: 'scroll',
orient: 'vertical',
right: -10,
top: 0,
bottom: 20,
itemWidth:5,
itemHeight:5,
textStyle:{
fontSize:fitChartSize(12),
}
},
series: [
{
name: 'Access From',
type: 'pie',
left:-100,
top:-30,
left:-25,
top:0,
width:fitChartSize(250),
height:fitChartSize(250),
// width:200,
// height:200,
radius: ['40%', '50%'],
@@ -507,8 +518,82 @@
font-style: normal;
text-transform: none;
}
.color3{
display: block;
font-weight: bold;
font-size: vw(24);
line-height: 28px;
text-align: center;
font-style: normal;
text-transform: none;
color:#A70000;
}
}
}
}
}
.h-flex{
display: flex;
justify-content: space-between;
.left{
flex:1;
width:vw(260);
}
.right{
margin-left:vw(20);
width:vw(120);
.li{
position: relative;
font-weight: 400;
font-size: vw(14);
color: #FFFFFF;
line-height: 16px;
text-align: left;
font-style: normal;
text-transform: none;
position: relative;
padding-left:vw(30);
padding:0 vw(10);
padding-left:vw(15);
background: linear-gradient( 90deg, #1B5EC7 0%, rgba(27,94,199,0) 100%);
border-radius: 0px 0px 0px 0px;
height:vh(24);
line-height:vh(24);
margin-bottom:vh(8);
// opacity: 0.4;
.rk-img{
position: absolute;
width:vw(24);
height:vh(24);
line-height:vh(24);
left:vw(-12);
top:50%;
display: block;
background-image: url('/src/assets/images/rk-4.png');
background-size: 100% 100%;
transform: translateY(-50%);
text-align: center;
}
}
.li-1{
background: linear-gradient( 90deg, #FFC10B 0%, rgba(255,209,44,0) 100%);
.rk-img{
background-image: url('/src/assets/images/rk-1.png');
}
}
.li-2{
background: linear-gradient( 90deg, #919191 0%, rgba(175,175,175,0) 100%);
.rk-img{
background-image: url('/src/assets/images/rk-2.png');
}
}
.li-3{
background: linear-gradient( 90deg, #919191 0%, rgba(175,175,175,0) 100%);
.rk-img{
background-image: url('/src/assets/images/rk-3.png');
}
}
}
}
</style>