代码合并
parent
3200af628c
commit
cdfe4b8d8a
|
|
@ -217,7 +217,10 @@
|
|||
</div>
|
||||
|
||||
<!-- 呼叫中心 -->
|
||||
<div class="one-button-container" v-drag>
|
||||
<div class="one-button-container" v-drag v-if="oneButtonCallShow">
|
||||
<div class="close-button" style="margin-right:8px;z-index:9999;" @click="oneButtonCallShow = false">
|
||||
<i class='el-icon el-icon-close'></i>
|
||||
</div>
|
||||
<onebuttoncall></onebuttoncall>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -344,7 +347,8 @@ export default {
|
|||
friePointLayer: null,
|
||||
layerPlugVisible: true,
|
||||
rightDiaVisible: true,
|
||||
callCenterVisible: true
|
||||
callCenterVisible: true,
|
||||
oneButtonCallShow:true,
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -1422,8 +1426,8 @@ export default {
|
|||
}
|
||||
|
||||
.one-button-container{
|
||||
width:800px;
|
||||
height:500px;
|
||||
width:1000px;
|
||||
height:600px;
|
||||
position: absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,94 @@
|
|||
<template>
|
||||
<div class="onebuttoncall-container">
|
||||
<div class="title">呼叫中心</div>
|
||||
<div class="filter-container">
|
||||
<el-checkbox-group v-model="checkList" @change="checkChange">
|
||||
<el-checkbox label="护林员" value="1" style="margin-right:10px;"></el-checkbox>
|
||||
<el-checkbox label="消防员" value="2"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div class="box-container">
|
||||
<div class="table-body">
|
||||
<div class="table-li" v-for="(item,index) in listData" :key="index">
|
||||
<div class="flex jc-sb max-h">
|
||||
<div class="flex-1 max-h flex column jc-sb fc-w max-w cursor" @click="flyToPosition(item)">
|
||||
<div class="checkbox-container" @click="checkNews(index)" :key="checkRandom">
|
||||
<i class="el-icon el-icon-check" v-show="item.check" ></i>
|
||||
</div>
|
||||
<div style="positon:relative;left:80px;">
|
||||
<div style="color:#156EF9;font-size:18px;">{{item.username}}</div>
|
||||
<div>{{item.phone}}</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="flex ai-c jc-e" style="width:75px">
|
||||
<img class="img-box" src="/img/phone.png" @click="callPhone(item.phone)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex ai-c jc-e callbox">
|
||||
<el-button type="primary" size="large" @click="callPhoneAll">一键呼叫</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'onebuttoncall',
|
||||
data(){
|
||||
return {
|
||||
checkList:[
|
||||
|
||||
],
|
||||
listData:[
|
||||
{
|
||||
username:"徐景良",
|
||||
phone:"17861857725"
|
||||
},{
|
||||
username:"徐景良",
|
||||
phone:"17861857725"
|
||||
},{
|
||||
username:"徐景良",
|
||||
phone:"17861857725"
|
||||
},{
|
||||
username:"徐景良",
|
||||
phone:"17861857725"
|
||||
},{
|
||||
username:"徐景良",
|
||||
phone:"17861857725"
|
||||
},{
|
||||
username:"徐景良",
|
||||
phone:"17861857725"
|
||||
},{
|
||||
username:"徐景良",
|
||||
phone:"17861857725"
|
||||
},{
|
||||
username:"徐景良",
|
||||
phone:"17861857725"
|
||||
}
|
||||
],
|
||||
checkPhoneArr:[],
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods:{
|
||||
checkChange(){
|
||||
|
||||
},
|
||||
phoneCheckClick(item){
|
||||
|
||||
},
|
||||
getListData(){
|
||||
|
||||
},
|
||||
callPhoneAll(){
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -27,4 +108,93 @@
|
|||
line-height:60px;
|
||||
text-indent:36px;
|
||||
}
|
||||
.filter-container{
|
||||
padding:15px;
|
||||
}
|
||||
.box-container{
|
||||
width: calc( 100% - 0px);
|
||||
padding:0px 12px;
|
||||
height: calc( 100% - 120px);
|
||||
}
|
||||
.table-header{
|
||||
width: calc( 100% - 10px);
|
||||
height:25px;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
}
|
||||
.table-header div{
|
||||
float:left;
|
||||
width:25%;
|
||||
border-bottom:1px dashed #00FFF0;
|
||||
padding-bottom:8px;
|
||||
}
|
||||
.table-body{
|
||||
width:100%;
|
||||
height: calc( 100% - 70px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-body .table-li{
|
||||
width: calc( 50% - 20px);
|
||||
margin:0px 10px;
|
||||
float:left;
|
||||
height:99px;
|
||||
background: #082929;
|
||||
margin-bottom: 8px;
|
||||
padding: 10px 10px;
|
||||
}
|
||||
|
||||
.img-box{
|
||||
width:42px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background: transparent;
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
padding-top: 100px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
|
||||
background-color: #797979;
|
||||
min-height: 28px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
|
||||
border: 0
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
|
||||
background-color: rgba(0, 0, 0, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
|
||||
background-color: rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
.checkbox-container{
|
||||
width:18px;
|
||||
height:18px;
|
||||
position:relative;
|
||||
top:12px;
|
||||
margin-right:10px;
|
||||
float:left;
|
||||
background: rgba(2,0,77,0.4);
|
||||
box-shadow: inset 0px 0px 34px 0px #A15E01;
|
||||
border: 1px solid #F18B00;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue