1

public/webs/css/style.css

@@ -13,219 +13,16 @@ html {
     overflow: hidden;
 }
 body {
-<<<<<<< HEAD
     width: 100%;
     height: 100%;
-    overflow: hidden;
 }
 .h5-left {
-    width: 100%;
+    float: left;
-    height: 100%;
 }
 
 .h5-play-wrap {
-    width: auto;
-    height: auto;
-=======
-    padding:10px;
-    min-width: 1280px;
     width: 100%;
     height: 100%;
-    overflow: scroll;
-}
-.h5-left,
-.h5-right {
-    float: left;
-    margin-right: 20px;
-}
-.fn-padl10 {
-    padding-left: 10px;
-}
-.fn-marl10 {
-    margin-left: 10px;
-}
-.fn-clear {
-    clear: both;
-}
-.fn-overflow {
-    overflow: hidden;
-}
-.fn-width100 {
-    width: 100px;
-}
-.fn-marl10 {
-    margin-left: 10px;
-}
-.fn-marl150 {
-    margin-left: 150px;
-}
-.fn-mart10 {
-    margin-top: 10px;
-}
-.fn-fontBlue {
-    color: blue;
-}
-.fn-fontRed {
-    color: red !important;
-}
-.fn-lightBorder {
-    border: 1px solid rgb(255, 204, 0) !important;
-}
-.fn-normalBorder {
-    border: 1px solid rgb(125, 125, 125) !important;
-}
-fieldset {
-    display:block;
-    margin-top: 10px;
-}
-fieldset legend{
-    font-size: 14px;
-}
-.h5-play-wrap {
-    width: 500px;
-    height: 300px;
->>>>>>> 39fec77d76384e95b93f7c97ee954bdd068ea41e
-    background-color: #000;
-    border: 1px solid #333;
     position: relative;
     overflow: hidden;
 }
-<<<<<<< HEAD
-=======
-.h5-fieldset-wrap {
-    width: 520px;
-    padding: 10px;
-    border: 1px solid #333;
-}
-.h5-form-item {
-    float: left;
-    height: auto;
-    overflow: hidden;
-    margin-bottom: 5px;
-}
-.h5-form-item label {
-    width: 80px;
-    display: inline-block;
-}
-.h5-form-item input {
-    width: 130px;
-}
-.h5-form-item select {
-    width: 134px;
-}
-.h5-form-item span {
-    width: 60px;
-}
-.h5-form-item .h5-button {
-    width: 80px;
-    height: 30px;
-    font-size: 12px;
-}
-.h5-ptz-wrap {
-    width: 210px;
-    float: left;
-}
-.h5-step-wrap {
-    margin-bottom: 10px;
-}
-.h5-zoomfocus-wrap {
-    width: 200px;
-    float: left;
-}
-.h5-preset-wrap {
-    float: left;
-    margin-top: 10px;
-}
-.h5-ptz-wrap .h5-button {
-    width: 60px;
-    height: 30px;
-    margin-bottom: 3px;
-}
-.h5-zoomfocus-wrap .h5-button {
-    width: 80px;
-    height: 30px;
-    margin-bottom: 3px;
-}
-.h5-preset-wrap .h5-button {
-    width: 60px;
-    height: 30px;
-    margin-bottom: 3px;
-}
-.h5-preset-wrap input {
-    width: 130px;
-}
-.h5-table {
-    border-collapse: collapse;
-    background: #ddd;
-    width: 600px;
-    float: left;
-    height: 300px;
-    display: block;
-    overflow-y: scroll;
-}
-.h5-table tbody tr:nth-child(odd) {
-    background-color: #fff;
-}
-
-.h5-table tr td{
-    text-align: center;
-    padding: 5px 0;
-    border: 1px solid #999;
-}
-.h5-table tr:hover{
-    cursor: text;
-}
-a.i-download {
-    display: block;
-    width: 20px;
-    height: 20px;
-    margin: 0 auto;
-    cursor: pointer;
-    background: #cccccc;
-    border-radius: 50%;
-}
-a.i-download:hover {
-    background: #999;
-}
-.h5-page {
-    text-align: right;
-    margin-top: 10px;
-    margin-right: 18px;
-    display: block;
-    float: left;
-}
-.h5-ul {
-    float: left;
-    background: #ccc;
-    list-style: none;
-    max-height: 250px;
-    overflow-y: scroll;
-}
-.h5-ul li {
-    cursor: pointer;
-    height: 20px;
-    line-height: 20px;
-}
-.h5-ul li:hover {
-    background-color: #eee;
-}
-.video_loading{
-    position: absolute;
-    top: 0;
-    left: 0;
-    color: #fff;
-}
-.h5-menu-list {
-    margin-top: 40px;
-    background-color: #ccc;
-}
-.h5-menu-list li {
-    height: 40px;
-    line-height: 40px;
-    font-size: 20px;
-    cursor: pointer;
-}
-.h5-menu-list li:hover {
-    background-color: #eee;
-}
->>>>>>> 39fec77d76384e95b93f7c97ee954bdd068ea41e

