Merge remote-tracking branch 'origin/master'

gassafetyprogress-web/src/assets/styles/all.scss

@@ -613,8 +613,23 @@
 
     // overflow-y: none !important;
   }
-  .amap-info {
+  
+
+}
+// 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;
+    overflow-y: hidden !important;
   }
 }

gassafetyprogress-web/src/components/bigWindow/Line.vue

 <!--
  * @Author: your name
  * @Date: 2022-01-27 14:25:45
- * @LastEditTime: 2022-02-28 09:52:51
+ * @LastEditTime: 2022-02-28 11:35:31
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /hello-world/src/views/components/User.vue
@@ -142,7 +142,7 @@ export default {
     .right {
       box-sizing: border-box;
       text-align: left;
-      padding: 0 5px;
+      padding: 0 1em;
     }
     .last {
       border: none;

gassafetyprogress-web/src/components/bigWindow/VideoView.vue

@@ -13,7 +13,7 @@
       <img src="@/assets/mapImages/closeBtn.png" alt="" />
     </div>
     <div class="box videoBox">
-      <div id="video"></div>
+      <div id="player" ></div>
     </div>
     <span slot="footer" class="dialog-footer">
       <!-- <el-button type="primary" @click="dialogVisible = false"
@@ -25,35 +25,103 @@
 </template>
 <script>
 import WasmPlayer from "@easydarwin/easywasmplayer"; //导入WasmPlayer.js
-
+import { getPreviewURLs } from "@/api/video/artemis"
+//const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
+const IS_MOVE_DEVICE = true;
+const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
 export default {
   data() {
     return {
       // dialogVisible: true,
       // AfterClose: true,
+      queryParam: {
+        cameraIndexCode: ""
+      },
+      player: null,
+      videoOpenNum: -1,
+      queryParam: {
+        cameraIndexCode: ""
+      },
     };
   },
   watch: {},
   mounted() {
-    setTimeout(() => {
-      this.player = new WasmPlayer(null, "video", this.callBack, {
-        Height: true,
+    this.$nextTick(() => {
+      if(!window.JSPlugin){
+        this.loadScript("/h5player/h5player.min.js").then(() =>{
+          this.createPlayer();
+        this.init()
+      })
+
+      }else{
+        this.createPlayer();
+        this.init()
+      }
   });
-      this.player.play(this.deviceData.usr, 1);
-    }, 1);
+    // setTimeout(() => {
+    //   this.player = new WasmPlayer(null, "video", this.callBack, {
+    //     Height: true,
+    //   });
+    //   this.player.play(this.deviceData.usr, 1);
+    // }, 1);
   },
   methods: {
     show() {
       this.dialogVisible = true;
     },
-    handleClose() {
-      console.log("关闭");
-      this.player.destroy(this.deviceData.usr);
-      // document.body.removeChild(this.$refs.videoBox.$el);
+    // handleClose() {
+    //   console.log("关闭");
+    //   this.player.destroy(this.deviceData.usr);
+    //   // document.body.removeChild(this.$refs.videoBox.$el);
+    // },
+    init() {
+      // 设置播放容器的宽高并监听窗口大小变化
+      window.addEventListener('resize', () => {
+        this.player.JS_Resize()
+    })
+    },
+    createPlayer() {
+      this.player = new window.JSPlugin({
+        szId: 'player',
+        szBasePath: "/h5player",
+        iMaxSplit: 4,
+        iCurrentSplit: IS_MOVE_DEVICE ? 1 : 2,
+        openDebug: true,
+        oStyle: {
+          borderSelect: IS_MOVE_DEVICE ? '#000' : '#FFCC00',
+        }
+      })
+      this.open();
+    },
+    open(){
+      this.queryParam.cameraIndexCode = this.deviceData.resourceId;
+      getPreviewURLs(this.queryParam).then(response =>{
+          if(response.data.code == '0'){
+            this.videoOpenNum++;
+            let url = response.data.data.url;
+            //let index = this.player.currentWindowIndex;
+            this.player.JS_Play(url,{playURL: url, mode:"0" }, this.videoOpenNum%4).then(() => {
+                console.log('realplay success')
+              },
+              e => { console.error(e) }
+              )
+            }
+      });
+    },
+    loadScript(src){
+      return new Promise(reslove =>{
+        let scpritE1 = document.createElement("script");
+      scpritE1.type = "text/javascript";
+      scpritE1.src = src;
+      scpritE1.onload = () => {
+        reslove();
+      }
+      document.body.appendChild(scpritE1);
+    })
     },
     callBack() {},
     close() {
-      this.handleClose();
+      //this.handleClose();
       this.mapClass.infowindowClose();
     },
   },
@@ -61,6 +129,9 @@ export default {
 </script>
 
 <style lang="scss">
+  .sub-wnd{
+    text-align: center !important;
+  }
 .box-wrapper {
   background-color: rgba(9, 18, 32, 0.6);
   position: relative;
@@ -81,8 +152,8 @@ export default {
     padding: 5px 12px 10px 10px;
     width: 350px;
     height: 200px;
-    #video {
-      height: 100%;
+    #player {
+      height: 190px;
     }
   }
 }

gassafetyprogress-web/src/components/bigWindow/leftBar.vue

@@ -34,9 +34,9 @@
       </div>
   </div>
   <div id="main1" style="width: 100%;height: 280px;"></div>
-    <div class="echarts-two" style="margin-top: 30px;width: 430px;margin-left: 10px;">
+    <!-- <div class="echarts-two" style="margin-top: 30px;width: 430px;margin-left: 10px;"> -->
       <div>
-        <div class="item1">
+        <div class="item1" style="margin-top: 30px;">
           <span class="dot">
             <span class="dot-inner"></span>
           </span>
@@ -69,7 +69,7 @@
         <div class="el-left">其他</div>
         <el-progress class="el-progress_text" :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>
       </div>
-    </div>
+    <!-- </div> -->
   </div>
 </template>
 

gassafetyprogress-web/src/components/bigWindow/rightBar.vue

@@ -12,7 +12,6 @@
               <div class="fong-div" style="width: 8px;height: 12px;background-color: #11e9e9b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div>
             </div>
         </div>
-        <div class="divfen" style="width: 90%;height: 30%;margin-left: 40px;">
             <div class="left">
                 <div
                   class="bottom right-bottom-data-left"
@@ -49,7 +48,7 @@
                     </el-table-column>
                     <el-table-column prop="alarmTime" label="预警时间" width="140">
                     </el-table-column>
-                    <el-table-column prop="handledStatus" label="状态" width="70">
+                    <el-table-column prop="handledStatus" label="状态">
                       <template slot-scope="scope">
                         <div class="ddd" :title="scope.row.handledStatus">
                           {{ scope.row.handledStatus }}
@@ -59,13 +58,6 @@
                   </el-table>
                 </div>
               </div>
-            <!-- <div class ="divall" style="width: 50%">
-                <div id="main21" style="height: 50%;width: 100%"></div>
-            </div>
-            <div class="divall" style="width: 50%" >
-                <div id="main22" style="height: 50%;width: 100%"></div>
-            </div> -->
-        </div>
 
 <!-- <div style="width: 100%;height: 200px;background-color: #44d7dc;">
     <el-table
@@ -92,10 +84,8 @@
           </el-table-column>
         </el-table>
 </div> -->
-        
-        <div class="echarts-one" style="margin-top: 10px;">
         <div>
-              <div class="item1">
+            <div class="item1" style="margin-top: 10px;">
                 <span class="dot">
                     <span class="dot-inner"></span>
                 </span>
@@ -105,7 +95,8 @@
                 <div class="fong-div" style="width: 8px;height: 12px;background-color: #11e9e9b3;float: right;margin-top: 10px;margin-right: 10px;transform: skewX(-25deg)"></div>
             </div>
         </div>
-            <div id="myChartone" :style="{width: '420px', height: '250px'}"></div>
+        <div class="echarts-one" style="margin-top: 10px;width: 430px;margin-left: 10px;">
+            <div id="myChartone" :style="{width: '420px', height: '240px'}"></div>
         </div>
         <!-- <div>
             <div class="item1">
@@ -499,10 +490,10 @@
                   trigger: "item"
               },
               grid: {
-                  top: "15%",
+                  top: "8%",
                   left: "8%",
-                  right: "12%",
-                  bottom: "15%",
+                  right: "8%",
+                  bottom: "13%",
                   containLabel: true
               },
               xAxis: {
@@ -726,7 +717,7 @@
     }
 </script>
 
-<style>
+<style scoped>
 .titleTex{
     height: 30px;
     width: 100%;
@@ -872,8 +863,9 @@
         height: 100%;
         overflow: hidden;
     }
-.el-table__body-wrapper {
-    overflow-x: hidden !important;
-    overflow-y: hidden !important;
+  .left{
+    margin-top: 10px;
+    width: 440px;
+    margin-left: 20px;
   }
 </style>

gassafetyprogress-web/src/utils/mapClass/map.js

 /*
  * @Author: your name
  * @Date: 2022-01-11 13:45:12
- * @LastEditTime: 2022-02-26 23:40:59
+ * @LastEditTime: 2022-02-28 10:25:45
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /test/hello-world/src/utils/mapClass.js
@@ -255,6 +255,10 @@ export class EditorMap {
       icon,
       position: [lng, lat],
       extData: deviceData,
+      // label:{
+      //   content:123,
+      //   direction:"top",
+      // }
     });
     // device.hide();
     // 如果没有有这个公司的数组，就创建，有就直接push
@@ -278,6 +282,18 @@ export class EditorMap {
         // 3是删除操作
       }
     });
+    device.on("mouseover",(e)=>{
+      const target = e.target;
+      const data = target.getExtData();
+      console.log(data)
+      const name = data.nickName||data.deviceName||data.videoName||data.stationName
+      target.setLabel({content:name,direction:"top"})
+    })
+    device.on("mouseout",(e)=>{
+      const target = e.target;
+      const data = target.getExtData();
+      target.setLabel({content:""})
+    })
   }
   /** 点击marker出现infowindow
    * @description:
@@ -442,7 +458,7 @@ export class EditorMap {
     if (!this.infowindow) return;
     this.infowindow.close();
   }
-
+  // 设备以及公司过滤
   allfilter(companyArr, typeArr) {
     for (let pipeItem in this.pipeArr) {
       this.pipeArr[pipeItem].forEach((pipe) => {
@@ -472,57 +488,7 @@ export class EditorMap {
       });
     }
   }
-  // 根据公司过滤是否显示 公司由一个数组传过来
-  companyFilter(companyArr) {
-    for (let pipeItem in this.pipeArr) {
-      this.pipeArr[pipeItem].forEach((pipe) => {
-        const data = pipe.getExtData();
-        if (companyArr.indexOf(data.companyType + "") >= 0) {
-          pipe.show();
-        } else {
-          pipe.hide();
-        }
-      });
-    }
-    for (let deviceItem in this.allDevice) {
-      this.allDevice[deviceItem].forEach((device) => {
-        const data = device.getExtData();
-
-        // 燃气没有公司，所以没有device.companyType不收到公司的控制
-        const companyHas = companyArr.indexOf(data.companyType + "") >= 0;
   
-        // 必须设备存在数组里，才会显示设备 !data.companyType代表用户不受公司制约
-        if (companyHas || !data.companyType) {
-          device.show();
-        } else {
-          device.hide();
-        }
-      });
-    }
-  }
-
-  // 根据设备类型隐藏展示
-  iconTypeFilter(typeArr) {
-    for (let deviceItem in this.allDevice) {
-      this.allDevice[deviceItem].forEach((device) => {
-        if (typeArr.indexOf(deviceItem + "") >= 0) {
-          device.show();
-        } else {
-          device.hide();
-        }
-      });
-    }
-  }
-  // 公司改变，先调用设备方法，在调用公司方法
-  companyChange(companyArr, typeArr) {
-    this.iconTypeFilter(typeArr);
-    this.companyFilter(companyArr);
-  }
-  // 设备选择，先调用公司方法，在调用设备方法覆盖
-  deviceChange(companyArr, typeArr) {
-    this.companyFilter(companyArr);
-    this.iconTypeFilter(typeArr);
-  }
   // 卫星图切换
   satellite = null;
   changeMap(bool) {

gassafetyprogress-web/src/views/bigWindow/index.vue

@@ -524,7 +524,7 @@ export default {
   background: #112238;
 }
 .rightbar {
-  width: 450px;
+  width: 470px;
   height: 90%;
   position: fixed;
   top: 10%;