Skip to content

卡
卡车调度系统
Commit b95a37a6 authored by xxx's avatar xxx
Browse files
Options

1

parent 1fb724cd
Hide whitespace changes
Inline Side-by-side
Showing with 183 additions and 41 deletions
src/components/ezuikit/carsEZUIKitJs.vue
View file @ b95a37a6
......@@ -29,31 +29,60 @@
<div class="aiAnalysisRightViews_1_title">智能AI分析</div>
<div class="aiAnalysisRightViews_1_content">
<div class="aiAnalysisRightViews_1_content_top">
<div :class="aiTabPosition == '今天' ? 'aiAnalysisRightViews_1_content_topH' : 'aiAnalysisRightViews_1_content_topL'">今天</div>
<div :class="aiTabPosition == '近7天' ? 'aiAnalysisRightViews_1_content_topH' : 'aiAnalysisRightViews_1_content_topL'">近7天</div>
<div :class="aiTabPosition == '近30天' ? 'aiAnalysisRightViews_1_content_topH' : 'aiAnalysisRightViews_1_content_topL'">近30天</div>
<div :class="aiTabPosition == '今天' ? 'aiAnalysisRightViews_1_content_topH' : 'aiAnalysisRightViews_1_content_topL'" @click="aiTabPositionFn('今天')">今天</div>
<div :class="aiTabPosition == '近7天' ? 'aiAnalysisRightViews_1_content_topH' : 'aiAnalysisRightViews_1_content_topL'" @click="aiTabPositionFn('近7天')">近7天</div>
<div :class="aiTabPosition == '近30天' ? 'aiAnalysisRightViews_1_content_topH' : 'aiAnalysisRightViews_1_content_topL'" @click="aiTabPositionFn('近30天')">近30天</div>
</div>
<!-- <div class="driverInforViewsStyle">
<div class="driverTotalnumberStyle">
<div>
<div style="text-align: center;font-size:15px;">司机总人数</div>
<div style="text-align: center;font-size:18px;">100</div>
</div>
</div>
<div class="presentDrivernumberStyle">
<div style="color:#3DFBEB;">
<div style="text-align: center;font-size:15px;">当前工作人数</div>
<div style="text-align: center;font-size:18px;">100</div>
</div>
<div style="color:#F7E518;">
<div style="text-align: center;font-size:15px;">当前休息人数</div>
<div style="text-align: center;font-size:18px;">100</div>
</div>
</div>
<div class="alarmViewsStyle1">
<div class="alarmViewsStyle1_left1">
<img src="../../assets/images/cutGraph/zhengzaijinxing1.png">
<div>
<div style="text-align: center;font-size:14px;">AI报警总数</div>
<div style="text-align: center;font-size:18px;">{{alarmData.total}}</div>
</div>
</div>
<div class="alarmViewsStyle1_right1">
<img src="../../assets/images/cutGraph/wanchengle1.png">
<div>
<div style="text-align: center;font-size:14px;">处理数</div>
<div style="text-align: center;font-size:18px;">{{alarmData.handle}}</div>
</div>
<div>
<div style="text-align: center;font-size:14px;">处理率</div>
<div style="text-align: center;font-size:18px;">{{alarmData.handle == 0 ? 0 : parseFloat(alarmData.handle / alarmData.total * 100).toFixed(2)}}%</div>
</div>
</div>
</div>
<div class="echarts1" id="echarts1"></div>
</div>
</div>
<div class="aiAnalysisRightViews_1">
<!-- 报警车辆排行榜 -->
<div class="aiAnalysisRightViews_1_title">报警车辆排行榜</div>
<div class="aiAnalysisRightViews_1_content">
<div id="echarts2" class="echarts2" style="margin-top:1vh"></div>
</div>
</div>
<div class="aiAnalysisRightViews_2">
<!-- 报警车辆信息 -->
<div class="aiAnalysisRightViews_2_title">报警车辆信息</div>
<div class="aiAnalysisRightViews_2_content">
<div class="aiAnalysisRightViews_2_content_rolling">
<dl>
<dt>
<div>车牌号</div>
<div>报警类型</div>
<div>报警时间</div>
<div>查看</div>
</dt>
<dd v-for="(item,index) in aiAnalysisTableData" :key="index">
<div>{{item.vehiIdno}}</div>
<div>{{item.name}}</div>
<div>{{item.fileTimeStr}}</div>
<div style="text-decoration:underline;cursor: pointer;" @click="dianjichakan(item.downloadUrl)">点击查看</div>
</dd>
</dl>
</div>
<div class="driverInforListStyle">
</div> -->
</div>
</div>
</div>
......@@ -170,7 +199,12 @@ export default {
this.noPtz = true;
}
},
aiTabPositionFn(){
aiTabPositionFn(text){
if(text){
this.aiTabPosition = text;
}else{
this.aiTabPosition = '今天';
}
let that = this;
that.alarmData.total = 0;
that.alarmData.handle = 0;
......@@ -892,7 +926,11 @@ export default {
},
legend: {
top: '1%',
left: 'center'
left: 'center',
textStyle:{
color: 'white',
fontSize:12,
},
},
color:['rgb(84,112,198)', 'rgb(145,204,117)','rgb(250,200,88)','rgb(255,150,195)', 'rgb(146,119,255)','rgb(250,200,88)','rgb(84,112,198)', 'rgb(145,204,117)','rgb(250,200,88)','rgb(84,112,198)', 'rgb(145,204,117)','rgb(250,200,88)','rgb(84,112,198)', 'rgb(145,204,117)','rgb(250,200,88)',],
series: [
......@@ -939,7 +977,7 @@ export default {
},
legend: {
textStyle:{
color: 'black',
color: 'white',
fontSize:12,
},
},
......@@ -956,13 +994,13 @@ export default {
axisLabel: {
show: true,
textStyle: {
color: 'black',
color: 'white',
fontSize:14,
}
},
axisLine: {
lineStyle: {
color: 'black',
color: 'white',
width: 1
}
},
......@@ -972,13 +1010,13 @@ export default {
axisLabel: {
show: true,
textStyle: {
color: 'black',
color: 'white',
fontSize:14,
}
},
axisLine: {
lineStyle: {
color: 'black',
color: 'white',
width: 0
}
},
......@@ -994,7 +1032,7 @@ export default {
data: this.echarts2Data.dianhua,
barWidth: 20,
itemStyle: {
color: 'rgb(84,112,198)'
color: '#19D9BE'
},
},
{
......@@ -1007,7 +1045,7 @@ export default {
data: this.echarts2Data.jiashi,
barWidth: 20,
itemStyle: {
color: 'rgb(145,204,117)'
color: '#E5AB49'
},
},
{
......@@ -1020,7 +1058,7 @@ export default {
data: this.echarts2Data.pengzhuang,
barWidth: 20,
itemStyle: {
color: 'rgb(250,200,88)'
color: '#2597FD'
},
},
{
......@@ -1056,6 +1094,10 @@ export default {
noPtzCloseFn(){
this.noPtz = false;
},
//点击查看
dianjichakan(item){
console.log(item);
},
//转换时间格式(yyyy-mm-dd hh:mm:ss)
currentTime1(time){
var date = new Date(time);
......@@ -1211,14 +1253,14 @@ export default {
width: 68vw;
height: 94.5vh;
}
.echarts1{
.video111 .echarts1{
width: 99%;
height: 20vh;
height: 22vh;
overflow: hidden;
}
.echarts2{
.video111 .echarts2{
width: 99%;
height: 27vh;
height: 30vh;
overflow: hidden;
}
......@@ -1260,20 +1302,120 @@ export default {
}
.video111 .aiAnalysisRightViews_1_content_topL{
width: 30%;
height: 3vh;
color: #A9C3FF;
height: 2.5vh;
line-height: 2.5vh;
color: #01EDF7;
font-size: 15px;
text-align: center;
border:1px solid #01A6FC;
border-radius: 5px;
opacity: 0.5;
cursor: pointer;
font-weight: 600;
}
.video111 .aiAnalysisRightViews_1_content_topH{
width: 30%;
height: 3vh;
color: #A9C3FF;
height: 2.5vh;
line-height: 2.5vh;
color: #01EDF7;
font-size: 15px;
border-radius: 5px;
text-align: center;
border:1px solid #01A6FC;
opacity: 1;
cursor: pointer;
font-weight: 600;
}
.video111 .alarmViewsStyle1{
width: 100%;
display: flex;
justify-content: space-evenly;
margin-top: 0.5vh;
}
.video111 .alarmViewsStyle1_left1{
padding-top: 0.5vh;
box-sizing: border-box;
width: 40%;
height: 4.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/sijirenshu1.png');
background-size:100% 100%;
display: flex;
align-items: center;
justify-content: space-evenly;
color: #F8D909;
}
.video111 .alarmViewsStyle1_right1{
padding-top: 0.5vh;
box-sizing: border-box;
width: 55%;
height: 4.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/dangqianrenshu1.png');
background-size:100% 100%;
display: flex;
align-items: center;
justify-content: space-evenly;
color: #01EDF7;
}
.video111 .aiAnalysisRightViews_2{
width: 20vw;
height: 24.5vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.video111 .aiAnalysisRightViews_2_title{
margin-bottom: 5px;
width: 100%;
height: 3.5vh;
background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
background-size:100% 100%;
padding-left: 10px;
box-sizing: border-box;
font-size: 18px;
line-height: 3.5vh;
color: #FAFAFB;
letter-spacing: 1px;
text-shadow: 1px 1px 1px #92CBFF;
}
.video111 .aiAnalysisRightViews_2_content{
width: 100%;
height: 20vh;
}
.video111 .aiAnalysisRightViews_2_content_rolling{
width: 100%;
height: 20vh;
text-align: center;
overflow-y:auto;
scrollbar-width: none;
}
.video111 .aiAnalysisRightViews_2_content_rolling::-webkit-scrollbar {
display: none;
}
.video111 dl{
display:table;
width:100%;
}
.video111 dt{
margin-top: 20px;
display:table-row;
background-color: #274088;
}
.video111 dt>div{
display:table-cell;
padding:5px 3px;
font-size: 16px;
font-weight: 500;
color: rgb(24,228,240);
}
.video111 dd{
display:table-row;
}
.video111 dd>div{
display:table-cell;
padding:7px 1px;
font-size: 14px;
color: #A6F6F9;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment