1

src/views/MLargeScreen/components/voiceApplication/index.vue

@@ -267,7 +267,7 @@ export default {
         },
         //WebSocket数据接收 
         websocketonmessage(e){
-			//console.log(e);
+			//console.log('websocketonmessage',e);
 			let that = this;
 			if(e == undefined){
 				let str1 = localStorage.getItem(this.userName1 + 'voiceData');
@@ -276,6 +276,7 @@ export default {
 				}else{
 					let arr2 = JSON.parse(str1);
 					that.videoContentAllArray = arr2;
+					that.$parent.audioDataFn(arr2);
 				}
 			}else{
 				let str1 = localStorage.getItem(this.userName1 + 'voiceData');
@@ -284,11 +285,13 @@ export default {
 					let arr1 = [];
 					arr1.unshift(str2);
 					that.videoContentAllArray = arr1;
+					that.$parent.audioDataFn(arr1);
 					localStorage.setItem(this.userName1 + 'voiceData',JSON.stringify(arr1));
 				}else{
 					let arr2 = JSON.parse(str1);
 					arr2.unshift(str2);
 					that.videoContentAllArray = arr2;
+					that.$parent.audioDataFn(arr2);
 					localStorage.setItem(this.userName1 + 'voiceData',JSON.stringify(arr2));
 				}
 			}  
@@ -658,12 +661,27 @@ export default {
 				this.srcUrl = (window.URL||webkitURL).createObjectURL(blob);
 			};
 		},
