528 lines
12 KiB
Vue
528 lines
12 KiB
Vue
<template>
|
|
<!-- 安全检测 -->
|
|
<div class="box-detection">
|
|
<!-- 地图 -->
|
|
<!-- <div class="detection-top"></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="optionBar" autoresize />
|
|
<!-- <v-chart class="chart" :option="option1" autoresize /> -->
|
|
</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 h-flex">
|
|
<div class="left">
|
|
<v-chart class="line-chart" :option="optionLine" autoresize />
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import * as echarts from 'echarts/core';
|
|
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 { BarChart } from 'echarts/charts';
|
|
import { fitChartSize } from '@/utils/dataUtil'
|
|
import {
|
|
TitleComponent,
|
|
TooltipComponent,
|
|
LegendComponent,
|
|
} from 'echarts/components';
|
|
import VChart, { THEME_KEY } from 'vue-echarts';
|
|
import { ref, provide } from 'vue';
|
|
|
|
use([
|
|
LineChart,
|
|
GaugeChart,
|
|
CanvasRenderer,
|
|
PieChart,
|
|
BarChart,
|
|
TitleComponent,
|
|
TooltipComponent,
|
|
LegendComponent,
|
|
]);
|
|
|
|
provide(THEME_KEY, 'dark');
|
|
const option1 = ref({
|
|
backgroundColor:'transparent',
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
type: 'scroll',
|
|
orient: 'vertical',
|
|
right: 30,
|
|
top: 30,
|
|
bottom: 20,
|
|
itemWidth:5,
|
|
itemHeight:5,
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Access From',
|
|
type: 'pie',
|
|
left:-100,
|
|
top:-30,
|
|
// 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);
|
|
}
|
|
.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;
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |