Merge branch 'jzl'

zh-baseversion-web/src/api/bigWindow/getDevice.js

 /*
  * @Author: your name
  * @Date: 2022-02-23 15:28:07
- * @LastEditTime: 2022-03-08 14:52:13
- * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-07-18 15:13:55
+ * @LastEditors: 纪泽龙 jizelong@qq.com
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /newDev/gassafety-progress/gassafetyprogress-web/src/api/bigWindow/getdevice.js
  */
-import request from '@/utils/request'
+import request from "@/utils/request";
 
 // 查询管道去查询
 export function getPipeForSelect(query) {
   return request({
-    url: '/pipe/pipe/getPipeForSelect',
-    method: 'get',
-    params: query
-  })
+    url: "/pipe/pipe/getPipeForSelect",
+    method: "get",
+    params: query,
+  });
 }
 
 // 查询管道
 export function getPipe(query) {
   return request({
-    url: '/pipe/pipe/selectPipeData',
-    method: 'get',
-    params: query
-  })
+    url: "/pipe/pipe/selectPipeData",
+    method: "get",
+    params: query,
+  });
 }
 
 // 调压箱
 export function getTyx(query) {
   return request({
-    url: '/pipe/pipe/selectDeviceData',
-    method: 'get',
-    params: query
-  })
+    url: "/pipe/pipe/selectDeviceData",
+    method: "get",
+    params: query,
+  });
 }
 // 调压箱下面的设备接口
 export function getTyxDevice(query) {
   return request({
-    url: '/pipe/pipe/selectPressureFlow',
-    method: 'get',
-    params: query
-  })
+    url: "/pipe/pipe/selectPressureFlow",
+    method: "get",
+    params: query,
+  });
 }
 
-
 // 是阀门
 export function getFm(query) {
   return request({
-    url: '/pipe/pipe/selectvalveData',
-    method: 'get',
-    params: query
-  })
+    url: "/pipe/pipe/selectvalveData",
+    method: "get",
+    params: query,
+  });
 }
 
 // 阀门下面的设备接口
 export function getFmDevice(query) {
   return request({
-    url: '/pipe/pipe/selectPressureFlow',
-    method: 'get',
-    params: query
-  })
+    url: "/pipe/pipe/selectPressureFlow",
+    method: "get",
+    params: query,
+  });
 }
 
-
 // 厂站
 export function getCz(query) {
   return request({
-    url: '/pipe/pipe/selectTSiteStationInfoData',
-    method: 'get',
-    params: query
-  })
+    url: "/pipe/pipe/selectTSiteStationInfoData",
+    method: "get",
+    params: query,
+  });
 }
 // 场站下的设备
 export function getCzDevice(query) {
   return request({
-    url: '/pipe/pipe/selecttSiteStationInfoData',
-    method: 'get',
-    params: query
-  })
+    url: "/pipe/pipe/selecttSiteStationInfoData",
+    method: "get",
+    params: query,
+  });
 }
 // 设备id ：devId   类型 relationDeviceType   1调压箱/阀门井   2场站
 export function getTcqDevice(query) {
   return request({
-    url: '/pipe/pipe/selectSensingDevice',
-    method: 'get',
+    url: "/pipe/pipe/selectSensingDevice",
+    method: "get",
     params: {
       pageNum: 1,
       pageSize: 20,
       ...query,
     },
-  })
+  });
 }
 
-
 // 液化气
 export function getYhq(query) {
   return request({
-    url: '/system/yehuaqiUser/allList',
-    method: 'get',
-    params: query
-  })
+    url: "/system/yehuaqiUser/allList",
+    method: "get",
+    params: query,
+  });
 }
 export function getyhqUser(query) {
   return request({
-    url: '/system/yehuaqiDevice/list',
-    method: 'get',
-    params: query
-  })
+    url: "/system/yehuaqiDevice/list",
+    method: "get",
+    params: query,
+  });
 }
 export function deviceUser() {
   return request({
-    url: '/system/deviceUser/allListbyTownship',
-    method: 'get',
-  })
+    url: "/system/deviceUser/allListbyTownship",
+    method: "get",
+  });
 }
 export function deviceUserList(query) {
   return request({
-    url: '/system/deviceUser/list',
-    method: 'get',
-    params: query
-  })
+    url: "/system/deviceUser/list",
+    method: "get",
+    params: query,
+  });
 }
 // 监控
 export function getVideo(query) {
   return request({
-    url: '/pipe/pipe/selectTvideoManagerData',
-    method: 'get',
-    params: query
-  })
+    url: "/pipe/pipe/selectTvideoManagerData",
+    method: "get",
+    params: query,
+  });
 }
 // 燃气用户接口
 export function getUser(query) {
   return request({
-    url: '/pipe/pipe/selectTdetectorUser',
-    method: 'get',
-    params: query
-  })
+    url: "/pipe/pipe/selectTdetectorUser",
+    method: "get",
+    params: query,
+  });
 }
 // 企业接口
 export function getEnterprise(query) {
   return request({
-    url: '/regulation/info/enterpriseInfoList',
-    method: 'get',
-    params: query
-  })
+    url: "/regulation/info/enterpriseInfoList",
+    method: "get",
+    params: query,
+  });
 }
 
 // 获取公司名称以及id
 export function getCompany(query) {
   return request({
-    url: '/pipe/pipe/selectTenterpriseInfoData',
-    method: 'get',
-    params: query
-  })
+    url: "/pipe/pipe/selectTenterpriseInfoData",
+    method: "get",
+    params: query,
+  });
 }
 // 报警
 export function userAlarm(query) {
   return request({
-    url: '/supervise/user/getDetectorUserAlarmList',
-    method: 'get',
-    params: query
-  })
+    url: "/supervise/user/getDetectorUserAlarmList",
+    method: "get",
+    params: query,
+  });
+}
+
+// 搜索设备
+export function searchDevice(query) {
+  return request({
+    url: "/device/device/queryBasicInforByNameForBigWindows",
+    method: "get",
+    params: query,
+  });
+}
+export function searchDeviceDetail(query) {
+  return request({
+    url: "/device/device/queryBasicInforByTypeAndIdForBigWindows",
+    method: "get",
+    params: query,
+  });
 }

zh-baseversion-web/src/assets/styles/all.scss

@@ -7,48 +7,63 @@
 .pt5 {
   padding-top: 5px;
 }
+
 .pr5 {
   padding-right: 5px;
 }
+
 .pb5 {
   padding-bottom: 5px;
 }
+
 .mt5 {
   margin-top: 5px;
 }
+
 .mr5 {
   margin-right: 5px;
 }
+
 .mb5 {
   margin-bottom: 5px;
 }
+
 .mb8 {
   margin-bottom: 8px;
 }
+
 .ml5 {
   margin-left: 5px;
 }
+
 .mt10 {
   margin-top: 10px;
 }
+
 .mr10 {
   margin-right: 10px;
 }
+
 .mb10 {
   margin-bottom: 10px;
 }
+
 .ml0 {
   margin-left: 10px;
 }
+
 .mt20 {
   margin-top: 20px;
 }
+
 .mr20 {
   margin-right: 20px;
 }
+
 .mb20 {
   margin-bottom: 20px;
 }
+
 .m20 {
   margin-left: 20px;
 }
@@ -56,12 +71,16 @@
 .el-dialog:not(.is-fullscreen) {
   margin-top: 6vh !important;
 }
+
 .el-dialog__header {
   border-bottom: 1px solid #cccccc;
 }
+
 .bigwindow {
+
   // 全局表格样式
   .el-table {
+
     .el-table__header-wrapper,
     .el-table__fixed-header-wrapper {
       th {
@@ -72,9 +91,11 @@
         font-size: 13px;
       }
     }
+
     .el-table__body-wrapper {
       .el-table__row:nth-child(2n + 1) {
         background-color: #e6e6e6;
+
         // &:hover {
         //   td {
         //     background-color: #f4f4f4;
@@ -86,8 +107,10 @@
           }
         }
       }
+
       .el-table__row:nth-child(2n) {
         background-color: #f4f4f4;
+
         // &:hover {
         //   td {
         //     background-color: #e6e6e6;
@@ -100,8 +123,9 @@
         }
       }
     }
