Skip to content

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

修改

parent 7a749835
Hide whitespace changes
Inline Side-by-side
Showing with 37 additions and 246 deletions
src/views/MLargeScreen/components/carSpecificInfor/index.vue deleted 100644 → 0
View file @ 7a749835
<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>
<script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
export default {
data() {
return {
whetherShow:false,
carText:'',
driverText:'',
carInformationData:{},
carRealTimeData:{},
driverInformationData:{},
}
},
mounted() {},
methods: {
loadData(car,driver){
this.whetherShow = true;
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;
}
},
}
</script>
<style scope>
.carSpecificInforView{
position: absolute;
z-index: 1;
top: 1vh;
left: 25vw;
width: 25vw;
height: 90vh;
background:no-repeat center center url('~@/assets/images/cutGraph/guzhangshenbankuang1.png');
background-size:100% 100%;
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 @ 9d19d46f
...@@ -27,18 +27,22 @@ ...@@ -27,18 +27,22 @@
<carManagement ref="carManagementMethod" v-show="selectModule == 'carManagement'"/> <carManagement ref="carManagementMethod" v-show="selectModule == 'carManagement'"/>
<intelligentSchedul ref="intelligentSchedulMethod" v-show="selectModule == 'intelligentSchedul'"/> <intelligentSchedul ref="intelligentSchedulMethod" v-show="selectModule == 'intelligentSchedul'"/>
<dataAnalysis ref="dataAnalysisMethod" v-show="selectModule == 'dataAnalysis'"/> <dataAnalysis ref="dataAnalysisMethod" v-show="selectModule == 'dataAnalysis'"/>
<carSpecificInfor ref="carSpecificInforMethod" v-show="selectModule == 'carSpecificInfor'"/>
</div> </div>
<!-- 监控区域 --> <!-- 监控区域 -->
<div class="jiankongView"> <div class="jiankongView">
<carsEZUIKitJs v-if="carsEZUIKitJsShow"/> <carsEZUIKitJs v-if="carsEZUIKitJsShow"/>
<kaungEZUIKitJs v-if="kaungEZUIKitJsShow"/> <kaungEZUIKitJs v-if="kaungEZUIKitJsShow"/>
</div> </div>
<!-- 车事例 --> <!-- 嵌入三维地图页面 -->
<!-- <div class="carExample" @click="showSpecificInforFn()">
<span class="el-icon-location"></span>
</div> -->
<iframe src="http://8.143.203.103:9092/#/Index" frameborder="0" class="mapcontainer1"></iframe> <iframe src="http://8.143.203.103:9092/#/Index" frameborder="0" class="mapcontainer1"></iframe>
<!-- 单个车辆视频监控 -->
<div class="monitorCover1" v-if="monitorCover1Show">
<div class="monitorCover1_closePic"></div>
<div class="monitorCover1_Video">
<video id="monitorCover1Id" width="1300" height="700" muted autoplay></video>
</div>
</div>
</div> </div>
</template> </template>
...@@ -48,17 +52,16 @@ import dataScreening from './components/dataScreening/index.vue' //数据总览 ...@@ -48,17 +52,16 @@ import dataScreening from './components/dataScreening/index.vue' //数据总览
import carManagement from './components/carManagement/index.vue' //车辆管理 import carManagement from './components/carManagement/index.vue' //车辆管理
import intelligentSchedul from './components/intelligentSchedul/index.vue' //智能调度 import intelligentSchedul from './components/intelligentSchedul/index.vue' //智能调度
import dataAnalysis from './components/dataAnalysis/index.vue' //数据分析 import dataAnalysis from './components/dataAnalysis/index.vue' //数据分析
import carSpecificInfor from './components/carSpecificInfor/index.vue' //车辆信息弹框
import carsEZUIKitJs from '../../components/ezuikit/carsEZUIKitJs.vue'//车辆监控 import carsEZUIKitJs from '../../components/ezuikit/carsEZUIKitJs.vue'//车辆监控
import kaungEZUIKitJs from '../../components/ezuikit/EZUIKitJs.vue'//矿山监控 import kaungEZUIKitJs from '../../components/ezuikit/EZUIKitJs.vue'//矿山监控
var noPtzhls1 = null;
export default { export default {
components: { components: {
dataScreening, dataScreening,
carManagement, carManagement,
intelligentSchedul, intelligentSchedul,
dataAnalysis, dataAnalysis,
carSpecificInfor,
carsEZUIKitJs, carsEZUIKitJs,
kaungEZUIKitJs, kaungEZUIKitJs,
}, },
...@@ -79,14 +82,12 @@ export default { ...@@ -79,14 +82,12 @@ export default {
//标题菜单数据 //标题菜单数据
topSmallTitleLeftData:[], topSmallTitleLeftData:[],
topSmallTitleRightData:[], topSmallTitleRightData:[],
//车牌号
carName:'4001',
//司机用户名
driverUserName:'lisan',
//监控选择 //监控选择
videoSelect1:false, videoSelect1:false,
carsEZUIKitJsShow:false, carsEZUIKitJsShow:false,
kaungEZUIKitJsShow:false, kaungEZUIKitJsShow:false,
//单个车辆视频展示
monitorCover1Show:false,
} }
}, },
mounted() { mounted() {
...@@ -242,19 +243,6 @@ export default { ...@@ -242,19 +243,6 @@ export default {
this.kaungEZUIKitJsShow = false; this.kaungEZUIKitJsShow = false;
this.carsEZUIKitJsShow = true; this.carsEZUIKitJsShow = true;
}, },
//车辆信息弹框
showSpecificInforFn(){
this.selectModule = 'carSpecificInfor';
this.$refs.carSpecificInforMethod.loadData(this.carName,this.driverUserName);
this.isShow.dataScreening = false;
this.isShow.carManagement = false;
this.isShow.intelligentSchedul = false;
this.isShow.dataAnalysis = false;
this.$refs.dataScreeningMethod.loadData(false);
this.$refs.carManagementMethod.loadData(false);
this.$refs.intelligentSchedulMethod.loadData(false);
this.$refs.dataAnalysisMethod.loadData(false);
},
//获取当前时间 //获取当前时间
setNowTimes () { setNowTimes () {
let myDate = new Date(); let myDate = new Date();
...@@ -275,6 +263,13 @@ export default { ...@@ -275,6 +263,13 @@ export default {
if(event.data.data.hasOwnProperty("url")){ if(event.data.data.hasOwnProperty("url")){
if(event.data.data.url == '监控'){ if(event.data.data.url == '监控'){
console.log('监控',event.data.data.data); console.log('监控',event.data.data.data);
let monitorCover1Id = document.getElementById('monitorCover1Id');
noPtzhls1 = new Hls();
noPtzhls1.loadSource('http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8');
noPtzhls1.attachMedia(monitorCover1Id);
noPtzhls1.on(Hls.Events.MANIFEST_PARSED,function() {
monitorCover1Id.play();
});
}else if(event.data.data.url == '轨迹回放'){ }else if(event.data.data.url == '轨迹回放'){
console.log('轨迹回放',event.data.data.data); console.log('轨迹回放',event.data.data.data);
} }
...@@ -386,4 +381,22 @@ export default { ...@@ -386,4 +381,22 @@ export default {
cursor: pointer; cursor: pointer;
z-index: 1; z-index: 1;
} }
.monitorCover1{
position: fixed;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
z-index: 1000;
background-color: rgba(0,0,0,0.3);
}
.monitorCover1_closePic{
width: 7vh;
height: 7vh;
background:no-repeat center center url('~@/assets/images/cutGraph/close2.png');
background-size:100% 100%;
position: absolute;
top: 6vh;
right: 3vw;
}
</style> </style>
\ No newline at end of file
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