更新

src/utils/TFMapUitl.ts

@@ -425,18 +425,27 @@ class TFMapUitl {
     `<div class="impopup">
     <div class="impopup-content">`
     let str2 = ''
-    let str3 = `</div></div>`;
+    
     for (let j = 0; j < i.data_real?.length; j++) {
-      str2 += `<div style="display:flex;align-items: center;justify-content: space-between;">
+      str2 += `
+      <div style="height:52px; display:flex;align-items: center; flex-direction: column;justify-content: space-evenly;">
+      <div style="display:flex;align-items: center;justify-content: space-between;width:100%">
       <span style="font-family: Source Han Sans CN;
-      font-size: 16px;
+      font-size: 14px;
       font-weight: 500;
-      color: #FFFFFF;margin-right:10px;">${'('+i.data_real[j].sensor_name+')'+i.st_name}</span> 
+      color: #FFFFFF;margin-right:10px;"><span style="margin-right:10px">${i.st_name}</span> ${i.data_real[j].real_time?.slice(11, 16)}</span> 
       <img style="display: inline-block;width:12px"  title='查看详情' onclick="siteDetail(${data})" src='./static/img/detailArrow.png' />
       </div>
-      <span style=" display: inline-block;color: rgba(255, 255, 255, 0.72);"><span style="font-size:17px;color:#00A2FF; display: inline-block;margin-right:5px"> ${i.data_real[j].real_value}</span>
-      <span style="font-size:14px; display: inline-block;margin-right:10px;"> ${ i.data_real[j].dchar}</span>     ${i.data_real[j].real_time?.slice(11, 16)}</span>`
+      <div style="width:100%">
+      <span style=" display: inline-block;color: rgba(255, 255, 255, 1);">
+      <span style="color: #FFFFFF; margin-right:10px"> ${i.data_real[j].sensor_name}</span>
+      <span style="font-size:14px; display: inline-block;margin-right:2px"> ${i.data_real[j].real_value}</span>
+      <span style="font-size:14px; display: inline-block;"> ${ i.data_real[j].dchar}</span>     
+      </span></div>
+      </div>
+      `
     }
+    let str3 = `</div></div>`;
     // return str
     // <ul style="background: transparent; overflow: auto;height:150px">`
     // let str2 = ''

src/views/map/Map.vue

@@ -2076,8 +2076,13 @@ export default defineComponent({
                         window.impoint=[]
                       }
                       window.impoint=[]
-                      // 记录指标数组长度
-                    window.impointDataLength= res.data[0].data_real.length
+                      // 记录指标数组长度 取最长的数组长度 统一滚动,没有的就隐藏                    
+                      window.impointDataLength= res.data[0].data_real.length
+                      res.data.forEach(i=>{
+                        if(i.data_real.length>window.impointDataLength){
+                          window.impointDataLength=i.data_real.length
+                        }
+                      })
                     window.impointDataLengthNow=0
                     res.data.forEach(i=>{
                       _this.stDetailArrStore.forEach(j=>{
@@ -2087,11 +2092,21 @@ export default defineComponent({
                           data.dlon=i.dlon
                           data.data_real=i.data_real
                           data.st_name=i.st_name
-                          console.log(i,j,3663)
+                          // console.log(i,j,3663)
                         let markerWindow=  new TFMap.HTMLElementOverLay(
                           { x:Number(data.dlon) , y: Number(data.dlat),z:Number(data.high)  },
                           TFMapUitl.impotPointDom(data)
-                        ).init().setOff(-52, -0)
+                        ).init()
+                        if(i.st_name=='派镇'){
+                          markerWindow.setOff(-50, -10)
+                        }else if(i.st_name=='德兴'){
+                          markerWindow.setOff(-52, 30)
+                        }else if(i.st_name=='加热萨'){
+                          markerWindow.setOff(-54, 24)
+                        }
+                        else{
+                          markerWindow.setOff(-52, -0)
+                        }
                         markerWindow.setId('imp&' + data.stcd);
                         markerWindow.setClassify('impoint_marker*')
                         markerWindow.info = data;
@@ -2101,33 +2116,42 @@ export default defineComponent({
                       })
                     })
                     // 单独记录每一个的指标数量和当前滚动位置
-                    window.indexNumInfo=[]
-                    window.impoint&&window.impoint.forEach(i=>{
-                              // console.log(i,'8383')
-                              window.indexNumInfo.push({
-                                impointDataLengthNow:0,
-                                impointDataLength:i.info.sensor.length?i.info.sensor.length:0
-                              })
-                            })
+                    // window.indexNumInfo=[]
+                    // window.impoint&&window.impoint.forEach(i=>{
+                    //           // console.log(i,'8383')
+                    //           window.indexNumInfo.push({
+                    //             impointDataLengthNow:0,
+                    //             impointDataLength:i.info.sensor.length?i.info.sensor.length:0
+                    //           })
+                    //         })
                         // 指标滚动
                         window.impointFlowInterval=
                           setInterval(()=>{
-                            window.indexNumInfo&&window.indexNumInfo.forEach((i,index)=>{
-                                if(i.impointDataLengthNow<i.impointDataLength-1){
-                                i.impointDataLengthNow++
-                              }else{
-                                i.impointDataLengthNow=0
-                              }
-                              jquery(`.impopup`).eq(index).children().css({'margin-top':`-${52*i.impointDataLengthNow}px`})
-                            })
-                            // if(window.impointDataLength){
-                            //   if(window.impointDataLengthNow<window.impointDataLength-1){
-                            //     window.impointDataLengthNow++
+                            // window.indexNumInfo&&window.indexNumInfo.forEach((i,index)=>{
+                            //     if(i.impointDataLengthNow<i.impointDataLength-1){
+                            //     i.impointDataLengthNow++
                             //   }else{
-                            //     window.impointDataLengthNow=0
+                            //     i.impointDataLengthNow=0
                             //   }
-                            //     jquery('.impopup-content').css({'margin-top':`-${52*window.impointDataLengthNow}px`})
-                            //   }                              
+                            //   jquery(`.impopup`).eq(index).children().css({'margin-top':`-${52*i.impointDataLengthNow}px`})
+                            // })
+                            if(window.impointDataLength){
+                              
+                              if(window.impointDataLengthNow<window.impointDataLength-1){
+                                window.impointDataLengthNow++
+                              }else{
+                                window.impointDataLengthNow=0
+                              }
+                                jquery('.impopup-content').css({'margin-top':`-${52*window.impointDataLengthNow}px`})
+                                // 隐藏空白
+                                window.impoint.forEach(i=>{
+                                if(i.info.data_real.length-1<window.impointDataLengthNow){
+                                    document.getElementById(i.id).style.display='none'
+                                  }else{
+                                    document.getElementById(i.id).style.display='inline-block'
+                                  }
+                                })
+                              }                              
                             },5000)  
                   }
                 })
@@ -2167,7 +2191,17 @@ export default defineComponent({
                         let markerWindow=  new TFMap.HTMLElementOverLay(
                           { x:Number(data.dlon) , y: Number(data.dlat),z:Number(data.high)  },
                           TFMapUitl.impotPointDom(data)
-                        ).init().setOff(-52, -0)
+                        ).init()
+                        if(i.st_name=='派镇'){
+                          markerWindow.setOff(-50, -10)
+                        }else if(i.st_name=='德兴'){
+                          markerWindow.setOff(-52, 30)
+                        }else if(i.st_name=='加热萨'){
+                          markerWindow.setOff(-54, 20)
+                        }
+                        else{
+                          markerWindow.setOff(-52, -0)
+                        }
                         markerWindow.setId('imp&' + data.stcd);
                         markerWindow.setClassify('impoint_marker*')
                         markerWindow.info = data;
@@ -2177,33 +2211,41 @@ export default defineComponent({
                       })
                     })
                     // 单独记录每一个的指标数量和当前滚动位置
-                    window.indexNumInfo=[]
-                    window.impoint&&window.impoint.forEach(i=>{
-                              // console.log(i,'8383')
-                              window.indexNumInfo.push({
-                                impointDataLengthNow:0,
-                                impointDataLength:i.info.sensor.length?i.info.sensor.length:0
-                              })
-                            })
+                    // window.indexNumInfo=[]
+                    // window.impoint&&window.impoint.forEach(i=>{
+                    //           // console.log(i,'8383')
+                    //           window.indexNumInfo.push({
+                    //             impointDataLengthNow:0,
+                    //             impointDataLength:i.info.sensor.length?i.info.sensor.length:0
+                    //           })
+                    //         })
                         // 指标滚动
                         window.impointFlowInterval=
                           setInterval(()=>{
-                            window.indexNumInfo&&window.indexNumInfo.forEach((i,index)=>{
-                                if(i.impointDataLengthNow<i.impointDataLength-1){
-                                i.impointDataLengthNow++
-                              }else{
-                                i.impointDataLengthNow=0
-                              }
-                              jquery(`.impopup`).eq(index).children().css({'margin-top':`-${52*i.impointDataLengthNow}px`})
-                            })
-                            // if(window.impointDataLength){
-                            //   if(window.impointDataLengthNow<window.impointDataLength-1){
-                            //     window.impointDataLengthNow++
+                            // window.indexNumInfo&&window.indexNumInfo.forEach((i,index)=>{
+                            //     if(i.impointDataLengthNow<i.impointDataLength-1){
+                            //     i.impointDataLengthNow++
                             //   }else{
-                            //     window.impointDataLengthNow=0
+                            //     i.impointDataLengthNow=0
                             //   }
-                            //     jquery('.impopup-content').css({'margin-top':`-${52*window.impointDataLengthNow}px`})
-                            //   }                              
+                            //   jquery(`.impopup`).eq(index).children().css({'margin-top':`-${52*i.impointDataLengthNow}px`})
+                            // })
+                            if(window.impointDataLength){
+                              if(window.impointDataLengthNow<window.impointDataLength-1){
+                                window.impointDataLengthNow++
+                              }else{
+                                window.impointDataLengthNow=0
+                              }
+                                jquery('.impopup-content').css({'margin-top':`-${52*window.impointDataLengthNow}px`})
+                                 // 隐藏空白
+                                 window.impoint.forEach(i=>{
+                                if(i.info.data_real.length-1<window.impointDataLengthNow){
+                                    document.getElementById(i.id).style.display='none'
+                                  }else{
+                                    document.getElementById(i.id).style.display='block'
+                                  }
+                                })
+                              }                              
                             },5000)  
                   }
                 })