1

src/views/largeScreen/home/layout/bottomBtn.vue

@@ -5,16 +5,11 @@
         <img :src="item.isChecked ? item.iconActive : item.icon" :title="item.title" style="max-width:66px" />
         <div class="resourceBox" v-if="item.hastc">
           <div class="contant" :class="item.type == 'across' ? 'contantAcross' : ''">
-            <!-- 公安资源 -->
+            <!-- 巡防区 -->
-            <div style="width: 274px;" v-if="item.title == '公安资源'">
+            <div style="width: 250px;padding-left: 20px;box-sizing: border-box;" v-if="item.title == '巡防区'">
-              <div class="name">公安资源</div>
+              <el-radio-group v-model="radioValue" @change="chooseTag">
-              <CheckBox ref="refGazy" :data="resource.checkGazy" @changeData="changeDataGazy"></CheckBox>
+                <el-radio v-for="it in D_BZ_BMYWLX" :label="it.label" :value="it" :key="it.value" />
-              <div class="popover" v-show="isShowPopover">
+              </el-radio-group>
-                <el-tag effect="dark" v-for="it in D_BZ_BMYWLX" :type="it.inChecek ? 'pramary' : 'info'"
-                  @click="chooseTag(it)" :key="it.value">
-                  {{ it.label }}
-                </el-tag>
-              </div>
             </div>
           </div>
         </div>
@@ -24,44 +19,62 @@
 </template>
 
 <script setup>
-import CheckBox from "@/components/checkBox/index";
 import emitter from "@/utils/eventBus.js";
 import { ElMessage } from "element-plus";
-import { dateFormat } from "@/utils/auth.js";
+import { qcckGet } from "@/api/qcckApi.js";
-import { getRecentDay } from "@/utils/tools.js";
+import { ref, defineEmits, onMounted, getCurrentInstance, watch, reactive } from "vue";
-import { qcckPost, qcckGet } from "@/api/qcckApi.js";
+import { getGazyPointList } from "@/api/dpApi/home.js";
-import { ref, defineEmits, onMounted, getCurrentInstance, onUnmounted, watch } from "vue";
-import { getGazyPointList, } from "@/api/dpApi/home.js";
 const { proxy } = getCurrentInstance();
-const { D_BZ_BMYWLX, JQLB_DP } = proxy.$dict("D_BZ_BMYWLX", "JQLB_DP");
+const { D_BZ_BMYWLX } = proxy.$dict("D_BZ_BMYWLX");
 const emit = defineEmits(["myClick"]);
