代码合并

src/views/home/index.vue

@@ -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;
+  width:1000px;
-  height:500px;
+  height:600px;
   position: absolute;
   top:50%;
   left:50%;

src/views/home/widget/onebuttoncall.vue

@@ -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>
 
@@ -26,5 +107,94 @@
       height:60px;
       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>