Skip to content

N
NewTruckTerminalSyetem
Commit 45f8f238 authored by xxx's avatar xxx
Browse files
Options

1

parent 1b12b881
Hide whitespace changes
Inline Side-by-side
Showing with 115 additions and 43 deletions
src/views/MLargeScreen/components/voiceApplication/index.vue
View file @ 45f8f238
......@@ -4,12 +4,12 @@
<img src="../../../../assets/images/truckTuPian/close.png" class="voiceAppClose" @click="voiceAppCloseFn()">
<div class="voiceAppContent">
<div class="voiceAppContent_1">
<div style="font-size: 19px;font-weight:600;">选择车队：</div>
<div class="voiceAppContent_1_1">选择车队：</div>
<el-select v-model="selectCarFleet" placeholder="请选择车队" style="width:19vw;">
<el-option v-for="(item,index) in carFleetData" :key="index" :label="item.name" :value="item.name" style="font-size:18px;"></el-option>
</el-select>
<el-input v-model="searchText" placeholder="请输入车牌号" style="width:19vw;"></el-input>
<el-button type="primary" round style="width:6.5vw;font-size:18px;height: 6vh;text-align: center;" @click="toSearch()">查询</el-button>
<el-button type="primary" round class="voiceAppContent_1_btn1" @click="toSearch()">查询</el-button>
</div>
<div class="voiceAppContent_2">
<div>
......@@ -18,7 +18,7 @@
</div>
<div class="voiceAppContent_2_content">
<el-checkbox-group v-model="selectCarRadioArray">
<el-checkbox v-for="(item,index) in carsInforData" :label="item" :key="index" style="margin-top:10px;">
<el-checkbox v-for="(item,index) in carsInforData" :label="item" :key="index" class="voiceAppContent_2_content_checkboxs">
<div style="width:20vw;text-align: center;">{{item.number == 'pcBigScreen' ? '调度中心' : item.number}}</div>
</el-checkbox>
</el-checkbox-group>
......@@ -31,7 +31,7 @@
<div class="voiceAppContent_2_3_content">
<div v-for="(item,index) in selectCarRadioArray" :key="index" class="voiceAppContent_2_content_selectCar">
<div>车牌号：{{item.number == 'pcBigScreen' ? '调度中心' : item.number}}</div>
<div style="width:27px;height:27px;background-color: rgb(4,112,171);text-align: center;font-size:40px;" @click="cancelSelect(index)">
<div class="voiceAppContent_2_content_selectCar_2" @click="cancelSelect(index)">
<span>×</span>
</div>
</div>
......@@ -44,23 +44,23 @@
</div>
</div>
<div style="margin-top:10px;">
<img src="../../../../assets/images/truckTuPian/fuxiaobiaotititle.png">
<div style="margin-top:1vh;">
<img style="width:2.7vw;" src="../../../../assets/images/truckTuPian/fuxiaobiaotititle.png">
<span class="voiceAppContent_left_title">当前语音通话情况：</span>
</div>
<audio controls currentTime autoplay :src='srcUrl' style="display:none;"></audio>
<div class="situationStyle">
<div v-for="(item,index) in videoContentAllArray" :key="index" class='situation_fa1'>
<img :src='situationPic1' height="30">
<img :src='situationPic1'>
<div>来自{{item.fromUserId}}</div>
<span style="font-size:30px;" class="el-icon-microphone" @click="selectSituation(item)"></span>
<span style="font-size:30px;" class="el-icon-delete" @click="selectDeleteSituation(index)"></span>
<span class="el-icon-microphone" @click="selectSituation(item)"></span>
<span class="el-icon-delete" @click="selectDeleteSituation(index)"></span>
<!-- <div class="situationNumber" v-if="item.number != 0">{{item.number}}</div> -->
</div>
</div>
<!-- 语音所需内容，隐藏无需展示 -->
<div class="main" style="display:none;">
<slot name="top"></slot>
......@@ -162,7 +162,6 @@ export default {
resultBlob:null
}
},
created(){},
mounted() {
let that = this;
document.onkeydown = function(e) {
......@@ -735,6 +734,35 @@ export default {
<style scope>
@media screen and (max-width:901px){
.situationStyle img{
height: 3.5vh;
}
.voiceAppContent_2_content_selectCar_2{
width:6vh;
height:6vh;
background-color: rgb(4,112,171);
text-align: center;
font-size:30px;
}
.voiceAppContent_2_content_checkboxs{
margin-top:0.5vh;
}
.voiceAppContent_1_btn1{
width:6.5vw;
font-size:12px;
height: 6.5vh;
}
.voiceAppContent_1 button{
padding: 0 !important;
}
.voiceAppContent_2 button{
padding: 0 !important;
height: 6.5vh;
}
.voiceAppContent_1_1{
font-size: 13px;
font-weight:600;
}
#audioView{
position: absolute;
top: 200px;
......@@ -750,9 +778,9 @@ export default {
.voiceAppMainViews{
position: absolute;
z-index: 2;
top: 50%;
top: 52%;
left: 50%;
height: 85vh;
height: 90vh;
width: 60vw;
background:no-repeat center center url('~@/assets/images/truckTuPian/yuyinshenqing1.png');
background-size:100% 100%;
......@@ -763,11 +791,11 @@ export default {
}
.voiceAppSmallTitle{
color: white;
font-size: 18px;
font-size: 12px;
text-align: center;
line-height: 4.5vh;
width: 9vw;
height: 4.5vh;
line-height: 6vh;
width: 11vw;
height: 6vh;
background:no-repeat center center url('~@/assets/images/truckTuPian/xiaobiaotikuang.png');
background-size:100% 100%;
}
......@@ -781,10 +809,10 @@ export default {
width: 100%;
}
.voiceAppContent>div{
margin-top: 15px;
margin-top: 1vh;
}
.voiceAppContent_left_title{
font-size: 21px;
font-size: 13px;
color: rgb(24,228,240);
}
.voiceAppContent_1{
......@@ -792,10 +820,21 @@ export default {
justify-content: space-between;
}
.voiceAppContent_1>div{
height: 40px;
line-height: 40px;
height: 6.5vh;
line-height: 6.5vh;
color: rgb(24,228,240);
font-size: 22px;
font-size: 13px;
}
.voiceAppContent_1 .el-input--suffix .el-input__inner{
height: 6.5vh;
font-size: 12px;
}
.voiceAppContent_1 .el-select .el-input .el-select__caret{
line-height: 0px;
}
.voiceAppContent_1 .el-input__inner{
font-size: 13px;
height: 6.5vh;
}
.voiceAppContent_2{
display: flex;
......@@ -808,14 +847,15 @@ export default {
border-radius: 10px;
}
.voiceAppContent_2_title{
border-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: rgb(25,41,94);
height: 4vh;
line-height: 4vh;
color: rgb(24,228,240);
display: flex;
justify-content: space-around;
font-size: 20px;
font-size: 12px;
}
.voiceAppContent_2_content{
height: 40vh;
......@@ -856,15 +896,17 @@ export default {
.el-checkbox__label>div{
display: inline-block;
color: rgb(24,228,240);
font-size: 20px;
font-size: 13px;
}
.el-checkbox{
display: block;
}
.el-checkbox__inner{
width: 25px;
height: 25px;
width: 4.5vh;
height: 4vh;
}
.el-checkbox__input{
vertical-align: bottom;
}
.el-checkbox__input .el-checkbox__inner::after {
border: 2px solid #fff;
......@@ -875,20 +917,20 @@ export default {
height: 12px;
width: 5px;
position: absolute;
top: 1px;
left: 8px;
top: -0.5vh;
left: 1vh;
transform: rotate(45deg) scaleY(1);
}
.voiceAppContent_2_content_selectCar{
margin-top: 10px;
margin-top: 0.5vh;
color: rgb(24,228,240);
font-size: 20px;
font-size: 13px;
display: flex;
justify-content: space-between;
}
.voiceAppContent_2_content_selectCar>div{
height: 27px;
line-height: 27px;
height: 6vh;
line-height: 6vh;
}
.voiceAppContent_2_3_content{
height: 33vh;
......@@ -924,18 +966,19 @@ export default {
border-radius: 10px;
}
.toCallStyle{
margin-top: 10px;
width: 130px;
height: 40px;
font-size: 18px;
margin-top: 0.5vh;
width: 10vw;
height: 3vh;
font-size: 12px;
/* position: absolute;
left: 50%;
transform: translateX(-50%); */
}
.situationStyle{
width: 100%;
height: 15vh;
height: 17vh;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
overflow-y:auto;
}
......@@ -967,18 +1010,21 @@ export default {
}
.situation_fa1{
color: #A6F6F9;
font-size: 22px;
margin: 0px 5px 15px;
font-size: 12px;
width: 32%;
margin-bottom: 1vh;
height: 6vh;
border: 2px solid rgb(24,228,240);
border-radius: 10px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: space-around;
cursor: pointer;
position: relative;
}
.situation_fa1 span{
font-size: 15px;
}
.situation_fa2{
opacity: 0.8;
color: #00FFFF;
......@@ -1008,6 +1054,29 @@ export default {
}
@media screen and (min-width:901px){
.situationStyle img{
height: 30px;
}
.voiceAppContent_2_content_selectCar_2{
width:27px;
height:27px;
background-color: rgb(4,112,171);
text-align: center;
font-size:40px;
}
.voiceAppContent_2_content_checkboxs{
margin-top:10px;
}
.voiceAppContent_1_btn1{
width:6.5vw;
font-size:18px;
height: 6vh;
text-align: center;
}
.voiceAppContent_1_1{
font-size: 19px;
font-weight:600;
}
#audioView{
position: absolute;
top: 200px;
......@@ -1252,6 +1321,9 @@ export default {
cursor: pointer;
position: relative;
}
.situation_fa1 span{
font-size: 30px;
}
.situation_fa2{
opacity: 0.8;
color: #00FFFF;
......
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