-const isShowPopover = ref(false)
+const radioValue = ref('')
-const fzycTime = ref([getRecentDay(0), getRecentDay(0)]);
-const jqLx = ref({
-  list: [],
-  hasChoose: [],
-})
-const isShowKeyBox = ref(false)
-const gzymc = ref('')
-const keyList = ref([])
-const loading = ref(false)
-
-watch(() => JQLB_DP, val => {
-  jqLx.value.list = val.value.map(item => { return item.label })
-  let arr = ['打架斗殴', '侵财(两抢一盗)']
-  jqLx.value.list = jqLx.value.list.concat(arr)
-}, { deep: true })
-watch(() => gzymc.value, val => {
-  if (val == '') isShowKeyBox.value = false
-}, { deep: true })
-
 const footBtnImg = ref([
   {
-    hastc: true,
+    hastc: false,
     isChecked: false,
     iconActive: require('@/assets/my/icon-gazy-active.png'),
     icon: require("@/assets/my/icon-gazy.png"),
-    title: "公安资源",
+    title: "公安局",
+    type: 'vertical'
+  },
+  {
+    hastc: false,
+    isChecked: false,
+    iconActive: require('@/assets/my/icon-jq-active.png'),
+    icon: require("@/assets/my/icon-jq.png"),
+    title: "派出所",
+    type: 'vertical'
+  },
+  {
+    hastc: false,
+    isChecked: false,
+    iconActive: require('@/assets/my/icon-shzy-active.png'),
+    icon: require("@/assets/my/icon-shzy.png"),
+    title: "警务站",
+    type: 'vertical'
+  },
+  {
+    hastc: true,
+    isChecked: false,
+    iconActive: require('@/assets/my/icon-sb-active.png'),
+    icon: require("@/assets/my/icon-sb.png"),
+    title: "巡防区",
+    type: 'vertical'
+  },
+  {
+    hastc: false,
+    isChecked: false,
+    iconActive: require('@/assets/my/icon-kfd-active.png'),
+    icon: require("@/assets/my/icon-kfd.png"),
+    title: "快反点",
+    type: 'vertical'
+  },
+  {
+    hastc: false,
+    isChecked: false,
+    iconActive: require('@/assets/my/icon-zdfk-active.png'),
+    icon: require("@/assets/my/icon-zdfk.png"),
+    title: "重点防控点",
     type: 'vertical'
   },
   {
@@ -73,49 +86,9 @@ const footBtnImg = ref([
   }
 ]);
 
-let resource = ref({
-  checkGazy: {
-    list: ["公安局", "派出所", "警务站", '巡防区', '快反点', '重点防控点'],
-    hasChoose: []
-  },
-})
-
-
-const selectTime = ref("今日"); //选择的时间类型
-const tcType = ref([]); //警情图层类型
-const sjzyTime = ref([
-  dateFormat(new Date(), "YY-MM-DD"),
-  dateFormat(new Date(), "YY-MM-DD")
-]);
-const selectTimeYj = ref("今日"); //选择的时间类型
-const tcYjType = ref([]); //预警图层类型
-const fzycFlag = ref(false);
-const sjzyTimeYj = ref([
-  dateFormat(new Date(), "YY-MM-DD"),
-  dateFormat(new Date(), "YY-MM-DD")
-]);
-const isSd = ref(true); //是否随动
-const selectCircleDistance = ref("");
-
-const isSelected = ref(false);
 onMounted(() => {
-  emitter.emit("getCoordinatePoint", "PIO");
   window.openTExt = openTExt;
-  isSelected.value = false;
+})
-  emitter.on("followUp", (res) => { isSd.value = res; });
-});
-
-
-const cancelJl = ref([])
-const cancelJl1 = ref([])
-
-// 获取范围中心的
-function getCenterPoint(dm, text, id) {
-  qcckPost(dm, '/mosty-base/other/getZxd').then(res => {
-    let points = [res.x, res.y]
-    emitter.emit("addTEXT", { points, text, id });
-  })
-}
 
 // 高亮巡防区域
 function openTExt(id) {
@@ -128,15 +101,34 @@ function openTExt(id) {
 
 // 判断是否选择按钮
 function chooseIcon(item) {
-  switch (item.title) {
-    case "清除":
-      clearAll()
-      break;
-    case "设备位置":
   item.isChecked = !item.isChecked;
-      emitter.emit("deletePointArea", "sbwz_car");
+  switch (item.title) {
-      emitter.emit("deletePointArea", "sbwz_sb");
+    case '公安局':
-      if (item.isChecked) showSbList()
+      if (item.isChecked) showGazyMarker('公安局');
+      else emitter.emit("deletePointArea", "gaj"); //清除公安局
+      break;
+    case '派出所':
+      if (item.isChecked) showGazyMarker('派出所');
+      else emitter.emit("deletePointArea", "pcs"); //清除派出所
+      break;
+    case '警务站':
+      if (item.isChecked) showGazyMarker('警务站');
+      else emitter.emit("deletePointArea", "jwz"); //清除警务站
+      break;
+    case '重点防控点':
+      if (item.isChecked) showGazyMarker('重点防控点');
+      else emitter.emit("deletePointArea", "zdfkd"); //清除重点防控点
+      break;
+    case '快反点':
+      if (item.isChecked) {
+        showGazyMarker('快反点');
+      } else {
+        emitter.emit("deletePointArea", "kfd");//清除快反点
+        emitter.emit("deletePointArea", "kfdArea");
+      }
+      break;
+    case '清除':
+      clearAll()
       break;
   }
 }
@@ -144,86 +136,24 @@ function chooseIcon(item) {
 
 //一键清除
 function clearAll() {
-  calesrnSP()
-  emitter.emit("deletePointArea", "zdxl_fzyc");
   emitter.emit("deletePointArea", "xfq");
   emitter.emit("bd_closeOverlay", true);
   emitter.emit("closeAllDialog");
   emitter.emit("deletePointArea", "xfqJS"); //清除巡防区高亮
-  emitter.emit("removePlot", 'quan'); //移除绘制工具
-  emitter.emit("clearThermodynamicChart", 'yjMap'); //清除热力图
-  emitter.emit("clearThermodynamicChart", 'jqMap'); //清除热力图
-  emitter.emit("clearmakerSqure");
-  emitter.emit("drawLineAnimation", 'route');
-  emitter.emit("deletePointArea", 'yuan');
   emitter.emit("deletePointArea", "centerpoint");
-  emitter.emit("removeEara", 'quan');
+  radioValue.value = ''
-  emitter.emit("deletePointArea", "sbwz_car");
-  emitter.emit("deletePointArea", "sbwz_sb");
-  emitter.emit("deletePointArea", "ohterline");
-  emitter.emit("deletePointArea", "gapTextTitle");
-  emitter.emit("deletePointArea", "gapline");
-  selectTime.value = "今日";
-  selectTimeYj.value = "今日";
-  gzymc.value = ''
-  sjzyTime.value = [getRecentDay(0), getRecentDay(0)];
-  sjzyTimeYj.value = [getRecentDay(0), getRecentDay(0)];
-  tcType.value = [];
-  tcYjType.value = [];
-  isShowPopover.value = false
-  resource.value.checkGazy.hasChoose = [];
-  cancelJl1.value = []
-  cancelJl.value = []
-  jqLx.value.hasChoose = [];
-  keyList.value = [];
-  gzymc.value = '';
-  selectCircleDistance.value = ''
-  D_BZ_BMYWLX.value.forEach(v => { v.inChecek = false })
   footBtnImg.value.forEach(v => { v.isChecked = false })
-  isShoePolice([])
 }
 
-function calesrnSP() {
+// 选择巡防区域
-  emitter.emit("deletePointArea", "sp");
+function chooseTag(val) {
-  emitter.emit("deletePointArea", "kk");
+  footBtnImg.value[3].isChecked = true;
-  emitter.emit("deletePointArea", "jqMap");
-  emitter.emit("deletePointArea", "yjMap");
-}
-
-// 选择公安资源
-function changeDataGazy(val) {
-  footBtnImg.value[2].isChecked = val.length > 0 ? true : false //公安资源是否选中
-  let arr = JSON.parse(JSON.stringify(resource.value.checkGazy.hasChoose))
-  val.forEach(item => { if (!arr.includes(item)) showGazyMarker(item) })
-  resource.value.checkGazy.hasChoose = val //缓存选中的值
-  isShowPopover.value = val.includes('巡防区') ? true : false //巡访区的选项弹窗（目前是单选）
-  if (!val.includes('公安局')) emitter.emit("deletePointArea", "gaj"); //清除公安局
-  if (!val.includes('派出所')) emitter.emit("deletePointArea", "pcs"); //清除派出所
-  if (!val.includes('警务站')) emitter.emit("deletePointArea", "jwz"); //清除警务站
-  if (!val.includes('重点防控点')) emitter.emit("deletePointArea", "zdfkd"); //清除重点防控点
-  if (!val.includes('巡防区')) {
-    emitter.emit("deletePointArea", "xfq"); //清除巡防区
-    emitter.emit("deletePointArea", "ohterline");
-    emitter.emit("deletePointArea", "gapline");
-    emitter.emit("deletePointArea", "gapTextTitle");
-  }
-  if (!val.includes('快反点')) {
-    emitter.emit("deletePointArea", "kfd");//清除快反点
-    emitter.emit("deletePointArea", "kfdArea");
-  }
-}
-
-
-function chooseTag(item) {
-  D_BZ_BMYWLX.value.forEach(v => { if (v.label != item.label) v.inChecek = false })
   emitter.emit("deletePointArea", "xfq");
   emitter.emit("deleteText");
-  item.inChecek = !item.inChecek;
+  let obj = D_BZ_BMYWLX.value.find(item => {
-  if (item.inChecek) {
+    return item.label == val
-    showGazyMarker('巡防区', item.dm)
+  })
-  } else {
+  if(obj) showGazyMarker('巡防区', obj.dm)
-    showGazyMarker('巡防区')
-  }
 }
 
 // 显示公安资源信息
@@ -270,7 +200,8 @@ function showGazyMarker(val, dm) {
     let data = { ysdl: "001", yszl: "001001", ysxl: "001001006" };
     if (dm) data.bz = dm
     getGazyPointList(data).then((res) => {
-      if (res) {
+      console.log(res);
+      if ( res && res.records.length > 0) {
         let color = { stops: [], property: 'FID', }
         let linecolor = { stops: [] }
         let arrs = res.records.map((item, idx) => {
@@ -293,8 +224,6 @@ function changeColor(hex, opacity) {
   return 'rgba(' + parseInt('0x' + hex.slice(1, 3)) + ',' + parseInt('0x' + hex.slice(3, 5)) + ',' + parseInt('0x' + hex.slice(5, 7)) + ',' + opacity + ')'
 }
 
-
-
 // 处理撒点
 function handlePoint(arr, icon, flag, scale) {
   let list = arr.filter((item) => { return item.jd && item.wd; });
@@ -311,13 +240,6 @@ function handleArr(obj) {
   emitter.emit("polygonFigure", params);
 }
 
-onUnmounted(() => {
-  emitter.off("followUp");
-  emitter.off("getCoord");
-  emitter.off("getcentercoord");
-  emitter.off("coordString");
-  emitter.off("showGazy");
-});
 </script>
 
 <style lang="scss" scoped>
@@ -370,7 +292,7 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   padding-left: 20px;
-  color: #00BFFF;
+  color: #00bfff;
 }
 
 ::v-deep .el-radio {
@@ -385,7 +307,6 @@ onUnmounted(() => {
 ::v-deep .el-radio-group {
   width: 100%;
   // padding-left:20px;
-
 }
 
 ::v-deep .el-input__inner {
@@ -406,17 +327,17 @@ onUnmounted(() => {
 }
 
 ::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
-  color: #01E9ED;
+  color: #01e9ed;
 }
 
 ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
-  background-color: #01E9ED;
+  background-color: #01e9ed;
-  border-color: #01E9ED;
+  border-color: #01e9ed;
 }
 
 ::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
-  background-color: #01E9ED;
+  background-color: #01e9ed;
-  border-color: #01E9ED;
+  border-color: #01e9ed;
 }
 
 ::v-deep .el-date-editor .el-range-separator {

src/views/largeScreen/home/layout/streetGroup.vue

@@ -12,17 +12,17 @@
     <div class="searchInfo-xf">
       <el-popover placement="left" width="300px" :append-to-body="false" :visible="visible" trigger="click">
          <template #reference>
-          <Search size="20" @click="visible = !visible" />
+          <Search size="20" @click="visible = !visible"/>
         </template>
          <template #default>
-          <el-form :model="dataForm" :inline="true">
+           <el-form :model="dataForm" :inline="true" >
               <el-form-item label="关键字" label-width="68px">
                 <el-input v-model="dataForm.keyword" placeholder="请输入关键字" clearable />
               </el-form-item>
               <el-form-item label="所属部门" label-width="68px">
-              <MOSTY.Department width="176px" placeholder="请输入所属部门" clearable v-model="dataForm.ssbmdm" />
+              <MOSTY.Department width="176px" placeholder="请输入所属部门" clearable v-model="dataForm.ssbmdm"/>
             </el-form-item>
-            <el-form-item label="负责人" label-width="68px">
+              <el-form-item label="负责人" label-width="68px" >
                 <el-input v-model="dataForm.fzrXm" placeholder="请输入负责人" clearable />
               </el-form-item>
               <el-form-item label="警组"  label-width="68px">
@@ -37,6 +37,37 @@
       </el-popover>
     </div>
     <div class="boxInfo">
+      <div class="checkBox">
+        <CheckBox :data="checkData" @changeData="changeData"></CheckBox>
+      </div>
+      <ul class="groupList" v-loading="loading">
+        <li :class="item.isChecked?'active':''" v-for="item in xzList.list" :key="item.id" @click="handelClick(item)" >
+          <div class="leftInfo">
+            <div class="top-cnt">
+              <div class="top-cnt-title">
+                <img :src="item.lx == '02' ? JJ : item.lx == '03'? PCSMJ : TJ" />
+                <span>{{ item.jzMc ? item.jzMc : item.fzrXm + "巡组" }}</span>
+              </div>
+              <div class="text">
+                负责人：{{ item.fzrXm }} {{ item.fzrLxdh }}
+              </div>
+            </div>
+            <div class="address">
+              <img src="@/assets/images/situationPresentation/dingwei.png" />
+              <span class="tools"><el-tooltip :content="item.dqwz" placement="top">{{ item.dqwz  }}</el-tooltip></span>
+            </div>
+          </div>
+          <div class="sxt"><img src="@/assets/my/sxt.png" /></div>
+          <div class="xlStatus" :class="item.xfzt == 1?'lineing':item.xfzt == 2?'unline':'line'">
+           {{item.xfzt == 1?'处警中':item.xfzt == 2?'离线':'巡逻中'}} 
+          </div>
+        </li>
+        <el-empty
+          description="没有数据"
+          :image-size="0.1"
+          v-if="!loading && xzList.list.length <= 0"
+        />
+      </ul>
     </div>
   </div>
 </template>
@@ -49,10 +80,10 @@ import CheckBox from "@/components/checkBox/index";
 import { getSelectDeckList } from "@/api/dpApi/home.js";
 import openWebSocket from "@/utils/webSocket.js";
 import { useStore } from "vuex";
-import { ref, reactive, onMounted, defineEmits, onBeforeUnmount } from "vue";
+import { ref, reactive, onMounted, defineEmits,onBeforeUnmount } from "vue";
 const checkData = reactive({
-  list: [],
+  list: ["巡逻中", "离线"],
-  hasChoose: []
+  hasChoose: ["巡逻中","便衣"]
 });
 const TJ = require(`@/assets/mapIcon/specialPolice.png`);
 const JJ = require(`@/assets/mapIcon/trafficPolice.png`);
@@ -62,12 +93,10 @@ const loading = ref(false); //警组加载
 let xzList = reactive({
   list: []
 }); //巡组数据
-const zzlx = ref(null)
 const pageSize = ref(500);
 const pageCurrent = ref(1);
 const totalPage = ref(0);
-const status = ref([0, 1, 2]); //巡组状态
+const status = ref([0,1,2]); //巡组状态
-const qwlx = ref('01,02')
 const jd = ref(104.14637342);
 const dataForm = ref({})
 const visible = ref(false)
@@ -76,13 +105,14 @@ let timer;
 onMounted(() => {
   _ggetSelectDeckList("0,1,2");// 查询巡逻中数据
   getWebSocketData();//websoket
-  emitter.on("showGroupPoint", val => {
+  handelscroll()//滚动加载
+  emitter.on("showGroupPoint",val=>{
     isTootChange.value = true
     _ggetSelectDeckList("0,1,2");// 查询巡逻中数据
   })
 });
 
-onBeforeUnmount(() => {
+onBeforeUnmount(()=>{
   openWebSocket.close()
   emitter.off("showGroupPoint")
 })
@@ -99,7 +129,7 @@ function getWebSocketData() {
           //一键报警
          case "01":
             let { jd, wd } = newsDate.data;
-            emitter.emit("addPointArea", { coords: [{ jd, wd }], icon: require("@/assets/point/sos.png"), flag: "sosPoint" });
+            emitter.emit("addPointArea", { coords: [{ jd, wd }], icon: require("@/assets/point/sos.png"), flag: "sosPoint"});
             emitter.emit("SsCircle", JSON.parse(e.data).data);
             break;
             //一键报警处置完成
@@ -124,7 +154,7 @@ function getWebSocketData() {
               if (value.id == dataInfo.id && isShowGroupPoint) {
                 delPointMaker(dataInfo); //清除原来的撒点
                 xzList.list.splice(index, 1);
-                if (dataInfo.xfzt != 2) {
+                if(dataInfo.xfzt != 2){
                   xzList.list.unshift(dataInfo);
                   addPointMaker([dataInfo]); //撒点
                 }
@@ -150,11 +180,11 @@ function getWebSocketData() {
 }
 
 
-function handleFilter() {
+function handleFilter(){
   changeData(checkData.hasChoose)
   visible.value = false
 }
-function reset() {
+function reset(){
   dataForm.value = {}
   visible.value = false
   handleFilter()
@@ -167,42 +197,32 @@ function changeData(val) {
   isTootChange.value = false;
   let scrollTargetBox = document.querySelector(".groupList");
   scrollTargetBox.scrollTop = 0
-  if (val.length == 0) {
+  if(val.length == 0){
     emitter.emit("deletePointZBAll"); ////清除装备-人员
     status.value = ''
     xzList.list = []
-  } else {
+  }else{
     let arr = []
-    let brr = []
+    val.forEach(item=>{ 
-    zzlx.value = null
+      if(item == '巡逻中') arr.push(0)
-    val.forEach(item => {
+      if(item == '离线') arr.push(2)
-      if (item == '巡逻中') arr.push(0)
-      if (item == '处警中') arr.push(1)
-      if (item == '离线') arr.push(2)
-      if (item == '机关值班') brr.push('01')
-      if (item == '动中备勤') brr.push('02')
-      if (item == '其他勤务') brr.push('03')
-      if (item == '便衣') zzlx.value = '1'
     })
     status.value = arr.join(',')
-    qwlx.value = brr.join(',')
+    _ggetSelectDeckList(status.value);
-    _ggetSelectDeckList(status.value, qwlx.value);
   }
 }
 //巡组列表
-function _ggetSelectDeckList(staus, qwlx) {
+function _ggetSelectDeckList(staus) {
-  if (!isTootChange.value) loading.value = true;
+  if(!isTootChange.value) loading.value = true;
   let data = {
-    xfzt: staus,
+    xfzt:staus,
-    qwlx: qwlx,
     pageSize: pageSize.value,
     pageCurrent: pageCurrent.value,
-    fzrXm: dataForm.value.fzrXm,
+    fzrXm:dataForm.value.fzrXm,
-    jzMc: dataForm.value.jzMc,
+    jzMc:dataForm.value.jzMc,
-    ssbmdm: dataForm.value.ssbmdm,
+    ssbmdm:dataForm.value.ssbmdm,
-    keyword: dataForm.value.keyword,
+    keyword:dataForm.value.keyword,
   };
-  if (zzlx.value && checkData.hasChoose.length != 7) data.zzlx = zzlx.value;
   getSelectDeckList(data).then((res) => {
     emitter.emit("deletePointZBAll"); //清除装备-人员 
     loading.value = false;
@@ -210,9 +230,9 @@ function _ggetSelectDeckList(staus, qwlx) {
     xzList.list =  pageCurrent.value == 1 ? arr : xzList.list.concat(arr);
     let icon = require(`@/assets/mapIcon/police-car-bx.png`)
     let brrSd = xzList.list.filter((v) => { return v.jd && v.wd; });
-    if (isShowGroupPoint) {
+    if(isShowGroupPoint) {
       addPointMaker(brrSd) //撒点
-      emitter.emit("setMapCenter", { location: [brrSd[0].jd, brrSd[0].wd], zoomLevel: 10 });
+      emitter.emit("setMapCenter", {location: [brrSd[0].jd, brrSd[0].wd], zoomLevel: 10 });
     }
   }).catch(() => { loading.value = false; });
 }
@@ -224,7 +244,7 @@ const delPointMaker = (data) => {
 };
 // 撒点
 const addPointMaker = (data) => {
-  let pramas = { coords: data, isBounds: true, showTitle: true, flag: "rx" }
+  let pramas = { coords: data,isBounds:true,showTitle:true,flag: "rx" }
   emitter.emit("addPointArea", pramas);
 };
 //查看警组信息
@@ -233,7 +253,7 @@ function handelClick(item) {
   emitter.emit("deletePointArea", "route");
   emitter.emit("deletePointArea", "kfdArea");
   emitter.emit("deletePointArea", "kfd");
-  xzList.list.forEach(v => { if (v.id != item.id) v.isChecked = false })
+  xzList.list.forEach(v=>{ if(v.id != item.id) v.isChecked = false})
   item.isChecked = !item.isChecked
   emitter.emit("showJzInfo", item);
   if (item.jd && item.wd) {
@@ -262,131 +282,108 @@ function handelscroll() {
 <style lang="scss" scoped>
 @import "@/assets/css/homeScreen.scss";
 
-::v-deep .el-checkbox__label {
+::v-deep .el-checkbox__label{
-  color: #fff;
+  color:#fff;
 }
-
+::v-deep .el-checkbox__input.is-checked+.el-checkbox__label{
-::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
+  color:yellow;
-  color: yellow;
 }
-
+::v-deep .el-checkbox__input.is-checked .el-checkbox__inner{
-::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
   background-color: #b2be0d;
-  border-color: #b2be0d;
+  border-color:#b2be0d;
 }
-
+::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner{
-::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
   background-color: #b2be0d;
-  border-color: #b2be0d;
+  border-color:#b2be0d;
 }
-
+.boxContent{
-.boxContent {
   position: relative;
-
   // z-index:99;
-  .searchInfo-xf {
+  .searchInfo-xf{
-    position: absolute;
+    position:absolute;
-    top: 32px;
+    top:32px;
-    right: 20px;
+    right:20px;
-
+    ::v-deep .icon{
-    ::v-deep .icon {
+      width:20px ;
-      width: 20px;
+      height:20px;
-      height: 20px;
     }
-
+    ::v-deep .el-popper.is-light{
-    ::v-deep .el-popper.is-light {
       background: #0a1d43;
       border: 1px solid #4565a4;
     }
-
+    ::v-deep .el-popper.is-light .el-form-item__label{
-    ::v-deep .el-popper.is-light .el-form-item__label {
+      color:#fff;
-      color: #fff;
     }
-
+    ::v-deep .el-popper.is-light .el-popper__arrow::before{
-    ::v-deep .el-popper.is-light .el-popper__arrow::before {
         border: 1px solid #4565a4;
         background: #0a1d43;
     }
   }
 }
-
 ul.groupList {
   height: calc(100% - 67px);
   overflow-y: auto;
   margin-top: 8px;
-
   li {
     position: relative;
     display: flex;
     margin-top: 8px;
     padding-bottom: 3px;
-    border: 1px solid #0d5897;
+    border:1px solid #0d5897;
     box-shadow: inset 0 0 10px #0d5897;
     border-radius: 2px;
-
     &:hover {
       box-shadow: inset 0px 0px 15px #0474c3;
     }
-
     .leftInfo {
       flex: 1;
-
       .top-cnt {
         padding: 0 12px;
         padding-top: 8px;
         line-height: 22px;
         padding-bottom: 6px;
-
         .top-cnt-title {
           width: 80%;
           font-size: 14px;
-
           img {
             vertical-align: bottom;
             margin-right: 4px;
-            width: 15px;
+            width:15px;
           }
         }
-
         .text {
           color: #00bfff;
           line-height: 33px;
         }
-
+        .bz{
-        .bz {
           color: #fff;
         }
       }
-
       .address {
         margin: 0 14px;
         border-top: 1px solid #162f55;
         height: 30px;
         line-height: 30px;
         color: #6486ae;
-        display: flex;
+        display:flex;
         align-items: center;
-
         img {
           margin-right: 6px;
           vertical-align: text-top;
         }
-
+        .tools{
-        .tools {
+          display:inline-block;
-          display: inline-block;
+          max-width:270px;
-          max-width: 270px;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
         }
       }
     }
-
     .sxt {
       position: relative;
       width: 30px;
       margin-left: 10px;
-
       img {
         position: absolute;
         bottom: 20px;
@@ -394,18 +391,15 @@ ul.groupList {
       }
     }
   }
-
   li.active {
     border: 1px solid #108fe7;
-    box-shadow: inset 0 0 10px #108fe7;
+    box-shadow:inset 0 0 10px #108fe7;
   }
 }
-
 ::v-deep .el-loading-mask {
   background: rgba(0, 0, 0, 0.3);
 }
-
+::v-deep .el-checkbox{
-::v-deep .el-checkbox {
   margin-right: 11px;
 }
 </style>