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

832
src/views/testing/components/box-2.vue
View File

@@ -1,208 +1,120 @@
<template>
<div class="box-2">
<div class="header">
<div class="title"> 交通信息 </div>
</div>
<div class="flex pt-20 p-box">
<div class="item core">
<span class="title-1">全县景区数</span>
<div class="flex align-end color1"> <countup endVal="895" /><span class="unit"></span></div>
</div>
<div class="item queue">
<span class="title-1">核心景区数</span>
<div class="flex align-end color2"> <countup endVal="895" /><span class="unit"></span></div>
</div>
<div class="item congestion">
<span class="title-1">低感景区总数</span>
<div class="flex align-end color3"> <countup endVal="895" /><span class="unit"></span></div>
</div>
</div>
<div class="header">
<div class="title"> 景区信息 </div>
</div>
<div class="flex-four">
<div class="item item1">
<div class="box1">
核心路段监控点位
<div class="item-num color1"> <countup endVal="895" /><span class="unit"></span></div>
</div>
<!-- 安全检测 -->
<div class="box-detection">
<!-- 地图 -->
<div class="detection-top">
<Map />
</div>
<div class="item item2">
<div class="box1">
核心景区分析点位
<div class="item-num color1"> <countup endVal="895" /><span class="unit"></span></div>
<div class="detection-bom flex">
<!-- 数据 -->
<div class="d-left">
<div class="t-title">
<span>监控点位统计</span>
</div>
<div class="t-census flex">
<img class="t-icon" src="@/assets/images/t-ico-0.png" alt="" />
<div class="item">
监控点位 <div class="color1"><countup endVal="895" /></div>
</div>
<div class="item">
核心点位 <div class="color1"><countup endVal="895" /></div>
</div>
<div class="item">
拥堵次数 <div class="color2"><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="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>
</div>
<div class="item item3">
<div class="box1">
异常点位
<div class="item-num color2"> <countup endVal="895" /><span class="unit"></span></div>
<div class="d-right">
<div class="t-title">
<span>交通信息</span>
</div>
<div class="t-census flex">
<img class="t-icon" src="@/assets/images/t-ico-1.png" alt="" />
<div class="item">
监控点位 <div class="color1 "><countup endVal="895" /></div>
</div>
<div class="item">
核心点位 <div class="color1 "><countup endVal="895" /></div>
</div>
<div class="item">
拥堵次数 <div class="color1 "><countup endVal="895" /></div>
</div>
</div>
<div class="box">
<div class="title-3"><span>异常告警占比</span></div>
<div class="pt-20 chart-p">
<div class="check-label">
<span class="active">平均</span>
<span>最大</span>
<span>最小</span>
</div>
<!-- <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>
</div>
</div>
<div class="item item4">
<div class="box1">
异常告警
<div class="item-num color3"> <countup endVal="895" /><span class="unit"></span></div>
</div>
</div>
<div class="item item5">
<div class="box1">
已处理
<div class="item-num color4"> <countup endVal="895" /><span class="unit"></span></div>
</div>
</div>
</div>
<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" /> -->
<v-chart class="line-chart" :option="optionLine" autoresize />
</div>
</div>
<div class="box">
<div class="title-3"><span>异常告警占比</span></div>
<div class="pt-20 h-flex">
<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>
<div class="header">
<div class="title"> 景区信息 </div>
</div>
<div class="flex-four">
<div class="item item1">
<div class="box1">
核心路段监控点位
<div class="item-num color1"> <countup endVal="895" /><span class="unit"></span></div>
</div>
</div>
<div class="item item2">
<div class="box1">
核心景区分析点位
<div class="item-num color1"> <countup endVal="895" /><span class="unit"></span></div>
</div>
</div>
<div class="item item3">
<div class="box1">
异常点位
<div class="item-num color2"> <countup endVal="895" /><span class="unit"></span></div>
</div>
</div>
<div class="item item4">
<div class="box1">
异常告警
<div class="item-num color3"> <countup endVal="895" /><span class="unit"></span></div>
</div>
</div>
<div class="item item5">
<div class="box1">
已处理
<div class="item-num color4"> <countup endVal="895" /><span class="unit"></span></div>
</div>
</div>
</div>
<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" /> -->
<v-chart class="line-chart" :option="optionLine" autoresize />
</div>
</div>
<div class="box">
<div class="title-3"><span>异常告警占比</span></div>
<div class="pt-20 h-flex">
<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>
</div>
</template>
<script setup>
import * as echarts from 'echarts'
import countup from 'vue-countup-v3'
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { GaugeChart } from 'echarts/charts';
import { PieChart } from 'echarts/charts';
import { LineChart } from 'echarts/charts';
import { fitChartSize } from '@/utils/dataUtil'
import {
TitleComponent,
TooltipComponent,
LegendComponent,
} from 'echarts/components';
import Map from '@/components/Map/marker.vue'
import VChart, { THEME_KEY } from 'vue-echarts';
import { ref, provide } from 'vue';
use([
LineChart,
GaugeChart,
CanvasRenderer,
PieChart,
TitleComponent,
TooltipComponent,
LegendComponent,
]);
provide(THEME_KEY, 'dark');
const option1 = ref({
backgroundColor:'transparent',
backgroundColor:'transparent',
tooltip: {
trigger: 'item'
},
legend: {
type: 'scroll',
orient: 'vertical',
right: -10,
top: 0,
bottom: 20,
itemWidth:5,
itemHeight:5,
textStyle:{
fontSize:fitChartSize(12),
}
type: 'scroll',
orient: 'vertical',
right: 10,
top: 20,
bottom: 20,
itemWidth:5,
itemHeight:5,
textStyle:{
fontSize:fitChartSize(14),
}
},
series: [
{
name: 'Access From',
type: 'pie',
left:-25,
top:-20,
width:fitChartSize(230),
height:fitChartSize(230),
left:-30,
top:-50,
width:fitChartSize(350),
height:fitChartSize(350),
// width:200,
// height:200,
radius: ['40%', '50%'],
avoidLabelOverlap: false,
padAngle: 5,
@@ -241,7 +153,7 @@
backgroundColor:'transparent',
grid:{
top:'50',
bottom:'20',
bottom:'50',
left:'4%',
containLabel: true,
},
@@ -250,7 +162,7 @@
type: 'category',
boundaryGap: false,
axisLabel: {
fontSize:fitChartSize(10),
fontSize:10,
interval: 0, // 显示所有标签
rotate: 0, // 旋转标签45度
},
@@ -325,25 +237,336 @@
]
})
const optionBar = ref({
backgroundColor:'transparent',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
// type: 'scroll',
// orient: 'vertical',
right: 0,
top: 0,
bottom: 20,
itemWidth:5,
itemHeight:5,
},
grid: {
left: '3%',
right: '4%',
bottom: '20%',
containLabel: true,
show:false,
},
xAxis: [
{
nameLocation: 'middle',
type: 'category',
boundaryGap: true,
axisLabel: {
fontSize:fitChartSize(10),
interval: 0, // 显示所有标签
rotate: 0, // 旋转标签45度
},
minorTisk:{
show:false,
},
data: ['10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00'],
axisTisk:{
alignWithLabel: true,
show: false,
// 设置刻度长度
length: 0,
lineStyle: {
type: 'dashed' ,// 设置为虚线
width:0,
}
},
}
],
yAxis: [
{
type: 'value',
min:0,
max:45,
interval:15,
axisLabel: {
fontSize: fitChartSize(12) ,// 设置Y轴刻度字体大小
color: 'rgba(255,255,255,0.9)',
offset:10,
},
splitLine:{
show:false,
lineStyle:{
type:'dashed',
color:'#00D0FF'
}
},
}
],
series: [
{
itemStyle: {
// 设置柱状图颜色
color: '#0D53FF'
},
name: '三峡之巅',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
data: [10, 0, 16, 10, 22, 11, 9,30],
barWidth: '45%', // 设置柱体粗细，可以是百分比或者像素值
},
{
name: '白帝城',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
itemStyle: {
// 设置柱状图颜色
color: '#05FFB9'
},
data: [20, 5, 14, 14, 0, 20, 11,2]
},
{
name: '龙河桥',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
itemStyle: {
// 设置柱状图颜色
color: '#FFCB39'
},
data: [15, 20, 8, 19, 20, 5, 22,13]
},
]
})
onMounted(() => {})
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
.line-chart{
width:100%;
height:vh(200);
height:vh(240);
}
.box-2 {
margin-top: vh(120);
width: vw(800);
height: vh(950);
padding: vw(8);
box-sizing: border-box;
// background-image: url('@/assets/images/bg-2.png');
background-size: 100% 100%;
.p-box{
padding-top:vh(10);
justify-content: space-between;
.chart-p{
position:relative;
.check-label{
position:absolute;
right:vw(20);
top:vh(15);
span{
width: vw(55);
padding:vw(5);
background: linear-gradient( 270deg, rgba(8,41,86,0.16) 0%, #0B61B4 100%);
border-radius: vw(50);
// border: 1px solid rgba(0,114,220,0.3);
margin-left:vw(5);
display: inline-block;
font-weight: 400;
font-size: vw(13);
color: #0084FF;
text-align: center;
font-style: normal;
text-transform: none;
}
.active{
background: linear-gradient( 270deg, #37D8FC 0%, #0084FF 100%);
border-radius: vw(50);
border: 1px solid rgba(0,114,220,0.3);
color:#fff;
}
}
}
.box-detection{
margin-top: vh(120);
width:vw(820);
height:vh(950);
background: linear-gradient( 321deg, #0B2F64 0%, #062B57 91%, rgba(5,40,79,0) 100%);
border-radius: 0px 0px 0px 0px;
.detection-top{
width:100%;
height:vh(580);
background-color: #fff;
.map-img{
width:100%;
height:100%;
}
}
.detection-bom{
justify-content: space-between;
.d-left{
width:vw(405);
.left{
width:100%;
height:vh(240);
}
}
.d-right{
width:vw(405);
}
.box {
width:100%;
padding:vw(5);
margin-top:vh(5);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
&:nth-child(1) {
margin-right: vw(10);
}
.title-2 {
width: vw(253);
height: vh(28);
display: flex;
align-items: center;
background-image: url('@/assets/images/title-5.png');
background-size: 100% 100%;
& > span {
padding-left: vw(22);
font-weight: bold;
font-size: vw(15);
background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
color: transparent; /* 兼容其他浏览器 */
}
}
.statistic {
display: flex;
margin-top: vh(12);
width: 100%;
height: vh(88);
background-image: url('@/assets/images/bg-4.png');
background-size: 100% 100%;
&-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
&-title {
font-size: vw(14);
color: rgba(255, 255, 255, 0.9);
}
&-value {
margin-top: vh(10);
font-weight: bold;
font-size: vw(24);
color: #02f9fa;
}
.count {
font-weight: bold;
font-size: vw(28);
color: #ff4400 !important;
}
.prefix,
.suffix {
color: #ff4400;
font-size: vw(12);
}
}
.title-3 {
position: relative;
width: vw(344);
height: vh(12);
margin-top: vh(20);
background-image: url('@/assets/images/title-6.png');
background-size: 100% 100%;
& > span {
position: absolute;
bottom: vh(4);
left: vw(20);
font-size: vw(15);
font-weight: bold;
background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
color: transparent; /* 兼容其他浏览器 */
}
}
}
.t-title {
margin: vh(10) auto;
width: 100%;
height: vh(32);
font-weight: 800;
font-size: vw(16);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
background-image: url('@/assets/images/title-4.png');
background-size: 100% 100%;
}
.t-census{
justify-content: center;
align-items: center;
background-image: url('@/assets/images/i-data-bg-1.png');
background-size: 100% 100%;
padding:vw(10);
.t-icon{
width:vw(45);
height:vh(48);
}
.item{
flex:1;
font-weight: 400;
font-size: vw(14);
color: rgba(255,255,255,0.9);
line-height: vh(16);
text-align: center;
font-style: normal;
text-transform: none;
.color1{
display: block;
font-weight: bold;
font-size: vw(24);
color: #FFFFFF;
line-height: 28px;
text-align: center;
font-style: normal;
text-transform: none;
}
.color2{
display: block;
font-weight: bold;
font-size: vw(24);
color: #F15A25;
line-height: 28px;
text-align: center;
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;
@@ -408,222 +631,5 @@
}
}
}
.flex-four{
display: flex;
justify-content: center;
align-items: center;
.item{
margin:vw(10);
width:vw(142);
height:vh(106);
font-weight: 400;
font-size: vw(14);
color: rgba(255,255,255,0.9);
line-height: 16px;
text-align: center;
font-style: normal;
text-transform: none;
display: flex;
justify-content: center;
align-items: center;
padding:0;
margin-top:0;
.box1{
width:vw(142);
}
.item-num{
margin-top:vh(10);
}
.color1{
color: #02F9FA;
}
.color2{
color: #F15A25;
}
.color3{
color: #E21B1B;
}
.color4{
color: #12B5FD;
}
}
.item1,.item2{
background-image: url('/src/assets/images/four-t-1.png');
background-size: 100% 100%;
}
.item3{
background-image: url('/src/assets/images/four-t-2.png');
}
.item4{
background-image: url('/src/assets/images/four-t-3.png');
}
.item5{
background-image: url('/src/assets/images/four-t-4.png');
}
}
.header {
position: relative;
.title {
margin: vh(5) auto;
width: vw(468);
height: vh(32);
font-weight: 800;
font-size: vw(16);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
background-image: url('@/assets/images/title-4.png');
background-size: 100% 100%;
}
.more {
position: absolute;
top: vh(0);
right: vw(20);
cursor: pointer;
width: vw(60);
height: vh(24);
background-image: url('@/assets/images/more.png');
background-size: 100% 100%;
}
}
.item {
position: relative;
flex: 1;
padding-left: vw(100);
width:vw(230);
height: vh(70);
display: flex;
align-items: center;
background-size: 100% 100%;
.align-end{
margin-top:vh(10);
}
.color1{
color: #12B5FD;
}
.color2{
color: #02F9FA;
}
.color3{
color: #F15A25;
}
}
.title-1 {
position: absolute;
top: vh(10);
font-weight: 400;
font-size: vw(14);
color: rgba(255, 255, 255, 0.7);
}
.countup-wrap {
font-size: vw(28);
font-weight: bold;
}
.unit {
color: #02f9fa;
font-size: vw(14);
margin-bottom: vh(4);
}
.core {
background-image: url('@/assets/images/m-t-1.png');
background-size: 100% 100%;
}
.queue {
background-image: url('@/assets/images/m-t-2.png');
background-size: 100% 100%;
}
.congestion {
background-image: url('@/assets/images/m-t-2.png');
background-size: 100% 100%;
}
.box {
width: vw(384);
// height: vh(360);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
&:nth-child(1) {
margin-right: vw(10);
}
.title-2 {
width: vw(253);
height: vh(28);
display: flex;
align-items: center;
background-image: url('@/assets/images/title-5.png');
background-size: 100% 100%;
& > span {
padding-left: vw(22);
font-weight: bold;
font-size: vw(15);
background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
color: transparent; /* 兼容其他浏览器 */
}
}
.statistic {
display: flex;
margin-top: vh(12);
width: 100%;
height: vh(88);
background-image: url('@/assets/images/bg-4.png');
background-size: 100% 100%;
&-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
&-title {
font-size: vw(14);
color: rgba(255, 255, 255, 0.9);
}
&-value {
margin-top: vh(10);
font-weight: bold;
font-size: vw(24);
color: #02f9fa;
}
.count {
font-weight: bold;
font-size: vw(28);
color: #ff4400 !important;
}
.prefix,
.suffix {
color: #ff4400;
font-size: vw(12);
}
}
.title-3 {
position: relative;
width: vw(344);
height: vh(12);
margin-top: vh(20);
background-image: url('@/assets/images/title-6.png');
background-size: 100% 100%;
& > span {
position: absolute;
bottom: vh(4);
left: vw(20);
font-size: vw(15);
font-weight: bold;
background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
color: transparent; /* 兼容其他浏览器 */
}
}
}
}
</style>
</style>