Skip to content

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

1

parent 45e18ffb
Show whitespace changes
Inline Side-by-side
Showing with 341 additions and 11 deletions
src/views/MLargeScreen/components/smallComponents/DPcomputer16.vue
View file @ b52fddb1
......@@ -90,10 +90,57 @@
<slot name="bottom"></slot>
</div>
<!-- 语音区域组件 -->
<div class="videoListView" v-if="dialogVisible">
<div class="videoListView_title">{{dialogTitle}}</div>
<div style="color:white;font-size:14px;margin-bottom:1vh;">若无选中车辆，默认对所有车辆发起</div>
<div class="videoListView_content">
<div v-for="(item,index) in tanchuCarListArray" :label="item" :key="index">{{item.number}}</div>
</div>
<div style="margin-top:10px;display: flex;justify-content: space-evenly;flex-wrap: wrap;">
<el-button type="primary" style="height:3.5vh;width:40%;font-size: 16px;" @click="recStart">录制语音</el-button>
<el-button type="primary" style="height:3.5vh;width:40%;font-size: 16px;" @click="recStop" >结束语音</el-button>
</div>
<div style="margin-top:10px;display: flex;justify-content: space-evenly;flex-wrap: wrap;">
<el-button type="primary" style="height:3.5vh;width:40%;font-size: 16px;" @click="recUploadLast">上传语音</el-button>
<el-button style="height:3.5vh;width:40%;font-size: 16px;" @click="quxiaoVideo()">取消语音</el-button>
</div>
</div>
<!-- 人工调度组件 -->
<div class="peopleScheAssembly" v-if="peopleScheAssemblyShow">
<div style="color:white;font-size:14px;margin-bottom:1vh;font-size: 18px;font-weight: 600;">人工调度详情</div>
<el-form size="small" label-width="100px" :rules="rules">
<el-form-item label="装载区" style="display: inline-block;" class="des1">
<el-cascader v-model="zaDestination" :options="caiquData1"></el-cascader>
</el-form-item>
<el-form-item label="卸点区" style="display: inline-block;" class="des1">
<el-select v-model="xzDestination" placeholder="请选择卸点区" style="width:200px;">
<el-option v-for="(obj,index) in xiequData1" :label="obj.name" :value="obj.name" :key="index"></el-option>
</el-select>
</el-form-item>
<el-form-item label="时长" style="display: inline-block;" class="des1">
<el-select v-model="desform.duration" placeholder="请选择调度时长" style="width:200px;">
<el-option label="单次" value="单次"></el-option>
<el-option label="一天" value="一天"></el-option>
<el-option label="长期" value="长期"></el-option>
</el-select>
</el-form-item>
<el-form-item label="截止日期" style="display: inline-block;" class="des1">
<el-date-picker v-model="desform.endTime" type="datetime" placeholder="选择日期时间" style="width:200px;" :disabled='desform.duration != "长期" '></el-date-picker>
</el-form-item>
<el-form-item label="说明" style="display: inline-block;" class="des1">
<el-input type="textarea" v-model="desform.carshow" style="width:200px;"></el-input>
</el-form-item>
</el-form>
<div class="peopleScheAssemblyBtns">
<el-button type="primary" style="height:40px;width:100px;font-size: 16px;" round @click="peopleScheAssemblyFn()">确定</el-button>
<el-button style="height:40px;width:100px;font-size: 16px;" round @click="peopleScheAssemblyCloseFn()">取消</el-button>
</div>
</div>
</div>
</template>
......@@ -176,15 +223,20 @@ export default {
})
//车辆信息
this.loadData2();
//开启长连接
this.loadData3();
//获取区域信息
this.loadData4();
//定时器
// this.DPcomputer16BoxTimer = setInterval(() => {
// //车辆信息
// this.loadData2();
// },10000)
this.DPcomputer16BoxTimer = setInterval(() => {
//车辆信息
this.loadData2();
},10000)
})
//开启录音
this.recOpen();
},
//获取车辆信息
loadData2() {
......@@ -243,14 +295,10 @@ export default {
};
})
},
//关闭心跳以及关闭长连接
//关闭长连接
xintiaoCloseFn(){
//页面销毁时关闭长连接
this.websocketclose();
//关闭心跳
if(this.heartbeatTimer) {
clearInterval(this.heartbeatTimer);
}
},
//搜索车辆
toSearchFn(){
......@@ -293,6 +341,146 @@ export default {
this.dialogVisible = false;
this.tanchuCarListArray = [];
},
//取消发送语音
quxiaoVideo(){
this.dialogVisible = false;
this.tanchuCarListArray = [];
this.selectCarRadioArray = [];
},
//发起人工调度
peopleScheAssemblyFn(){
if(JSON.stringify(this.selectCarRadioArray) == '[]'){
this.$notify({
title: '请选择调度车辆！',
type: 'warning',
duration: 2500
});
return
}
if(JSON.stringify(this.zaDestination) == '[]' && !this.xzDestination){
this.$notify({
title: '请选择调度装载区或卸点区！',
type: 'warning',
duration: 2500
});
return
}
if(!this.desform.duration){
this.$notify({
title: '请选择调度时长！',
type: 'warning',
duration: 2500
});
return
}
if(this.desform.duration == '长期' && !this.desform.endTime){
this.$notify({
title: '请选择调度截止日期！',
type: 'warning',
duration: 2500
});
return
}
this.selectCarRadioArray.forEach((item,index)=>{
if(JSON.stringify(this.zaDestination) != '[]'){
let query1 = {...this.desform};
query1.carNo = item.number;
query1.flag = 1;
query1.destination = this.zaDestination[0] + (this.zaDestination[1] ? '/' + this.zaDestination[1] : '');
HttpReq.truckDispatching.manualSchedulingAdd(query1).then((res) => {
if(res.code == 200){
}else{
this.$notify({
title: res.msg,
type: 'error',
duration: 2500
})
}
}).catch(function(error) { });
HttpReq.truckDispatching.manualOrderAdd(query1).then((res) => {
if(res.code == 200){
}else{
this.$notify({
title: res.msg,
type: 'error',
duration: 2500
})
}
}).catch(function(error) { });
}
if(this.xzDestination){
let query2 = {...this.desform};
query2.carNo = item.number;
query2.flag = 1;
query2.destination = this.xzDestination;
HttpReq.truckDispatching.manualSchedulingAdd(query2).then((res) => {
if(res.code == 200){
}else{
this.$notify({
title: res.msg,
type: 'error',
duration: 2500
})
}
}).catch(function(error) { });
HttpReq.truckDispatching.manualOrderAdd(query2).then((res) => {
if(res.code == 200){
}else{
this.$notify({
title: res.msg,
type: 'error',
duration: 2500
})
}
}).catch(function(error) { });
}
})
this.$notify({
title: '人工调度发起成功！',
type: 'success',
duration: 2500
});
this.peopleScheAssemblyShow = false;
this.desform = {},
this.zaDestination = [];
this.xzDestination = '';
this.selectCarRadioArray = [];
//切换智能调度
this.dispatchBtnTitle = '人工调度';
this.dispatchBtnTitle1 = '人工调度';
HttpReq.truckDispatching.recentNoticeAdd({noticeClass:this.dispatchBtnTitle1,flag:0}).then((res) => {
if(res.code == 200){
//近期通知列表
HttpReq.truckDispatching.recentNoticeQuery({size:50,sort:'id,desc',}).then((res) => {
if(res.code == 200){
this.recentNoticeData = res.data.content;
};
})
//发起添加调度类型
//HttpReq.truckDispatching.screenDispatchWayAdd({dispatcher:this.dispatchBtnTitle1}).then((res) => {})
}else{
this.$notify({
title: res.msg,
type: 'error',
duration: 2500
})
}
}).catch(function(error) {});
},
//取消人工调度
peopleScheAssemblyCloseFn(){
this.peopleScheAssemblyShow = false;
this.desform = {};
this.zaDestination = [];
this.xzDestination = '';
this.selectCarRadioArray = [];
},
//初始化weosocket
......@@ -634,6 +822,10 @@ export default {
clearInterval(this.DPcomputer16BoxTimer);
this.DPcomputer16BoxTimer = null;
}
if(this.heartbeatTimer) {
clearInterval(this.heartbeatTimer);
this.heartbeatTimer = null;
}
}
}
</script>
......@@ -644,12 +836,11 @@ export default {
padding: 0;
}
.DPcomputer16Box{
width: 100%;
height: 64vh;
overflow: hidden;
position: relative;
}
.DPcomputer16Box{
.DPcomputer16Box_1{
width: 20vw;
height: 64vh;
background-color: rgba(32,42,67,0.95);
......@@ -855,4 +1046,143 @@ export default {
font-size: 15px;
cursor: pointer;
}
.DPcomputer16Box .videoListView{
position: absolute;
top: 5vh;
left: 20vw;
height: 47vh;
width: 35vh;
z-index: 3;
background:no-repeat center center url('~@/assets/images/cutGraph/guzhangshenbankuang1.png');
background-size:100% 100%;
padding: 10px 10px 0px;
box-sizing: border-box;
}
.DPcomputer16Box .videoListView_title{
color: white;
font-size: 18px;
}
.DPcomputer16Box .videoListView_content{
width: 100%;
height: 30vh;
border: 1px solid rgb(24,144,255);
border-radius: 5px;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
padding-top: 10px;
box-sizing: border-box;
overflow-y: scroll;
background-color: rgba(32,42,67,0.95);
}
.DPcomputer16Box .videoListView_content::-webkit-scrollbar {
/*滚动条整体样式*/
width : 8px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
.DPcomputer16Box .videoListView_content::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius : 10px;
background-color: #274088;
background-image: -webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%,
transparent
);
}
.DPcomputer16Box .videoListView_content::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
background : #ededed;
border-radius: 10px;
}
.DPcomputer16Box .videoListView_content>div{
margin-bottom: 10px;
width: 49%;
color: rgb(24,228,240);
text-align: center;
}
.DPcomputer16Box .peopleScheAssembly{
position: absolute;
bottom: 10vh;
left: 20vw;
height: 50vh;
width: 40vh;
z-index: 3;
background:no-repeat center center url('~@/assets/images/cutGraph/guzhangshenbankuang1.png');
background-size:100% 100%;
padding: 10px 10px 0px;
box-sizing: border-box;
}
.DPcomputer16Box .peopleScheAssemblyBtns{
position: absolute;
bottom: 5px;
padding: 0 15% 10px;
box-sizing: border-box;
}
</style>
<style>
.DPcomputer16Box .des1 .el-form-item__label{
color: white;
font-size: 15px;
}
.DPcomputer16Box .el-input--small .el-input__inner{
background-color: #021445;
border: 2px solid #01f5fe;
color: #01f5fe;
}
.DPcomputer16Box .el-input--small .el-input__inner{
background-color: #021445;
border: 2px solid #01f5fe;
color: #01f5fe;
}
.DPcomputer16Box .el-input--small .el-input__inner::placeholder {
color: #31E5F5;
}
.DPcomputer16Box .el-select .el-input .el-select__caret{
color: #01f5fe;
}
.DPcomputer16Box .el-textarea__inner{
background-color: #021445;
color: #01f5fe;
border: 2px solid #01f5fe;
}
.el-select-dropdown__list{
background-color: #021445 !important;
border: 1px solid #01f5fe;
color: #31E5F5;
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
background-color: #021445 !important;
color: #31E5F5;
}
.el-select-dropdown__item{
padding: 0px 20px;
box-sizing: border-box;
background-color: #021445 !important;
color: #31E5F5;
font-size: 16px;
}
.el-cascader-panel{
background-color: #021445 !important;
color: #31E5F5;
font-size: 16px;
}
.el-cascader-menu{
border: 0px;
}
.el-cascader-menu__list{
color: #31E5F5;
border: 1px solid #01f5fe;
}
.el-cascader-node:not(.is-disabled):hover, .el-cascader-node:not(.is-disabled):focus{
background-color: #021445 !important;
}
</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