大屏监控修改H5player 缩放

gassafetyprogress-web/src/components/emergency/PipeColor.vue

@@ -128,8 +128,8 @@ export default {
     &.active,
     &:hover
     {
-      background-color: #053B6A ;
-      color: #2CD5DB;
+      background-color: #1890ff ;
+      color: #ffffff;
     }
   }
 }

gassafetyprogress-web/src/components/emergency/Timeline.vue

@@ -85,7 +85,7 @@
       .long-line {
         width: 1px;
         height: 98px;
-        background: #ffffff;
+        background: #000000;
         box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
         opacity: 0.5;
         margin-left: 8px;
@@ -96,7 +96,7 @@
       box-sizing: border-box;
       margin-left: 20px;
       height: 86px;
-      padding: 0 0 0 20px;
+      padding: 6px 0 0 20px;
       text-align: left;
       margin-bottom: 30px;
 
@@ -104,20 +104,20 @@
         font-size: 15px;
         word-break: break-all;
         margin-bottom: 16px;
-        color: #d9d9d9;
+        color: #000000;
         font-weight: 500;
         /*display: inline;*/
       }
 
       .timeline-date {
         font-size: 13px;
-        color: #dfe4ed;
+        color: #000000;
         font-weight: 500;
         margin-bottom: 16px;
       }
       .timeline-desc {
         font-size: 14px;
-        color: #30b46b;
+        color: #000000;
       }
     }
 

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

@@ -7,7 +7,7 @@
           <span class="dot-inner"></span>
         </span>
         <span
-          style="letter-spacing: 3px; color: #cddbe4; cursor: pointer"
+          style="letter-spacing: 3px; color: #000000; cursor: pointer"
           >事件接报列表</span
         >
       </div>
@@ -36,11 +36,11 @@
       </div>
 
       <div id = "detail" class="show-detail" style="display: none;margin-top: 15px;margin-bottom: 20px;position:fixed;right: 470px;width: 300px;
-                                                      background: rgba(0, 0, 0, 0.7);top: 110px">
+                                                      background: #ffffff;top: 110px">
         <div class="el-form-div" style="height: 30px;">
           <div class="detail-title">{{detailTitle}}</div>
           <div style="cursor: pointer;" @click="closeDetail()">
-            <img style="width: 20px;height: 20px;margin-top: 5px;" src="@/assets/mapImages/closeBtn.png" alt="" />
+            <img style="width: 20px;height: 20px;margin-top: 5px;" src="@/assets/mapImages/close.png" alt="" />
           </div>
         </div>
         <timeline :timeline-list="handleList"></timeline>
