Skip to content

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

1

parent 1b12b881
Show 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 @@ ...@@ -4,12 +4,12 @@
<img src="../../../../assets/images/truckTuPian/close.png" class="voiceAppClose" @click="voiceAppCloseFn()"> <img src="../../../../assets/images/truckTuPian/close.png" class="voiceAppClose" @click="voiceAppCloseFn()">
<div class="voiceAppContent"> <div class="voiceAppContent">
<div class="voiceAppContent_1"> <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-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-option v-for="(item,index) in carFleetData" :key="index" :label="item.name" :value="item.name" style="font-size:18px;"></el-option>
</el-select> </el-select>
<el-input v-model="searchText" placeholder="请输入车牌号" style="width:19vw;"></el-input> <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>
<div class="voiceAppContent_2"> <div class="voiceAppContent_2">
<div> <div>
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
</div> </div>
<div class="voiceAppContent_2_content"> <div class="voiceAppContent_2_content">
<el-checkbox-group v-model="selectCarRadioArray"> <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> <div style="width:20vw;text-align: center;">{{item.number == 'pcBigScreen' ? '调度中心' : item.number}}</div>
</el-checkbox> </el-checkbox>
</el-checkbox-group> </el-checkbox-group>
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
<div class="voiceAppContent_2_3_content"> <div class="voiceAppContent_2_3_content">
<div v-for="(item,index) in selectCarRadioArray" :key="index" class="voiceAppContent_2_content_selectCar"> <div v-for="(item,index) in selectCarRadioArray" :key="index" class="voiceAppContent_2_content_selectCar">
<div>车牌号：{{item.number == 'pcBigScreen' ? '调度中心' : item.number}}</div> <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> <span>×</span>
</div> </div>
</div> </div>
...@@ -44,8 +44,8 @@ ...@@ -44,8 +44,8 @@
</div> </div>
</div> </div>
<div style="margin-top:10px;"> <div style="margin-top:1vh;">
<img src="../../../../assets/images/truckTuPian/fuxiaobiaotititle.png"> <img style="width:2.7vw;" src="../../../../assets/images/truckTuPian/fuxiaobiaotititle.png">
<span class="voiceAppContent_left_title">当前语音通话情况：</span> <span class="voiceAppContent_left_title">当前语音通话情况：</span>
</div> </div>
...@@ -53,10 +53,10 @@ ...@@ -53,10 +53,10 @@
<div class="situationStyle"> <div class="situationStyle">
<div v-for="(item,index) in videoContentAllArray" :key="index" class='situation_fa1'> <div v-for="(item,index) in videoContentAllArray" :key="index" class='situation_fa1'>
<img :src='situationPic1' height="30"> <img :src='situationPic1'>
<div>来自{{item.fromUserId}}</div> <div>来自{{item.fromUserId}}</div>
<span style="font-size:30px;" class="el-icon-microphone" @click="selectSituation(item)"></span> <span 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-delete" @click="selectDeleteSituation(index)"></span>
<!-- <div class="situationNumber" v-if="item.number != 0">{{item.number}}</div> --> <!-- <div class="situationNumber" v-if="item.number != 0">{{item.number}}</div> -->
</div> </div>
</div> </div>
...@@ -162,7 +162,6 @@ export default { ...@@ -162,7 +162,6 @@ export default {
resultBlob:null resultBlob:null
} }
}, },
created(){},
mounted() { mounted() {
let that = this; let that = this;
document.onkeydown = function(e) { document.onkeydown = function(e) {
...@@ -735,6 +734,35 @@ export default { ...@@ -735,6 +734,35 @@ export default {
<style scope> <style scope>
@media screen and (max-width:901px){ @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{ #audioView{
position: absolute; position: absolute;
top: 200px; top: 200px;
...@@ -750,9 +778,9 @@ export default { ...@@ -750,9 +778,9 @@ export default {
.voiceAppMainViews{ .voiceAppMainViews{
position: absolute; position: absolute;
z-index: 2; z-index: 2;
top: 50%; top: 52%;
left: 50%; left: 50%;
height: 85vh; height: 90vh;
width: 60vw; width: 60vw;
background:no-repeat center center url('~@/assets/images/truckTuPian/yuyinshenqing1.png'); background:no-repeat center center url('~@/assets/images/truckTuPian/yuyinshenqing1.png');
background-size:100% 100%; background-size:100% 100%;
...@@ -763,11 +791,11 @@ export default { ...@@ -763,11 +791,11 @@ export default {
} }
.voiceAppSmallTitle{ .voiceAppSmallTitle{
color: white; color: white;
font-size: 18px; font-size: 12px;
text-align: center; text-align: center;
line-height: 4.5vh; line-height: 6vh;
width: 9vw; width: 11vw;
height: 4.5vh; height: 6vh;
background:no-repeat center center url('~@/assets/images/truckTuPian/xiaobiaotikuang.png'); background:no-repeat center center url('~@/assets/images/truckTuPian/xiaobiaotikuang.png');
background-size:100% 100%; background-size:100% 100%;
} }
...@@ -781,10 +809,10 @@ export default { ...@@ -781,10 +809,10 @@ export default {
width: 100%; width: 100%;
} }
.voiceAppContent>div{ .voiceAppContent>div{
margin-top: 15px; margin-top: 1vh;
} }
.voiceAppContent_left_title{ .voiceAppContent_left_title{
font-size: 21px; font-size: 13px;
color: rgb(24,228,240); color: rgb(24,228,240);
} }
.voiceAppContent_1{ .voiceAppContent_1{
...@@ -792,10 +820,21 @@ export default { ...@@ -792,10 +820,21 @@ export default {
justify-content: space-between; justify-content: space-between;
} }
.voiceAppContent_1>div{ .voiceAppContent_1>div{
height: 40px; height: 6.5vh;
line-height: 40px; line-height: 6.5vh;
color: rgb(24,228,240); 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{ .voiceAppContent_2{
display: flex; display: flex;
...@@ -808,14 +847,15 @@ export default { ...@@ -808,14 +847,15 @@ export default {
border-radius: 10px; border-radius: 10px;
} }
.voiceAppContent_2_title{ .voiceAppContent_2_title{
border-radius: 10px; border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: rgb(25,41,94); background-color: rgb(25,41,94);
height: 4vh; height: 4vh;
line-height: 4vh; line-height: 4vh;
color: rgb(24,228,240); color: rgb(24,228,240);
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
font-size: 20px; font-size: 12px;
} }
.voiceAppContent_2_content{ .voiceAppContent_2_content{
height: 40vh; height: 40vh;
...@@ -856,15 +896,17 @@ export default { ...@@ -856,15 +896,17 @@ export default {
.el-checkbox__label>div{ .el-checkbox__label>div{
display: inline-block; display: inline-block;
color: rgb(24,228,240); color: rgb(24,228,240);
font-size: 20px; font-size: 13px;
} }
.el-checkbox{ .el-checkbox{
display: block; display: block;
} }
.el-checkbox__inner{ .el-checkbox__inner{
width: 25px; width: 4.5vh;
height: 25px; height: 4vh;
}
.el-checkbox__input{
vertical-align: bottom;
} }
.el-checkbox__input .el-checkbox__inner::after { .el-checkbox__input .el-checkbox__inner::after {
border: 2px solid #fff; border: 2px solid #fff;
...@@ -875,20 +917,20 @@ export default { ...@@ -875,20 +917,20 @@ export default {
height: 12px; height: 12px;
width: 5px; width: 5px;
position: absolute; position: absolute;
top: 1px; top: -0.5vh;
left: 8px; left: 1vh;
transform: rotate(45deg) scaleY(1); transform: rotate(45deg) scaleY(1);
} }
.voiceAppContent_2_content_selectCar{ .voiceAppContent_2_content_selectCar{
margin-top: 10px; margin-top: 0.5vh;
color: rgb(24,228,240); color: rgb(24,228,240);
font-size: 20px; font-size: 13px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.voiceAppContent_2_content_selectCar>div{ .voiceAppContent_2_content_selectCar>div{
height: 27px; height: 6vh;
line-height: 27px; line-height: 6vh;
} }
.voiceAppContent_2_3_content{ .voiceAppContent_2_3_content{
height: 33vh; height: 33vh;
...@@ -924,18 +966,19 @@ export default { ...@@ -924,18 +966,19 @@ export default {
border-radius: 10px; border-radius: 10px;
} }
.toCallStyle{ .toCallStyle{
margin-top: 10px; margin-top: 0.5vh;
width: 130px; width: 10vw;
height: 40px; height: 3vh;
font-size: 18px; font-size: 12px;
/* position: absolute; /* position: absolute;
left: 50%; left: 50%;
transform: translateX(-50%); */ transform: translateX(-50%); */
} }
.situationStyle{ .situationStyle{
width: 100%; width: 100%;
height: 15vh; height: 17vh;
display: flex; display: flex;
justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
overflow-y:auto; overflow-y:auto;
} }
...@@ -967,18 +1010,21 @@ export default { ...@@ -967,18 +1010,21 @@ export default {
} }
.situation_fa1{ .situation_fa1{
color: #A6F6F9; color: #A6F6F9;
font-size: 22px; font-size: 12px;
margin: 0px 5px 15px;
width: 32%; width: 32%;
margin-bottom: 1vh;
height: 6vh; height: 6vh;
border: 2px solid rgb(24,228,240); border: 2px solid rgb(24,228,240);
border-radius: 10px; border-radius: 5px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
} }
.situation_fa1 span{
font-size: 15px;
}
.situation_fa2{ .situation_fa2{
opacity: 0.8; opacity: 0.8;
color: #00FFFF; color: #00FFFF;
...@@ -1008,6 +1054,29 @@ export default { ...@@ -1008,6 +1054,29 @@ export default {
} }
@media screen and (min-width:901px){ @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{ #audioView{
position: absolute; position: absolute;
top: 200px; top: 200px;
...@@ -1252,6 +1321,9 @@ export default { ...@@ -1252,6 +1321,9 @@ export default {
cursor: pointer; cursor: pointer;
position: relative; position: relative;
} }
.situation_fa1 span{
font-size: 30px;
}
.situation_fa2{ .situation_fa2{
opacity: 0.8; opacity: 0.8;
color: #00FFFF; 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