提交

src/pages/ol/demo/index.vue

@@ -673,6 +673,7 @@ export default {
       })
     },
     pointListClick(item) {
+      console.log('item', item)
       //监视器列表点击
       //关闭其他窗口
       // this.closeNoQueryDetailVisible()

src/pages/ol/demo/no-query-detail.vue

@@ -82,23 +82,24 @@
     <div class='info-title'>监控点信息</div>
     <div class='info-form'>
       <div class="quDetailM">
-        <p class="leftP">线路站点&nbsp;:&nbsp;&nbsp;<span>{{dataForm.lineStation}}</span></p>
+        <p class="leftP">设备名称&nbsp;:&nbsp;&nbsp;<span class='title'>{{dataForm.name}} 喷淋监测点</span></p>
       </div>
-      <div class="quDetailM">
-        <p class="leftP">资源点名称&nbsp;:&nbsp;&nbsp;{{dataForm.name}}</p>
-      </div>
-      <div class="quDetailM">
-        <p class="leftP">资源点类型&nbsp;:&nbsp;&nbsp;{{dataForm.typeName}}</p>
-      </div>
-      <div class="quDetailM">
-        <p class="leftP">资源点编码&nbsp;:&nbsp;&nbsp;{{dataForm.code}}</p>
-      </div>
-      <div class="quDetailM">
-        <p class="leftP">资源点状态&nbsp;:&nbsp;&nbsp;{{dataForm.status==1?'正常':'异常'}}</p>
+      <div class='typeInfoBox'>
+        <div class="typeInfo">
+          <div class='title'>末端流量</div>
+          <div><span class='num'>9</span>&nbsp;<span class='unit'>L/s</span></div>
+          <div class='scope'>参考值：5~20 L/s</div>
+        </div>
+        <div class="typeInfo">
+          <div class='title'>当前压力</div>
+          <div><span class='num'>0.78</span>&nbsp;<span class='unit'>Mpa</span></div>
+          <div class='scope'>参考值：0.35~1.45 Mpa</div>
+        </div>
       </div>
       <div class="quDetailM">
-        <p class="leftP">部署位置&nbsp;:&nbsp;&nbsp;{{dataForm.deployLocation}}</p>
+        <p class="leftP">资源点状态&nbsp;:&nbsp;&nbsp;<span>{{dataForm.status==1?'正常':'异常'}}</span></p>
       </div>
+
     </div>
   </div>
 </template>
@@ -148,12 +149,13 @@ export default {
   },
   methods: {
     init (id, stationId) {
+      console.log('id', id)
       this.clickFlag = false
       this.dataForm.id = id
       // this.stationId = stationId
       this.cameraCur = {}
       this.camera = ''
-      this.initResource()
+      // this.initResource()
       this.dataForm.operatorName = this.info.name
     },
     initResource() {
@@ -298,7 +300,7 @@ export default {
             this.cameraCur = res
           }
         })
-        if(this.flvPlayer){
+        if (this.flvPlayer) {
           this.flvPlayer.pause()
           this.flvPlayer.unload()
           this.flvPlayer.detachMediaElement()
@@ -381,7 +383,7 @@ export default {
   width: 100%;height: 180px;
 }
 .animation{
-  animation: myfirst 1s; position: absolute; top: 50px;right: 0; width: 330px; background-color: #F4F4F4; z-index: 11; border: 1px solid rgba(195, 195, 195, 1);
+  animation: myfirst 1s; position: absolute; top: -40px;right: 5px; width: 350px; background-color: #F4F4F4; z-index: 11; border: 1px solid rgba(195, 195, 195, 1);
   box-shadow:0 2px 8px 8px rgba(0,0,0,0.2)
 }
 @keyframes myfirst{
@@ -390,13 +392,43 @@ export default {
 }
 .quDetailM{
   width: 100%;
+  border:1px solid #BDCAD1;
+  margin-bottom: 10px;
+  background: #fff;
 
 }
 .leftP{
-    height: 30px; line-height: 30px; margin: 0; width: 100%; font-size: 14px;
+    height: 30px; line-height: 30px; margin: 0; width: 100%; font-size: 14px;text-indent:10px;
     span{
-      color: #46b6f9;
+      color: #0179C1;
+    }
+}
+.typeInfoBox{
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  .typeInfo{
+    width: 48%;
+    height: 100px;
+    background: #fff;
+    border:1px solid #BDCAD1;
+    text-align:center;
+    div{
+      margin:10px 0;
     }
+    .title{
+      font-size: 16px;
+      font-weight:600 ;
+    }
+    .num{
+      font-size: 16px;
+      font-weight: bold;
+      color: #0179C1;
+    }
+    .scope{
+      color: #5E5D5D;
+    }
+  }
 }
 .operate{
   padding:5px 0;

src/pages/ol/demo/query-detail.vue

@@ -73,23 +73,23 @@
     </div>
     <div class='info-title'>监控点信息</div>
     <div class='info-form'>
+      //- <div class="quDetailM">
+      //-   <p class="leftP">线路站点&nbsp;:&nbsp;&nbsp;<span>{{dataForm.lineStation}} </span></p>
+      //- </div>
       <div class="quDetailM">
-        <p class="leftP">线路站点&nbsp;:&nbsp;&nbsp;<span>{{dataForm.lineStation}}</span></p>
+        <p class="leftP">资源点名称&nbsp;:&nbsp;&nbsp;{{dataForm.name}} 枪机</p>
       </div>
       <div class="quDetailM">
-        <p class="leftP">资源点名称&nbsp;:&nbsp;&nbsp;{{dataForm.name}}</p>
+        <p class="leftP">资源点类型&nbsp;:&nbsp;&nbsp;{{dataForm.typeName}} 枪机</p>
       </div>
       <div class="quDetailM">
-        <p class="leftP">资源点类型&nbsp;:&nbsp;&nbsp;{{dataForm.typeName}}</p>
-      </div>
-      <div class="quDetailM">
-        <p class="leftP">资源点编码&nbsp;:&nbsp;&nbsp;{{dataForm.code}}</p>
+        <p class="leftP">资源点编码&nbsp;:&nbsp;&nbsp;{{dataForm.code}} QJ-0002</p>
       </div>
       <div class="quDetailM">
         <p class="leftP">资源点状态&nbsp;:&nbsp;&nbsp;{{dataForm.status==1?'正常':'异常'}}</p>
       </div>
       <div class="quDetailM">
-        <p class="leftP">部署位置&nbsp;:&nbsp;&nbsp;{{dataForm.deployLocation}}</p>
+        <p class="leftP">部署位置&nbsp;:&nbsp;&nbsp;{{dataForm.deployLocation}} 场景一</p>
       </div>
     </div>
   </div>
@@ -172,16 +172,16 @@ export default {
         if (data && data.code === 0) {
           this.dataForm = data.bean
           //如果当前设备摄像头为离线状态，则不加载画面
-          if(data.bean.byx2 == 0 && this.flvPlayer){//资源点状态(0=离线，1=在线)
+          if (data.bean.byx2 == 0 && this.flvPlayer) { //资源点状态(0=离线，1=在线)
             this.flvPlayer.pause()
             this.flvPlayer.unload()
             this.flvPlayer.detachMediaElement()
             this.flvPlayer.destroy()
             this.flvPlayer = null
             return
-          }else if(data.bean.byx2 == 0 && !this.flvPlayer){
+          } else if (data.bean.byx2 == 0 && !this.flvPlayer) {
             return
-          }else if(this.flvPlayer){
+          } else if (this.flvPlayer) {
             this.flvPlayer.pause()
             this.flvPlayer.unload()
             this.flvPlayer.detachMediaElement()
@@ -343,8 +343,8 @@ export default {
   animation: myfirst 1s;
   position: absolute;
   right: 0;
-  top: 50px;
-  width: 330px;
+  top: -40px;
+  width: 350px;
   background-color: #f4f4f4;
   z-index: 999;
   border: 1px solid rgba(195, 195, 195, 1);