@@ -569,9 +569,9 @@ export default {
   margin-left: 10px;
   background-image: linear-gradient(
     to left,
-    #112238,
+    #fff,
     rgb(49 151 195 / 70%) 50%,
-    #112238
+    #fff
   );
 }
 .dot {
@@ -600,7 +600,7 @@ export default {
   animation: vabDot 1.2s ease-in-out infinite;
 }
   .content-div{
-    color: white;
+    color: #000000;
     font-size: 30;
     height: 40px;
     line-height: 50px;
@@ -614,7 +614,7 @@ export default {
 }
   .button-div{
     cursor:pointer;
-    color: #339CC9;
+    color: #ffffff;
     margin-bottom: 5px;
     border-radius: 2px;
     width: 100px;
@@ -625,6 +625,7 @@ export default {
     font-size: 15;
     margin-left: 10%;
     margin-top: 10px;
+    background: #1c84c6;
   }
   .title-div{
     width: 100%;
@@ -633,7 +634,7 @@ export default {
     border-bottom: 2px solid #1c84c6;
     border-top: 1px solid #1c84c6;
     height: 30px;
-    color: white;
+    color: #000;
     line-height: 30px;
   }
 .test-5::-webkit-scrollbar {
@@ -670,8 +671,9 @@ export default {
 .detail-title{
   height: 100%;
   width: 270px;
-  color: white;
+  color: #000000;
   margin-left: 20px;
+  margin-top: 5px;
 }
 .massage{
   color: #00ffff;

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

@@ -31,30 +31,62 @@
     />
     <PipeColor />
     <!-- 底部按钮 -->
-    <div class="home-div">
-      <img src="@/assets/mapinages/bottombanner.png" alt="" style="" />
-      <div class="listingsSty fangy">
-        <div
-          @click="allCompany"
-          :class="selarr.length == companyLength ? '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>
+    <!--<div class="home-div">-->
+      <!--<img src="@/assets/mapinages/bottombanner.png" alt="" style="" />-->
+      <!--<div class="listingsSty fangy">-->
+        <!--<div-->
+          <!--@click="allCompany"-->
+          <!--:class="selarr.length == companyLength ? 'active' : ''"-->
+          <!--class="firsty"-->
+        <!--&gt;-->
+          <!--全部-->
+        <!--</div>-->
+        <!--<div-->
+          <!--class="firsty"-->
+          <!--:class="selarr.indexOf(item.val) >= 0 ? 'active' : ''"-->
+          <!--v-for="(item, index) in typeList"-->
+          <!--:key="item.val"-->
+          <!--@click="sel(index, item)"-->
+        <!--&gt;-->
+          <!--{{ item.name }}-->
+        <!--</div>-->
+      <!--</div>-->
+    <!--</div>-->
     <div class="event_div" @click="handleAdd">
         事件接报
     </div>
+    <!--<div class="mouseToolBtn">-->
+      <!--<button class="serBtn" @click="openDraw()" id="mouseToolBtn">画图</button>-->
+    <!--</div>-->
+    <!--<div class="delTu" id="delTu">-->
+      <!--&lt;!&ndash;<input name="in" type="radio" @click="delRadioLays()"/>&ndash;&gt;-->
+    <!--</div>-->
+    <!--<div class="toolBtn" :style="display">-->
+      <!--<div class="el-form-div" style="height: 30px;background: black">-->
+        <!--<div class="detail-title">标绘工具</div>-->
+        <!--<div style="cursor: pointer;" >-->
+          <!--<img style="width: 20px;height: 20px;margin-top: 5px;" @click="closeDraw" src="@/assets/mapImages/closeBtn.png" alt="" />-->
+        <!--</div>-->
+      <!--</div>-->
+      <!--<div class="el-form-div">-->
+          <!--<div style="width: 50%">-->
+            <!--<div class="tool-div" @click="drawMark()">标记</div>-->
+            <!--<div class="tool-div" @click="drawCircle()">圆形 </div>-->
+            <!--<div class="tool-div" @click="drawRule()">测距</div>-->
+            <!--<div class="tool-div" @click="editDraw()">编辑图形</div>-->
+            <!--<div class="tool-div" @click="map.delOverlays()">删除图形</div>-->
+            <!--<div class="tool-div" @click="mouseToolDrawClear">清除所有</div>-->
+          <!--</div>-->
+          <!--<div style="width: 50%">-->
+            <!--<div class="tool-div" @click="drawPolyline()">线段</div>-->
+            <!--<div class="tool-div" @click="drawPolygon()">多边形</div>-->
+            <!--<div class="tool-div" @click="drawMeasureArea()">面积</div>-->
+            <!--<div class="tool-div" @click="endEditDraw()">关闭编辑</div>-->
+            <!--<div class="tool-div" @click="map.endOverlays()">结束绘制</div>-->
+            <!--<div class="tool-div">保存图片</div>-->
+          <!--</div>-->
+      <!--</div>-->
+    <!--</div>-->
     <!-- 设备按钮 -->
     <div class="typelist-div">
       <div
@@ -74,7 +106,7 @@
     <div class="typelist-div2">
       <div
         class="list"
-        style="width: 146px;height: 40px;line-height: 30px;margin-top: 1px;"
+        style="width: 146px;height: 35px;line-height: 35px;"
         v-for="(item, index) in arr2"
         :key="index"
         :class="selarr1.indexOf(item.val) >= 0 ? 'active' : ''"
@@ -82,7 +114,7 @@
       >
         <img
           :src="item.imgurl"
-          style="margin-top: 3px; float: left; margin-right: 3px;width: 26px"
+          style="margin-top: 6px;float: left; margin-right: 3px;width: 18px;height: 18px;margin-left: 10px;"
         />
         {{ item.name }}
       </div>
@@ -200,7 +232,7 @@
 
 <script>
 // @ is an alias to /src
-import { EditorMap } from "@/utils/mapClass/map";
+import { EditorMap } from "@/utils/mapClass/yjmap";
 import { mapGetters, mapActions } from "vuex";
 import { listDetectorInfo } from "@/api/detector/detectorInfo";
 import { detectorUserList } from "@/api/detector/detectorUser";
@@ -292,6 +324,7 @@ export default {
           name: "中燃韵科",
         },
       ],
+      display:"display:none",
       //      2:"调压箱",
       // 3:"阀门",
       // 4:"厂站",
@@ -381,6 +414,8 @@ export default {
 
       // 报警轮询timer
       alarmTimer: null,
+      //绘制工具
+      markNum:0,
       // 表单参数
       form: {},
       // 表单校验
@@ -444,7 +479,7 @@ export default {
       "map",
       {
         center: path,
-        mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
+        //mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
         zoom: 14.5,
       },
       this
@@ -782,17 +817,45 @@ export default {
       this.nowweek = `${weekArr[week]}`;
       this.nowDate = `${year}年${month}月${day}`;
     },
+    // 地图绘制
+    // drawMark() {
+    //   this.map.mouseAddMarker();
+    // },
+    // drawPolyline() {
+    //    this.map.mouseAddPipeline("Polyline");
+    // },
+    // drawCircle() {
+    //   this.map.mouseAddCircle("Circle");
+    // },
+    // drawPolygon() {
+    //   this.map.mouseAddPolygon("Polygon");
+    // },
+    // drawRule() {
+    //   this.map.mouseAddRule();
+    // },
+    // drawMeasureArea() {
+    //   this.map.mouseAddMeasureArea();
+    // },
+    // mouseToolDrawClear(){
+    //   this.map.mousetoolClose(true);
+    // },
+    // editDraw(){
+    //   this.map.editOverlays();
+    // },
+    // endEditDraw(){
+    //   this.map.endEditOverlays();
+    // },
+    // delRadioLays(num){
+    //   console.log("---"+num)
+    // },
+    // openDraw(){
+    //   this.display="";
+    // },
+    // closeDraw(){
+    //   this.display="display:none";
+    // }
   },
-  // 销毁定时器
-  beforeDestroy() {
-    if (this.formatDate) {
-      clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
-    }
-    // 报警
-    if (this.alarmTimer) {
-      clearInterval(this.alarmTimer);
-    }
-  },
+
 };
 </script>
 <style lang="scss" scoped>
@@ -844,11 +907,11 @@ export default {
 }
 .rightbar {
   width: 470px;
-  height: 90%;
+  height: 92%;
   position: fixed;
   top: 50px;
   right: 0;
-  background: #112238;
+  background: #ffffff;
 }
 .home-div {
   width: 50%;
@@ -964,22 +1027,55 @@ export default {
   z-index: 9999;
   float: left;
   margin-left: 15px;
-  color: #fff;
+  color: #000000;
   line-height: auto;
-  text-align: center;
-  background: linear-gradient(86deg, #112238 0%, #086187 62%, #112238 100%);
-  box-shadow: inset 0px 1px 2px 1px #125c9b;
+  background: #ffffff;
+  box-shadow: inset 0px 1px 2px 1px #ffffff;
   font-size: 14px;
   padding: 5px 7px;
   cursor: pointer;
 }
 
 .list.active {
-  background: linear-gradient(86deg, #112238 0%, #32a3d3 62%, #112238 100%);
-  box-shadow: inset 0px 1px 2px 1px #125c9b;
-  color: #2ee7e7;
+  background: #ffffff;
+  box-shadow: inset 0px 1px 2px 1px #ffffff;
+  color: #1890ff;
   font-size: 14px;
 }
+.mouseToolBtn {
+  position: fixed;
+  margin-left: 100px;
+  z-index: 999;
+  bottom: 50px;
+}
+.delTu{
+  position: fixed;
+  margin-left: 30%;
+  margin-top: 300px;
+  z-index: 999;
+  height: 150px;
+  width: 450px;
+  background: #1c84c6;
+}
+.serBtn {
+  background: #fff;
+  width: 50px;
+  height: 50px;
+  text-align: center;
+  outline: none;
+  border-radius: 5px;
+  border: none;
+  cursor: pointer;
+}
+.toolBtn{
+  background: white;
+  width: 160px;
+  position: fixed;
+  margin-left: 100px;
+  z-index: 999;
+  bottom: 100px;
+  height: 200px;
+}
 .el-form-div{
   display:flex;
   flex-direction:row;
@@ -987,6 +1083,25 @@ export default {
   justify-content:flex-start;
   width: 100%;
 }
+.detail-title{
+  height: 30px;
+  color: white;
+  line-height: 30px;
+  width: 130px;
+  font-size: 15px;
+  margin-left: 5px;
+}
+.tool-div{
+  border: 1px solid #cccccc;
+  width: 80%;
+  margin-left: 10%;
+  text-align: center;
+  margin-top: 4px;
+  font-size: 14px;
+  height: 24px;
+  line-height: 24px;
+  cursor:pointer;
+}
 ::v-deep .el-dialog:not(.is-fullscreen) {
   margin-top: 13vh !important;
 }