This commit is contained in:
lll 2023-12-12 11:02:59 +08:00
parent 875432cdd3
commit 727304652b
14 changed files with 53 additions and 243 deletions

View File

@ -13,219 +13,16 @@ html {
overflow: hidden;
}
body {
<<<<<<< HEAD
width: 100%;
height: 100%;
overflow: hidden;
}
.h5-left {
width: 100%;
height: 100%;
float: left;
}
.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

View File

@ -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://" + "221.214.127.18" + ":" + "8200" + "/rtspoverwebsocket",
wsURL: "ws://" + ip + ":" + "8200" + "/rtspoverwebsocket",
rtspURL:
"rtsp://" +
"221.214.127.18" +
ip +
":" +
"8200" +
"/cam/realmonitor?channel=10" +
`/cam/realmonitor?channel=${channel}` +
"&subtype=0" +
"&proto=Private3",
username: "admin",

BIN
src/assets/pds/中间.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 124 KiB

BIN
src/assets/pds/列表.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.0 KiB

BIN
src/assets/pds/右.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.0 KiB

BIN
src/assets/pds/左.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

BIN
src/assets/pds/组 23.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.5 KiB

BIN
src/assets/pds/遮罩.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 386 KiB

View File

@ -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";

View File

@ -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;
height: 485px;
width: 1525px;
height: 480px;
position: absolute;
left: 52%;
top: 75%;
left: 45%;
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;