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 @@ ...@@ -29,31 +29,60 @@
<div class="aiAnalysisRightViews_1_title">智能AI分析</div> <div class="aiAnalysisRightViews_1_title">智能AI分析</div>
<div class="aiAnalysisRightViews_1_content"> <div class="aiAnalysisRightViews_1_content">
<div class="aiAnalysisRightViews_1_content_top"> <div class="aiAnalysisRightViews_1_content_top">
<div :class="aiTabPosition == '今天' ? 'aiAnalysisRightViews_1_content_topH' : 'aiAnalysisRightViews_1_content_topL'">今天</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'">近7天</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'">近30天</div> <div :class="aiTabPosition == '近30天' ? 'aiAnalysisRightViews_1_content_topH' : 'aiAnalysisRightViews_1_content_topL'" @click="aiTabPositionFn('近30天')">近30天</div>
</div> </div>
<!-- <div class="driverInforViewsStyle"> <div class="alarmViewsStyle1">
<div class="driverTotalnumberStyle"> <div class="alarmViewsStyle1_left1">
<div> <img src="../../assets/images/cutGraph/zhengzaijinxing1.png">
<div style="text-align: center;font-size:15px;">司机总人数</div> <div>
<div style="text-align: center;font-size:18px;">100</div> <div style="text-align: center;font-size:14px;">AI报警总数</div>
</div> <div style="text-align: center;font-size:18px;">{{alarmData.total}}</div>
</div> </div>
<div class="presentDrivernumberStyle"> </div>
<div style="color:#3DFBEB;"> <div class="alarmViewsStyle1_right1">
<div style="text-align: center;font-size:15px;">当前工作人数</div> <img src="../../assets/images/cutGraph/wanchengle1.png">
<div style="text-align: center;font-size:18px;">100</div> <div>
</div> <div style="text-align: center;font-size:14px;">处理数</div>
<div style="color:#F7E518;"> <div style="text-align: center;font-size:18px;">{{alarmData.handle}}</div>
<div style="text-align: center;font-size:15px;">当前休息人数</div> </div>
<div style="text-align: center;font-size:18px;">100</div> <div>
</div> <div style="text-align: center;font-size:14px;">处理率</div>
</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>
<div class="driverInforListStyle">
</div> -->
</div> </div>
</div> </div>
</div> </div>
...@@ -170,7 +199,12 @@ export default { ...@@ -170,7 +199,12 @@ export default {
this.noPtz = true; this.noPtz = true;
} }
}, },
aiTabPositionFn(){ aiTabPositionFn(text){
if(text){
this.aiTabPosition = text;
}else{
this.aiTabPosition = '今天';
}
let that = this; let that = this;
that.alarmData.total = 0; that.alarmData.total = 0;
that.alarmData.handle = 0; that.alarmData.handle = 0;
...@@ -892,7 +926,11 @@ export default { ...@@ -892,7 +926,11 @@ export default {
}, },
legend: { legend: {
top: '1%', 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)',], 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: [ series: [
...@@ -939,7 +977,7 @@ export default { ...@@ -939,7 +977,7 @@ export default {
}, },
legend: { legend: {
textStyle:{ textStyle:{
color: 'black', color: 'white',
fontSize:12, fontSize:12,
}, },
}, },
...@@ -956,13 +994,13 @@ export default { ...@@ -956,13 +994,13 @@ export default {
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
color: 'black', color: 'white',
fontSize:14, fontSize:14,
} }
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'black', color: 'white',
width: 1 width: 1
} }
}, },
...@@ -972,13 +1010,13 @@ export default { ...@@ -972,13 +1010,13 @@ export default {
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
color: 'black', color: 'white',
fontSize:14, fontSize:14,
} }
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'black', color: 'white',
width: 0 width: 0
} }
}, },
...@@ -994,7 +1032,7 @@ export default { ...@@ -994,7 +1032,7 @@ export default {
data: this.echarts2Data.dianhua, data: this.echarts2Data.dianhua,
barWidth: 20, barWidth: 20,
itemStyle: { itemStyle: {
color: 'rgb(84,112,198)' color: '#19D9BE'
}, },
}, },
{ {
...@@ -1007,7 +1045,7 @@ export default { ...@@ -1007,7 +1045,7 @@ export default {
data: this.echarts2Data.jiashi, data: this.echarts2Data.jiashi,
barWidth: 20, barWidth: 20,
itemStyle: { itemStyle: {
color: 'rgb(145,204,117)' color: '#E5AB49'
}, },
}, },
{ {
...@@ -1020,7 +1058,7 @@ export default { ...@@ -1020,7 +1058,7 @@ export default {
data: this.echarts2Data.pengzhuang, data: this.echarts2Data.pengzhuang,
barWidth: 20, barWidth: 20,
itemStyle: { itemStyle: {
color: 'rgb(250,200,88)' color: '#2597FD'
}, },
}, },
{ {
...@@ -1056,6 +1094,10 @@ export default { ...@@ -1056,6 +1094,10 @@ export default {
noPtzCloseFn(){ noPtzCloseFn(){
this.noPtz = false; this.noPtz = false;
}, },
//点击查看
dianjichakan(item){
console.log(item);
},
//转换时间格式(yyyy-mm-dd hh:mm:ss) //转换时间格式(yyyy-mm-dd hh:mm:ss)
currentTime1(time){ currentTime1(time){
var date = new Date(time); var date = new Date(time);
...@@ -1211,14 +1253,14 @@ export default { ...@@ -1211,14 +1253,14 @@ export default {
width: 68vw; width: 68vw;
height: 94.5vh; height: 94.5vh;
} }
.echarts1{ .video111 .echarts1{
width: 99%; width: 99%;
height: 20vh; height: 22vh;
overflow: hidden; overflow: hidden;
} }
.echarts2{ .video111 .echarts2{
width: 99%; width: 99%;
height: 27vh; height: 30vh;
overflow: hidden; overflow: hidden;
} }
...@@ -1260,20 +1302,120 @@ export default { ...@@ -1260,20 +1302,120 @@ export default {
} }
.video111 .aiAnalysisRightViews_1_content_topL{ .video111 .aiAnalysisRightViews_1_content_topL{
width: 30%; width: 30%;
height: 3vh; height: 2.5vh;
color: #A9C3FF; line-height: 2.5vh;
color: #01EDF7;
font-size: 15px; font-size: 15px;
text-align: center; text-align: center;
border:1px solid #01A6FC; border:1px solid #01A6FC;
border-radius: 5px;
opacity: 0.5; opacity: 0.5;
cursor: pointer;
font-weight: 600;
} }
.video111 .aiAnalysisRightViews_1_content_topH{ .video111 .aiAnalysisRightViews_1_content_topH{
width: 30%; width: 30%;
height: 3vh; height: 2.5vh;
color: #A9C3FF; line-height: 2.5vh;
color: #01EDF7;
font-size: 15px; font-size: 15px;
border-radius: 5px;
text-align: center; text-align: center;
border:1px solid #01A6FC; border:1px solid #01A6FC;
opacity: 1; 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> </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