635 lines
14 KiB
Vue
635 lines
14 KiB
Vue
<template>
|
|
<!-- 安全检测 -->
|
|
<div class="box-detection">
|
|
<!-- 地图 -->
|
|
<div class="detection-top">
|
|
<Map />
|
|
</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 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>
|
|
</template>
|
|
|
|
<script setup>
|
|
import * as echarts from 'echarts'
|
|
import countup from 'vue-countup-v3'
|
|
import { fitChartSize } from '@/utils/dataUtil'
|
|
import Map from '@/components/Map/marker.vue'
|
|
import VChart, { THEME_KEY } from 'vue-echarts';
|
|
import { ref, provide } from 'vue';
|
|
|
|
provide(THEME_KEY, 'dark');
|
|
const option1 = ref({
|
|
backgroundColor:'transparent',
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
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:-30,
|
|
top:-50,
|
|
width:fitChartSize(350),
|
|
height:fitChartSize(350),
|
|
// width:200,
|
|
// height:200,
|
|
radius: ['40%', '50%'],
|
|
avoidLabelOverlap: false,
|
|
padAngle: 5,
|
|
itemStyle: {
|
|
borderRadius: 2
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: fitChartSize(10),
|
|
fontWeight: 'bold',
|
|
color:'#fff'
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: true
|
|
},
|
|
data: [
|
|
{ value: 200, name: '异常状况1' },
|
|
{ value: 500, name: '异常状况2' },
|
|
{ value: 234, name: '异常状况3' },
|
|
{ value: 135, name: '异常状况4' },
|
|
{ value: 100, name: '异常状况5' },
|
|
{ value: 777, name: '异常状况6' },
|
|
{ value: 777, name: '其他' },
|
|
]
|
|
|
|
},
|
|
],
|
|
});
|
|
const optionLine = ref({
|
|
backgroundColor:'transparent',
|
|
grid:{
|
|
top:'50',
|
|
bottom:'50',
|
|
left:'4%',
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
nameLocation: 'middle',
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
axisLabel: {
|
|
fontSize:10,
|
|
interval: 0, // 显示所有标签
|
|
rotate: 0, // 旋转标签45度
|
|
},
|
|
data: ['10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00'],
|
|
axisTisk:{
|
|
show: true,
|
|
// 设置刻度长度
|
|
length: 1,
|
|
lineStyle: {
|
|
type: 'dashed' ,// 设置为虚线
|
|
width:0,
|
|
}
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#0096FF' // 设置横线颜色
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
min:0,
|
|
max:45,
|
|
interval:15,
|
|
axisLabel: {
|
|
fontSize: fitChartSize(12) ,// 设置Y轴刻度字体大小
|
|
color: 'rgba(255,255,255,0.9)',
|
|
},
|
|
splitLine:{
|
|
show:true,
|
|
lineStyle:{
|
|
type:'dashed',
|
|
color:'#00D0FF'
|
|
}
|
|
}
|
|
},
|
|
|
|
series: [
|
|
{
|
|
data: [0, 23, 30, 24, 40, 30, 45,26],
|
|
type: 'line',
|
|
smooth: true,
|
|
label:{
|
|
show:false,//隐藏坐标点
|
|
},
|
|
itemStyle:{
|
|
color:'transparent'
|
|
},
|
|
markLine:{
|
|
symbol:['none','none'],
|
|
label:{show:false}
|
|
},
|
|
|
|
lineStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
{
|
|
offset: 0,
|
|
color: '#7DE7FF'
|
|
},
|
|
{
|
|
offset: 0.5,
|
|
color: '#02F9FA'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#009DFF'
|
|
},
|
|
]),
|
|
width:3,
|
|
}
|
|
}
|
|
]
|
|
|
|
})
|
|
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 lang="scss" scoped>
|
|
.line-chart{
|
|
width:100%;
|
|
height:vh(240);
|
|
}
|
|
.chart-p{
|
|
position:relative;
|
|
.check-label{
|
|
position:absolute;
|
|
right:vw(20);
|
|
top:vh(15);
|
|
span{
|
|
min-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;
|
|
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> |