西海岸视频地图修改1121

front/public/static/config/mapConfig.js

@@ -22,7 +22,7 @@ var _mapConfig = {}
             CURRENT_MAP_OPTIONS: {
                 // crs: CRS_4490,
                 center: [35.96, 120.19],
-                maxZoom: 13,
+                maxZoom: 15,
                 minZoom: 0,
                 zoom: 5,
             },

front/src/supermap/advance-init.js

@@ -1680,7 +1680,7 @@ export function MapFun(mapObj) {
             let layers = null;
             let clickDataList = [];
             // 判断是否是聚合图层
-            layers = createMarkerClusterLayer()
+            layers = createMarkerClusterLayer('', map)
             const icon1 = createDefaultFeatureStyle({
                 img: url,
                 iconSize: [33, 33],

front/src/supermap/map-showResource.js

@@ -39,11 +39,9 @@ function updateProgressBar(processed, total, elapsed, layersArray) {
  * @param layerClassName 据此判断是否需要自定义聚合图层的样式
  * @returns {*}
  */
-function createMarkerClusterLayer(layerClassName) {
+function createMarkerClusterLayer(layerClassName, mapObj) {
     let array = [];
     let markerClusterLayer = null
-        //let currentZoom = this.map._zoom
-        //console.log('zzzzzz', currentZoom);
     if (layerClassName) {
         // 如果存在类名，表示需要自定义图标
         markerClusterLayer = L.markerClusterGroup({
@@ -81,18 +79,23 @@ function createMarkerClusterLayer(layerClassName) {
             // 是否显示标记的边界
             showCoverageOnHover: false,
             // 是否点击展开
-            zoomToBoundsOnClick: false,
+            zoomToBoundsOnClick: true,
             maxClusterRadius: 80,
         })
         markerClusterLayer.on('clusterclick', function(a) {
-            //console.log('cluster ' + a.layer.getAllChildMarkers());
-            let clusterList = [];
-            for (var i = 0; i < a.layer.getAllChildMarkers().length; i++) {
-                //console.log('yyyyyyyyy', a.layer.getAllChildMarkers()[i].resourceData);
-                clusterList.push(a.layer.getAllChildMarkers()[i].resourceData);
+            //console.log('cluster ' + a.layer.getAllChildMarkers().length);
+            if (a.layer.getAllChildMarkers().length < 50) {
+                let clusterList = [];
+                for (var i = 0; i < a.layer.getAllChildMarkers().length; i++) {
+                    //console.log('yyyyyyyyy', a.layer.getAllChildMarkers()[i].resourceData);
+                    clusterList.push(a.layer.getAllChildMarkers()[i].resourceData);
+                }
+                //console.log('clusterList ' + a.layer.getAllChildMarkers(array, true));
+                //console.log('zzzzzzzzz', mapObj.getZoom(), mapObj.getMaxZoom());
+                if (mapObj.getZoom() == mapObj.getMaxZoom()) {
+                    mybus.emit('openOperationPopup', clusterList);
+                }
             }
-            //console.log('clusterList ' + a.layer.getAllChildMarkers(array, true));
-            mybus.emit('openOperationPopup', clusterList);
         });
     }
     return markerClusterLayer

front/src/views/home/components/H5Player.vue

@@ -13,6 +13,10 @@ const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
      videoUrl:{
         type: String,
         default: '',
+     },
+     index:{
+        type: Number,
+        default: 0,
      }
     },
     data() {
@@ -64,7 +68,9 @@ const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
        })
      },
      createPlayer () {
+      //console.log('this.index',this.index);
      this.player = new window.JSPlugin({
+       //szId: 'player'+this.index,
        szId: 'player',
        szBasePath: "/util/",  //引入静态资源地址，我这里静态资源在public/js文件存放，所以设置为js
        iMaxSplit: 4,

front/src/views/home/detailBack.vue

@@ -13,6 +13,7 @@
 import { reactive, ref, watch, defineProps } from 'vue'
 import { useRouter } from 'vue-router'
 import { useStore } from 'vuex'
+import mybus from '@/myplugins/mybus'
 const router = useRouter()
 const oldValue1= ref('')
 const props = defineProps({
@@ -32,6 +33,13 @@ const previousPage = () => {
 
 const detailName = ref("应用资源")
 
+const goToDetailsPageconetent = () =>{
+   let pathData =  {
+          path: '/DetailsPageconetent',
+        };
+     mybus.emit('changeMenuStyle',pathData);
+}
+
 </script>
 
 <style scoped lang="less">

front/src/views/home/infrastructurePageXha.vue

@@ -2601,8 +2601,9 @@
   }
   .camera-popup{
      .ant-modal-body {
-      height: 700px !important;
-      overflow-y: auto;
+      height: 720px !important;
+      overflow-y: hidden;
+      overflow-x: hidden;
       padding:14px;
     }
     .ant-modal-footer{

front/src/views/home/videoSurveillance/components/CameraPopupOnMap.vue

@@ -5,12 +5,14 @@
         <a-carousel arrows>
               <template #prevArrow>
                 <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
-                  <left-circle-outlined />
+                  <!-- <div style="background-color:red">11111111</div> -->
+                  <div class="arrow-left" @click="handlePrev()"></div>
                 </div>
               </template>
               <template #nextArrow>
                 <div class="custom-slick-arrow" style="right: 10px">
-                  <right-circle-outlined />
+                  <!-- <right-circle-outlined /> -->
+                  <div class="arrow-right" @click="handleNext()"></div>
                 </div>
               </template>
               <div
@@ -18,27 +20,21 @@
                 :width="800"
                 :height="400"
                 :key="url"
-                :src="url"
               >
-              <div class="video-content">
-              <h5-player></h5-player> 
               </div>
-              <!-- <div style="color:#000000">
-              <div class="video-content" style=" z-index: 1">
+            </a-carousel>
+          <div class="operation-content" style="position:ab">
+              <div class="video-content">
               <h5-player :video-url="videoUrl"></h5-player> 
               </div>
-              </div> -->
+              <div class="text-label">
+                <span>{{defaultIndex}}</span>/<span>{{cameraDataList.length}}</span>
+              </div>
               <div class="footer-button"> 
                 <a-button type="primary" @click="applyNow(url)">立即申请</a-button>
                 <a-button type="primary" style="margin-left:20px" @click="addIntoCart(url)">加入申购车</a-button>
                 </div>
-               <!-- <div class="footer-button">
-                <a-button type="primary">立即申请</a-button>
-                 <a-button type="primary" style="margin-left:20px">加入申购车</a-button>
-               </div> -->
-              </div>
-            </a-carousel>
-      <!-- -->
+      </div>
     </div>
   </div>
 </template>
@@ -79,7 +75,8 @@
       return {
         openVideo: false,
         videoStream: '',  
-         videoUrl:'' //视频预览url
+         videoUrl:'', //视频预览url
+         defaultIndex:0//默认显示列表中的对一个
       }
     },
     methods: {
@@ -99,6 +96,28 @@
       addIntoCart(item){
          console.log('addIntoCartaddIntoCart',item);
           mybus.emit('selectCamera', item)
+      },
+      handlePrev(){
+        let maxLength = this.cameraDataList.length-1;
+        this.defaultIndex = this.defaultIndex - 1;
+         console.log('opopopop',this.cameraDataList[maxLength]);
+        if(this.defaultIndex === 0){
+          console.log('opopopop',this.cameraDataList[maxLength]);
+          //根据当前数据的channelId查询视频播放的url传递给H5组件调用接口
+          //this.videoUrl =
+        } else{
+           console.log('uyutyuyopopopop',this.cameraDataList[this.defaultIndex]);
+        }
+       
+      },
+      handleNext(){
+         this.defaultIndex = this.defaultIndex + 1;
+          if(this.defaultIndex === this.cameraDataList.length){
+          console.log('opopopop',this.cameraDataList[0]);
+          }else{
+               console.log('opopopop',this.cameraDataList[this.defaultIndex]); 
+          }
+       
       }
     },
   }
@@ -112,6 +131,7 @@
     padding-bottom: 20px;
     display: flex;
     flex-direction: column;
+    position: relative;
     .content {
       // width: 280px;
       min-height: 100px;
@@ -162,22 +182,36 @@
       margin: 8px auto 0;
       cursor: pointer;
     }
-    .ant-carousel {
-    width: 960px;
-    //height: 700px;
-    margin-left: 8px;
-     .video-content{
-     width: 950px;
+    .operation-content{
+       position: absolute;
+      z-index: 800;
+      top: 0.1rem;
+      //right: 0.1rem;
+      left:0.8rem;
+      .text-label{
+      width:800px;
+      height:30px;
+      margin-top:10px;
+      text-align:center;
+      font-size: 18px;
+      }
+        .video-content{
+     width: 750px;
      height:600px; 
      text-align: left; 
      padding: 5px;
     }
     .footer-button{
-       width: 950px;
+       width: 750px;
        //height:50px; 
        text-align: center; 
-       padding-top:20px;
+       padding-top:5px;
     }
+    }
+    .ant-carousel {
+    width: 960px;
+    //height: 700px;
+    margin-left: 8px;
   }
   .ant-carousel :deep(.slick-slide) {
     text-align: center;
@@ -195,9 +229,19 @@
     height: 50px;
     font-size: 50px;
     color: #fff;
-    background-color: rgba(31, 45, 61, 0.11);
+    //background-color: rgba(31, 45, 61, 0.11);
     opacity: 0.8;
     z-index: 1;
+    .arrow-left{
+      width:48px;
+      height:48px;
+      background-image: url('~@/assets/home/arrow-left.png');
+    }
+    .arrow-right{
+      width:48px;
+      height:48px;
+      background-image: url('~@/assets/home/arrow-right.png');
+    }
   }
   .ant-carousel :deep(.custom-slick-arrow:before) {
     display: none;

front/src/views/home/videoSurveillance/index.vue

@@ -168,6 +168,7 @@ import { ElMessage } from 'element-plus'
         this.hiMap.mapObj,
         this.hiMapFun
       )
+      //console.log('this.hiMap.mapObj',this.hiMap.mapObj.map.getZoom());
       // this.hiMap.mapObj.map.flyTo({ lat: 36.06, lng: 120.3899 }, 16)
       this.addressMatchUrl = window.SITE_CONFIG.POI_URL
       // 初始化地址检索服务
@@ -204,6 +205,7 @@ import { ElMessage } from 'element-plus'
       mybus.on('cameraDataOnMap', (data) => {
           this.addResourceTomap('videoMap', data)
       })
+
     },
     methods: { // 查询
       handleEnter(){
@@ -475,7 +477,7 @@ import { ElMessage } from 'element-plus'
         pageSize: 30000,
         type: 0,
         borderPolygonList: []
-}
+        }
         getCameraByCondition(params).then((res) => {
           // let t1 = new Date().getTime();
           // this.cameraAllData = res.data.data