+		//播放语音主页
+		selectSituationIndex(item){
+			let that = this;
+			//注意base64的最后面中括号和引号是不转译的
+			let bstr = this.dataURItoBlob(item.contentText);
+			const reader1 = new FileReader();
+			reader1.readAsArrayBuffer(bstr);
+			reader1.onload = (e) => {
+				const bufer = e.srcElement.result;
+				const blob = this.addWavHeader(bufer, 16000, 16, 1);
+				let srcUrlIndex = (window.URL||webkitURL).createObjectURL(blob);
+				that.$parent.fanhuiAudioUrl(srcUrlIndex);
+			};
+		},
 		//删除某个语音
 		selectDeleteSituation(index){
 			let str1 = localStorage.getItem(this.userName1 + 'voiceData');
 			let arr3 = JSON.parse(str1);
 			arr3.splice(index,1);
 			this.videoContentAllArray = arr3;
+			this.$parent.audioDataFn(arr3);
 			localStorage.setItem(this.userName1 + 'voiceData',JSON.stringify(arr3));
 		},
 		addWavHeader(samples, sampleRateTmp, sampleBits, channelCount) {

src/views/MLargeScreen/index.vue

@@ -51,6 +51,18 @@
 		<carInformation ref="carInformationMethod" v-show="selectFunction == 5"/>
 		<personalCenter ref="personalCenterMethod" v-show="selectFunction == 6"/>
 		<smallWindow ref="smallWindowMethod" v-show="selectFunction == 7"/>
+		<!-- 语音播放 -->
+		<audio controls currentTime autoplay :src='indexSrcUrl' style="display:none;"></audio>
+		<!-- 语音提示区域 -->
+		<div class="audioTishiView" v-if="audioTishiViewShow">
+			<div class="audioTishiView_son1">
+				<div v-for="(item,index) in audioData" :key="index" class='indexSituation_fa1'>
+					<img :src='indexSituationPic1' height="20" @click="indexListeningFn(item)">
+					<div style="display: inline-block;">来自{{item.fromUserId}}</div>
+					<span class="el-icon-delete" @click="indexListeningDelFn(index)"></span>
+				</div>
+			</div>
+		</div>
 		<!-- 地图区域 -->
 		<div id="centerDiv" class="mapcontainer">
 			<mars3dViewerMap :url="configUrl" @onload="onMapload" ref="mars3dViewerMapMethod"/>
@@ -95,8 +107,8 @@ import personalCenter from './components/personalCenter/index.vue' //个人中
 import smallWindow from './components/smallWindow/index.vue' //小窗口车辆信息
 import mars3dViewerMap from '../../components/mars3d/Map.vue' //地图
 import ElectricQuantity from '../../components/electricity/index.vue' //电池组件
+import indexSituationPic1 from '../../assets/images/truckTuPian/tonghuazhong1.png'
 
-//axios.defaults.baseURL = "/jiankong";
 
 export default {
 	components: { 
@@ -146,6 +158,14 @@ export default {
 			devices:'',
 			//禁用完成装车
 			interdictBtn:false,
+			//语音组件播放
+			indexSrcUrl:'',
+			//语音数据
+			audioData:[],
+			//语音图片
+			indexSituationPic1:indexSituationPic1,
+			//语音组件显示
+			audioTishiViewShow:false,
 		}
 	},
 	mounted(){
@@ -661,6 +681,27 @@ export default {
 			s = Math.round(s * 10000) / 10000 * 1000;
 			return s
 		},
+		//获取语音数据
+		audioDataFn(arr){
+			this.audioData = arr;
+			if(this.audioData.length == 0){
+				this.audioTishiViewShow = false;
+			}else{
+				this.audioTishiViewShow = true;
+			}
+		},
+		//听语音
+		indexListeningFn(item){
+			this.$refs.voiceApplicationMethod.selectSituationIndex(item);
+		},
+		//返回语音url
+		fanhuiAudioUrl(url){
+			this.indexSrcUrl = url;
+		},
+		//删除语音
+		indexListeningDelFn(index){
+			this.$refs.voiceApplicationMethod.selectDeleteSituation(index);
+		}
 	},
     beforeDestroy(){
 		this.$refs.voiceApplicationMethod.xintiaoCloseFn();
@@ -681,6 +722,43 @@ export default {
 <style scope>
 
 @media screen and (max-width:901px){
+	.indexSituation_fa1{
+		flex:0 0 auto;
+		color: #A6F6F9;
+		font-size: 12px;
+		width: 30%;
+		margin:0px 0.3vh 1vh 0px;
+		height: 8vh;
+		border: 1px solid rgb(24,228,240);
+		border-radius: 5px;
+		display: flex;
+		justify-content: space-evenly;
+		align-items: center;
+		cursor: pointer;
+		position: relative;
+	}
+	.indexSituation_fa1 span{
+		font-size: 15px;
+	}
+	.audioTishiView{
+		width: 85vw;
+		height: 12vh;
+		background-color: rgba(74,87,123,0.8);
+		position: absolute;
+		bottom: 0vh;
+		right: 0vw;
+		z-index: 1;
+		border-top-left-radius: 5px;
+	}
+	.audioTishiView_son1{
+		padding-left: 0.5vw;
+		box-sizing: border-box;
+		height: 12vh;
+		width: 59%;
+		display: flex;
+		align-items: center;
+		overflow-x: scroll;
+	}
 	.daizhangCarBtn1{
 		font-size:13px;
 		height: 8vh;
@@ -878,7 +956,7 @@ export default {
 	}
 	.roadblockStyle{
 		position: absolute;
-		z-index: 1;
+		z-index: 3;
 		right: 170px;
 		bottom: 2vh;
 		height: 8vh;
@@ -894,7 +972,7 @@ export default {
 		cursor: pointer;
 	}
 	.dispatchCenterStyle{
-		z-index: 1;
+		z-index: 3;
 		position: absolute;
 		right: 20px;
 		bottom: 2vh;
@@ -1181,7 +1259,7 @@ export default {
 	}
 	.roadblockStyle{
 		position: absolute;
-		z-index: 1;
+		z-index: 3;
 		right: 170px;
 		bottom: 2vh;
 		height: 5vh;
@@ -1197,7 +1275,7 @@ export default {
 		cursor: pointer;
 	}
 	.dispatchCenterStyle{
-		z-index: 1;
+		z-index: 3;
 		position: absolute;
 		right: 20px;
 		bottom: 2vh;