+
     .el-table__body-wrapper {
-      .el-button [class*="el-icon-"] + span {
+      .el-button [class*="el-icon-"]+span {
         margin-left: 1px;
       }
     }
@@ -111,24 +135,30 @@
   .drawer {
     .el-button {
       color: #ffffff;
+
       &:not(.is-disabled):hover {
         color: rgb(46, 231, 231);
       }
+
       &.is-disabled {
         border-color: #ccccccc3 !important;
         color: #ccccccc3;
       }
     }
   }
+
   .right-bottom-data-left {
     .el-table {
       background-color: rgb(11 22 37 / 0%) !important;
+
       .el-table__body {
         width: 100% !important;
       }
+
       &::before {
         height: 0px !important;
       }
+
       td {
         border-bottom: none !important;
       }
@@ -138,6 +168,7 @@
         tr {
           background-color: #213b52 !important;
         }
+
         th {
           word-break: break-word;
           background-color: #213b52 !important;
@@ -145,17 +176,21 @@
           height: 30px;
           font-size: 13px;
           padding: 0;
+
           &.is-leaf {
             border-bottom: none;
           }
         }
       }
+
       .el-table__body-wrapper {
         .el-table__row:nth-child(2n + 1) {
           background-color: rgb(11 22 37);
+
           &:hover td {
             background-color: #7bf8f430 !important;
           }
+
           td {
             .cell {
               // color: #525252;
@@ -163,11 +198,14 @@
             }
           }
         }
+
         .el-table__row:nth-child(2n) {
           background-color: #213b52;
+
           &:hover td {
             background-color: #7bf8f430 !important;
           }
+
           td {
             .cell {
               color: #fff;
@@ -175,12 +213,14 @@
           }
         }
       }
+
       .el-table__body-wrapper {
-        .el-button [class*="el-icon-"] + span {
+        .el-button [class*="el-icon-"]+span {
           // margin-left: 1px;
         }
       }
     }
+
     // 滚动条样式
     .el-table--scrollable-y {
       .el-table__body-wrapper {
@@ -190,6 +230,7 @@
           position: absolute;
           top: 0;
         }
+
         &::-webkit-scrollbar-thumb {
           /*滚动条里面小方块*/
           // border-radius: 10px;
@@ -197,6 +238,7 @@
           background: #00000052;
           border-radius: 8px;
         }
+
         &::-webkit-scrollbar-track {
           /*滚动条里面轨道*/
           // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
@@ -207,6 +249,7 @@
         &::-webkit-scrollbar-button:start {
           // overflow: hidden;
         }
+
         &::-webkit-scrollbar-button:end {
           // overflow: hidden;
         }
@@ -215,6 +258,7 @@
       }
     }
   }
+
   // gis地图右上角的滚动条隐藏
   .rightPic {
     .el-table {
@@ -224,40 +268,49 @@
       }
     }
   }
+
   .videoView {
     .el-dialog__body {
       padding: 0;
     }
   }
+
   // center下的分页
   .myCenter {
     .el-pagination {
       button:disabled {
         background-color: rgba(0, 0, 0, 0);
       }
+
       .el-pager li {
         background-color: rgba(0, 0, 0, 0);
         color: #fff;
         cursor: pointer;
+
         &.active {
           color: #1890ff;
         }
+
         &:hover {
           color: #7bf8f4;
         }
       }
+
       .btn-prev,
       .el-pagination .btn-next {
         background-color: rgba(0, 0, 0, 0);
       }
     }
+
     .el-pagination .btn-prev,
     .el-pagination .btn-next {
       background-color: rgba(0, 0, 0, 0);
     }
+
     // 禁用状态的左箭头
     button[disabled] {
       &:hover {
+
         .el-icon-arrow-left,
         .el-icon-arrow-right {
           &::before {
@@ -265,6 +318,7 @@
           }
         }
       }
+
       .el-icon-arrow-left,
       .el-icon-arrow-right {
         &::before {
@@ -272,8 +326,10 @@
         }
       }
     }
+
     button {
       &:hover {
+
         .el-icon-arrow-left,
         .el-icon-arrow-right {
           &::before {
@@ -282,6 +338,7 @@
         }
       }
     }
+
     // 平常状态下的
     .el-icon-arrow-left,
     .el-icon-arrow-right {
@@ -289,15 +346,18 @@
         color: #ffffff;
       }
     }
+
     .el-pagination__jump {
       color: #fff;
     }
+
     .el-input__inner {
       background-color: rgba(0, 0, 0, 0);
       border-color: #1890ff;
       color: #fff;
     }
   }
+
   // gis地图里抽屉的搜索样式
   .search-input {
     .el-input__inner {
@@ -306,12 +366,14 @@
       outline: #053b6a;
       background: none !important;
       color: #fff;
+
       &:focus {
         // outline: #053b6a;
         border-color: #fff;
       }
     }
   }
+
   /** 表单布局 **/
   .form-header {
     font-size: 15px;
@@ -349,11 +411,11 @@
     width: inherit;
   }
 
-  .el-tree-node__content > .el-checkbox {
+  .el-tree-node__content>.el-checkbox {
     margin-right: 8px;
   }
 
-  .list-group-striped > .list-group-item {
+  .list-group-striped>.list-group-item {
     border-left: 0;
     border-right: 0;
     border-radius: 0;
@@ -475,12 +537,14 @@
     position: relative;
     float: right;
   }
+
   // 上传按钮
   .hide {
     .el-upload--picture-card {
       display: none;
     }
   }
+
   // 所有的提示框标题
   .el-dialog__header {
     padding-bottom: 0;
@@ -488,22 +552,25 @@
     height: 51px;
     line-height: 50px;
     background-color: #053b6a;
+
     .el-dialog__title {
       display: inline-block;
       margin-left: 22px;
       color: #fff;
     }
+
     .el-dialog__headerbtn {
       i {
         color: #fff;
       }
     }
+
     // background-color: ;
   }
 
   // gis地图内的bottom列表，如果隐藏在出现会有一个bug，这样可以解决
   .b {
-    & > .el-bottom {
+    &>.el-bottom {
       .el-table__body-wrapper {
         height: 140px !important;
       }
@@ -526,9 +593,11 @@
       }
     }
   }
+
   // 设备巡检详情页表格样式
   .inspectiondetail {
     .el-table {
+
       .el-table__header-wrapper,
       .el-table__fixed-header-wrapper {
         th {
@@ -539,9 +608,11 @@
           font-size: 14px;
         }
       }
+
       .el-table__body-wrapper {
         .el-table__row:nth-child(2n + 1) {
           background-color: #e6e6e6;
+
           // &:hover {
           //   td {
           //     background-color: #f4f4f4;
@@ -553,8 +624,10 @@
             }
           }
         }
+
         .el-table__row:nth-child(2n) {
           background-color: #f4f4f4;
+
           // &:hover {
           //   td {
           //     background-color: #e6e6e6;
@@ -567,8 +640,9 @@
           }
         }
       }
+
       .el-table__body-wrapper {
-        .el-button [class*="el-icon-"] + span {
+        .el-button [class*="el-icon-"]+span {
           margin-left: 1px;
         }
       }
@@ -590,6 +664,7 @@
       // position: absolute;
       // top: 0;
     }
+
     &::-webkit-scrollbar-thumb {
       /*滚动条里面小方块*/
       // border-radius: 10px;
@@ -598,6 +673,7 @@
 
       border-radius: 8px;
     }
+
     &::-webkit-scrollbar-track {
       /*滚动条里面轨道*/
       // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
@@ -608,6 +684,7 @@
     &::-webkit-scrollbar-button:start {
       // overflow: hidden;
     }
+
     &::-webkit-scrollbar-button:end {
       // overflow: hidden;
     }
@@ -620,6 +697,7 @@
 .map-bottom-wrapper {
   .el-table {
     .el-table__body-wrapper {
+
       // 滚动条样式
       &::-webkit-scrollbar {
         width: 10px;
@@ -628,6 +706,7 @@
         // position: absolute;
         // top: 0;
       }
+
       &::-webkit-scrollbar-thumb {
         /*滚动条里面小方块*/
         // border-radius: 10px;
@@ -636,6 +715,7 @@
 
         border-radius: 8px;
       }
+
       &::-webkit-scrollbar-track {
         /*滚动条里面轨道*/
         // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
@@ -646,42 +726,51 @@
       &::-webkit-scrollbar-button:start {
         overflow: hidden;
       }
+
       &::-webkit-scrollbar-button:end {
         overflow: hidden;
       }
     }
   }
+
   .el-table::before {
     height: 0px;
   }
+
   .el-table__fixed::before {
     height: 0px;
   }
+
   .el-table__header {
     tr th {
       background-color: rgba(24, 144, 255, 0.1);
+
       &.gutter {
         display: none;
       }
     }
   }
+
   .el-table__row {
     td {
       padding: 0 !important;
     }
   }
 }
+
 // map里的label
 .amap-info {
   position: fixed !important;
   z-index: 999 !important;
 }
+
 .amap-marker-label {
   background-color: rgba(9, 18, 32, 0.6) !important;
   color: #fff !important;
   border: none !important;
   padding: 10px;
 }
+
 .left {
   .el-table__body-wrapper {
     overflow-x: hidden !important;
@@ -697,6 +786,7 @@
   margin-bottom: 25px;
   margin-right: 25px;
 }
+
 .el-icon-chat-dot-round {
   font-family: "element-icons" !important;
   speak: none;
@@ -715,18 +805,22 @@
   color: #5a5e66;
   -moz-osx-font-smoothing: grayscale;
 }
+
 .el-badge__content.is-fixed {
   top: 15px !important;
   right: -5px !important;
 }
+
 .el-badge__content {
   padding: 0 2px !important;
 }
+
 //去除高德logo
 .amap-logo {
   display: none;
   opacity: 0 !important;
 }
+
 .amap-copyright {
   opacity: 0;
 }
@@ -740,9 +834,10 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.echarts-tooltip{
+
+.echarts-tooltip {
   background-color: transparent !important;
-  box-shadow:none !important;
+  box-shadow: none !important;
   // pointer-events:auto !important;
   // top:-30px !important;
 }
@@ -750,3 +845,35 @@
 
 
 
+.gdt {
+  
+  &::-webkit-scrollbar {
+    width: 10px;
+    background: #012a53;
+    position: absolute;
+    top: 0;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    /*滚动条里面小方块*/
+    // border-radius: 10px;
+    // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background: #00000052;
+    border-radius: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    /*滚动条里面轨道*/
+    // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    // border-radius: 10px;
+    // background-color: red;
+  }
+
+  &::-webkit-scrollbar-button:start {
+    // overflow: hidden;
+  }
+
+  &::-webkit-scrollbar-button:end {
+    // overflow: hidden;
+  }
+}
\ No newline at end of file

zh-baseversion-web/src/assets/styles/transition.scss

@@ -40,9 +40,22 @@
 }
 
 .breadcrumb-move {
-  transition: all .5s;
+  transition: all .1s;
 }
 
 .breadcrumb-leave-active {
   position: absolute;
 }
+
+
+
+/* .fadeBottom */
+.fadeBottom-enter-active,
+.fadeBottom-leave-active {
+  transition: opacity 0.5s;
+}
+
+.fadeBottom-enter,
+.fadeBottom-leave-active {
+  opacity: 0;
+}

zh-baseversion-web/src/utils/mapClass/config.js

 /*
  * @Author: your name
  * @Date: 2022-01-26 10:47:44
- * @LastEditTime: 2022-04-14 15:38:29
- * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-07-18 17:36:58
+ * @LastEditors: 纪泽龙 jizelong@qq.com
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /test/hello-world/src/utils/config.js
  */
@@ -27,12 +27,16 @@ export const alarmtime = 10000;
 
 export const svgUrl = {
   // bigwindow页面的设备
-  2: require("@/assets/firstimage/tiaoyaxiang.svg"),
-  3: require("@/assets/firstimage/famen.svg"),
-  4: require("@/assets/firstimage/changzhan.svg"),
-  5: require("@/assets/firstimage/jiankong.svg"),
-  6: require("@/assets/firstimage/user.svg"),
-  61: require("@/assets/firstimage/user1.svg"),
+  2: require("@/assets/firstimage/device/tyx.png"),
+  3: require("@/assets/firstimage/device/fmj.png"),
+  4: require("@/assets/firstimage/device/cz.png"),
+
+  5: require("@/assets/firstimage/device/video.png"),
+
+  //居民用户
+  6: require("@/assets/firstimage/device/jmUser.png"),
+  // 商业用户
+  61:require("@/assets/firstimage/device/syUser.png"),
   7: require("@/assets/image/zrxk.svg"),
   8: require("@/assets/image/zcrq.svg"),
 
@@ -51,7 +55,8 @@ export const svgUrl = {
   16: require("@/assets/image/yj-xj.png"),
   //煤气罐罐  运行监测   气瓶回溯
   17: require("@/assets/mapinages/meiqiguan.svg"),
-  18: require("@/assets/firstimage/yehuaqi.svg"),
+  // 液化气用户
+  18: require("@/assets/firstimage/device/yhqUser.png"),
 
   // 巡检巡查
   98: require("@/assets/image-xjxc/start.svg"),

zh-baseversion-web/src/utils/mapClass/map.js

 /*
  * @Author: your name
  * @Date: 2022-01-11 13:45:12
- * @LastEditTime: 2023-07-19 18:02:31
+ * @LastEditTime: 2024-07-18 17:07:55
  * @LastEditors: 纪泽龙 jizelong@qq.com
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /test/hello-world/src/utils/mapClass.js
@@ -64,12 +64,15 @@ export class EditorMap {
   //餐饮单位液化气用户
   deviceUserlableLayer = null;
 
+  // 通过搜索出来的设备，用它存
+  searchDevice = null;
+
   selarr = [];
 
   constructor(contaienr, config = {}, vue) {
     this.map = new AMap.Map(contaienr, {
       viewMode: "3D",
-      center: [114.684979,38.038292],
+      center: [114.684979, 38.038292],
       layers: [AMap.createDefaultLayer()], // layers 字段为空或者不赋值将会自动创建默认底图。
       zoom: 14,
       zooms: [3, 20],
@@ -224,7 +227,7 @@ export class EditorMap {
         }
       }
     });
-    this.map.on("movestart",()=>{
+    this.map.on("movestart", () => {
       console.log("地图开始移动");
 
       //居民用户
@@ -282,7 +285,7 @@ export class EditorMap {
           this.deviceUserlableLayer.hide();
         }
       }
-    })
+    });
     // this.map.on('zoomchange', () => {
     //   //获取当前最新的地图层级
     //    let Zoom = this.map.getZoom()
@@ -459,7 +462,7 @@ export class EditorMap {
       icon,
       position: [lng, lat],
       extData: deviceData,
-      alwaysRender: false
+      alwaysRender: false,
       // label:{
       //   content:123,
       //   direction:"top",
@@ -578,7 +581,7 @@ export class EditorMap {
     // return new AMap.MarkerClusterer(MarkerOptions);
   }
 
-  filterSelectPipe(id,mediumComponent,lng, lat) {
+  filterSelectPipe(id, mediumComponent, lng, lat) {
     this.pipeArr[6].forEach((pipe) => {
       const deviceExtData = pipe.getExtData();
       if (deviceExtData.pipeId === id) {
@@ -606,76 +609,86 @@ export class EditorMap {
         });
         this.infowindow.open(this.map);
       }
-    })
+    });
   }
-    /**
+  /**
    *  地图上添加 餐饮单位液化气用户 海量标注 LabelMarker 方式
    * @param {*} detectorUserData
    * @param {*} compontent
    * @param {*} showBool
    */
-    labelsLayerMarksDeviceUserGoMap(mapData,compontent,showBool = true){
-
-      if(mapData != null) {
-        const hashMap = new Map();
-        this.deviceUserlableLayer = new AMap.LabelsLayer({
-          zooms: [3, 20],
-          zIndex: 1000,
-          collision: true, //该层内标注是否避让
-          allowCollision: false, //不同标注层之间是否避让
-        });
-            //设置一个图标对象
-        const icon = {
-          type: "image", //图标类型，现阶段只支持 image 类型
-          image: svgUrl[18], //可访问的图片 URL
-          size: [44, 49], //图片尺寸
-          anchor: "center", //图片相对 position 的锚点，默认为 bottom-center
+  labelsLayerMarksDeviceUserGoMap(mapData, compontent, showBool = true) {
+    if (mapData != null) {
+      const hashMap = new Map();
+      this.deviceUserlableLayer = new AMap.LabelsLayer({
+        zooms: [3, 20],
+        zIndex: 1000,
+        collision: true, //该层内标注是否避让
+        allowCollision: false, //不同标注层之间是否避让
+      });
+      //设置一个图标对象
+      const icon = {
+        type: "image", //图标类型，现阶段只支持 image 类型
+        image: svgUrl[18], //可访问的图片 URL
+        size: [44, 49], //图片尺寸
+        anchor: "center", //图片相对 position 的锚点，默认为 bottom-center
+      };
+      var markers = [];
+
+      mapData.forEach((item) => {
+        let longitude = item.longitude;
+        let latitude = item.latitude;
+        var userId = item.userId;
+        icon.userId = userId;
+        var curData = {
+          position: [longitude, latitude],
+          icon: icon,
+          rank: 1, //避让优先级
         };
-        var markers = [];
-
-        mapData.forEach(item => {
-          let longitude =  item.longitude;
-          let latitude = item.latitude;
-          var userId = item.userId;
-          icon.userId = userId;
-          var curData = {
-              position: [longitude, latitude],
-              icon: icon,
-              rank: 1, //避让优先级
-          };
 
-          hashMap.set(JSON.stringify(userId),item);
-          //创建 LabelMarker
-          const labelMarker = new AMap.LabelMarker(curData);
-          // var marker = new AMap.Marker(curData);
-          markers.push(labelMarker);
-
-          labelMarker.on("click", (e) => {
-            var opts = JSON.stringify(e.data.opts);
-            var optsObj = JSON.parse(opts);
-            var userId = JSON.stringify(optsObj.icon.userId);
-            var extData = hashMap.get(userId);
-            // 如果control==0就是默认值，没有使用123功能，就显示infowindow
-            this.massMarksMarkerClick(extData, compontent);
-          });
-        });
+        hashMap.set(JSON.stringify(userId), item);
+        //创建 LabelMarker
+        const labelMarker = new AMap.LabelMarker(curData);
+        // var marker = new AMap.Marker(curData);
+        markers.push(labelMarker);
 
-        this.deviceUserlableLayer.add(markers);
-        this.map.add(this.deviceUserlableLayer)
-        if (!showBool) {
-          this.deviceUserlableLayer.hide();
+        labelMarker.on("click", (e) => {
+          var opts = JSON.stringify(e.data.opts);
+          var optsObj = JSON.parse(opts);
+          var userId = JSON.stringify(optsObj.icon.userId);
+          var extData = hashMap.get(userId);
+          // 如果control==0就是默认值，没有使用123功能，就显示infowindow
+          this.massMarksMarkerClick(extData, compontent);
+        });
+        if (item.companyType) {
+          labelMarker.filterData = {
+            companyType: item.companyType,
+            iconType: item.iconType,
+          };
+          const iconType = item.iconType;
+          if (!Array.isArray(this.allDevice[iconType])) {
+            this.allDevice[iconType] = [];
+          }
+          this.allDevice[iconType].push(labelMarker);
         }
+      });
+
+      this.deviceUserlableLayer.add(markers);
+      this.map.add(this.deviceUserlableLayer);
+
+      if (!showBool) {
+        this.deviceUserlableLayer.hide();
       }
     }
+  }
   /**
    *  地图上添加监控 海量标注 LabelMarker 方式
    * @param {*} detectorUserData
    * @param {*} compontent
    * @param {*} showBool
    */
-  labelsLayerMarksVideoGoMap(mapData,compontent,showBool = true){
-
-    if(mapData != null) {
+  labelsLayerMarksVideoGoMap(mapData, compontent, showBool = true) {
+    if (mapData != null) {
       const hashMap = new Map();
       this.videolabelLayer = new AMap.LabelsLayer({
         zooms: [3, 20],
@@ -683,7 +696,7 @@ export class EditorMap {
         collision: true, //该层内标注是否避让
         allowCollision: false, //不同标注层之间是否避让
       });
-          //设置一个图标对象
+      //设置一个图标对象
       const icon = {
         type: "image", //图标类型，现阶段只支持 image 类型
         image: svgUrl[5], //可访问的图片 URL
@@ -692,18 +705,18 @@ export class EditorMap {
       };
       var markers = [];
 
-      mapData.forEach(item => {
-        let longitude =  item.longitude;
+      mapData.forEach((item) => {
+        let longitude = item.longitude;
         let latitude = item.latitude;
         var userId = item.userId;
         icon.userId = userId;
         var curData = {
-            position: [longitude, latitude],
-            icon: icon,
-            rank: 1, //避让优先级
+          position: [longitude, latitude],
+          icon: icon,
+          rank: 1, //避让优先级
         };
 
-        hashMap.set(JSON.stringify(userId),item);
+        hashMap.set(JSON.stringify(userId), item);
         //创建 LabelMarker
         const labelMarker = new AMap.LabelMarker(curData);
         // var marker = new AMap.Marker(curData);
@@ -717,10 +730,21 @@ export class EditorMap {
           // 如果control==0就是默认值，没有使用123功能，就显示infowindow
           this.massMarksMarkerClick(extData, compontent);
         });
+        if (item.companyType) {
+          labelMarker.filterData = {
+            companyType: item.companyType,
+            iconType: item.iconType,
+          };
+          const iconType = item.iconType;
+          if (!Array.isArray(this.allDevice[iconType])) {
+            this.allDevice[iconType] = [];
+          }
+          this.allDevice[iconType].push(labelMarker);
+        }
       });
 
       this.videolabelLayer.add(markers);
-      this.map.add(this.videolabelLayer)
+      this.map.add(this.videolabelLayer);
       if (!showBool) {
         this.videolabelLayer.hide();
       }
@@ -732,9 +756,8 @@ export class EditorMap {
    * @param {*} compontent
    * @param {*} showBool
    */
-  labelsLayerMarksCzGoMap(mapData,compontent,showBool = true){
-
-    if(mapData != null) {
+  labelsLayerMarksCzGoMap(mapData, compontent, showBool = true) {
+    if (mapData != null) {
       const hashMap = new Map();
       this.czlabelLayer = new AMap.LabelsLayer({
         zooms: [3, 20],
@@ -742,7 +765,7 @@ export class EditorMap {
         collision: true, //该层内标注是否避让
         allowCollision: false, //不同标注层之间是否避让
       });
-          //设置一个图标对象
+      //设置一个图标对象
       const icon = {
         type: "image", //图标类型，现阶段只支持 image 类型
         image: svgUrl[4], //可访问的图片 URL
@@ -751,18 +774,18 @@ export class EditorMap {
       };
       var markers = [];
 
-      mapData.forEach(item => {
-        let longitude =  item.longitude;
+      mapData.forEach((item) => {
+        let longitude = item.longitude;
         let latitude = item.latitude;
         var userId = item.userId;
         icon.userId = userId;
         var curData = {
-            position: [longitude, latitude],
-            icon: icon,
-            rank: 1, //避让优先级
+          position: [longitude, latitude],
+          icon: icon,
+          rank: 1, //避让优先级
         };
 
-        hashMap.set(JSON.stringify(userId),item);
+        hashMap.set(JSON.stringify(userId), item);
         //创建 LabelMarker
         const labelMarker = new AMap.LabelMarker(curData);
         // var marker = new AMap.Marker(curData);
@@ -776,10 +799,22 @@ export class EditorMap {
           // 如果control==0就是默认值，没有使用123功能，就显示infowindow
           this.massMarksMarkerClick(extData, compontent);
         });
+        if (item.companyType) {
+          labelMarker.filterData = {
+            companyType: item.companyType,
+            iconType: item.iconType,
+          };
+          const iconType = item.iconType;
+          if (!Array.isArray(this.allDevice[iconType])) {
+            this.allDevice[iconType] = [];
+          }
+          this.allDevice[iconType].push(labelMarker);
+        }
       });
 
       this.czlabelLayer.add(markers);
-      this.map.add(this.czlabelLayer)
+      this.map.add(this.czlabelLayer);
+
       if (!showBool) {
         this.czlabelLayer.hide();
       }
@@ -791,9 +826,8 @@ export class EditorMap {
    * @param {*} compontent
    * @param {*} showBool
    */
-  labelsLayerMarksFmjGoMap(mapData,compontent,showBool = true){
-
-    if(mapData != null) {
+  labelsLayerMarksFmjGoMap(mapData, compontent, showBool = true) {
+    if (mapData != null) {
       const hashMap = new Map();
       this.fmjlabelLayer = new AMap.LabelsLayer({
         zooms: [3, 20],
@@ -801,7 +835,7 @@ export class EditorMap {
         collision: true, //该层内标注是否避让
         allowCollision: false, //不同标注层之间是否避让
       });
-          //设置一个图标对象
+      //设置一个图标对象
       const icon = {
         type: "image", //图标类型，现阶段只支持 image 类型
         image: svgUrl[3], //可访问的图片 URL
@@ -810,18 +844,18 @@ export class EditorMap {
       };
       var markers = [];
 
-      mapData.forEach(item => {
-        let longitude =  item.longitude;
+      mapData.forEach((item) => {
+        let longitude = item.longitude;
         let latitude = item.latitude;
         var userId = item.userId;
         icon.userId = userId;
         var curData = {
-            position: [longitude, latitude],
-            icon: icon,
-            rank: 1, //避让优先级
+          position: [longitude, latitude],
+          icon: icon,
+          rank: 1, //避让优先级
         };
 
-        hashMap.set(JSON.stringify(userId),item);
+        hashMap.set(JSON.stringify(userId), item);
         //创建 LabelMarker
         const labelMarker = new AMap.LabelMarker(curData);
         // var marker = new AMap.Marker(curData);
@@ -835,10 +869,21 @@ export class EditorMap {
           // 如果control==0就是默认值，没有使用123功能，就显示infowindow
           this.massMarksMarkerClick(extData, compontent);
         });
+        if (item.companyType) {
+          labelMarker.filterData = {
+            companyType: item.companyType,
+            iconType: item.iconType,
+          };
+          const iconType = item.iconType;
+          if (!Array.isArray(this.allDevice[iconType])) {
+            this.allDevice[iconType] = [];
+          }
+          this.allDevice[iconType].push(labelMarker);
+        }
       });
 
       this.fmjlabelLayer.add(markers);
-      this.map.add(this.fmjlabelLayer)
+      this.map.add(this.fmjlabelLayer);
       if (!showBool) {
         this.fmjlabelLayer.hide();
       }
@@ -850,8 +895,8 @@ export class EditorMap {
    * @param {*} compontent
    * @param {*} showBool
    */
-  labelsLayerMarksTysGoMap(mapData,compontent,showBool = true){
-    if(mapData != null) {
+  labelsLayerMarksTysGoMap(mapData, compontent, showBool = true) {
+    if (mapData != null) {
       const hashMap = new Map();
       this.tyxlabelsLayer = new AMap.LabelsLayer({
         zooms: [3, 20],
@@ -859,7 +904,7 @@ export class EditorMap {
         collision: true, //该层内标注是否避让
         allowCollision: false, //不同标注层之间是否避让
       });
-          //设置一个图标对象
+      //设置一个图标对象
       const icon = {
         type: "image", //图标类型，现阶段只支持 image 类型
         image: svgUrl[2], //可访问的图片 URL
@@ -868,18 +913,18 @@ export class EditorMap {
       };
       var markers = [];
 
-      mapData.forEach(item => {
-        let longitude =  item.longitude;
+      mapData.forEach((item) => {
+        let longitude = item.longitude;
         let latitude = item.latitude;
         var userId = item.userId;
         icon.userId = userId;
         var curData = {
-            position: [longitude, latitude],
-            icon: icon,
-            rank: 1, //避让优先级
+          position: [longitude, latitude],
+          icon: icon,
+          rank: 1, //避让优先级
         };
 
-        hashMap.set(JSON.stringify(userId),item);
+        hashMap.set(JSON.stringify(userId), item);
         //创建 LabelMarker
         const labelMarker = new AMap.LabelMarker(curData);
         // var marker = new AMap.Marker(curData);
@@ -893,10 +938,21 @@ export class EditorMap {
           // 如果control==0就是默认值，没有使用123功能，就显示infowindow
           this.massMarksMarkerClick(extData, compontent);
         });
+        if (item.companyType) {
+          labelMarker.filterData = {
+            companyType: item.companyType,
+            iconType: item.iconType,
+          };
+          const iconType = item.iconType;
+          if (!Array.isArray(this.allDevice[iconType])) {
+            this.allDevice[iconType] = [];
+          }
+          this.allDevice[iconType].push(labelMarker);
+        }
       });
 
       this.tyxlabelsLayer.add(markers);
-      this.map.add(this.tyxlabelsLayer)
+      this.map.add(this.tyxlabelsLayer);
       if (!showBool) {
         this.tyxlabelsLayer.hide();
       }
@@ -909,25 +965,22 @@ export class EditorMap {
    * @param {*} component
    * @param {*} showBool
    */
-  labelsLayerMarksDetectorUserList(mapData,compontent,showBool = true){
-
-    if(mapData !== null && mapData !== undefined) {
-
+  labelsLayerMarksDetectorUserList(mapData, compontent, showBool = true) {
+    if (mapData !== null && mapData !== undefined) {
       const hashMap = new Map();
-      for(var key in mapData){
+      for (var key in mapData) {
         var value = mapData[key];
         var jsonValue = JSON.stringify(value);
         var jsonValueArr = JSON.parse(jsonValue);
         //居民用户
         if (key === "6") {
-
           this.detectorUserlabelsLayer = new AMap.LabelsLayer({
             zooms: [3, 20],
             zIndex: 1000,
             collision: true, //该层内标注是否避让
             allowCollision: false, //不同标注层之间是否避让
           });
-              //设置一个图标对象
+          //设置一个图标对象
           const icon = {
             type: "image", //图标类型，现阶段只支持 image 类型
             image: svgUrl[6], //可访问的图片 URL
@@ -936,19 +989,19 @@ export class EditorMap {
           };
           var markers = [];
 
-          if(jsonValueArr !== null && jsonValueArr !== undefined) {
-            jsonValueArr.forEach(item => {
-              let longitude =  item.longitude;
+          if (jsonValueArr !== null && jsonValueArr !== undefined) {
+            jsonValueArr.forEach((item) => {
+              let longitude = item.longitude;
               let latitude = item.latitude;
               var userId = item.userId;
               icon.userId = userId;
               var curData = {
-                  position: [longitude, latitude],
-                  icon: icon,
-                  rank: 1, //避让优先级
+                position: [longitude, latitude],
+                icon: icon,
+                rank: 1, //避让优先级
               };
 
-              hashMap.set(JSON.stringify(userId),item);
+              hashMap.set(JSON.stringify(userId), item);
               //创建 LabelMarker
               const labelMarker = new AMap.LabelMarker(curData);
               // var marker = new AMap.Marker(curData);
@@ -962,15 +1015,26 @@ export class EditorMap {
                 // 如果control==0就是默认值，没有使用123功能，就显示infowindow
                 this.massMarksMarkerClick(extData, compontent);
               });
+              if (item.companyType) {
+                labelMarker.filterData = {
+                  companyType: item.companyType,
+                  iconType: item.iconType,
+                };
+                const iconType = item.iconType;
+                if (!Array.isArray(this.allDevice[iconType])) {
+                  this.allDevice[iconType] = [];
+                }
+                this.allDevice[iconType].push(labelMarker);
+              }
             });
           }
 
           this.detectorUserlabelsLayer.add(markers);
-          this.map.add(this.detectorUserlabelsLayer)
+          this.map.add(this.detectorUserlabelsLayer);
           if (!showBool) {
             this.detectorUserlabelsLayer.hide();
           }
-        //商业用户
+          //商业用户
         } else if (key === "61") {
           this.businessDetectorUserlabelsLayer = new AMap.LabelsLayer({
             zooms: [3, 20],
@@ -978,7 +1042,7 @@ export class EditorMap {
             collision: true, //该层内标注是否避让
             allowCollision: false, //不同标注层之间是否避让
           });
-              //设置一个图标对象
+          //设置一个图标对象
           const icon = {
             type: "image", //图标类型，现阶段只支持 image 类型
             image: svgUrl[61], //可访问的图片 URL
@@ -987,19 +1051,19 @@ export class EditorMap {
           };
           var markers = [];
 
-          if(jsonValueArr !== null && jsonValueArr !== undefined) {
-            jsonValueArr.forEach(item => {
-              let longitude =  item.longitude;
+          if (jsonValueArr !== null && jsonValueArr !== undefined) {
+            jsonValueArr.forEach((item) => {
+              let longitude = item.longitude;
               let latitude = item.latitude;
               var userId = item.userId;
               icon.userId = userId;
               var curData = {
-                  position: [longitude, latitude],
-                  icon: icon,
-                  rank: 2, //避让优先级
+                position: [longitude, latitude],
+                icon: icon,
+                rank: 2, //避让优先级
               };
 
-              hashMap.set(JSON.stringify(userId),item);
+              hashMap.set(JSON.stringify(userId), item);
               //创建 LabelMarker
               const labelMarker = new AMap.LabelMarker(curData);
               // var marker = new AMap.Marker(curData);
@@ -1013,11 +1077,23 @@ export class EditorMap {
                 // 如果control==0就是默认值，没有使用123功能，就显示infowindow
                 this.massMarksMarkerClick(extData, compontent);
               });
+
+              if (item.companyType) {
+                labelMarker.filterData = {
+                  companyType: item.companyType,
+                  iconType: item.iconType,
+                };
+                const iconType = item.iconType;
+                if (!Array.isArray(this.allDevice[iconType])) {
+                  this.allDevice[iconType] = [];
+                }
+                this.allDevice[iconType].push(labelMarker);
+              }
             });
           }
 
           this.businessDetectorUserlabelsLayer.add(markers);
-          this.map.add(this.businessDetectorUserlabelsLayer)
+          this.map.add(this.businessDetectorUserlabelsLayer);
           if (!showBool) {
             this.businessDetectorUserlabelsLayer.hide();
           }
@@ -1031,34 +1107,38 @@ export class EditorMap {
    * @param {*} component
    * @param {*} showBool
    */
-  addMassMarksDetectorUserGoMap(mapData,compontent,showBool = true){
-    if(mapData !== null && mapData !== undefined) {
+  addMassMarksDetectorUserGoMap(mapData, compontent, showBool = true) {
+    if (mapData !== null && mapData !== undefined) {
       var style;
-      for(var key in mapData){
+      for (var key in mapData) {
         var value = mapData[key];
         var jsonValue = JSON.stringify(value);
         var jsonValueArr = JSON.parse(jsonValue);
         if ("6" === key) {
-          style = [{
-            url: svgUrl[6],
-            anchor: new AMap.Pixel(3, 3),
-            size: new AMap.Size(11, 11),
-            zIndex: 3,
-          }]
+          style = [
+            {
+              url: svgUrl[6],
+              anchor: new AMap.Pixel(3, 3),
+              size: new AMap.Size(11, 11),
+              zIndex: 3,
+            },
+          ];
         } else if ("61" === key) {
-          style = [{
-            url: svgUrl[6],
-            anchor: new AMap.Pixel(3, 3),
-            size: new AMap.Size(11, 11),
-            zIndex: 3,
-          }]
+          style = [
+            {
+              url: svgUrl[6],
+              anchor: new AMap.Pixel(3, 3),
+              size: new AMap.Size(11, 11),
+              zIndex: 3,
+            },
+          ];
         }
 
         var mass = new AMap.MassMarks(jsonValueArr, {
           opacity: 0.8,
           zIndex: 111,
-          cursor: 'pointer',
-          style: style
+          cursor: "pointer",
+          style: style,
         });
 
         //先一启动，直接显示
@@ -1095,7 +1175,7 @@ export class EditorMap {
     // var lat = lnglatArray[1];
     // var detectorUserVO = {"userId":159843,"iconType":null,"userStatus":null,"nickName":"曾宪成","userType":"2","detectorCountList":[{"userId":159843,"iconType":null,"userStatus":null,"nickName":"曾宪成","userType":"2","detectorCountList":null,"detectorType":"工业探测器","detectorCount":1,"onLineNum":1,"offLineNum":0,"historyAlarmNum":0,"cancelAlarmNum":0,"processingAlarmNum":0,"address":"河北省-廊坊市-三河市-泃阳镇老厨小吃","longitude":117.06009,"latitude":39.991257,"linkman":"曾宪成","phone":"13172132000","email":null}],"detectorType":"工业探测器","detectorCount":1,"onLineNum":1,"offLineNum":0,"historyAlarmNum":0,"cancelAlarmNum":0,"processingAlarmNum":0,"address":"河北省-廊坊市-三河市-泃阳镇老厨小吃","longitude":117.06009,"latitude":39.991257,"linkman":"曾宪成","phone":"13172132000","email":null}
 
-    let lng =  data.longitude;
+    let lng = data.longitude;
     let lat = data.latitude;
 
     // 创建一个可以控制的组件，将其dom插入infowindow
@@ -1118,12 +1198,12 @@ export class EditorMap {
   }
 
   // 地图上add管道
-  addMediumPipeLine(objData, component,mediumConponent) {
-    const { path, pipePressure, iconType ,id} = objData;
+  addMediumPipeLine(objData, component, mediumConponent) {
+    const { path, pipePressure, iconType, id } = objData;
     // 根据压力获取颜色
     const color = pipeColor[pipePressure];
     const pipe = this.createPipeLine({
-      id:id,
+      id: id,
       path: eval(path),
       strokeWeight: objData.strokeWeight || 2,
       strokeColor: color,
@@ -1137,12 +1217,12 @@ export class EditorMap {
       this.pipeArr[iconType] = [];
     }
     this.pipeArr[iconType].push(pipe);
-    if (pipePressure == 1 ){
+    if (pipePressure == 1) {
       this.pipeEvent(pipe, mediumConponent);
     } else {
       this.pipeEvent(pipe, component);
     }
-  };
+  }
   // 地图上add管道
   addPipeLine(objData, component) {
     const { path, pipePressure, iconType } = objData;
@@ -1180,11 +1260,9 @@ export class EditorMap {
     });
 
     pipe.on("mouseout", (e) => {
-
-      if(this.infowindow) {
+      if (this.infowindow) {
         var infowindowOptions = this.infowindow.getOptions();
-        if (infowindowOptions.visible){
-
+        if (infowindowOptions.visible) {
           var pipeData = this.infowindowComponent.deviceData;
 
           const target = e.target;
@@ -1195,7 +1273,6 @@ export class EditorMap {
         }
       }
 
-
       const target = e.target;
       // 根据管道压力获取颜色
       const { pipePressure } = target.getExtData();
@@ -1290,9 +1367,11 @@ export class EditorMap {
         }
       });
     }
+    console.log(this.allDevice);
     for (let deviceItem in this.allDevice) {
       this.allDevice[deviceItem].forEach((device) => {
-        const data = device.getExtData();
+        const data = device.filterData || device.getExtData();
+        console.log(data.iconType);
         // 设备过滤受到bigwindow页面的的两种制约，companyArr, typeArr 两个数组制约显示隐藏
         // 燃气没有公司，所以没有device.companyType不收到公司的控制
         const companyHas = companyArr.indexOf(data.companyType + "") >= 0;
@@ -1320,7 +1399,6 @@ export class EditorMap {
       }
     }
 
-
     // 判断是否需要显示 商业用户
     const businessDetectorUserHas = typeArr.indexOf(61) >= 0;
     if (this.businessDetectorUserlabelsLayer != null) {
@@ -1341,7 +1419,6 @@ export class EditorMap {
       }
     }
 
-
     //判断是否需要显示  阀门井
     const fmjHas = typeArr.indexOf(3) >= 0;
     if (this.fmjlabelLayer != null) {
@@ -1518,6 +1595,10 @@ export class EditorMap {
       }
     }
   }
+
+  // 搜索设备或者管道上图
+  onlySearchDeviceOrLine(type, deviceOrLine) {}
+
   // 轨迹回放
   /**
    * @description:

zh-baseversion-web/src/views/bigWindow/components/Bottom.vue

@@ -2,7 +2,7 @@
  * @Author: 纪泽龙 jizelong@qq.com
  * @Date: 2024-07-15 10:26:41
  * @LastEditors: 纪泽龙 jizelong@qq.com
- * @LastEditTime: 2024-07-16 17:27:41
+ * @LastEditTime: 2024-07-16 17:33:46
  * @FilePath: /zh-baseversion-web/src/views/bigWindow/components/Bottom.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -17,8 +17,8 @@
       />
     </div>
     <div class="container">
-      <transition name="fade" mode="out-in">
-        <div v-if="activeCom.label" class="children">
+      <transition name="fadeBottom" mode="out-in">
+        <div v-if="activeCom.label" class="children" @click.stop="">
           <div
             v-for="item in activeCom.children"
             :key="item.value"
@@ -331,6 +331,7 @@ export default {
         // overflow: hidden;
       }
       .child {
+      transition: all 0.5s linear;
         width: 275px;
         height: 32px;
         margin-bottom: 16px;

zh-baseversion-web/src/views/bigWindow/components/Top.vue

+<template>
+  <!-- 设备按钮 -->
+
+  <div class="typelist-div" @click.stop="">
+    <div class="t flex" :class="{ show: searchShow }" @click.stop="">
+      <div class="device-btn-wrapper flex">
+        <div
+          class="list"
+          v-for="(item, index) in arr"
+          :key="index"
+          :class="selarr1.indexOf(item.val) >= 0 ? 'active' : ''"
+          @click.stop="sel1(index, item)"
+        >
+          <img
+            :src="item.imgurl"
+            style="margin-top: 2px; float: left; margin-right: 3px"
+          />
+          {{ item.name }}
+        </div>
+      </div>
+
+      <div class="img-wrapper flex">
+        <img
+          @click.stop="searchChange"
+          :class="{ show: searchShow }"
+          class="active"
+          src="@/assets/firstimage/top-down.png"
+          alt=""
+        />
+      </div>
+      <div class="search flex">
+        <div class="input-wrapper flex">
+          <input v-model="searchVal" type="text" />
+        </div>
+        <div @click.stop="searchClick" class="btn-wrapper">搜索</div>
+      </div>
+      <img src="@/assets/firstimage/index-top-line.png" class="bottom-line" />
+    </div>
+
+    <!-- <div class="b"> -->
+    <transition name="fadeBottom" mode="out-in">
+      <div
+        @click.stop=""
+        class="device-container gdt"
+        v-if="searchShow && searchItemShow"
+      >
+        <div
+          class="devie-item zzz"
+          v-for="item in searchList"
+          :key="item.id+''+item.type"
+          @click="deviceItemClick(item)"
+        >
+          <!-- {{ item.NAME }} -->
+          <div class="a">{{ devviceData[item.type] }}</div>
+          <div class="b">{{ item.NAME }}</div>
+
+        </div>
+      </div>
+    </transition>
+    <!-- </div> -->
+  </div>
+</template>
+
+<script>
+import { searchDevice, searchDeviceDetail } from "@/api/bigWindow/getDevice.js";
+export default {
+  name: "",
+  data() {
+    return {
+      selarr1: [],
+      searchShow: false,
+      searchItemShow: false,
+      searchVal: "",
+      searchList: [],
+      devviceData: {
+        1: "阀井 :",
+        2: "调压箱 :",
+        3: "场站 :",
+        4: "居民用户 :",
+        5: "商业用户 :",
+        6: "工业用户 :",
+        7: "监控 :",
+        8: "餐饮单位液化气用户 :",
+        9: "管道 :",
+      },
+      arr: [
+        {
+          val: 2,
+          ischeck: false,
+          imgurl: require("@/assets/firstimage/tiaoyaxiang.png"),
+          name: "调压箱",
+        },
+        {
+          val: 3,
+          ischeck: false,
+          imgurl: require("@/assets/firstimage/famen.png"),
+          name: "阀门井",
+        },
+        {
+          val: 4,
+          ischeck: false,
+          imgurl: require("@/assets/firstimage/changzhan.png"),
+          name: "场 站",
+        },
+        {
+          val: 6,
+          ischeck: false,
+          imgurl: require("@/assets/firstimage/user.png"),
+          name: "居民用户",
+        },
+        {
+          val: 61,
+          ischeck: false,
+          imgurl: require("@/assets/firstimage/syUser.png"),
+          name: "商业用户",
+        },
+        {
+          val: 5,
+          ischeck: false,
+          imgurl: require("@/assets/firstimage/jiankong.png"),
+          name: "监 控",
+        },
+        {
+          val: 18,
+          ischeck: false,
+          imgurl: require("@/assets/firstimage/yhq.png"),
+          name: "餐饮单位液化气用户",
+        },
+      ],
+    };
+  },
+  methods: {
+    searchChange() {
+      this.searchShow = !this.searchShow;
+      // 如果关闭了搜索框，那么搜索联动数据框也要关闭
+      if (!this.searchShow) {
+        this.searchItemShow = false;
+      }
+    },
+    searchClick() {
+      this.searchItemShow = true;
+
+      searchDevice({ name: this.searchVal }).then((res) => {
+        if (res.code == 200) {
+          this.searchList = Object.values(res.data).flat();
+          console.log(this.searchList);
+        }
+      });
+    },
+    deviceItemClick(item) {
+      searchDeviceDetail({ type: item.type, id: item.id }).then((res) => {
+        if (res.code == 200) {
+          if (res.data.length == 0) return;
+          this.$emit("deviceSearchClick",item, res.data[0]);
+        }
+        console.log(res);
+      });
+    },
+    clearSearchContainer() {
+      this.searchItemShow = false;
+    },
+    sel1(index, item) {
+      const ind = this.selarr1.indexOf(item.val);
+      if (ind >= 0) {
+        this.selarr1.splice(ind, 1);
+      } else {
+        this.selarr1.push(item.val);
+      }
+      this.$emit("sel1", this.selarr1);
+      // this.map.allfilter(this.selarr, this.selarr1);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.typelist-div {
+  transition: all 0.2s linear;
+  width: 800px;
+  // height: 96px;
+  // height: 56px;
+  z-index: 9999;
+  position: fixed;
+  top: 90px;
+  margin-left: calc((100% - 755px) / 2);
+  background: rgba(2, 41, 81, 0.25);
+  border: 1px solid #275275;
+  box-sizing: border-box;
+  padding-top: 10px;
+  transform: scale(1);
+  .t {
+    transition: all 0.2s linear;
+    height: 40px;
+    // background: blue;
+    position: relative;
+    overflow: hidden;
+    &.show {
+      height: 85px;
+    }
+
+    .list {
+      z-index: 9999;
+      float: left;
+      margin-left: 15px;
+      height: 28px;
+      // margin-bottom:10px;
+      color: #fff;
+      line-height: auto;
+      text-align: center;
+      /* background: linear-gradient(86deg, #112238 0%, #086187 62%, #112238 100%);
+  box-shadow: inset 0px 1px 2px 1px #125c9b; */
+      font-size: 12px;
+      padding: 1px 10px;
+      cursor: pointer;
+      line-height: 26px;
+      background: rgba(31, 106, 215, 0.32);
+      box-sizing: border-box;
+      border: 1px solid #2d64b4;
+      border-radius: 2px;
+    }
+
+    .list.active {
+      /* background: linear-gradient(86deg, #112238 0%, #32a3d3 62%, #112238 100%);
+  box-shadow: inset 0px 1px 2px 1px #125c9b; */
+      // font-size: 12px;
+      // color: #00ffff;
+      // border: 1px solid #0f6ca1;
+      // box-shadow: inset 0px 0px 10px 1px #0f6ca1;
+      // background-size: 100% 100%;
+      // background-repeat: no-repeat;
+      background: linear-gradient(180deg, #ffb464 0%, #e96310 100%);
+      border-radius: 2px;
+      box-sizing: border-box;
+      border: 1px solid #ffa065;
+    }
+    .list img {
+      width: 20px;
+      height: 20px;
+    }
+    .device-btn-wrapper {
+      width: 755px;
+      margin-right: 5px;
+      flex-wrap: wrap;
+    }
+    .search {
+      width: 755px;
+      position: absolute;
+      top: 40px;
+      .input-wrapper {
+        background: #082337;
+        box-sizing: border-box;
+        border: 1px solid #1a498e;
+        margin-left: 15px;
+        margin-right: 12px;
+        box-sizing: border-box;
+        // width: 600px;
+        flex: 1;
+
+        height: 28px;
+        align-items: center;
+        input {
+          border: none;
+          background: none;
+          color: #fff;
+          width: 100%;
+          padding-left: 8px;
+
+          &:focus {
+            outline: none;
+          }
+        }
+      }
+      .btn-wrapper {
+        width: 50px;
+        height: 28px;
+        color: #fff;
+        text-align: center;
+        line-height: 28px;
+        background: linear-gradient(180deg, #19d6fe 0%, #1684e5 100%);
+        box-sizing: border-box;
+        border: 1px solid #72c1ff;
+        cursor: pointer;
+        &:hover {
+          opacity: 0.7;
+        }
+      }
+    }
+    .img-wrapper {
+      width: 28px;
+      height: 28px;
+      background: rgba(3, 39, 70, 0.8);
+      border: 1px solid #125c98;
+      margin-right: 10px;
+      align-items: center;
+      justify-content: center;
+
+      img {
+        width: 20px;
+        height: 12px;
+        transform: rotateZ(0deg);
+        transition: all 0.2s linear;
+
+        cursor: pointer;
+        &.show {
+          transform: rotateZ(180deg);
+        }
+      }
+    }
+    .bottom-line {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 280px;
+      height: 1px;
+      // background: red;
+    }
+  }
+  .device-container {
+    width: 755px;
+    max-height: 400px;
+    position: absolute;
+    background: rgba(2, 41, 81, 0.7);
+    border: 1px solid #275275;
+    box-sizing: border-box;
+    top: 100px;
+    padding: 10px;
+    padding-bottom: 0;
+    overflow-y: auto;
+
+    .devie-item {
+      color: #fff;
+      margin-bottom: 10px;
+      height: 28px;
+      line-height: 28px;
+      cursor: pointer;
+      box-sizing: border-box;
+      padding: 0 2px;
+      display: flex;
+      .a {
+        width: 150px;
+      }
+      &:hover {
+        background: linear-gradient(180deg, #ffb464 0%, #e96310 100%);
+      }
+    }
+  }
+}
+</style>

zh-baseversion-web/src/views/bigWindow/index.vue

 <!--
  * @Author: your name
  * @Date: 2022-01-11 13:44:17
- * @LastEditTime: 2024-07-15 14:29:45
+ * @LastEditTime: 2024-07-18 17:27:20
  * @LastEditors: 纪泽龙 jizelong@qq.com
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /test/hello-world/src/views/Home.vue
@@ -35,45 +35,8 @@
       @closeMediumPressureLine="clearBigWindowsSelectPipe"
     /> -->
 
-    <!-- 底部按钮 -->
-    <!-- <div class="home-div">
-      <img src="../../assets/firstimage/bottombk.svg" alt="" style="backdrop-filter: blur(4px);" />
-      <div class="listingsSty fangy">
-        <div
-          @click="allCompany"
-          :class="selarr.length == 2 ? 'active' : ''"
-          class="firsty"
-        >
-          全部
-        </div>
-        <div
-          class="firsty"
-          :class="selarr.indexOf(item.val) >= 0 ? 'active' : ''"
-          v-for="(item, index) in typeList"
-          :key="item.val"
-          @click="sel(index, item)"
-        >
-          {{ item.name }}
-        </div>
-      </div>
-    </div> -->
+    <Top @sel1="sel1" @deviceSearchClick="deviceSearchClick" ref="Top" />
     <Bottom v-if="enterpriseId == -2" @listChange="listChange" ref="Bottom" />
-    <!-- 设备按钮 -->
-    <div class="typelist-div">
-      <div
-        class="list"
-        v-for="(item, index) in arr"
-        :key="index"
-        :class="selarr1.indexOf(item.val) >= 0 ? 'active' : ''"
-        @click="sel1(index, item)"
-      >
-        <img
-          :src="item.imgurl"
-          style="margin-top: 2px; float: left; margin-right: 3px"
-        />
-        {{ item.name }}
-      </div>
-    </div>
 
     <!-- 弹框 -->
     <div
@@ -200,6 +163,7 @@ import { getUserProfile } from "@/api/system/user";
 import leftBar from "@/components/bigWindow/leftBar.vue";
 import rightBar from "@/components/bigWindow/rightBar.vue";
 import Bottom from "./components/Bottom.vue";
+import Top from "./components/Top.vue";
 import { mapState } from "vuex";
 import MediumPressureLineVue from "../../components/bigWindow/MediumPressureLine.vue";
 import PipeSelect from "../../components/bigWindow/PipeSelect.vue";
@@ -213,6 +177,7 @@ export default {
     OtherCenter,
     PipeColor,
     PipeSelect,
+    Top,
     Bottom,
   },
   data() {
@@ -431,12 +396,15 @@ export default {
     ...mapActions({
       GetCompany: "bigWindowCompany/GetCompany",
     }),
+    // 搜索设备上图功能
+    deviceSearchClick(device,deviceDetail){
+      console.log(device,deviceDetail)
+    },
     leftRightBarChange() {
-
       const scale = window.innerHeight / 1080;
       let right = 0;
       if (scale >= 1) {
-        right = (585 / 2) * (scale - 1) - 20;  
+        right = (585 / 2) * (scale - 1) - 20;
       } else {
         right = (585 / 2) * (scale - 1) - 20;
       }
@@ -453,6 +421,7 @@ export default {
     },
     windowClick() {
       this.$refs.Bottom.selectUpClear();
+      this.$refs.Top.clearSearchContainer();
     },
     // 点击了 大屏端 管道搜索的清除键
     clearBigWindowsSelectPipe() {
@@ -549,36 +518,44 @@ export default {
     labelsLayerMarksDeviceUserGoMap(httpFunc, component, show) {
       return httpFunc().then((res) => {
         const mapData = res.data;
+        console.log("用户用户",mapData)
+
         this.map.labelsLayerMarksDeviceUserGoMap(mapData, component, show);
       });
     },
     labelsLayerMarksVideoGoMap(httpFunc, component, show) {
       return httpFunc().then((res) => {
         const mapData = res.data;
+        console.log('Video',mapData)
         this.map.labelsLayerMarksVideoGoMap(mapData, component, show);
       });
     },
     labelsLayerMarksCzGoMap(httpFunc, component, show) {
       return httpFunc().then((res) => {
         const mapData = res.data;
+        console.log("场站场站场站场站场站场站场站场站场站场站场站场站",mapData)
         this.map.labelsLayerMarksCzGoMap(mapData, component, show);
       });
     },
     labelsLayerMarksFmjGoMap(httpFunc, component, show) {
       return httpFunc().then((res) => {
         const mapData = res.data;
+        console.log("阀门井",mapData)
+
         this.map.labelsLayerMarksFmjGoMap(mapData, component, show);
       });
     },
     labelsLayerMarksTysGoMap(httpFunc, component, show) {
       return httpFunc().then((res) => {
         const mapData = res.data;
+        console.log("调压箱",mapData)
         this.map.labelsLayerMarksTysGoMap(mapData, component, show);
       });
     },
     labelsLayerMarksDetectorUserGoMap(httpFunc, component, show) {
       return httpFunc().then((res) => {
         const mapData = res.data;
+        console.log("用户",mapData)
         this.map.labelsLayerMarksDetectorUserList(mapData, component, show);
       });
     },
@@ -636,22 +613,22 @@ export default {
       this.$refs.mychild.choice(this.selarr);
     },
     // 睇下列表更改
-    allCompany() {
-      if (this.selarr.length == 2) {
-        this.selarr = [];
-      } else {
-        this.selarr = this.company
-          .filter((item) => item.conpanyId != 6 && item.conpanyId != 12)
-          .map((item) => item.conpanyId);
-      }
+    // allCompany() {
+    //   if (this.selarr.length == 2) {
+    //     this.selarr = [];
+    //   } else {
+    //     this.selarr = this.company
+    //       .filter((item) => item.conpanyId != 6 && item.conpanyId != 12)
+    //       .map((item) => item.conpanyId);
+    //   }
 
-      // this.map.companyFilter(this.selarr);
-      this.map.allfilter(this.selarr, this.selarr1);
-      this.map.infowindowClose();
-      this.show = false;
-      this.$refs.mychild2.choice(this.selarr);
-      this.$refs.mychild.choice(this.selarr);
-    },
+    //   // this.map.companyFilter(this.selarr);
+    //   this.map.allfilter(this.selarr, this.selarr1);
+    //   this.map.infowindowClose();
+    //   this.show = false;
+    //   this.$refs.mychild2.choice(this.selarr);
+    //   this.$refs.mychild.choice(this.selarr);
+    // },
     sel(index, item) {
       this.map.infowindowClose();
       this.show = false;
@@ -676,13 +653,15 @@ export default {
       this.$refs.mychild.choice(this.selarr);
     },
 
-    sel1(index, item) {
-      const ind = this.selarr1.indexOf(item.val);
-      if (ind >= 0) {
-        this.selarr1.splice(ind, 1);
-      } else {
-        this.selarr1.push(item.val);
-      }
+    sel1(selarr1) {
+      // const ind = this.selarr1.indexOf(item.val);
+      // if (ind >= 0) {
+      //   this.selarr1.splice(ind, 1);
+      // } else {
+      //   this.selarr1.push(item.val);
+      // }
+      this.selarr1 = [...selarr1];
+      console.log(this.selarr, this.selarr1)
       this.map.allfilter(this.selarr, this.selarr1);
     },
     //用户的设备center
@@ -753,7 +732,7 @@ export default {
   },
   // 销毁定时器
   beforeDestroy() {
-    window.removeEventListener("resize",this.leftRightBarChange);
+    window.removeEventListener("resize", this.leftRightBarChange);
     if (this.formatDate) {
       clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
     }
@@ -902,44 +881,4 @@ export default {
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
-.typelist-div {
-  width: 755px;
-  height: 50px;
-  z-index: 9999;
-  position: fixed;
-  top: 0;
-  margin-top: 90px;
-  margin-left: calc((100% - 755px) / 2);
-}
-.list {
-  z-index: 9999;
-  float: left;
-  margin-left: 15px;
-  color: #fff;
-  line-height: auto;
-  text-align: center;
-  /* background: linear-gradient(86deg, #112238 0%, #086187 62%, #112238 100%);
-  box-shadow: inset 0px 1px 2px 1px #125c9b; */
-  font-size: 12px;
-  padding: 1px 10px;
-  cursor: pointer;
-  line-height: 26px;
-  border: 1px solid rgb(57, 68, 124);
-  background: #12268e33;
-  border-radius: 3px;
-}
-
-.list.active {
-  /* background: linear-gradient(86deg, #112238 0%, #32a3d3 62%, #112238 100%);
-  box-shadow: inset 0px 1px 2px 1px #125c9b; */
-  font-size: 12px;
-  color: #00ffff;
-  border: 1px solid #0f6ca1;
-  box-shadow: inset 0px 0px 10px 1px #0f6ca1;
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-}
-.list img {
-  width: 20px;
-}
 </style>