Skip to content

卡
卡车调度系统
Commit 02f74f35 authored by caicaicai's avatar caicaicai
Browse files
Options

修改

parent 78c1dc5a
Show whitespace changes
Inline Side-by-side
Showing with 206 additions and 16 deletions
src/assets/js/common.js
View file @ 02f74f35
......@@ -1821,6 +1821,14 @@ var HttpReq = function(){
params:param,
})
},
//大屏——车辆信息弹框——车辆实时数据
screenCarInforCarRealQuery: function(param){
return request({
url: '/api/CarReal',
method: 'get',
params:param,
})
},
......
src/views/MLargeScreen/components/carSpecificInfor/index.vue
View file @ 02f74f35
<template>
<div class="carSpecificInforView" v-if="whetherShow">
<!-- 关闭按钮 -->
<img src="../../../../assets/images/cutGraph/close.png" class="closeStyle" @click="closeFn()">
<!-- 车辆信息标题 -->
<div class="smallTitleStyle">
<div>
<img src="../../../../assets/images/cutGraph/fuxiaobiaotititle.png" height="14" width="30">
<div class="smallTitleStyle_text">车辆信息</div>
</div>
<div style="color:#CBF6F8;cursor: pointer;">
<span class="el-icon-camera-solid" style="font-size:20px;"></span>
<span style="font-size:17px;margin-left:3px;">查看监控</span>
</div>
</div>
<!-- 车辆信息内容 -->
<div class="carSpecificInfor_son1">
<div>
<div>车辆名称：</div>
<div class="contentInput">{{carInformationData.name}}</div>
</div>
<div>
<div>车辆牌号：</div>
<div class="contentInput">{{carInformationData.number}}</div>
</div>
<div>
<div>车辆年限：</div>
<div class="contentInput">{{carInformationData.year}}年</div>
</div>
<div>
<div>车辆状态：</div>
<div class="contentInput">{{carInformationData.status == '0' ? '正常' : carInformationData.status == '1' ? '故障' : carInformationData.status == '2' ? '停用' : ''}}</div>
</div>
<div>
<div>保养时间：</div>
<div class="contentInput">{{carInformationData.time}}</div>
</div>
<div>
<div>超速预警值：</div>
<div class="contentInput">{{carInformationData.alarm}}Km/h</div>
</div>
<div>
<div>终端设备编号：</div>
<div class="contentInput">{{carInformationData.plant}}</div>
</div>
</div>
<!-- 车辆实时数据标题 -->
<div class="smallTitleStyle" style="margin-top:10px;">
<div>
<img src="../../../../assets/images/cutGraph/fuxiaobiaotititle.png" height="14" width="30">
<div class="smallTitleStyle_text">车辆实时数据</div>
</div>
<div style="color:#CBF6F8;cursor: pointer;">
<span style="font-size:17px;">查看车辆轨迹回放</span>
</div>
</div>
<!-- 车辆实时数据内容 -->
<div class="carSpecificInfor_son1">
<div>
<div>运行状态：</div>
<div class="contentInput">{{carRealTimeData.status}}</div>
</div>
<div>
<div>运载种类：</div>
<div class="contentInput">{{carRealTimeData.carclass}}</div>
</div>
<div>
<div>运行时长：</div>
<div class="contentInput">{{carRealTimeData.runTime}}</div>
</div>
<div>
<div>开始时间：</div>
<div class="contentInput">{{carRealTimeData.startTime}}</div>
</div>
<div>
<div>运输效率：</div>
<div class="contentInput">{{carRealTimeData.effic}}</div>
</div>
<div>
<div>当日行驶里程：</div>
<div class="contentInput">{{carRealTimeData.mil}}</div>
</div>
<div>
<div>车次：</div>
<div class="contentInput">{{carRealTimeData.carnum}}</div>
</div>
</div>
<!-- 司机信息标题 -->
<div class="smallTitleStyle" style="margin-top:10px;">
<div>
<img src="../../../../assets/images/cutGraph/fuxiaobiaotititle.png" height="14" width="30">
<div class="smallTitleStyle_text">司机信息</div>
</div>
</div>
<!-- 司机信息内容 -->
<div class="carSpecificInfor_son1">
<div>
<div>司机姓名：</div>
<div class="contentInput">{{driverInformationData.name}}</div>
</div>
<div>
<div>用户名：</div>
<div class="contentInput">{{driverInformationData.userName}}</div>
</div>
<div>
<div>电话：</div>
<div class="contentInput">{{driverInformationData.phone}}</div>
</div>
<div>
<div>部门：</div>
<div class="contentInput">{{driverInformationData.depart}}</div>
</div>
<div>
<div>岗位：</div>
<div class="contentInput">{{driverInformationData.post}}</div>
</div>
</div>
</div>
</template>
......@@ -11,21 +125,44 @@ export default {
data() {
return {
whetherShow:false,
carText:'',
driverText:'',
carInformationData:{},
carRealTimeData:{},
driverInformationData:{},
}
},
mounted() {
},
mounted() {},
methods: {
loadData(){
loadData(car,driver){
this.whetherShow = true;
// this.$nextTick(()=>{
// HttpReq.truckDispatching.screenTitleMenuQuery({size:9999,status:1}).then((res) => {
this.carText = car;
this.driverText = driver;
// })
// })
this.$nextTick(()=>{
//获取车辆信息
HttpReq.truckDispatching.carInformationQuery({size:1,name:this.carText}).then((res) => {
if(res.code == 200){
this.carInformationData = res.data.content[0];
}
})
//获取车辆实时数据
HttpReq.truckDispatching.screenCarInforCarRealQuery({size:1,carname:this.carText}).then((res) => {
if(res.code == 200){
this.carRealTimeData = res.data.content[0];
}
})
//获取司机人员信息
HttpReq.truckDispatching.driverManagementPCQuery({size:1,userName:this.driverText}).then((res) => {
if(res.code == 200){
this.driverInformationData = res.data.content[0];
}
})
})
},
closeFn(){
this.whetherShow = false;
}
},
}
......@@ -36,12 +173,49 @@ export default {
position: absolute;
top: 7vh;
left: 25vw;
width: 23vw;
height: 85vh;
width: 25vw;
height: 90vh;
background:no-repeat center center url('~@/assets/images/cutGraph/guzhangshenbankuang1.png');
background-size:100% 100%;
padding: 5px 7px;
padding: 1.5vh 3vw 0px 1vw;
box-sizing: border-box;
overflow: hidden;
}
.closeStyle{
position: absolute;
top: 4vh;
right: 1vw;
cursor: pointer;
}
.smallTitleStyle{
display: flex;
justify-content: space-between;
}
.smallTitleStyle>div{
display: flex;
justify-content: space-between;
align-items: center;
}
.smallTitleStyle_text{
margin-left: 5px;
font-size: 18px;
color: skyblue;
}
.carSpecificInfor_son1>div{
margin-top: 5px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 17px;
color: #01F6F9;
}
.contentInput{
height: 3.5vh;
width: 12.5vw;
border: 2px solid #01F6F9;
border-radius: 5px;
line-height: 3.3vh;
padding: 0px 10px;
box-sizing: border-box;
}
</style>
\ No newline at end of file
src/views/MLargeScreen/index.vue
View file @ 02f74f35
......@@ -57,6 +57,10 @@ export default {
//标题菜单数据
topSmallTitleLeftData:[],
topSmallTitleRightData:[],
//车牌号
carName:'4001',
//司机用户名
driverUserName:'lisan',
}
},
mounted() {
......@@ -101,12 +105,16 @@ export default {
this.$refs.dataAnalysisMethod.loadData();
}
if(item.componentName == 'backstage'){
console.log('backstage');
let routeUrl = this.$router.resolve({
path: "/dashboard",
});
window.open(routeUrl.href, '_blank');
}
},
//车辆信息弹框
showSpecificInforFn(){
this.selectModule = 'carSpecificInfor';
this.$refs.carSpecificInforMethod.loadData();
this.$refs.carSpecificInforMethod.loadData(this.carName,this.driverUserName);
},
//获取当前时间
setNowTimes () {
......
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