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

54
src/views/monitor/components/box-2.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="box-2">
<div class="header">
<div class="title"> 交通信息 </div>
<div class="title"> <span>交通信息</span> </div>
</div>
<div class="flex pt-20 p-box">
<div class="item core">
@@ -18,7 +18,7 @@
</div>
</div>
<div class="header">
<div class="title"> 景区信息 </div>
<div class="title"> <span>景区信息</span> </div>
</div>
<div class="flex-four">
<div class="item item1">
@@ -60,7 +60,14 @@
<div class="flex pt-20 p-box">
<div class="box">
<div class="title-3"><span>异常告警</span></div>
<div class="pt-20">
<div class="pt-20 chart-p">
<div class="check-box">
<el-select v-model="selectSpot" slot="prepend" placeholder="选择景区">
<el-option label="餐厅名" value="1"></el-option>
<el-option label="订单号" value="2"></el-option>
<el-option label="用户电话" value="3"></el-option>
</el-select>
</div>
<v-chart class="line-chart" :option="optionLine" autoresize />
</div>
</div>
@@ -82,7 +89,7 @@
</div>
</div>
<div class="header">
<div class="title"> 景区信息 </div>
<div class="title"> <span>交通信息</span> </div>
</div>
<div class="flex-four">
<div class="item item1">
@@ -124,8 +131,14 @@
<div class="flex pt-20 p-box">
<div class="box">
<div class="title-3"><span>异常告警</span></div>
<div class="pt-20">
<!-- <Line :width="370" :height="180" id="line" /> -->
<div class="pt-20 chart-p">
<div class="check-box">
<el-select v-model="selectSpot" slot="prepend" placeholder="选择景区">
<el-option label="餐厅名" value="1"></el-option>
<el-option label="订单号" value="2"></el-option>
<el-option label="用户电话" value="3"></el-option>
</el-select>
</div>
<v-chart class="line-chart" :option="optionLine" autoresize />
</div>
</div>
@@ -177,6 +190,7 @@
]);
provide(THEME_KEY, 'dark');
let selectSpot = ref('')
const option1 = ref({
backgroundColor:'transparent',
tooltip: {
@@ -328,6 +342,16 @@
</script>
<style scoped lang="scss">
:deep(.el-select__wrapper){
background:linear-gradient( 270deg, rgba(8,41,86,0.16) 0%, #0B61B4 100%);
border:none;
box-shadow:none;
border-top-left-radius: vh(30);
border-bottom-left-radius: vh(30);
font-size:vw(14);
color:#fff;
}
.line-chart{
width:100%;
height:vh(200);
@@ -343,6 +367,16 @@
.p-box{
padding-top:vh(10);
justify-content: space-between;
.chart-p{
position:relative;
.check-box{
position: absolute;
right:vw(30);
top:vh(10);
width:vw(120);
z-index: 19;
}
}
}
.h-flex{
display: flex;
@@ -476,6 +510,14 @@
justify-content: center;
background-image: url('@/assets/images/title-4.png');
background-size: 100% 100%;
span{
font-weight: 800;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to bottom, #ffffff 0%, #87c9ff 100%);
}
}
.more {
position: absolute;