diff --git a/.history/public/webs/css/style_20231212135453.css b/.history/public/webs/css/style_20231212135453.css new file mode 100644 index 0000000..ff83339 --- /dev/null +++ b/.history/public/webs/css/style_20231212135453.css @@ -0,0 +1,28 @@ +@charset "utf-8"; +* { + margin:0; + padding:0; +} +html { + width:100%; + height:100%; + font-size:12px; + font-family:Arial, Helvetica, sans-serif; + -webkit-text-size-adjust:none; + background:#FFFFFF; + overflow: hidden; +} +body { + width: 100%; + height: 100%; +} +.h5-left { + float: left; +} + +.h5-play-wrap { + width: 100%; + height: 100%; + position: relative; + overflow: hidden; +} diff --git a/.history/public/webs/index_20231212133606.js b/.history/public/webs/index_20231212133606.js new file mode 100644 index 0000000..12c196c --- /dev/null +++ b/.history/public/webs/index_20231212133606.js @@ -0,0 +1,307 @@ +let $ip, + $port, + $user, + $password, + $loginState, + $stream, + $volume, + $canvas, //canvas播放视频DOM + $video, //video播放视频DOM + $canvas_ivs, //canvas绘图DOM + $video_wrap, //视频外层Wrap + $videoLoading, //“加载中...”提示 + WndIndex = 0, //宫格窗口Id + WebCaps = null; //webCapsConfig文件转存变量 +let isLogin = false; //是否登录 +let channel = 0; //当前通道 +let curPage = 1; //视频下载列表的当前页 +let totalPage = 1; //视频下载列表的总页数 +let recordArr = []; //视频文件数组 +let canvasSon = null; //canvas绘图实例 +let playerInstance = []; //播放|回放实例数组 +let recordInstance = []; //录像下载实例数组 +let talkInstance = []; //对讲实例数组 +let ivsInstance = []; //canvas绘图实例数组 +let cutInstance = []; //视频裁剪实例数组 +let onlineChannel = []; //当前成功拉流的视频通道数组 +let isCuting = false; //是否正在进行视频裁剪 +let downList = []; //勾选的视频下载列表 +let downItemIndex = 0; //视频下载索引 +let canvasParam = { + //canvas绘图默认传参 + strokeColor: "#FF0000", + title: "", + resizeEnable: false, + moveEnable: false, + closeEnable: true, + array: true, + showSize: false, + selectType: "inSide", + disappear: true, + selected: false, +}; +const lINENUMBER = 16; //回放列表每页显示录像条数 +let curEnlargeWnd = 0; + +/** + * @description 初始化 + */ +const init = () => { + let videoStr = ""; + for (var i = 0; i < 16; i++) { + videoStr += + '
'; + } + document.querySelector(".h5-play-wrap").innerHTML = videoStr; + document.querySelectorAll(".h5-play-wrap div").forEach((item, index) => { + item.addEventListener("click", function (event) { + let _wndIndex = event.target.parentNode.getAttribute("wnd-index") - 0; + if ( + !(playerInstance[_wndIndex] && playerInstance[_wndIndex].isPlayback) + ) { + channel = event.target.parentNode.getAttribute("channel") - 0; + document.querySelectorAll("#h5_channel_list li").forEach((item) => { + item.classList.remove("fn-fontRed"); + }); + } + document + .querySelectorAll(".h5-play-wrap div") + .forEach(function (item, index) { + if (index === _wndIndex) { + item.style.borderColor = "rgb(255, 204, 0)"; + if ( + !( + playerInstance[_wndIndex] && + playerInstance[_wndIndex].isPlayback + ) + ) { + if (onlineChannel.indexOf(channel) > -1) { + document + .querySelector( + '#h5_channel_list li[channel="' + channel + '"]' + ) + .classList.add("fn-fontRed"); + } + } + WndIndex = _wndIndex; + setVideoDom(); + } else { + item.style.borderColor = "rgb(125, 125, 125)"; + } + }); + }); + }); + $ip = $("#h5_ip"); + $port = $("#h5_port"); + $user = $("#h5_user"); + $password = $("#h5_password"); + $loginState = $("#h5_loginState"); + $stream = $("#h5_stream"); + $volume = $("#h5_volume"); + $video_wrap = document.querySelector(".h5-play-wrap"); + setVideoDom(); + + let inputArr = document.querySelectorAll("input[btn-for]"); + for (let node of inputArr) { + node.addEventListener("click", bindClickEvent); + } + + let selArr = document.querySelectorAll("select[sel-for]"); + for (let node of selArr) { + node.addEventListener("change", bindChangeEvent); + } + [ + "fullscreenchange", + "webkitfullscreenchange", + "mozfullscreenchange", + "msfullscreenchange", + ].forEach((item, index) => { + document.addEventListener(item, fullscreenchange, false); + }); + onPreview(false); +}; +/** + * @description 切换宫格时重新设置当前视频dom + */ +const setVideoDom = () => { + $canvas = $("#h5_canvas_" + WndIndex); + $video = $("#h5_video_" + WndIndex); + $canvas_ivs = $("#h5_ivs_" + WndIndex); + $videoLoading = $("#h5_loading_" + WndIndex); +}; +/** +/** + * @description 预览 + * @param {boolean} isPlayback 是否是回放 + * @param {string} url 回放视频的url + * @param {number} playbackIndex 回放视频的索引 + * @param {boolean} isChangeStream 是否是切换码流导致的重新拉流 + */ +const onPreview = (isPlayback, url, playbackIndex, isChangeStream) => { + if ( + playerInstance[WndIndex] && + onlineChannel.indexOf(channel) > -1 && + !isChangeStream + ) { + alert("通道" + (channel + 1) + "已存在！"); + return; + } + let ip = window.location.href.split("?")[2]; + let channel = window.location.href.split("?")[1]; + onStopPreview(); + var player = null; + let options = { + wsURL: "ws://" + ip + ":" + "8200" + "/rtspoverwebsocket", + rtspURL: + "rtsp://" + + ip + + ":" + + "8200" + + `/cam/realmonitor?channel=${channel}` + + "&subtype=0" + + "&proto=Private3", + username: "admin", + password: "pyss2017", + lessRateCanvas: true, + playback: isPlayback, + isPrivateProtocol: false, + realm: RPC.realm, //设备登录返回的realm + playbackIndex: playbackIndex, + }; + player = new PlayerControl(options); + + player.on("MSEResolutionChanged", function (e) { + console.log(e); + }); + player.on("PlayStart", function (e) { + console.log(e); + $videoLoading.style.display = "none"; + if (!player.isPlayback) { + onlineChannel.push(channel); + updateChannelList(); + // if(curWndType !== 1) { + // clickNextWnd(); + // } + } + }); + + player.on("GetFrameRate", function (e) { + console.log("GetFrameRate: " + e); + }); + player.on("FrameTypeChange", function (e) { + console.log("FrameTypeChange: " + e); + }); + player.on("Error", function (e) { + //console.log('Error: ' + JSON.stringify(e)) + }); + player.on("IvsDraw", function (e) { + //console.log('IvsDraw: ' + JSON.stringify(e)) + }); + player.on("WorkerReady", function () { + player.connect(); + }); + player.init($canvas, $video); + $canvas.parentNode.setAttribute("channel", channel); + $videoLoading.style.display = ""; +}; +/** + * @description 更新通道列表 + */ +const updateChannelList = () => { + document.querySelectorAll("#h5_channel_list li").forEach((item) => { + item.classList.remove("fn-fontBlue"); + item.classList.remove("fn-fontRed"); + if (onlineChannel.indexOf(item.getAttribute("channel") - 0) > -1) { + item.classList.add("fn-fontBlue"); + } + }); +}; +/** + * @description 停止预览 + */ +const onStopPreview = () => { + if (playerInstance[WndIndex]) { + playerInstance[WndIndex].stop(); + playerInstance[WndIndex].close(); + playerInstance[WndIndex] = null; + let _index = onlineChannel.indexOf(channel); + onlineChannel.splice(_index, 1); + updateChannelList(); + let dom = $canvas; + if (dom.style.display === "none") { + dom = $video; + } + dom.style.display = "none"; + if (talkInstance[WndIndex]) { + talkInstance[WndIndex].talk("off"); + talkInstance[WndIndex] = null; + } + if (recordInstance[WndIndex]) { + recordInstance[WndIndex].startRecord(false); + recordInstance[WndIndex] = null; + } + } +}; +/** + * @description 自定义选择器 + * @param {string} str dom元素 + */ +function $(str) { + if (str.charAt(0) == "#") { + return document.getElementById(str.substring(1)); + } else if (str.charAt(0) == ".") { + return document.getElementsByClassName(str.substring(1)); + } else { + return document.getElementsByTagName(str); + } +} +/** + * @description 设置样式 + * @param {object} obj dom元素 + * @param {*} json css样式 + */ +function setStyle(obj, json) { + for (let i in json) { + obj.style[i] = json[i]; + } +} +/** + * @description 绑定click事件 + * @param {object} event event对象 + */ +function bindClickEvent(event) { + let $el = event.target, + method = $el.getAttribute("btn-for"), + disabled = $el.getAttribute("disabled"); + if (!disabled) { + eval(method + "()"); + } +} +/** + * @description 绑定change事件 + * @param {object} event event对象 + */ +function bindChangeEvent(event) { + let $el = event.target, + method = $el.getAttribute("sel-for"), + disabled = $el.getAttribute("disabled"); + if (!disabled) { + eval(method + "()"); + } +} +function fullscreenchange() { + if (getFull()) { + return; + } +} +init(); diff --git a/.history/public/webs/index_20231212133742.js b/.history/public/webs/index_20231212133742.js new file mode 100644 index 0000000..12c196c --- /dev/null +++ b/.history/public/webs/index_20231212133742.js @@ -0,0 +1,307 @@ +let $ip, + $port, + $user, + $password, + $loginState, + $stream, + $volume, + $canvas, //canvas播放视频DOM + $video, //video播放视频DOM + $canvas_ivs, //canvas绘图DOM + $video_wrap, //视频外层Wrap + $videoLoading, //“加载中...”提示 + WndIndex = 0, //宫格窗口Id + WebCaps = null; //webCapsConfig文件转存变量 +let isLogin = false; //是否登录 +let channel = 0; //当前通道 +let curPage = 1; //视频下载列表的当前页 +let totalPage = 1; //视频下载列表的总页数 +let recordArr = []; //视频文件数组 +let canvasSon = null; //canvas绘图实例 +let playerInstance = []; //播放|回放实例数组 +let recordInstance = []; //录像下载实例数组 +let talkInstance = []; //对讲实例数组 +let ivsInstance = []; //canvas绘图实例数组 +let cutInstance = []; //视频裁剪实例数组 +let onlineChannel = []; //当前成功拉流的视频通道数组 +let isCuting = false; //是否正在进行视频裁剪 +let downList = []; //勾选的视频下载列表 +let downItemIndex = 0; //视频下载索引 +let canvasParam = { + //canvas绘图默认传参 + strokeColor: "#FF0000", + title: "", + resizeEnable: false, + moveEnable: false, + closeEnable: true, + array: true, + showSize: false, + selectType: "inSide", + disappear: true, + selected: false, +}; +const lINENUMBER = 16; //回放列表每页显示录像条数 +let curEnlargeWnd = 0; + +/** + * @description 初始化 + */ +const init = () => { + let videoStr = ""; + for (var i = 0; i < 16; i++) { + videoStr += + '
'; + } + document.querySelector(".h5-play-wrap").innerHTML = videoStr; + document.querySelectorAll(".h5-play-wrap div").forEach((item, index) => { + item.addEventListener("click", function (event) { + let _wndIndex = event.target.parentNode.getAttribute("wnd-index") - 0; + if ( + !(playerInstance[_wndIndex] && playerInstance[_wndIndex].isPlayback) + ) { + channel = event.target.parentNode.getAttribute("channel") - 0; + document.querySelectorAll("#h5_channel_list li").forEach((item) => { + item.classList.remove("fn-fontRed"); + }); + } + document + .querySelectorAll(".h5-play-wrap div") + .forEach(function (item, index) { + if (index === _wndIndex) { + item.style.borderColor = "rgb(255, 204, 0)"; + if ( + !( + playerInstance[_wndIndex] && + playerInstance[_wndIndex].isPlayback + ) + ) { + if (onlineChannel.indexOf(channel) > -1) { + document + .querySelector( + '#h5_channel_list li[channel="' + channel + '"]' + ) + .classList.add("fn-fontRed"); + } + } + WndIndex = _wndIndex; + setVideoDom(); + } else { + item.style.borderColor = "rgb(125, 125, 125)"; + } + }); + }); + }); + $ip = $("#h5_ip"); + $port = $("#h5_port"); + $user = $("#h5_user"); + $password = $("#h5_password"); + $loginState = $("#h5_loginState"); + $stream = $("#h5_stream"); + $volume = $("#h5_volume"); + $video_wrap = document.querySelector(".h5-play-wrap"); + setVideoDom(); + + let inputArr = document.querySelectorAll("input[btn-for]"); + for (let node of inputArr) { + node.addEventListener("click", bindClickEvent); + } + + let selArr = document.querySelectorAll("select[sel-for]"); + for (let node of selArr) { + node.addEventListener("change", bindChangeEvent); + } + [ + "fullscreenchange", + "webkitfullscreenchange", + "mozfullscreenchange", + "msfullscreenchange", + ].forEach((item, index) => { + document.addEventListener(item, fullscreenchange, false); + }); + onPreview(false); +}; +/** + * @description 切换宫格时重新设置当前视频dom + */ +const setVideoDom = () => { + $canvas = $("#h5_canvas_" + WndIndex); + $video = $("#h5_video_" + WndIndex); + $canvas_ivs = $("#h5_ivs_" + WndIndex); + $videoLoading = $("#h5_loading_" + WndIndex); +}; +/** +/** + * @description 预览 + * @param {boolean} isPlayback 是否是回放 + * @param {string} url 回放视频的url + * @param {number} playbackIndex 回放视频的索引 + * @param {boolean} isChangeStream 是否是切换码流导致的重新拉流 + */ +const onPreview = (isPlayback, url, playbackIndex, isChangeStream) => { + if ( + playerInstance[WndIndex] && + onlineChannel.indexOf(channel) > -1 && + !isChangeStream + ) { + alert("通道" + (channel + 1) + "已存在！"); + return; + } + let ip = window.location.href.split("?")[2]; + let channel = window.location.href.split("?")[1]; + onStopPreview(); + var player = null; + let options = { + wsURL: "ws://" + ip + ":" + "8200" + "/rtspoverwebsocket", + rtspURL: + "rtsp://" + + ip + + ":" + + "8200" + + `/cam/realmonitor?channel=${channel}` + + "&subtype=0" + + "&proto=Private3", + username: "admin", + password: "pyss2017", + lessRateCanvas: true, + playback: isPlayback, + isPrivateProtocol: false, + realm: RPC.realm, //设备登录返回的realm + playbackIndex: playbackIndex, + }; + player = new PlayerControl(options); + + player.on("MSEResolutionChanged", function (e) { + console.log(e); + }); + player.on("PlayStart", function (e) { + console.log(e); + $videoLoading.style.display = "none"; + if (!player.isPlayback) { + onlineChannel.push(channel); + updateChannelList(); + // if(curWndType !== 1) { + // clickNextWnd(); + // } + } + }); + + player.on("GetFrameRate", function (e) { + console.log("GetFrameRate: " + e); + }); + player.on("FrameTypeChange", function (e) { + console.log("FrameTypeChange: " + e); + }); + player.on("Error", function (e) { + //console.log('Error: ' + JSON.stringify(e)) + }); + player.on("IvsDraw", function (e) { + //console.log('IvsDraw: ' + JSON.stringify(e)) + }); + player.on("WorkerReady", function () { + player.connect(); + }); + player.init($canvas, $video); + $canvas.parentNode.setAttribute("channel", channel); + $videoLoading.style.display = ""; +}; +/** + * @description 更新通道列表 + */ +const updateChannelList = () => { + document.querySelectorAll("#h5_channel_list li").forEach((item) => { + item.classList.remove("fn-fontBlue"); + item.classList.remove("fn-fontRed"); + if (onlineChannel.indexOf(item.getAttribute("channel") - 0) > -1) { + item.classList.add("fn-fontBlue"); + } + }); +}; +/** + * @description 停止预览 + */ +const onStopPreview = () => { + if (playerInstance[WndIndex]) { + playerInstance[WndIndex].stop(); + playerInstance[WndIndex].close(); + playerInstance[WndIndex] = null; + let _index = onlineChannel.indexOf(channel); + onlineChannel.splice(_index, 1); + updateChannelList(); + let dom = $canvas; + if (dom.style.display === "none") { + dom = $video; + } + dom.style.display = "none"; + if (talkInstance[WndIndex]) { + talkInstance[WndIndex].talk("off"); + talkInstance[WndIndex] = null; + } + if (recordInstance[WndIndex]) { + recordInstance[WndIndex].startRecord(false); + recordInstance[WndIndex] = null; + } + } +}; +/** + * @description 自定义选择器 + * @param {string} str dom元素 + */ +function $(str) { + if (str.charAt(0) == "#") { + return document.getElementById(str.substring(1)); + } else if (str.charAt(0) == ".") { + return document.getElementsByClassName(str.substring(1)); + } else { + return document.getElementsByTagName(str); + } +} +/** + * @description 设置样式 + * @param {object} obj dom元素 + * @param {*} json css样式 + */ +function setStyle(obj, json) { + for (let i in json) { + obj.style[i] = json[i]; + } +} +/** + * @description 绑定click事件 + * @param {object} event event对象 + */ +function bindClickEvent(event) { + let $el = event.target, + method = $el.getAttribute("btn-for"), + disabled = $el.getAttribute("disabled"); + if (!disabled) { + eval(method + "()"); + } +} +/** + * @description 绑定change事件 + * @param {object} event event对象 + */ +function bindChangeEvent(event) { + let $el = event.target, + method = $el.getAttribute("sel-for"), + disabled = $el.getAttribute("disabled"); + if (!disabled) { + eval(method + "()"); + } +} +function fullscreenchange() { + if (getFull()) { + return; + } +} +init(); diff --git a/.history/src/views/Zhou/ZNYWJK_20231212133900.vue b/.history/src/views/Zhou/ZNYWJK_20231212133900.vue new file mode 100644 index 0000000..83bd78e --- /dev/null +++ b/.history/src/views/Zhou/ZNYWJK_20231212133900.vue @@ -0,0 +1,1156 @@ + + + diff --git a/.history/src/views/Zhou/ZNYWJK_20231212133930.vue b/.history/src/views/Zhou/ZNYWJK_20231212133930.vue new file mode 100644 index 0000000..2af6664 --- /dev/null +++ b/.history/src/views/Zhou/ZNYWJK_20231212133930.vue @@ -0,0 +1,1156 @@ + + + diff --git a/.history/src/views/Zhou/ZNYWJK_20231212133948.vue b/.history/src/views/Zhou/ZNYWJK_20231212133948.vue new file mode 100644 index 0000000..1fc69d7 --- /dev/null +++ b/.history/src/views/Zhou/ZNYWJK_20231212133948.vue @@ -0,0 +1,1156 @@ + + + diff --git a/.history/src/views/Zhou/ZNYWJK_20231212134034.vue b/.history/src/views/Zhou/ZNYWJK_20231212134034.vue new file mode 100644 index 0000000..d23157c --- /dev/null +++ b/.history/src/views/Zhou/ZNYWJK_20231212134034.vue @@ -0,0 +1,1156 @@ + + + diff --git a/.history/src/views/Zhou/ZNYWJK_20231212134043.vue b/.history/src/views/Zhou/ZNYWJK_20231212134043.vue new file mode 100644 index 0000000..e0303bf --- /dev/null +++ b/.history/src/views/Zhou/ZNYWJK_20231212134043.vue @@ -0,0 +1,1156 @@ + + + diff --git a/.history/src/views/Zhou/ZNYWJK_20231212134108.vue b/.history/src/views/Zhou/ZNYWJK_20231212134108.vue new file mode 100644 index 0000000..32b39b5 --- /dev/null +++ b/.history/src/views/Zhou/ZNYWJK_20231212134108.vue @@ -0,0 +1,1156 @@ + + + diff --git a/.history/src/views/Zhou/ZNYWJK_20231212134116.vue b/.history/src/views/Zhou/ZNYWJK_20231212134116.vue new file mode 100644 index 0000000..e3e2b33 --- /dev/null +++ b/.history/src/views/Zhou/ZNYWJK_20231212134116.vue @@ -0,0 +1,1156 @@ + + + diff --git a/.history/src/views/Zhou/ZNYWJK_20231212134209.vue b/.history/src/views/Zhou/ZNYWJK_20231212134209.vue new file mode 100644 index 0000000..76cdc30 --- /dev/null +++ b/.history/src/views/Zhou/ZNYWJK_20231212134209.vue @@ -0,0 +1,1156 @@ + + + diff --git a/.history/src/views/Zhou/ZNYWJK_20231212134213.vue b/.history/src/views/Zhou/ZNYWJK_20231212134213.vue new file mode 100644 index 0000000..5c08c4e --- /dev/null +++ b/.history/src/views/Zhou/ZNYWJK_20231212134213.vue @@ -0,0 +1,1156 @@ + + + diff --git a/package-lock.json b/package-lock.json index d457891..b275bd6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,6 @@ "element": "^0.1.4", "element-ui": "^2.15.14", "highcharts": "^11.2.0", - "moment": "^2.29.4", "postcss-pxtorem": "^6.0.0", "register-service-worker": "^1.7.2", "save": "^2.9.0", @@ -8630,14 +8629,6 @@ "integrity": "sha512-23g5BFj4zdQL/b6tor7Ji+QY4pEfNH784BMslY9Qb0UnJWRAt+lQGLYmRaM0KDBwIG23ffEBELhZDP2rhi9f/Q==", "dev": true }, - "node_modules/moment": { - "version": "2.29.4", - "resolved": "https://registry.npmmirror.com/moment/-/moment-2.29.4.tgz", - "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==", - "engines": { - "node": "*" - } - }, "node_modules/mrmime": { "version": "1.0.1", "resolved": "https://registry.npmmirror.com/mrmime/-/mrmime-1.0.1.tgz", @@ -19773,11 +19764,6 @@ "integrity": "sha512-23g5BFj4zdQL/b6tor7Ji+QY4pEfNH784BMslY9Qb0UnJWRAt+lQGLYmRaM0KDBwIG23ffEBELhZDP2rhi9f/Q==", "dev": true }, - "moment": { - "version": "2.29.4", - "resolved": "https://registry.npmmirror.com/moment/-/moment-2.29.4.tgz", - "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==" - }, "mrmime": { "version": "1.0.1", "resolved": "https://registry.npmmirror.com/mrmime/-/mrmime-1.0.1.tgz", diff --git a/package.json b/package.json index d752450..190a540 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,6 @@ "element": "^0.1.4", "element-ui": "^2.15.14", "highcharts": "^11.2.0", - "moment": "^2.29.4", "postcss-pxtorem": "^6.0.0", "register-service-worker": "^1.7.2", "save": "^2.9.0", diff --git a/public/webs/css/style.css b/public/webs/css/style.css index 1e9ac83..ff83339 100644 --- a/public/webs/css/style.css +++ b/public/webs/css/style.css @@ -15,18 +15,14 @@ html { body { width: 100%; height: 100%; - overflow: hidden; } .h5-left { - width: 100%; - height: 100%; + float: left; } .h5-play-wrap { - width: auto; - height: auto; - background-color: #000; - border: 1px solid #333; + width: 100%; + height: 100%; position: relative; overflow: hidden; } diff --git a/public/webs/index.js b/public/webs/index.js index adec45d..12c196c 100644 --- a/public/webs/index.js +++ b/public/webs/index.js @@ -156,17 +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(); - var player = null + var player = null; let options = { - - 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", diff --git a/src/assets/pds/中间.png b/src/assets/pds/中间.png new file mode 100644 index 0000000..6db0ca7 Binary files /dev/null and b/src/assets/pds/中间.png differ diff --git a/src/assets/pds/列表.png b/src/assets/pds/列表.png new file mode 100644 index 0000000..a29566f Binary files /dev/null and b/src/assets/pds/列表.png differ diff --git a/src/assets/pds/变损率icon.png b/src/assets/pds/变损率icon.png new file mode 100644 index 0000000..b961d72 Binary files /dev/null and b/src/assets/pds/变损率icon.png differ diff --git a/src/assets/pds/右.png b/src/assets/pds/右.png new file mode 100644 index 0000000..998bf33 Binary files /dev/null and b/src/assets/pds/右.png differ diff --git a/src/assets/pds/实时功率icon.png b/src/assets/pds/实时功率icon.png new file mode 100644 index 0000000..ce28ed6 Binary files /dev/null and b/src/assets/pds/实时功率icon.png differ diff --git a/src/assets/pds/左.png b/src/assets/pds/左.png new file mode 100644 index 0000000..9a5ef17 Binary files /dev/null and b/src/assets/pds/左.png differ diff --git a/src/assets/pds/组 23.png b/src/assets/pds/组 23.png new file mode 100644 index 0000000..94b8cd8 Binary files /dev/null and b/src/assets/pds/组 23.png differ diff --git a/src/assets/pds/设备工况icon.png b/src/assets/pds/设备工况icon.png new file mode 100644 index 0000000..a58c250 Binary files /dev/null and b/src/assets/pds/设备工况icon.png differ diff --git a/src/assets/pds/负载率icon.png b/src/assets/pds/负载率icon.png new file mode 100644 index 0000000..428d3b1 Binary files /dev/null and b/src/assets/pds/负载率icon.png differ diff --git a/src/assets/pds/遮罩.png b/src/assets/pds/遮罩.png new file mode 100644 index 0000000..2229cbb Binary files /dev/null and b/src/assets/pds/遮罩.png differ diff --git a/src/views/Zhou/ZNYWJK.vue b/src/views/Zhou/ZNYWJK.vue index d9c6346..5c08c4e 100644 --- a/src/views/Zhou/ZNYWJK.vue +++ b/src/views/Zhou/ZNYWJK.vue @@ -17,13 +17,12 @@
; + >

- +
1号配电箱
-
基本信息
+
+ 基本信息 +
-
电流/电压曲线
+
+ 电流/电压曲线 +
电压
-
+
1号配电箱
-
实时数据
+
+ 实时数据 +
- +
245.69
实时功率(kW)
- +
70
负载率(%)
- +
6
变损率(%)
- +
正常
设备工况
-
实时负荷功率
+
+ + 实时负荷功率 +
@@ -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;