public/webs/index.js

@@ -156,22 +156,18 @@ const onPreview = (isPlayback, url, playbackIndex, isChangeStream) => {
     alert("通道" + (channel + 1) + "已存在！");
     return;
   }
+  let ip = window.location.href.split("?")[2];
+  let channel = window.location.href.split("?")[1];
   onStopPreview();
-<<<<<<< HEAD
-  var player = null
-  let options = {
-    
-=======
   var player = null;
   let options = {
->>>>>>> 39fec77d76384e95b93f7c97ee954bdd068ea41e
+    wsURL: "ws://" + ip + ":" + "8200" + "/rtspoverwebsocket",
-    wsURL: "ws://" + "221.214.127.18" + ":" + "8200" + "/rtspoverwebsocket",
     rtspURL:
       "rtsp://" +
-      "221.214.127.18" +
+      ip +
       ":" +
       "8200" +
-      "/cam/realmonitor?channel=10" +
+      `/cam/realmonitor?channel=${channel}` +
       "&subtype=0" +
       "&proto=Private3",
     username: "admin",

src/views/Zhou/ZNYWJK.vue

@@ -17,13 +17,12 @@
         <div id="dqsxtxx">
           <div class="headers">
             <iframe
-              src="webs/index.html"
+              :src="'webs/index.html' + '?1?221.214.127.18'"
               frameborder="0"
               width="100%"
               height="100%"
               ref="videos"
-            ></iframe
+            ></iframe>
-            >;
             <p class="h_footer">
               <span class="time">{{ dates }}</span>
               <img
@@ -199,10 +198,6 @@
     </div>
   </div>
 </template>
-<<<<<<< HEAD
-=======
-<script src="../../../public/webs/module/PlayerControl"></script>
->>>>>>> 39fec77d76384e95b93f7c97ee954bdd068ea41e
 <script>
 import moment from "moment";
 import screenfull from "screenfull";

src/views/lll/PDS.vue

@@ -26,12 +26,14 @@
         </div>
       </div>
     </div>
-    <img src="../../assets/img/pdsbg.png" v-if="falg" alt="" class="bgt" />
+    <img src="../../assets/pds/中间.png" v-show="falg" alt="" class="bgt" />
 
     <div class="boxLeft" v-if="falg">
       <div class="title">1号配电箱</div>
       <div class="container">
-        <div class="head">基本信息</div>
+        <div class="head">
+          <img src="../../assets/pds/组 23.png" alt="" /> <span>基本信息</span>
+        </div>
         <ul class="container-box">
           <li>
             <p>设备信息</p>
@@ -62,7 +64,11 @@
             <p>运行</p>
           </li>
         </ul>
-        <div class="head">电流/电压曲线</div>
+        <div class="head">
+          <img src="../../assets/pds/组 23.png" alt="" /><span
+            >电流/电压曲线</span
+          >
+        </div>
         <div class="data">
           <span :class="type == '电压' ? 'active' : ''" @click="type = '电压'"
             >电压</span
@@ -74,41 +80,46 @@
         <div id="dldy"></div>
       </div>
     </div>
-    <div class="boxRight" v-if="falg">
+    <div class="boxRight" v-show="falg">
       <div class="title">1号配电箱</div>
       <div class="container">
-        <div class="head">实时数据</div>
+        <div class="head">
+          <img src="../../assets/pds/组 23.png" alt="" /> <span>实时数据</span>
+        </div>
         <div class="iconBox">
           <div class="smallBox">
-            <img src="../../assets/img/可调图标.png" alt="" />
+            <img src="../../assets/pds/实时功率icon.png" alt="" />
             <div class="iconRight">
               <div>245.69</div>
               <div>实时功率(kW)</div>
             </div>
           </div>
           <div class="smallBox">
-            <img src="../../assets/img/可调图标.png" alt="" />
+            <img src="../../assets/pds/负载率icon.png" alt="" />
             <div class="iconRight">
               <div>70</div>
               <div>负载率(%)</div>
             </div>
           </div>
           <div class="smallBox">
-            <img src="../../assets/img/可调图标.png" alt="" />
+            <img src="../../assets/pds/变损率icon.png" alt="" />
             <div class="iconRight">
               <div>6</div>
               <div>变损率(%)</div>
             </div>
           </div>
           <div class="smallBox">
-            <img src="../../assets/img/可调图标.png" alt="" />
+            <img src="../../assets/pds/设备工况icon.png" alt="" />
             <div class="iconRight">
               <div>正常</div>
               <div>设备工况</div>
             </div>
           </div>
         </div>
-        <div class="head">实时负荷功率</div>
+        <div class="head">
+          <img src="../../assets/pds/组 23.png" alt="" />
+          <span>实时负荷功率</span>
+        </div>
         <div id="ssfh"></div>
       </div>
     </div>
@@ -546,8 +557,10 @@ export default {
   box-sizing: border-box;
   display: flex;
   background-color: transparent;
-  background-image: url(../../assets/img/左遮罩.png);
+  background-image: url(../../assets/pds/遮罩.png);
+  background-position: left;
   justify-content: space-between;
+  background-repeat: no-repeat;
   position: relative;
 
   .left {
@@ -647,22 +660,31 @@ export default {
 .bgt {
   // width: 1113px;
   // height: 2055px;
-  width: 317px;
+  width: 1525px;
-  height: 485px;
+  height: 480px;
   position: absolute;
-  left: 52%;
+  left: 45%;
-  top: 75%;
+  top: 60%;
   // border: 2px solid #20d6fe;
-  transform: translate(50%, -50%);
+}
+.head {
+  position: relative;
+  img {
+    position: absolute;
+  }
+  span {
+    margin-left: 70px;
+  }
 }
 .boxLeft {
   width: 1089px;
   height: 1468px;
-  background-color: rgba(32, 64, 111, 0.8);
   position: absolute;
-  left: 2237px;
+  left: 2370px;
   top: 1200px;
   color: #ffffff;
+  background: url(../../assets/pds/左.png);
+  background-size: cover;
   .data {
     position: absolute;
     font-size: 20px;
@@ -695,7 +717,6 @@ export default {
     }
   }
   .title {
-    background: url(../../assets/img/小标题栏.png);
     background-size: cover;
     height: 49px;
     font-size: 30px;
@@ -733,7 +754,8 @@ export default {
         }
       }
       li:nth-of-type(2n-1) {
-        background-color: #2a5e8d;
+        background-image: url(../../assets/pds/列表.png);
+        background-size: cover;
       }
     }
     #dldy {
@@ -746,12 +768,12 @@ export default {
 .boxRight {
   width: 1089px;
   height: 1317px;
-  background-color: rgba(32, 64, 111, 0.8);
+  background: url(../../assets/pds/右.png);
+  background-size: cover;
   position: absolute;
-  left: 5400px;
+  left: 4970px;
   top: 1200px;
   .title {
-    background: url(../../assets/img/小标题栏.png);
     background-size: cover;
     height: 49px;
     font-size: 30px;