|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
After Width: | Height: | Size: 124 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 8.0 KiB |
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 8.0 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 9.6 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 386 KiB |
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||