Skip to content

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

1

parent 5337e20f
Hide whitespace changes
Inline Side-by-side
Showing with 296 additions and 48 deletions
src/assets/js/common.js
View file @ 2fca3f05
......@@ -2472,7 +2472,14 @@ var HttpReq = function(){
params:param,
})
},
//摄像头报警历史记录
apiCameraUrllistQuery: function(param){
return request({
url: '/api/CameraUrl/list',
method: 'get',
params:param,
})
},
......
src/components/ezuikit/carsEZUIKitJs.vue
View file @ 2fca3f05
......@@ -23,34 +23,38 @@
<iframe :src="iframeSrc" class="iframeSingle"></iframe>
</div>
<div class="aiAnalysisViews">
<div class="aiAnalysisViews_Title">智能AI分析</div>
<div style="margin:1vh 0px 0px 0vw;">
<el-radio-group v-model="aiTabPosition" @change="aiTabPositionFn">
<el-radio-button label="今天">今天</el-radio-button>
<el-radio-button label="近7天">近7天</el-radio-button>
<el-radio-button label="近30天">近30天</el-radio-button>
</el-radio-group>
</div>
<div class="aiAnalysisViews_1">
<span>AI报警总数：{{alarmData.total}}</span><span style="margin-left:30px;">处理数：{{alarmData.handle}}</span>
</div>
<div class="aiAnalysisViews_1">处理率：{{alarmData.handle == 0 ? 0 : parseFloat(alarmData.handle / alarmData.total * 100).toFixed(2)}}%</div>
<div id="echarts1" class="echarts1"></div>
<div class="aiAnalysisViews_1">报警车辆排行榜</div>
<div id="echarts2" class="echarts2" style="margin-top:1vh"></div>
<div class="aiAnalysisViews_1">报警车辆信息</div>
<div @mouseout='mouseoutTable' @mouseover='mouseoverTable'>
<el-table :data="aiAnalysisTableData" border style="width: 98%" height="24.5vh">
<el-table-column prop="vehiIdno" label="车牌号" align="center"></el-table-column>
<el-table-column prop="alarmTypeText" label="报警类型" align="center"></el-table-column>
<el-table-column prop="fileTimeStr" label="报警时间" align="center"></el-table-column>
<el-table-column label="查看" align="center">
<template slot-scope="scope">
<el-image style="width: 70px; height: 50px" :src="scope.row.downloadUrl" :preview-src-list="[scope.row.downloadUrl]"></el-image>
</template>
</el-table-column>
</el-table>
<div class="aiAnalysisRightViews">
<div class="aiAnalysisRightViews_1">
<!-- 智能AI分析 -->
<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>
<!-- <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>
<div class="driverInforListStyle">
</div> -->
</div>
</div>
</div>
......@@ -125,7 +129,7 @@ export default {
that.aiTabPositionFn();
})
})
this.mouseoutTable();
//this.mouseoutTable();
},
methods: {
getCode() {
......@@ -1137,6 +1141,7 @@ export default {
};
</script>
<style>
.el-header,
.el-footer {
......@@ -1206,24 +1211,6 @@ export default {
width: 68vw;
height: 94.5vh;
}
.aiAnalysisViews{
width: 20vw;
height: 94.5vh;
background-color: white;
padding: 1vh 0px 0px 1vh;
box-sizing: border-box;
border-left: 1px solid gainsboro;
z-index: 3;
}
.aiAnalysisViews_Title{
font-size: 24px;
font-weight: 600;
}
.aiAnalysisViews_1{
margin-top: 1vh;
font-size: 18px;
font-weight: 600;
}
.echarts1{
width: 99%;
height: 20vh;
......@@ -1234,4 +1221,59 @@ export default {
height: 27vh;
overflow: hidden;
}
.video111 .aiAnalysisRightViews{
width: 20vw;
height: 94.5vh;
overflow: hidden;
z-index: 3;
}
.video111 .aiAnalysisRightViews_1{
width: 20vw;
height: 35vh;
background-color: rgba(32,42,67,0.95);
padding: 5px 7px;
box-sizing: border-box;
overflow: hidden;
}
.video111 .aiAnalysisRightViews_1_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_1_content{
width: 100%;
height: 31.5vh;
}
.video111 .aiAnalysisRightViews_1_content_top{
display: flex;
justify-content: space-evenly;
}
.video111 .aiAnalysisRightViews_1_content_topL{
width: 30%;
height: 3vh;
color: #A9C3FF;
font-size: 15px;
text-align: center;
border:1px solid #01A6FC;
opacity: 0.5;
}
.video111 .aiAnalysisRightViews_1_content_topH{
width: 30%;
height: 3vh;
color: #A9C3FF;
font-size: 15px;
text-align: center;
border:1px solid #01A6FC;
opacity: 1;
}
</style>
src/views/monitoringManagement/videoAlarmList/index.vue 0 → 100644
View file @ 2fca3f05
<template>
<div class="common-page device-manage">
<div class="option page-row">
<!--工具栏-->
<div class="head-container">
<!-- 搜索 -->
<label class="el-form-item-label" style="font-weight: 500;">车牌号</label>
<el-input v-model="query.vehiIdno" clearable size="small" placeholder="请输入车牌号" style="width:180px;"/>
<label class="el-form-item-label" style="font-weight: 500;">报警类型</label>
<el-select v-model="query.name" placeholder="请选择报警类型" style="width:180px;">
<el-option label="接打电话" value="620,621"></el-option>
<el-option label="分神驾驶" value="624,625"></el-option>
<el-option label="前向碰撞" value="600,601"></el-option>
<el-option label="疲劳驾驶" value="172,190"></el-option>
<el-option label="接近报警" value="430,431,432,433"></el-option>
</el-select>
<label class="el-form-item-label" style="font-weight: 500;">时间范围</label>
<el-date-picker v-model="query.startTime" type="datetime" placeholder="选择开始时间"></el-date-picker>
<el-date-picker v-model="query.endTime" type="datetime" placeholder="选择结束时间"></el-date-picker>
<el-button size="mini" type="success" icon="el-icon-search" @click="toSearch">搜索</el-button>
<el-button size="mini" icon="el-icon-refresh" @click="clearLimit">重置</el-button>
</div>
</div>
<!-- 表格 -->
<div class="panel-bottom page-row">
<h3>视频AI报警历史</h3>
<div class="ctin-box">
<div class="content-within">
<div class="content-fix">
<div class="content">
<el-table :data="tableData" v-loading="loading" border style="width:auto" :row-class-name="tableRowClassName" height="66vh">
<el-table-column prop="vehiIdno" label="车牌号" align="center"></el-table-column>
<el-table-column prop="road" label="所属车队" align="center"></el-table-column>
<el-table-column prop="name" label="报警类型" align="center"></el-table-column>
<el-table-column prop="cardescribe" label="报警时间" align="center"></el-table-column>
<el-table-column label="查看" align="center">
<template slot-scope="scope">
<el-image style="width: 70px; height: 50px" :src="scope.row.downloadUrl" :preview-src-list="[scope.row.downloadUrl]"></el-image>
</template>
</el-table-column>
<el-table-column prop="gongsi" label="解除报警时间" align="center"></el-table-column>
<el-table-column prop="weixiu" label="处理人" align="center"></el-table-column>
<el-table-column label="操作" align="center" fixed="right">
<template slot-scope="scope">
<el-button size="mini" type="primary" @click="relieveAlarm(scope.row)">解除报警</el-button>
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<el-pagination :total="total" :current-page="page" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" />
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { Tools, HttpReq, Dates} from '@/assets/js/common.js';
export default {
name: 'VideoAlarmList',
data() {
return {
loading: false,
page: 1,
size: 10,
total: 0,
query:{},
tableData: [],
carInformationData:[],
}
},
mounted() {
this.$nextTick(() => {
this.loadData();
})
},
methods: {
loadData() {
var param = this.query;
param.page = this.page - 1;
param.size = this.size;
if(this.query.startTime){
param.startTime = Date.parse(this.query.startTime);
}
if(this.query.endTime){
param.endTime = Date.parse(this.query.endTime);
}
this.$nextTick(()=>{
//获取车辆信息(主要用来匹配车队)
HttpReq.truckDispatching.carInformationQuery({size:9999}).then((res1) => {
if(res1.code == 200){
this.carInformationData = res1.data.content;
//获取报警历史数据
HttpReq.truckDispatching.apiCameraUrllistQuery(param).then((res2) => {
if(res2.code == 200){
let lastData1 = [];
res2.data.forEach((item2,index)=>{
res1.data.content.forEach((item1,index1)=>{
// if(item2.vehiIdno == item1.){
// }
})
})
}
})
//获取报警历史数据总数
HttpReq.truckDispatching.apiCameraUrllistQuery({size:99999,page:0}).then((res3) => {
if(res3.code == 200){
this.total = res3.data.length;
}
})
}
})
})
},
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
},
//点击搜索
toSearch() {
this.page = 1;
this.loadData();
},
//重置搜索
clearLimit(){
this.query = {};
this.loadData();
},
pageChange(e) {
this.page = e
this.loadData()
},
sizeChange(e) {
this.page = 1
this.size = e
this.loadData()
},
//解除报警
relieveAlarm(item){
console.log(item);
}
},
}
</script>
<style rel="stylesheet/scss" lang="scss" scope>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
.device-manage{
.panel-bottom{
.el-button{margin:2px 0;padding:6px 15px;font-size:14px;}
.btn-groub2{
display:inline-block;
.el-button{margin:2px 0;padding:6px 15px;font-size:15px;}
.el-button--warning {
background-color: #e6a23c;
border-color: #e6a23c;
}
.el-button--warning:focus,.el-button--warning:hover{background:#ebb563;border-color:#ebb563;}
}
}
}
.ecahrt1-dialog{
display:flex;align-items:center;
.el-dialog{
margin-top:inherit !important;display:table !important;width:fit-content;
.el-form-item{margin-right:0;}
}
.el-dialog__header{height:0;padding:0;display:block;}
.form-body{
border:1px solid #999;width:800px;height:500px;position:relative;
>div{position:absolute;top:0;left:0;height:100%;width:100%;}
}
}
</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