Skip to content

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

修改

parent 8f58a429
Show whitespace changes
Inline Side-by-side
Showing with 125 additions and 59 deletions
src/views/MLargeScreen/components/intelligentSchedul/index.vue
View file @ c12c2524
......@@ -34,9 +34,9 @@
</div>
</div>
<div class="voiceAppContent_4">
<el-button type="primary" @click="toNoticeFn('广播')">{{guangbo1}}</el-button>
<el-button type="primary" @click="toNoticeFn('紧急通知')">{{jinzhitongzhi1}}</el-button>
<el-button type="primary" @click="toNoticeFn('通话')">{{tonghua1}}</el-button>
<el-button type="primary" @click="toNoticeFn('广播')">广播</el-button>
<el-button type="primary" @click="toNoticeFn('紧急通知')">紧急通知</el-button>
<el-button type="primary" @click="toNoticeFn('通话')">通话</el-button>
<el-button type="primary" @click="todispatchChange()">{{dispatchBtnTitle}}</el-button>
</div>
</div>
......@@ -56,7 +56,7 @@
<dd v-for="(item,index) in recentNoticeData" :key="index">
<div>{{item.noticeClass}}</div>
<div>{{item.createTime}}</div>
<div style="cursor: pointer;text-decoration:underline;" @click="selectSituation(item)">录音播放</div>
<div style="cursor: pointer;text-decoration:underline;" @click="item.noticeClass == '智能调度' ? '' : item.noticeClass == '人工调度' ? '' : selectSituation(item)">{{item.noticeClass == '智能调度' ? '无录音' : item.noticeClass == '人工调度' ? '无录音' : '录音播放'}}</div>
</dd>
</dl>
</div>
......@@ -174,17 +174,25 @@
<slot name="bottom"></slot>
</div>
<!-- 播放器 -->
<audio controls currentTime autoplay :src='srcUrl' style="display:none;"></audio>
<!-- 语音发起dialog -->
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="recStart" style="font-size:18px;" :disabled='tonghuadisabled'>录制语音</el-button>
<el-button type="primary" @click="recStop" style="font-size:18px;">结束语音</el-button>
<el-button type="primary" @click="recUploadLast" style="font-size:18px;" :disabled='tonghuadisabled'>上传语音</el-button>
<el-button @click="dialogVisible = false" style="font-size:18px;" :disabled='tonghuadisabled'>取 消</el-button>
</span>
</el-dialog>
<!-- 语音区域组件 -->
<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="width:40%;" @click="recStart">录制语音</el-button>
<el-button type="primary" style="width:40%;" @click="recStop" >结束语音</el-button>
</div>
<div style="margin-top:10px;display: flex;justify-content: space-evenly;flex-wrap: wrap;">
<el-button type="primary" style="width:40%;" @click="recUploadLast">上传语音</el-button>
<el-button style="width:40%;" @click="quxiaoVideo()">取消语音</el-button>
</div>
</div>
</div>
</template>
......@@ -211,6 +219,7 @@ export default {
carFleetData:[], //车队信息
carsInforData:[], //车辆信息
selectCarRadioArray:[], //多选选中车辆
tanchuCarListArray:[], //弹出列表选中车辆
recentNoticeData:[], //近期通知列表
dispatchLoadingNum:0, //智能调度进行中
dispatchFinishNum:0, //智能调度已完成
......@@ -225,22 +234,14 @@ export default {
qitache:[],
},
//各装点车铲比Echarts
carsProportionData:[
[28, 3, '采区一'],
[50, 7, '采区二'],
[22, 0, '卸区一'],
[2, 0, '卸区二'],
],
guangbo1:'广播',
jinzhitongzhi1:'紧急通知',
tonghua1:'通话',
dialogTitle:'',
carsProportionData:[],
dialogTitle:'广播车辆',
dialogTitle1:'',
dialogVisible:false,
tonghuadisabled:false,
srcUrl:null,
resultBlob:null,
//录音相关数据
type:"mp3",
bitRate:16,
sampleRate:16000,
......@@ -259,7 +260,9 @@ export default {
this.whetherShow = true;
this.srcUrl = null;
this.selectCarFleet = '';
this.dialogVisible = false;
this.selectCarRadioArray = [];
this.tanchuCarListArray = [];
this.$nextTick(()=>{
//车队信息
......@@ -337,14 +340,6 @@ export default {
//定时器
this.intelligentSchedulTimer = setInterval(() => {
//车队信息
HttpReq.truckDispatching.carFleetQuery({size:9999}).then((res) => {
if(res.code == 200){
this.carFleetData = res.data.content;
};
})
//车辆信息
this.loadData2();
//近期通知列表
HttpReq.truckDispatching.recentNoticeQuery({size:50,sort:'id,desc'}).then((res) => {
if(res.code == 200){
......@@ -429,7 +424,6 @@ export default {
loadData2() {
let query = {};
query.size = 9999;
query.page = 0;
query.road = this.selectCarFleet;
//车辆
HttpReq.truckDispatching.carInformationQuery(query).then((res) => {
......@@ -466,10 +460,27 @@ export default {
},
//发起通知
toNoticeFn(text){
this.dialogTitle = '发起' + text;
if(text == '广播'){
this.dialogTitle = '广播车辆';
}else if(text == '紧急通知'){
this.dialogTitle = '接到通知的车辆';
}else if(text == '通话'){
this.dialogTitle = '连麦的车辆';
}
this.dialogTitle1 = text;
if(JSON.stringify(this.selectCarRadioArray) == '[]'){
this.tanchuCarListArray = this.carsInforData;
}else{
this.tanchuCarListArray = this.selectCarRadioArray;
}
this.dialogVisible = true;
},
//取消发送语音
quxiaoVideo(){
this.dialogVisible = false;
this.selectCarRadioArray = [];
this.tanchuCarListArray = [];
},
//人工调度和智能调度切换
todispatchChange(){
if(this.dispatchBtnTitle == '人工调度'){
......@@ -503,10 +514,6 @@ export default {
}
}).catch(function(error) { });
},
//播放录音
playSoundRecordingFn(id){
console.log(id);
},
//车辆区域分布Echarts
carsAreaDistributionEcharts(){
echarts.init(document.getElementById('carsAreaDistributionView')).dispose();
......@@ -822,7 +829,6 @@ export default {
type: 'success',
duration: 5000
});
this.tonghuadisabled = true;
},
recPause:function(){
......@@ -872,7 +878,6 @@ export default {
This.reclog("录音失败："+s,1);
});
this.recOpen();
this.tonghuadisabled = false;
},
......@@ -886,7 +891,7 @@ export default {
},
recUploadLast:function(){
let carNumberString = '';
this.selectCarRadioArray.forEach((item,index)=>{
this.tanchuCarListArray.forEach((item,index)=>{
carNumberString = carNumberString + item.number + ';';
})
carNumberString = carNumberString + 'pcBigScreen';
......@@ -945,15 +950,6 @@ export default {
}
};
reader.readAsDataURL(blob);
/***方式二：使用FormData用multipart/form-data表单上传文件***/
// let form = new FormData();
// form.append("upfile",blob,"recorder.mp3"); //和普通form表单并无二致，后端接收到upfile参数的文件，文件名为recorder.mp3
// console.log('form',form);
this.dialogVisible = false;
},
......@@ -1078,6 +1074,13 @@ export default {
},
//播放语音
selectSituation(item){
if(!item.videoContent){
this.$notify({
title: '无语音数据！',
type: 'warning',
duration: 2500
});
}else{
//注意base64的最后面中括号和引号是不转译的
let bstr = this.dataURItoBlob(item.videoContent);
const reader1 = new FileReader();
......@@ -1087,6 +1090,8 @@ export default {
const blob = this.addWavHeader(bufer, 16000, 16, 1);
this.srcUrl = (window.URL||webkitURL).createObjectURL(blob);
};
}
},
addWavHeader(samples, sampleRateTmp, sampleBits, channelCount) {
const dataLength = samples.byteLength;
......@@ -1463,4 +1468,65 @@ dd>div{
width: 19vw;
height: 27.5vh;
}
.videoListView{
position: absolute;
bottom: 28vh;
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;
}
.videoListView_title{
color: white;
font-size: 18px;
}
.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;
}
.videoListView_content::-webkit-scrollbar {
/*滚动条整体样式*/
width : 8px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
.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
);
}
.videoListView_content::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
background : #ededed;
border-radius: 10px;
}
.videoListView_content>div{
margin-bottom: 10px;
width: 49%;
color: rgb(24,228,240);
text-align: center;
}
</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