diff --git a/src/utils/fhgl.js b/src/utils/fhgl.js index 5f1606e..1260200 100644 --- a/src/utils/fhgl.js +++ b/src/utils/fhgl.js @@ -8,280 +8,278 @@ * @param opacity 饼或者环的透明度 */ const getPie3D = ( - pieData, - internalDiameterRatio, - distance, - alpha, - pieHeight, - opacity = 1 - ) => { - const series = []; - let sumValue = 0; - let startValue = 0; - let endValue = 0; - let legendData = []; - let legendBfb = []; - const k = 1 - internalDiameterRatio; - pieData.sort((a, b) => { - return b.value - a.value; + pieData, + internalDiameterRatio, + distance, + alpha, + pieHeight, + opacity = 1 +) => { + const series = []; + let sumValue = 0; + let startValue = 0; + let endValue = 0; + let legendData = []; + let legendBfb = []; + const k = 1 - internalDiameterRatio; + pieData.sort((a, b) => { + return b.value - a.value; + }); + // 为每一个饼图数据，生成一个 series-surface 配置 + for (let i = 0; i < pieData.length; i++) { + sumValue += pieData[i].value; + const seriesItem = { + name: + typeof pieData[i].name === "undefined" ? `series${i}` : pieData[i].name, + type: "surface", + parametric: true, + wireframe: { + show: false, + }, + pieData: pieData[i], + pieStatus: { + selected: false, + hovered: false, + k: k, + }, + center: ["10%", "50%"], + }; + if (typeof pieData[i].itemStyle !== "undefined") { + const itemStyle = {}; + itemStyle.color = + typeof pieData[i].itemStyle.color !== "undefined" + ? pieData[i].itemStyle.color + : opacity; + itemStyle.opacity = + typeof pieData[i].itemStyle.opacity !== "undefined" + ? pieData[i].itemStyle.opacity + : opacity; + seriesItem.itemStyle = itemStyle; + } + series.push(seriesItem); + } + + // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数， + // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。 + legendData = []; + legendBfb = []; + for (let i = 0; i < series.length; i++) { + endValue = startValue + series[i].pieData.value; + series[i].pieData.startRatio = startValue / sumValue; + series[i].pieData.endRatio = endValue / sumValue; + series[i].parametricEquation = getParametricEquation( + series[i].pieData.startRatio, + series[i].pieData.endRatio, + false, + false, + k, + series[i].pieData.value + ); + startValue = endValue; + const bfb = fomatFloat(series[i].pieData.value / sumValue, 4); + legendData.push({ + name: series[i].name, + value: bfb, }); - // 为每一个饼图数据，生成一个 series-surface 配置 - for (let i = 0; i < pieData.length; i++) { - sumValue += pieData[i].value; - const seriesItem = { - name: - typeof pieData[i].name === "undefined" ? `series${i}` : pieData[i].name, - type: "surface", - parametric: true, - wireframe: { - show: false, - }, - pieData: pieData[i], - pieStatus: { - selected: false, - hovered: false, - k: k, - }, - center: ["10%", "50%"], - }; - if (typeof pieData[i].itemStyle !== "undefined") { - const itemStyle = {}; - itemStyle.color = - typeof pieData[i].itemStyle.color !== "undefined" - ? pieData[i].itemStyle.color - : opacity; - itemStyle.opacity = - typeof pieData[i].itemStyle.opacity !== "undefined" - ? pieData[i].itemStyle.opacity - : opacity; - seriesItem.itemStyle = itemStyle; + legendBfb.push({ + name: series[i].name, + value: bfb, + }); + } + const boxHeight = getHeight3D(series, pieHeight); // 通过pieHeight设定3d饼/环的高度，单位是px + // 准备待返回的配置项，把准备好的 legendData、series 传入。 + const option = { + legend: { + show: false, + data: legendData, + orient: "vertical", + left: 10, + top: 10, + itemGap: 10, + textStyle: { + color: "#A1E2FF", + }, + icon: "circle", + formatter: function (param) { + const item = legendBfb.filter((item) => item.name === param)[0]; + const bfs = fomatFloat(item.value * 100, 2) + "%"; + return `${item.name} ${bfs}`; + }, + }, + labelLine: { + show: true, + lineStyle: { + color: "#fff", + }, + }, + label: { + show: true, + position: "outside", + formatter: "{b} \n{c} {d}%", + }, + tooltip: { + backgroundColor: "#033b77", + borderColor: "#21f2c4", + textStyle: { + color: "#fff", + fontSize: 13, + }, + formatter: (params) => { + if ( + params.seriesName !== "mouseoutSeries" && + params.seriesName !== "信用评价" + ) { + // console.log(option.series,params.seriesName,'option.series[params.seriesIndex].pieData'); + const bfb = ( + (option.series[params.seriesIndex].pieData.endRatio - + option.series[params.seriesIndex].pieData.startRatio) * + 100 + ).toFixed(2); + return ( + `${params.seriesName}
` + + `` + + `${bfb}%` + ); + } + }, + }, + xAxis3D: { + min: -1, + max: 1, + }, + yAxis3D: { + min: -1, + max: 1, + }, + zAxis3D: { + min: -1, + max: 1, + }, + grid3D: { + show: false, + boxHeight: boxHeight, // 圆环的高度 + viewControl: { + // 3d效果可以放大、旋转等，请自己去查看官方配置 + alpha, // 角度 + distance, // 调整视角到主体的距离，类似调整zoom + rotateSensitivity: 0, // 设置为0无法旋转 + zoomSensitivity: 0, // 设置为0无法缩放 + panSensitivity: 0, // 设置为0无法平移 + autoRotate: false, // 自动旋转 + }, + }, + series: series, + }; + return option; +}; + +/** + * 生成扇形的曲面参数方程，用于 series-surface.parametricEquation + */ +const getParametricEquation = ( + startRatio, + endRatio, + isSelected, + isHovered, + k, + h +) => { + // 计算 + const midRatio = (startRatio + endRatio) / 2; + const startRadian = startRatio * Math.PI * 2; + const endRadian = endRatio * Math.PI * 2; + const midRadian = midRatio * Math.PI * 2; + // 如果只有一个扇形，则不实现选中效果。 + if (startRatio === 0 && endRatio === 1) { + isSelected = false; + } + // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3） + k = typeof k !== "undefined" ? k : 1 / 3; + // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0） + const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0; + const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0; + // 计算高亮效果的放大比例（未高亮，则比例为 1） + const hoverRate = isHovered ? 1.05 : 1; + // 返回曲面参数方程 + return { + u: { + min: -Math.PI, + max: Math.PI * 3, + step: Math.PI / 32, + }, + v: { + min: 0, + max: Math.PI * 2, + step: Math.PI / 20, + }, + x: function (u, v) { + if (u < startRadian) { + return ( + offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate + ); } - series.push(seriesItem); - } - - // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数， - // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。 - legendData = []; - legendBfb = []; - for (let i = 0; i < series.length; i++) { - endValue = startValue + series[i].pieData.value; - series[i].pieData.startRatio = startValue / sumValue; - series[i].pieData.endRatio = endValue / sumValue; - series[i].parametricEquation = getParametricEquation( - series[i].pieData.startRatio, - series[i].pieData.endRatio, - false, - false, - k, - series[i].pieData.value - ); - startValue = endValue; - const bfb = fomatFloat(series[i].pieData.value / sumValue, 4); - legendData.push({ - name: series[i].name, - value: bfb, - }); - legendBfb.push({ - name: series[i].name, - value: bfb, - }); - } - const boxHeight = getHeight3D(series, pieHeight); // 通过pieHeight设定3d饼/环的高度，单位是px - // 准备待返回的配置项，把准备好的 legendData、series 传入。 - const option = { - legend: { - show: false, - data: legendData, - orient: "vertical", - left: 10, - top: 10, - itemGap: 10, - textStyle: { - color: "#A1E2FF", - }, - icon: "circle", - formatter: function (param) { - const item = legendBfb.filter((item) => item.name === param)[0]; - const bfs = fomatFloat(item.value * 100, 2) + "%"; - return `${item.name} ${bfs}`; - }, - }, - labelLine: { - show: true, - lineStyle: { - color: "#fff", - }, - }, - label: { - show: true, - position: "outside", - formatter: "{b} \n{c} {d}%", - }, - tooltip: { - backgroundColor: "#033b77", - borderColor: "#21f2c4", - textStyle: { - color: "#fff", - fontSize: 13, - }, - formatter: (params) => { - if ( - params.seriesName !== "mouseoutSeries" && - params.seriesName !== "信用评价" - ) { - // console.log(option.series,params.seriesName,'option.series[params.seriesIndex].pieData'); - const bfb = ( - (option.series[params.seriesIndex].pieData.endRatio - - option.series[params.seriesIndex].pieData.startRatio) * - 100 - ).toFixed(2); - return ( - `${params.seriesName}
` + - `` + - `${bfb}%` - ); - } - }, - }, - xAxis3D: { - min: -1, - max: 1, - }, - yAxis3D: { - min: -1, - max: 1, - }, - zAxis3D: { - min: -1, - max: 1, - }, - grid3D: { - show: false, - boxHeight: boxHeight, // 圆环的高度 - viewControl: { - // 3d效果可以放大、旋转等，请自己去查看官方配置 - alpha, // 角度 - distance, // 调整视角到主体的距离，类似调整zoom - rotateSensitivity: 0, // 设置为0无法旋转 - zoomSensitivity: 0, // 设置为0无法缩放 - panSensitivity: 0, // 设置为0无法平移 - autoRotate: false, // 自动旋转 - }, - }, - series: series, - }; - return option; + if (u > endRadian) { + return ( + offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate + ); + } + return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate; + }, + y: function (u, v) { + if (u < startRadian) { + return ( + offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate + ); + } + if (u > endRadian) { + return ( + offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate + ); + } + return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate; + }, + z: function (u, v) { + if (u < -Math.PI * 0.5) { + return Math.sin(u); + } + if (u > Math.PI * 2.5) { + return Math.sin(u) * h * 0.1; + } + return Math.sin(v) > 0 ? 1 * h * 0.1 : -1; + }, }; - - /** - * 生成扇形的曲面参数方程，用于 series-surface.parametricEquation - */ - const getParametricEquation = ( - startRatio, - endRatio, - isSelected, - isHovered, - k, - h - ) => { - // 计算 - const midRatio = (startRatio + endRatio) / 2; - const startRadian = startRatio * Math.PI * 2; - const endRadian = endRatio * Math.PI * 2; - const midRadian = midRatio * Math.PI * 2; - // 如果只有一个扇形，则不实现选中效果。 - if (startRatio === 0 && endRatio === 1) { - isSelected = false; - } - // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3） - k = typeof k !== "undefined" ? k : 1 / 3; - // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0） - const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0; - const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0; - // 计算高亮效果的放大比例（未高亮，则比例为 1） - const hoverRate = isHovered ? 1.05 : 1; - // 返回曲面参数方程 - return { - u: { - min: -Math.PI, - max: Math.PI * 3, - step: Math.PI / 32, - }, - v: { - min: 0, - max: Math.PI * 2, - step: Math.PI / 20, - }, - x: function (u, v) { - if (u < startRadian) { - return ( - offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate - ); - } - if (u > endRadian) { - return ( - offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate - ); - } - return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate; - }, - y: function (u, v) { - if (u < startRadian) { - return ( - offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate - ); - } - if (u > endRadian) { - return ( - offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate - ); - } - return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate; - }, - z: function (u, v) { - if (u < -Math.PI * 0.5) { - return Math.sin(u); - } - if (u > Math.PI * 2.5) { - return Math.sin(u) * h * 0.1; - } - return Math.sin(v) > 0 ? 1 * h * 0.1 : -1; - }, - }; - }; - - /** - * 获取3d丙图的最高扇区的高度 - */ - const getHeight3D = (series, height) => { - series.sort((a, b) => { - return b.pieData.value - a.pieData.value; - }); - return (height * 25) / series[0].pieData.value; - }; - - /** - * 格式化浮点数 - */ - const fomatFloat = (num, n) => { - let f = parseFloat(num); - if (isNaN(f)) { - return false; - } - f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂 - let s = f.toString(); - let rs = s.indexOf("."); - // 判定如果是整数，增加小数点再补0 - if (rs < 0) { - rs = s.length; - s += "."; - } - while (s.length <= rs + n) { - s += "0"; - } - return s; - }; - - export { getPie3D, getParametricEquation }; - - \ No newline at end of file +}; + +/** + * 获取3d丙图的最高扇区的高度 + */ +const getHeight3D = (series, height) => { + series.sort((a, b) => { + return b.pieData.value - a.pieData.value; + }); + return (height * 25) / series[0].pieData.value; +}; + +/** + * 格式化浮点数 + */ +const fomatFloat = (num, n) => { + let f = parseFloat(num); + if (isNaN(f)) { + return false; + } + f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂 + let s = f.toString(); + let rs = s.indexOf("."); + // 判定如果是整数，增加小数点再补0 + if (rs < 0) { + rs = s.length; + s += "."; + } + while (s.length <= rs + n) { + s += "0"; + } + return s; +}; + +export { getPie3D, getParametricEquation }; diff --git a/src/utils/index.js b/src/utils/index.js deleted file mode 100644 index 40df2a4..0000000 --- a/src/utils/index.js +++ /dev/null @@ -1,1551 +0,0 @@ -/* -* 本文件仅供demo使用 -*/ - -//webpack中引用此代码块，格式不要随意改动 - //开发模式需要import,打包给3.0的变成了全局变量，不需要 - - -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); - } - - $volume.addEventListener('input', function(event) { - let vol = event.target.value - 0; - $('#h5_volume_value').innerText = vol; - }); - $volume.addEventListener('change', function(event) { - let vol = event.target.value - 0; - if(playerInstance[WndIndex]) { - playerInstance[WndIndex].setAudioVolume(vol); - } - }); - $('#h5_first').addEventListener('click', function() { - if(curPage != 1) { - curPage = 1; - updateTable(); - } - }); - $('#h5_pre').addEventListener('click', function() { - if(curPage > 1) { - curPage = curPage - 1; - updateTable(); - } - }); - $('#h5_next').addEventListener('click', function() { - if(curPage < totalPage) { - curPage = curPage + 1; - updateTable(); - } - }); - $('#h5_last').addEventListener('click', function() { - if(curPage != totalPage) { - curPage = totalPage; - updateTable(); - } - }); - $('#h5_goPage').addEventListener('click', function() { - let val = $('#h5_goNumber').value - 0; - if(curPage != val) { - curPage = val; - updateTable(); - } - }); - ['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 登录 - */ -const onLogin = () => { - - playerInstance.forEach(item => { - if(item) { - item.close(); - item = null; - } - }); - talkInstance.forEach(item => { - if(item) { - item.talk('off'); - item = null; - } - }); - recordInstance.forEach(item => { - if(item) { - item.startRecord(false); - item = null; - } - }); - $('#h5_channel_list').innerHTML = ''; - $('#h5_playback_channel').options.length = 0; - onlineChannel = []; - - let ip = $ip.value; - let port = $port.value; - let target = ip + ':' + port; - setIP(target); - - $loginState.innerHTML = '未登录'; - $loginState.style.color = 'red'; - /** - * RPC.login 登录 - * @param {string} $user.value 用户名 - * @param {string} $password.value 密码 - * @param {boolean} false 是否httpOnly,默认false - * @returns {Promise} - */ - RPC.login($user.value, $password.value, false).then((res) => { - console.info('登录成功'); - setCookie('DWebClientSessionID', '', -1); - setCookie('DhWebClientSessionID', '', -1); - /** - * RPC.keepAlive 保活 - */ - RPC.keepAlive(300, 60000, _getSession(), target); - const browser = BrowserType(); - if (browser.includes('ie')) { - window.onunload = () => { - ajax({ - url: 'global.logout' - }); - }; - } else if (browser.includes('chrome')) { - const params = { - method: 'global.logout', - params: null, - id: 10000, - session: _getSession() - }; - pubsub.subscribe('onbeforeunload',() => { - navigator.sendBeacon('/RPC2', JSON.stringify(params)); - }); - } else { - pubsub.subscribe('onbeforeunload',() => { - ajax({ - url: 'global.logout' - }); - }); - } - $loginState.style.color = 'green'; - $loginState.innerHTML = '已登录'; - setLoginState(true); - afterLogin(); - }).catch((err) => { - console.log(err); - loginError(err); - }); -} -/** - * @description 登录之后调用，获取设备能力，获取通道、码流 - */ -const afterLogin = () => { - $('#h5_playback_channel').options.length = 0; - $('#h5_channel_list').innerHTML = ''; - /** - * RPC.getUrlData 获取设备上的文件 - * @param {string} 文件路径 - * @returns {Promise} - */ - RPC.getUrlData(`/web_caps/webCapsConfig?version=2.400&${new Date().getTime()}`).then(json => { - WebCaps = json; - if(WebCaps.deviceType.indexOf('SD') > -1 || WebCaps.deviceType.indexOf('IPC') > -1) { - /** - * RPC.DevVideoInput.getCollect 获取模拟输入通道数 - * @returns {Promise} - */ - RPC.DevVideoInput.getCollect().then(function (params) { - let channelNum = params.channels; - for(let i = 0; i < channelNum;i++) { - let li = document.createElement('li'); - li.innerHTML = 'D' + (i + 1); - li.setAttribute('channel', i); - li.style.width = '140px'; - $('#h5_channel_list').appendChild(li); - $('#h5_playback_channel').options.add(new Option(i+1,i)); - } - document.querySelectorAll('#h5_channel_list li').forEach(item => { - item.addEventListener('click', function(event) { - event.stopPropagation(); - let $el = event.target; - channel = $el.getAttribute('channel') - 0; - if(onlineChannel.indexOf(channel) > -1 && (channel != $canvas.parentNode.getAttribute('channel') - 0)) { - return; - } - if($el.className.indexOf('fn-fontBlue') > -1 || $el.className.indexOf('fn-fontRed') > -1) { - onStopPreview(); - } else { - onPreview(true); - } - }); - }); - }); - } - }).catch(() => { - /** - * RPC.LogicDeviceManager.getCameraAll 获取所有用户可用视频源 - * @returns {Promise} - */ - RPC.LogicDeviceManager.getCameraAll().then(function(params) { - let channelList = params.camera.filter(item => item.Enable === true); - //预览，在线通道列表 - let channelArr = channelList.map(item => { - let _name; - item.DeviceInfo.VideoInputs.map(value => { - if(value && value.Enable) { - _name = value.Name; - } - }); - return item.UniqueChannel + ';' + _name; - }); - // 回放，全部通道列表 - let allArr = params.camera.map(item => { - let _name; - if(item.DeviceInfo && item.DeviceInfo.VideoInputs) { - item.DeviceInfo.VideoInputs.map(value => { - _name = value && value.Name; - }); - return item.UniqueChannel + ';D' + (item.UniqueChannel + 1) +' ' + _name; - } - }); - allArr.forEach((item) => { - if(item) { - let _item = item.split(';'); - let _chan = _item[0] - 0; - let name = _item[1]; - if(name) { - $('#h5_playback_channel').options.add(new Option(name, _chan)); - } - } - }); - - channelArr.forEach((item) => { - let _item = item.split(';'); - let _chan = _item[0] - 0; - let name = _item[1]; - let li = document.createElement('li'); - li.innerHTML = 'D' + (_chan + 1) + ' ' + name; - li.setAttribute('channel', _chan); - $('#h5_channel_list').appendChild(li); - }); - document.querySelectorAll('#h5_channel_list li').forEach(item => { - item.addEventListener('click', function(event) { - event.stopPropagation(); - let $el = event.target; - channel = $el.getAttribute('channel') - 0; - if(onlineChannel.indexOf(channel) > -1 && (channel != $canvas.parentNode.getAttribute('channel') - 0)) { - return; - } - if($el.className.indexOf('fn-fontBlue') > -1 || $el.className.indexOf('fn-fontRed') > -1) { - onStopPreview(); - } else { - onPreview(false); - } - }); - }); - }); - }); - - $stream.options.length = 0; - /** - * RPC.MagicBox.getProductDefinition 获取产品定义 - * @param {string} 'MaxExtraStream' 定义名称 - * @returns {Promise} - */ - RPC.MagicBox.getProductDefinition('MaxExtraStream').then(function(params) { - let maxExtra = params.definition; - $stream.options.add(new Option('主码流', 0)); - if (maxExtra > 1) { - for(let i = 1; i <= maxExtra; i++) { - $stream.options.add(new Option('辅码流' + i, i)); - } - } else { - $stream.options.add(new Option('辅码流', 1)); - } - }); - - let curDate = new Date(); - let dateString = curDate.toLocaleDateString(); - let dateSplit = dateString.split('/'); - let month = dateSplit[1] - 0; - if(month < 10) { - dateSplit[1] = '0' + month; - } - let day = dateSplit[2] - 0; - if(day < 10) { - dateSplit[2] = '0' + day; - } - let date = dateSplit.join('-'); - $('#h5_startTime').value = date + 'T' + '00:00'; - $('#h5_endTime').value = date + 'T' + '23:59:59'; -} -/** - * @description 注销 - */ -const onLogout = () => { - /** - * RPC.Global.logout 注销接口 - * @returns {Promise} - */ - RPC.Global.logout().then(function() { - $loginState.style.color = 'red'; - $loginState.innerHTML = '未登录'; - setLoginState(false); - playerInstance.forEach(item => { - if(item) { - item.stop(); - item.close(); - item = null; - } - }); - cutInstance.forEach(item => { - if(item) { - item.stop(); - item.close(); - item = null; - } - }); - talkInstance.forEach(item => { - if(item) { - item.talk('off'); - item = null; - } - }); - recordInstance.forEach(item => { - if(item) { - item.startRecord(false); - item = null; - } - }); - $('#h5_channel_list').innerHTML = ''; - $('#h5_playback_channel').options.length = 0; - document.querySelectorAll('[id^=h5_canvas_]').forEach(item => { - if(item.style.display === '') { - item.style.display = 'none'; - } - }); - document.querySelectorAll('[id^=h5_video_]').forEach(item => { - if(item.style.display === '') { - item.style.display = 'none'; - } - }); - }); -} -/** - * @description 点击下一个宫格，在当前宫格成功拉流后，自动选中下一个宫格 - */ -const clickNextWnd = () => { - let curWndType = document.querySelector('[sel-for=onChangeWdnNum]').value - 0; - if(curWndType === 2 && WndIndex === 3 || curWndType === 3 && WndIndex === 8 || curWndType === 4 && WndIndex === 15) { - document.querySelector('#h5_ivs_0').click(); - } else { - document.querySelector('#h5_ivs_' + (WndIndex + 1)).click(); - } -} -/** - * @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; - } - onStopPreview(); - var player = null; - // if(!isLogin) { - // alert('请先登录再预览！'); - // return; - // } - let curChannel = channel + 1; //无插件通道号从1开始 - let stream = $stream.value - 0 || 0; - let firstTime = 0; - let ip = $ip.value; - let port = $port.value - 0; - let username = $user.value; - let password = $password.value; - let options = { - wsURL: 'ws://'+ '221.214.127.18' +':' + '8200' + '/rtspoverwebsocket', - rtspURL:'rtsp://'+ '221.214.127.18' +':' + '8200' + '/cam/realmonitor?channel=1' + '&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'; - let curWndType = document.querySelector('[sel-for=onChangeWdnNum]').value - 0; - if(!player.isPlayback) { - onlineChannel.push(channel); - updateChannelList(); - // if(curWndType !== 1) { - // clickNextWnd(); - // } - } - }); - player.on('DecodeStart', function (e) { - console.log(e) - if(e.decodeMode === 'video'){ - $video.style.display = ''; - $canvas.style.display = 'none'; - }else{ - $video.style.display = 'none'; - $canvas.style.display = ''; - } - canvasSon = new PluginCanvasES6(); - - canvasSon.init($canvas_ivs, function (data) { - rebackActivateLocalEnlarging(data); - }); - canvasSon.addChangeShapeEvent(); - playerInstance[WndIndex] = player; - ivsInstance[WndIndex] = canvasSon; - }); - player.on('UpdateCanvas', function (e) { - if(player.isPlayback) { - let playbackIndex = player.playbackIndex; - if (firstTime === 0) { - firstTime = e.timestamp; - } - //const _left = e.timestamp - new Date(recordArr[playbackIndex].StartTime).getTime()/1000; - $('#h5_curTime_'+ playbackIndex%lINENUMBER).innerText = e.timestamp-firstTime; - } - }); - player.on('GetTotalTime', function (e) { - let playbackIndex = player.playbackIndex%lINENUMBER; - $('#h5_totalTime_'+ playbackIndex).innerText = e; - }); - 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 切换码流 - */ -const onChangeStream = () => { - onPreview(false, null, null, true); -} -/** - * @description 开启音频 - */ -const onTurnOnSound = () => { - let vol = $volume.value - 0; - if(playerInstance[WndIndex]) { - playerInstance[WndIndex].setAudioVolume(vol); - } -} -/** - * @description 关闭音频 - */ -const onTurnSoundOff = () => { - if(playerInstance[WndIndex]) { - playerInstance[WndIndex].setAudioVolume(0); - } -} -/** - * @description 开启对讲 - */ -const onStartTalk = () => { - let talkPlayer = null; - let ip = $ip.value; - let port = $port.value - 0; - let username = $user.value; - let password = $password.value; - let curChannel = channel + 1; //无插件通道号从1开始 - let rtspURL = 'rtsp://'+ '221.214.127.18' +':' + '8200' + '/cam/realmonitor?channel=' + curChannel + '&subtype=0&proto=Private3'; - let optionsAudio = { - wsURL: 'ws://'+ '221.214.127.18' +':' + '8200' + '/rtspoverwebsocket', - rtspURL: rtspURL, - username: 'admin', - password: 'pyss2017', - isTalkService: true, - isPrivateProtocol: false, - realm: RPC.realm - } - talkPlayer = new PlayerControl(optionsAudio); - talkPlayer.talk('on'); - talkInstance[WndIndex] = talkPlayer; -} -/** - * @description 关闭对讲 - */ -const onStopTalk = () => { - if(talkInstance[WndIndex]) { - talkInstance[WndIndex].talk('off'); - talkInstance[WndIndex] = null; - } -} -/** - * @description 抓图 - */ -const onSnap = () => { - if(playerInstance[WndIndex]) { - playerInstance[WndIndex].capture('test'); - } -} -/** - * @description 针对直播的，开始本地下载 - */ -const onStartRecord = () => { - let recordPlayer = null; - let ip = $ip.value; - let port = $port.value - 0; - let username = $user.value; - let password = $password.value; - let stream = $stream.value - 0 || 0; - let rtspURL = 'rtsp://'+ '221.214.127.18' +':' + '8200' + '/cam/realmonitor?channel=' + curChannel + '&subtype=0&proto=Private3'; - let optionsAudio = { - wsURL: 'ws://'+ '221.214.127.18' +':' + '8200' + '/rtspoverwebsocket', - rtspURL: rtspURL, - username: 'admin', - password: 'pyss2017', - isTalkService: true, - isPrivateProtocol: false, - realm: RPC.realm - } - recordPlayer = new PlayerControl(optionsAudio); - recordPlayer.startRecord(true); - recordInstance[WndIndex] = recordPlayer; -} -/** - * @description 针对直播的，停止本地下载 - */ -const onStopRecord = () => { - if(recordInstance[WndIndex]) { - recordInstance[WndIndex].startRecord(false); - recordInstance[WndIndex] = null; - } -} -/** - * @description 针对回放视频的，视频裁剪 - */ -const onStartCut = () => { - let _cutIndex = document.querySelector('[btn-for=onStartCut]').getAttribute('cutIndex') - 0; - _cutIndex = _cutIndex + ((curPage-1)*lINENUMBER); - let cutPlayer = null; - let ip = $ip.value; - let port = $port.value - 0; - let username = $user.value; - let password = $password.value; - let url = recordArr[_cutIndex].FilePath; - let _rtspURL = 'rtsp://'+ ip +':' + port + '/' + url; - let cutStartTime = $('#h5_cutStartTime').value; - let s = new Date(cutStartTime.replace('T', ' ')).getTime(); - let startTime = new Date(recordArr[_cutIndex].StartTime).getTime(); - let range1 = (s - startTime)/1000; - let firstTime=0; - let optionsRecord = { - wsURL: 'ws://'+ ip +':' + port + '/rtspoverwebsocket', - rtspURL: _rtspURL, - username: username, - password: password, - isPrivateProtocol: false, //是否私有协议，默认false - realm: RPC.realm, //登录返回的设备Realm值 - speed: 16, //倍速拉流，16倍速 - playback: true, //是都回放 - isDownLoad:true, - range: range1 //视频裁剪时间与视频的StartTime时间差值 - } - cutPlayer = new PlayerControl(optionsRecord); - cutPlayer.on('FileOver',function(){ - console.log('File Over'); - cutPlayer.startCut(false); - isCuting = false; - $('#h5_cut_process').innerText = '100%'; - }); - cutPlayer.on('UpdateTimeStamp', function (e) { - let cutStartTime1 = $('#h5_cutStartTime').value; - let cutEndTime1 = $('#h5_cutEndTime').value; - if (firstTime === 0) { - firstTime = e.timestamp; - } - let s1 = new Date(cutStartTime1.replace('T', ' ')).getTime() / 1000; - let e1 = new Date(cutEndTime1.replace('T', ' ')).getTime() / 1000; - let process = parseInt(((e.timestamp-firstTime) / (e1 - s1)) * 100); - // console.log(new Date(e.timestamp * 1000)); - $('#h5_cut_process').innerText = (process > 100 ? 100 : process) + '%'; - if((e.timestamp >= s1) && !isCuting) { - cutPlayer.startCut(true); - isCuting = true; - } - if((e.timestamp >= e1 ) && isCuting) { - cutPlayer.startCut(false); - isCuting = false; - $('#h5_cut_process').innerText = '100%'; - } - }); - cutPlayer.init($canvas, $video); - cutPlayer.connect(true); - cutInstance[WndIndex] = cutPlayer; -} -/** - * @description 开始下载录像 - * @param {object} item 录像信息 - */ -const onStartNVRDownload = (item) => { - let _cutIndex; - if(item) { - _cutIndex = item.selfCheckIndex; - } - let firstTime=0; - let cutPlayer = null; - let ip = $ip.value; - let port = $port.value - 0; - let username = $user.value; - let password = $password.value; - let url = recordArr[_cutIndex].FilePath; - let _rtspURL = 'rtsp://'+ ip +':' + port + '/' + url; - let optionsRecord = { - wsURL: 'ws://'+ ip +':' + port + '/rtspoverwebsocket', - rtspURL: _rtspURL, - username: username, - password: password, - isPrivateProtocol: false, - realm: RPC.realm, - speed: 16, - playback: true, - isDownLoad:true - } - - cutPlayer = new PlayerControl(optionsRecord); - - cutPlayer.on('FileOver',function(){ - console.log('File Over'); - cutPlayer.startCut(false); - isCuting = false; - $('#h5_down_process').innerText = '100%'; - downItemIndex++; - if(downList[downItemIndex]) { - onStartNVRDownload(downList[downItemIndex]); - } - }); - cutPlayer.on('UpdateTimeStamp', function (e) { - let s1 = new Date(item.StartTime).getTime()/1000; - let e1 = new Date(item.EndTime).getTime()/1000; - if (firstTime === 0) { - firstTime = e.timestamp; - } - let process = parseInt(((e.timestamp-firstTime) / (e1 - s1)) * 100); - $('#h5_down_process').innerText = (process > 100 ? 100 : process) + '%'; - if((e.timestamp >= firstTime) && !isCuting) { - cutPlayer.startCut(true); - isCuting = true; - } - if((e.timestamp >= e1 || process>=100) && isCuting ) { - cutPlayer.startCut(false); - isCuting = false; - $('#h5_down_process').innerText = '100%'; - downItemIndex++; - if(downList[downItemIndex]) { - onStartNVRDownload(downList[downItemIndex]); - } - } - }); - cutPlayer.init($canvas, $video); - cutPlayer.connect(true); - cutInstance[WndIndex] = cutPlayer; -} -const stopDownLoad = ()=>{ - cutInstance.forEach(item => { - if(item) { - isCuting = false; - item.stop(); - item.close(); - item.startCut(false,true); - } - }); - -} -/** - * @description 开启电子放大 - */ -const onStartEnlarge = () => { - if (ivsInstance[WndIndex]) { - ivsInstance[WndIndex].setRegionNum('rect', 1); - let param = {...canvasParam}; - ivsInstance[WndIndex].drawStart('rect', param); - curEnlargeWnd = WndIndex; - } -} -/** - * @description 开启区域放大 - */ -const onStartGridEnlarge = () => { - document.querySelectorAll('[wnd-index]').forEach((item, index) => { - if(index === WndIndex) { - document.querySelector('[wnd-index="' + WndIndex +'"]').style.width = '500px'; - document.querySelector('[wnd-index="' + WndIndex +'"]').style.height = '300px'; - } else { - item.style.display = 'none'; - } - }); -} -/** - * @description 关闭区域放大 - */ -const onCloseGridEnlarge = () => { - document.querySelectorAll('[wnd-index]').forEach((item, index) => { - item.style.display = ''; - }); - onChangeWdnNum(); -} -/** - * @description 关闭电子放大 - */ -const onStopEnlarge = () => { - if(curEnlargeWnd != WndIndex) return; - let dom = $canvas; - if (dom.style.display === 'none') { - dom = $video; - } - dom.style.width = '100%'; - dom.style.height = '100%'; - dom.style.left = 0; - dom.style.top = 0; - dom.style.position = 'static'; -} -/** - * @description 绘制电子放大后的回调函数 - * @param {object} data 矩形框的坐标信息 - */ -const rebackActivateLocalEnlarging = data => { - if(curEnlargeWnd != WndIndex) return; - let pos = data.data; - let newData; - if (pos[0][0] === pos[1][0]) { - // return false; - } else { - newData = { - left: pos[0][0], - top: pos[0][1], - right: pos[1][0], - bottom: pos[1][1] - } - } - let dom = $canvas; - if (dom.style.display === 'none') { - dom = $video; - } - // 倒着画 - if (newData.right < newData.left) { - let tmp = newData.left; - newData.left = newData.right; - newData.right = tmp; - } - - if (newData.bottom < newData.top) { - let tmp = newData.top; - newData.top = newData.bottom; - newData.bottom = tmp; - } - - let scaleW = $video_wrap.childNodes[0].clientWidth / 8191; - let scaleH = $video_wrap.childNodes[0].clientHeight / 8191; - - let result = zoomArea(newData.left * scaleW, newData.top * scaleH, newData.right * scaleW, newData.bottom * scaleH, $video_wrap.childNodes[0].clientWidth, $video_wrap.childNodes[0].clientHeight); - dom.style.width = result.width + 'px'; - dom.style.height = result.height + 'px'; - dom.style.left = result.left + 'px'; - dom.style.top = result.top + 'px'; - dom.style.position = 'absolute'; - ivsInstance[WndIndex].removeShapeDrawEvent(); -} -/** - * @description 设置全屏 - */ -const onSetFull = () => { - if (getFull()) { - exitfullScreen(); - } else { - setfullScreen(); - } -} -/** - * @description 查询录像 - */ -const onSearchRecord = async () => { - let allRecords = []; - let recordNums = 0; - let playChannel = $('#h5_playback_channel').value - 0; - const getMediaFile = (params) => { - return new Promise((resolve, reject) => { - /** - * RPC.MediaFileFind.instance 创建媒体文件查找实例 - * @returns {Promise} - */ - RPC.MediaFileFind.instance().then(json => { - let queryId = json.result; - /** - * RPC.MediaFileFind.findFile 设置查找条件，并判断是否存在文件 - * @param {number} queryId 实例id - * @param {object} params condition参数 - * @returns {Promise} - */ - RPC.MediaFileFind.findFile(queryId, params).then(() => { - findNextFile(queryId).then(() => { - resolve(true); - }).catch((err) => { - reject(err); - }); - }).catch((err) => { - reject(err); - }); - }).catch((err) => { - reject(err); - }); - }); - } - const findNextFile = (queryId) => { - return new Promise((resolve, reject) => { - /** - * RPC.MediaFileFind.findNextFile 在指定条件基础上查询文件信息 - * @param {number} queryId 实例 - * @param {object} 需要查找的数目 - * @returns {Promise} - */ - RPC.MediaFileFind.findNextFile(queryId, { 'count': 100 }).then(data => { - if (Number.isInteger(data.found)) { - recordNums = recordNums + data.found; - allRecords = allRecords.concat([...data.infos]); - if (data.found === 100) { - findNextFile(queryId).then(() => { - resolve(true); - }).catch((err) => { - reject(err); - }); - } else { - recordArr = [...allRecords]; - updateInfos(recordArr.slice(0, lINENUMBER)); - updatePages(); - stopFind(queryId); - resolve(true); - } - } else { - stopFind(queryId); - resolve(true); - } - }).catch((err) => { - reject(err); - stopFind(queryId); - }); - - }) - } - const stopFind = object => { - return new Promise((resolve, reject) => { - /** - * PC.MediaFileFind.close 结束查询 - * @param {number} object 媒体文件查找实例ID - * @returns {Promise} - */ - RPC.MediaFileFind.close(object).then(() => { - /** - * PC.MediaFileFind.destroy 销毁媒体文件查找实例 - * @param {number} object 媒体文件查找实例ID - */ - RPC.MediaFileFind.destroy(object); - resolve(true); - }).catch(() => { - reject(); - }).finally(() => { - }); - }) - } - const updateInfos = (infos) => { - let table = document.querySelector('#h5_table tbody'); - table.innerHTML = ''; - for(let i = 0; i < infos.length; i++) { - let time = infos[i].StartTime + ' - ' + infos[i].EndTime; // - let size = Math.round(infos[i].Length / 1024); - let newRow = table.insertRow(-1); - newRow.innerHTML = `${i+1}${time}${size}--/--`; - } - document.querySelectorAll('[id^=h5_button_go_]').forEach(item => { - item.addEventListener('click', function(event) { - let id = item.getAttribute('id').split('_')[3] - 0; - onGoTime(id); - }); - }); - document.querySelectorAll('[id^=h5_check_]').forEach(function(item) { - item.addEventListener('click', function(event) { - event.stopPropagation(); - if(event.target.checked) { - //渲染裁剪时间 - let _index = event.target.getAttribute('id').split('_')[2] - 0; - let startTime = recordArr[_index + lINENUMBER*(curPage-1)].StartTime.split(' ').join('T'); - let endTime = recordArr[_index + lINENUMBER*(curPage-1)].EndTime.split(' ').join('T'); - if(startTime.split(':')[2] === '00') { - startTime = startTime.substr(0, startTime.length - 3); - } - if(endTime.split(':')[2] === '00') { - endTime = endTime.substr(0, endTime.length - 3); - } - $('#h5_cutStartTime').value = startTime; - $('#h5_cutEndTime').value = endTime; - document.querySelector('[btn-for=onStartCut]').setAttribute('cutIndex', _index); - } - }); - }); - document.querySelectorAll('#h5_table tbody tr').forEach(function(item) { - item.addEventListener('dblclick', function(event) { - event.stopPropagation(); - if(event.target.nodeName === 'TD') { - event.target.style.color = 'blue'; - let dom = event.target.parentNode.childNodes[1]; - let value = dom.innerText - 1; - let url = recordArr[value].FilePath; - onStopPreview(); - onPreview(true, url, value); - } - }); - }); - } - const updatePages = () => { - totalPage = Math.ceil(recordNums/lINENUMBER); - $('#h5_curPage').innerText = curPage; - $('#h5_totalPage').innerText = totalPage; - } - let tmpDir = []; - try { - /** - * RPC.getDeviceAllInfo 获取存储信息 - * @param {string} 'getDeviceAllInfo' 方法名 - * @return {Promise} - */ - tmpDir = await RPC.getDeviceAllInfo('getDeviceAllInfo'); - } catch(e) { - console.log(e); - } - let dirs = null; - if (tmpDir.info && tmpDir.info.length > 1) { - dirs = 'All'; - }else { - //dirs = tmpDir.info?[0]?.Detail?[0]?.Path ?? '/mnt/sd'; - dirs = tmpDir.info && tmpDir.info[0] && tmpDir.info[0].Detail && tmpDir.info[0].Detail[0] && tmpDir.info[0].Detail[0].Path || '/mnt/sd'; - } - - let startTime = $('#h5_startTime').value.replace('T', ' '); - let endTime = $('#h5_endTime').value.replace('T', ' '); - if(startTime.split(' ')[1].split(':').length < 3) { - startTime = startTime + ':00'; - } - if(endTime.split(' ')[1].split(':').length < 3) { - endTime = endTime + ':00'; - } - let params = { - condition: { - Channel: playChannel, - Dirs: [dirs], - StartTime: startTime, - EndTime: endTime, - Flags: null, - Events: ['*'], - Types: ['dav'] - } - }; - getMediaFile(params).catch((err) => { - if (err && err.error && err.error.code === 285409409) { - alert('回放功能需要确保SD卡经过设备认证'); - } else { - alert('无数据'); - } - }); -} -/** - * @description 勾选当前页的全部录像 - */ -const onCheckAll = () => { - let dom = $('#h5_checkAll'); - let ele = document.querySelectorAll('[id^=h5_check_]'); - let domChecked = dom.checked; - ele.forEach((item, index) => { - item.checked = domChecked; - }) -} -/** - * @description 下载录像 - */ -const onDownload = async () => { - let ele = document.querySelectorAll('[id^=h5_check_]'); - downList = []; - ele.forEach((item, index) => { - let _id = item.getAttribute('id').split('_')[2] - 0; - if(item.checked) { - recordArr[(curPage - 1) * lINENUMBER + _id].selfCheckIndex = _id; - downList.push(recordArr[(curPage - 1) * lINENUMBER + _id]); - } - }); - downItemIndex= 0; - onStartNVRDownload( downList[0] ); - // if(WebCaps != null) { - // // let supportDownloadEncrypt = await RPC.MagicBox.getProductDefinition('SupportDownloadEncrypt').then(json => { - // // return !!json.SupportDownloadEncrypt; - // // }).catch(err => { - // // return false; - // // }); - // const downFile = (name, href) => { - // let a = document.createElement('a'); - // a.href = href; - // a.download = ''; - // document.body.appendChild(a); - // a.click(); - // setTimeout(() => { - // document.body.removeChild(a); - // }, 1000); - // }; - // const loop = list => { - // if (list === undefined) { - // return; - // } - // // let tmpUrl = supportDownloadEncrypt ? '/RPC_Encrypt_Loadfile' : '/RPC_Loadfile'; - // let tmpUrl = '/RPC_Loadfile'; - // // let hrefs = window.location.origin + tmpUrl + list.FilePath; - // let hrefs = 'http://' + $ip.value + tmpUrl + list.FilePath; - // setTimeout( function () { - // downFile('', hrefs); - // loop(downList.shift()); - // }, 1000); - // }; - // loop(downList.shift()); - // } else { - // onStartNVRDownload( downList[downItemIndex] ); - // } -} -/** - * @description 更新录像列表当前页 - */ -const updateTable = () => { - playerInstance.forEach(item => { - if(item) { - item.stop(); - item.close(); - item = null; - } - }); - $('#h5_checkAll').checked = false; - $('#h5_curPage').innerText = curPage; - let table = document.querySelector('#h5_table tbody'); - table.innerHTML = ''; - let index = (curPage - 1 ) * lINENUMBER; - let infos = recordArr.slice(index, index + lINENUMBER); - for(let i = 0; i < infos.length; i++) { - let time = infos[i].StartTime + '-' + infos[i].EndTime; - let size = Math.round(infos[i].Length / 1024) + '(KB)'; - let newRow = table.insertRow(-1); - newRow.innerHTML = `${index + i+1}${time}${size}--/--`; - } - document.querySelectorAll('[id^=h5_button_go_]').forEach(function(item) { - item.addEventListener('click', function(event) { - let id=item.getAttribute('id').split('_')[3] -0; - onGoTime(id); - }); - }); - document.querySelectorAll('[id^=h5_check_]').forEach(function(item) { - item.addEventListener('click', function(event) { - event.stopPropagation(); - if(event.target.checked) { - //渲染裁剪时间 - let _index = event.target.getAttribute('id').split('_')[2] - 0; - let startTime = recordArr[_index + lINENUMBER*(curPage-1)].StartTime.split(' ').join('T'); - let endTime = recordArr[_index + lINENUMBER*(curPage-1)].EndTime.split(' ').join('T'); - if(startTime.split(':')[2] === '00') { - startTime = startTime.substr(0, startTime.length - 3); - } - if(endTime.split(':')[2] === '00') { - endTime = endTime.substr(0, endTime.length - 3); - } - /* let _index = event.target.getAttribute('id').split('_')[2] - 0; - let startTime = recordArr[_index].StartTime; - let endTime = recordArr[_index].EndTime; */ - $('#h5_cutStartTime').value = startTime; - $('#h5_cutEndTime').value = endTime; - document.querySelector('[btn-for=onStartCut]').setAttribute('cutIndex', _index); - } - }); - }); - document.querySelectorAll('#h5_table tbody tr').forEach(function(item) { - item.addEventListener('dblclick', function(event) { - event.stopPropagation(); - let dom = event.target.parentNode.childNodes[1]; - if(event.target.nodeName === 'TD') { - event.target.style.color = 'blue'; - let value = dom.innerText - 1; - let url = recordArr[value].FilePath; - onPreview(true, url, value); - } - - }); - }); -} -/** - * @description 暂停回放 - */ -const onPausePlayback = () => { - if(playerInstance[WndIndex]) { - playerInstance[WndIndex].pause(); - } -} -/** - * @description 继续回放 - */ -const onContinuePlayback = () => { - if(playerInstance[WndIndex]) { - playerInstance[WndIndex].play(); - } -} -/** - * @description 停止回放 - */ -const onClosePlayback = () => { - if(playerInstance[WndIndex]) { - playerInstance[WndIndex].stop(); - playerInstance[WndIndex].close(); - playerInstance[WndIndex] = null; - let dom = $canvas; - if (dom.style.display === 'none') { - dom = $video; - } - dom.style.display = 'none'; - } -} -/** - * @description 录像跳到指定时间 - * @param 要跳转时间的录像的id - */ -const onGoTime = (id) => { - let curTime = $('#h5_goTime_'+id).value - 0; - if(playerInstance[WndIndex]) { - playerInstance[WndIndex].playByTime(curTime); - } -} -/** - * @description 切换窗口分割 - */ -const onChangeWdnNum = () => { - let val = document.querySelector('[sel-for=onChangeWdnNum]').value; - let ivsDom = document.querySelectorAll('[id^=h5_ivs_]'); - let divDom = document.querySelectorAll('.h5-play-wrap div'); - if(val === '1') { - divDom.forEach(item => { - item.style.width = '100%'; - item.style.height = '100%'; - item.style.borderColor = '#000'; - }); - } else if(val === '2' ) { - divDom.forEach((item, index) => { - item.style.width = 'calc(50% - 2px)'; - item.style.height = 'calc(50% - 2px)'; - if(index === 0) { - item.style.borderColor = ' rgb(255, 204, 0)'; - } else { - item.style.borderColor = ' rgb(125, 125, 125)'; - } - }); - } else if(val === '3') { - divDom.forEach((item,index) => { - item.style.height = 'calc(33.333% - 2px)'; - item.style.width = 'calc(33.333% - 2px)'; - if(index === 0) { - item.style.borderColor = ' rgb(255, 204, 0)'; - } else { - item.style.borderColor = ' rgb(125, 125, 125)'; - } - }); - } else if(val === '4') { - divDom.forEach((item, index) => { - item.style.width = 'calc(25% - 2px)'; - item.style.height = 'calc(25% - 2px)'; - if(index === 0) { - item.style.borderColor = 'rgb(255, 204, 0)'; - } else { - item.style.borderColor = 'rgb(125, 125, 125)'; - } - }); - } - ivsDom.forEach(item => { - item.setAttribute('width', `${item.parentNode.clientWidth}`); - item.setAttribute('height', `${item.parentNode.clientHeight}`); - }); - ivsInstance.forEach(item => { - item && item.resize(); - }); - document.querySelector('#h5_ivs_0').click(); -} -/** - * @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 + "()"); - } -} -/** - * @description 设置登录状态 - * @param {boolean} bool 设备是否已经登录 - */ -function setLoginState(bool) { - isLogin = bool; -} -/** - * @description 转换数据坐标 - * @param {*} x1 左上角x坐标 - * @param {*} y1 左上角y坐标 - * @param {*} x2 右下角x坐标 - * @param {*} y2 右下角y坐标 - * @param {*} width 宫格宽 - * @param {*} height 宫格高 - */ -function zoomArea (x1, y1, x2, y2, width, height) { - // 小框区域的数据 - let rectArea = { - width: x2 - x1, - height: y2 - y1, - centerX: (x1 + x2) / 2, // 圆心坐标 - centerY: (y1 + y2) / 2 - }; - // 放大比例,控件放大倍数上限是20 - let scale = Math.min(width / rectArea.width, height / rectArea.height, 20); - - // 原始窗口信息 - let sourceWin = { - width: width, - height: height, - centerX: width / 2, - centerY: height / 2 - }; - - // 放大后的窗口区域 - let bigWinArea = { - width: width * scale, - height: height * scale, - left: sourceWin.centerX - rectArea.centerX * scale, - top: sourceWin.centerY - rectArea.centerY * scale - }; - - // 数据矫正 - if (bigWinArea.left > 0) { - bigWinArea.left = 0; - } - if (bigWinArea.left < sourceWin.width - bigWinArea.width) { - bigWinArea.left = sourceWin.width - bigWinArea.width; - } - if (bigWinArea.top > 0) { - bigWinArea.top = 0; - } - if (bigWinArea.top < sourceWin.height - bigWinArea.height) { - bigWinArea.top = sourceWin.height - bigWinArea.height; - } - return bigWinArea; -} -/** - * @description 获取全屏状态 - */ -function getFull() { - return window.top.document.mozFullScreen || window.top.document.webkitIsFullScreen || window.top.document.msFullscreenElement; -} -/** - * @description 全屏状态改变的回调事件 - */ -function fullscreenchange() { - if (getFull()) { - return; - } else { - exitfullScreen(); - } -} -/** - * @description 设置全屏 - */ -function setfullScreen() { - let docElm = window.top.document.documentElement; - if (docElm.requestFullScreen) { - docElm.requestFullScreen(); - } else if (docElm.mozRequestFullScreen) { - docElm.mozRequestFullScreen(); - } else if (docElm.webkitRequestFullScreen) { - docElm.webkitRequestFullScreen(); - } else if (docElm.msRequestFullscreen) { - docElm.msRequestFullscreen(); - } - handleFullscreen(true); -} -/** - * @description 退出全屏 - */ -function exitfullScreen() { - let docElm = window.top.document.documentElement; - if (docElm.exitFullscreen) { - docElm.exitFullscreen(); - } else if (docElm.mozCancelFullScreen) { - docElm.mozCancelFullScreen(); - } else if (docElm.webkitCancelFullScreen) { - docElm.webkitCancelFullScreen(); - } else if (docElm.msExitFullscreen) { - docElm.msExitFullscreen(); - } - handleFullscreen(false); -} -/** - * @description 处理全屏开关时的窗口大小 - * @param {boolean} bool 是否要全屏 - */ -function handleFullscreen(bool) { - if (bool) { - let wrap = { - position: 'absolute', - left: 0, - top: 0, - width: window.screen.width + 'px', - height: window.screen.height + 'px', - overflow: 'visible' - } - setStyle($video_wrap, wrap); - } else { - let wrap = { - position: 'relative', - overflow: 'hidden', - width:'500px', - height: '300px', - } - setStyle($video_wrap, wrap); - } -} -/** - * @description ptz云台事件 - * @param {string} type 云台事件类型 - * @param {boolean} isStop 是否停止相应事件 - */ -window.onHandlePTZ = function(type, isStop) { - let stepVal = $('#h5_ptz_step').value - 0; - let arg2 = 0; - let arg2Arr = ['LeftUp', 'RightUp', 'LeftDown', 'RightDown']; - let presetArr = ['GotoPreset','SetPreset', 'ClearPreset']; - let presetNum = $('#h5_preset').value - 0; - if(arg2Arr.indexOf(type) > -1) { - arg2 = stepVal; - } - if(!isStop) { - if(presetArr.indexOf(type) > -1) { - /** - * RPC.PTZManager 云台相关 - * @param {string} 方法 - * @param {number} channel 通道 - * @param {object} 参数集合 - */ - RPC.PTZManager('start', channel, { 'code': type, 'arg1': presetNum, 'arg2': 0, 'arg3': 0 }); - } else { - RPC.PTZManager('start', channel, { 'code': type, 'arg1': stepVal, 'arg2': arg2, 'arg3': 0 }); - } - } else { - RPC.PTZManager('stop', channel, { 'code': type, 'arg1': stepVal, 'arg2': arg2, 'arg3': 0 }); - } -} -//进入页面自动初始化 -init(); diff --git a/src/utils/yinru.js b/src/utils/yinru.js deleted file mode 100644 index 5e13ab3..0000000 --- a/src/utils/yinru.js +++ /dev/null @@ -1,13173 +0,0 @@ -/*! - * Vue.js v2.7.14 - * (c) 2014-2022 Evan You - * Released under the MIT License. - */ -(function (global, factory) { - typeof exports === "object" && typeof module !== "undefined" - ? (module.exports = factory()) - : typeof define === "function" && define.amd - ? define(factory) - : ((global = - typeof globalThis !== "undefined" ? globalThis : global || self), - (global.Vue = factory())); -})(this, function () { - "use strict"; - - var emptyObject = Object.freeze({}); - var isArray = Array.isArray; - // These helpers produce better VM code in JS engines due to their - // explicitness and function inlining. - function isUndef(v) { - return v === undefined || v === null; - } - function isDef(v) { - return v !== undefined && v !== null; - } - function isTrue(v) { - return v === true; - } - function isFalse(v) { - return v === false; - } - /** - * Check if value is primitive. - */ - function isPrimitive(value) { - return ( - typeof value === "string" || - typeof value === "number" || - // $flow-disable-line - typeof value === "symbol" || - typeof value === "boolean" - ); - } - function isFunction(value) { - return typeof value === "function"; - } - /** - * Quick object check - this is primarily used to tell - * objects from primitive values when we know the value - * is a JSON-compliant type. - */ - function isObject(obj) { - return obj !== null && typeof obj === "object"; - } - /** - * Get the raw type string of a value, e.g., [object Object]. - */ - var _toString = Object.prototype.toString; - function toRawType(value) { - return _toString.call(value).slice(8, -1); - } - /** - * Strict object type check. Only returns true - * for plain JavaScript objects. - */ - function isPlainObject(obj) { - return _toString.call(obj) === "[object Object]"; - } - function isRegExp(v) { - return _toString.call(v) === "[object RegExp]"; - } - /** - * Check if val is a valid array index. - */ - function isValidArrayIndex(val) { - var n = parseFloat(String(val)); - return n >= 0 && Math.floor(n) === n && isFinite(val); - } - function isPromise(val) { - return ( - isDef(val) && - typeof val.then === "function" && - typeof val.catch === "function" - ); - } - /** - * Convert a value to a string that is actually rendered. - */ - function toString(val) { - return val == null - ? "" - : Array.isArray(val) || (isPlainObject(val) && val.toString === _toString) - ? JSON.stringify(val, null, 2) - : String(val); - } - /** - * Convert an input value to a number for persistence. - * If the conversion fails, return original string. - */ - function toNumber(val) { - var n = parseFloat(val); - return isNaN(n) ? val : n; - } - /** - * Make a map and return a function for checking if a key - * is in that map. - */ - function makeMap(str, expectsLowerCase) { - var map = Object.create(null); - var list = str.split(","); - for (var i = 0; i < list.length; i++) { - map[list[i]] = true; - } - return expectsLowerCase - ? function (val) { - return map[val.toLowerCase()]; - } - : function (val) { - return map[val]; - }; - } - /** - * Check if a tag is a built-in tag. - */ - var isBuiltInTag = makeMap("slot,component", true); - /** - * Check if an attribute is a reserved attribute. - */ - var isReservedAttribute = makeMap("key,ref,slot,slot-scope,is"); - /** - * Remove an item from an array. - */ - function remove$2(arr, item) { - var len = arr.length; - if (len) { - // fast path for the only / last item - if (item === arr[len - 1]) { - arr.length = len - 1; - return; - } - var index = arr.indexOf(item); - if (index > -1) { - return arr.splice(index, 1); - } - } - } - /** - * Check whether an object has the property. - */ - var hasOwnProperty = Object.prototype.hasOwnProperty; - function hasOwn(obj, key) { - return hasOwnProperty.call(obj, key); - } - /** - * Create a cached version of a pure function. - */ - function cached(fn) { - var cache = Object.create(null); - return function cachedFn(str) { - var hit = cache[str]; - return hit || (cache[str] = fn(str)); - }; - } - /** - * Camelize a hyphen-delimited string. - */ - var camelizeRE = /-(\w)/g; - var camelize = cached(function (str) { - return str.replace(camelizeRE, function (_, c) { - return c ? c.toUpperCase() : ""; - }); - }); - /** - * Capitalize a string. - */ - var capitalize = cached(function (str) { - return str.charAt(0).toUpperCase() + str.slice(1); - }); - /** - * Hyphenate a camelCase string. - */ - var hyphenateRE = /\B([A-Z])/g; - var hyphenate = cached(function (str) { - return str.replace(hyphenateRE, "-$1").toLowerCase(); - }); - /** - * Simple bind polyfill for environments that do not support it, - * e.g., PhantomJS 1.x. Technically, we don't need this anymore - * since native bind is now performant enough in most browsers. - * But removing it would mean breaking code that was able to run in - * PhantomJS 1.x, so this must be kept for backward compatibility. - */ - /* istanbul ignore next */ - function polyfillBind(fn, ctx) { - function boundFn(a) { - var l = arguments.length; - return l - ? l > 1 - ? fn.apply(ctx, arguments) - : fn.call(ctx, a) - : fn.call(ctx); - } - boundFn._length = fn.length; - return boundFn; - } - function nativeBind(fn, ctx) { - return fn.bind(ctx); - } - // @ts-expect-error bind cannot be `undefined` - var bind$1 = Function.prototype.bind ? nativeBind : polyfillBind; - /** - * Convert an Array-like object to a real Array. - */ - function toArray(list, start) { - start = start || 0; - var i = list.length - start; - var ret = new Array(i); - while (i--) { - ret[i] = list[i + start]; - } - return ret; - } - /** - * Mix properties into target object. - */ - function extend(to, _from) { - for (var key in _from) { - to[key] = _from[key]; - } - return to; - } - /** - * Merge an Array of Objects into a single Object. - */ - function toObject(arr) { - var res = {}; - for (var i = 0; i < arr.length; i++) { - if (arr[i]) { - extend(res, arr[i]); - } - } - return res; - } - /* eslint-disable no-unused-vars */ - /** - * Perform no operation. - * Stubbing args to make Flow happy without leaving useless transpiled code - * with ...rest (https://flow.org/blog/2017/05/07/Strict-Function-Call-Arity/). - */ - function noop(a, b, c) {} - /** - * Always return false. - */ - var no = function (a, b, c) { - return false; - }; - /* eslint-enable no-unused-vars */ - /** - * Return the same value. - */ - var identity = function (_) { - return _; - }; - /** - * Generate a string containing static keys from compiler modules. - */ - function genStaticKeys$1(modules) { - return modules - .reduce(function (keys, m) { - return keys.concat(m.staticKeys || []); - }, []) - .join(","); - } - /** - * Check if two values are loosely equal - that is, - * if they are plain objects, do they have the same shape? - */ - function looseEqual(a, b) { - if (a === b) return true; - var isObjectA = isObject(a); - var isObjectB = isObject(b); - if (isObjectA && isObjectB) { - try { - var isArrayA = Array.isArray(a); - var isArrayB = Array.isArray(b); - if (isArrayA && isArrayB) { - return ( - a.length === b.length && - a.every(function (e, i) { - return looseEqual(e, b[i]); - }) - ); - } else if (a instanceof Date && b instanceof Date) { - return a.getTime() === b.getTime(); - } else if (!isArrayA && !isArrayB) { - var keysA = Object.keys(a); - var keysB = Object.keys(b); - return ( - keysA.length === keysB.length && - keysA.every(function (key) { - return looseEqual(a[key], b[key]); - }) - ); - } else { - /* istanbul ignore next */ - return false; - } - } catch (e) { - /* istanbul ignore next */ - return false; - } - } else if (!isObjectA && !isObjectB) { - return String(a) === String(b); - } else { - return false; - } - } - /** - * Return the first index at which a loosely equal value can be - * found in the array (if value is a plain object, the array must - * contain an object of the same shape), or -1 if it is not present. - */ - function looseIndexOf(arr, val) { - for (var i = 0; i < arr.length; i++) { - if (looseEqual(arr[i], val)) return i; - } - return -1; - } - /** - * Ensure a function is called only once. - */ - function once(fn) { - var called = false; - return function () { - if (!called) { - called = true; - fn.apply(this, arguments); - } - }; - } - // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#polyfill - function hasChanged(x, y) { - if (x === y) { - return x === 0 && 1 / x !== 1 / y; - } else { - return x === x || y === y; - } - } - - var SSR_ATTR = "data-server-rendered"; - var ASSET_TYPES = ["component", "directive", "filter"]; - var LIFECYCLE_HOOKS = [ - "beforeCreate", - "created", - "beforeMount", - "mounted", - "beforeUpdate", - "updated", - "beforeDestroy", - "destroyed", - "activated", - "deactivated", - "errorCaptured", - "serverPrefetch", - "renderTracked", - "renderTriggered", - ]; - - var config = { - /** - * Option merge strategies (used in core/util/options) - */ - // $flow-disable-line - optionMergeStrategies: Object.create(null), - /** - * Whether to suppress warnings. - */ - silent: false, - /** - * Show production mode tip message on boot? - */ - productionTip: true, - /** - * Whether to enable devtools - */ - devtools: true, - /** - * Whether to record perf - */ - performance: false, - /** - * Error handler for watcher errors - */ - errorHandler: null, - /** - * Warn handler for watcher warns - */ - warnHandler: null, - /** - * Ignore certain custom elements - */ - ignoredElements: [], - /** - * Custom user key aliases for v-on - */ - // $flow-disable-line - keyCodes: Object.create(null), - /** - * Check if a tag is reserved so that it cannot be registered as a - * component. This is platform-dependent and may be overwritten. - */ - isReservedTag: no, - /** - * Check if an attribute is reserved so that it cannot be used as a component - * prop. This is platform-dependent and may be overwritten. - */ - isReservedAttr: no, - /** - * Check if a tag is an unknown element. - * Platform-dependent. - */ - isUnknownElement: no, - /** - * Get the namespace of an element - */ - getTagNamespace: noop, - /** - * Parse the real tag name for the specific platform. - */ - parsePlatformTagName: identity, - /** - * Check if an attribute must be bound using property, e.g. value - * Platform-dependent. - */ - mustUseProp: no, - /** - * Perform updates asynchronously. Intended to be used by Vue Test Utils - * This will significantly reduce performance if set to false. - */ - async: true, - /** - * Exposed for legacy reasons - */ - _lifecycleHooks: LIFECYCLE_HOOKS, - }; - - /** - * unicode letters used for parsing html tags, component names and property paths. - * using https://www.w3.org/TR/html53/semantics-scripting.html#potentialcustomelementname - * skipping \u10000-\uEFFFF due to it freezing up PhantomJS - */ - var unicodeRegExp = - /a-zA-Z\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD/; - /** - * Check if a string starts with $ or _ - */ - function isReserved(str) { - var c = (str + "").charCodeAt(0); - return c === 0x24 || c === 0x5f; - } - /** - * Define a property. - */ - function def(obj, key, val, enumerable) { - Object.defineProperty(obj, key, { - value: val, - enumerable: !!enumerable, - writable: true, - configurable: true, - }); - } - /** - * Parse simple path. - */ - var bailRE = new RegExp("[^".concat(unicodeRegExp.source, ".$_\\d]")); - function parsePath(path) { - if (bailRE.test(path)) { - return; - } - var segments = path.split("."); - return function (obj) { - for (var i = 0; i < segments.length; i++) { - if (!obj) return; - obj = obj[segments[i]]; - } - return obj; - }; - } - - // can we use __proto__? - var hasProto = "__proto__" in {}; - // Browser environment sniffing - var inBrowser = typeof window !== "undefined"; - var UA = inBrowser && window.navigator.userAgent.toLowerCase(); - var isIE = UA && /msie|trident/.test(UA); - var isIE9 = UA && UA.indexOf("msie 9.0") > 0; - var isEdge = UA && UA.indexOf("edge/") > 0; - UA && UA.indexOf("android") > 0; - var isIOS = UA && /iphone|ipad|ipod|ios/.test(UA); - UA && /chrome\/\d+/.test(UA) && !isEdge; - UA && /phantomjs/.test(UA); - var isFF = UA && UA.match(/firefox\/(\d+)/); - // Firefox has a "watch" function on Object.prototype... - // @ts-expect-error firebox support - var nativeWatch = {}.watch; - var supportsPassive = false; - if (inBrowser) { - try { - var opts = {}; - Object.defineProperty(opts, "passive", { - get: function () { - /* istanbul ignore next */ - supportsPassive = true; - }, - }); // https://github.com/facebook/flow/issues/285 - window.addEventListener("test-passive", null, opts); - } catch (e) {} - } - // this needs to be lazy-evaled because vue may be required before - // vue-server-renderer can set VUE_ENV - var _isServer; - var isServerRendering = function () { - if (_isServer === undefined) { - /* istanbul ignore if */ - if (!inBrowser && typeof global !== "undefined") { - // detect presence of vue-server-renderer and avoid - // Webpack shimming the process - _isServer = - global["process"] && global["process"].env.VUE_ENV === "server"; - } else { - _isServer = false; - } - } - return _isServer; - }; - // detect devtools - var devtools = inBrowser && window.__VUE_DEVTOOLS_GLOBAL_HOOK__; - /* istanbul ignore next */ - function isNative(Ctor) { - return typeof Ctor === "function" && /native code/.test(Ctor.toString()); - } - var hasSymbol = - typeof Symbol !== "undefined" && - isNative(Symbol) && - typeof Reflect !== "undefined" && - isNative(Reflect.ownKeys); - var _Set; // $flow-disable-line - /* istanbul ignore if */ if (typeof Set !== "undefined" && isNative(Set)) { - // use native Set when available. - _Set = Set; - } else { - // a non-standard Set polyfill that only works with primitive keys. - _Set = /** @class */ (function () { - function Set() { - this.set = Object.create(null); - } - Set.prototype.has = function (key) { - return this.set[key] === true; - }; - Set.prototype.add = function (key) { - this.set[key] = true; - }; - Set.prototype.clear = function () { - this.set = Object.create(null); - }; - return Set; - })(); - } - - var currentInstance = null; - /** - * This is exposed for compatibility with v3 (e.g. some functions in VueUse - * relies on it). Do not use this internally, just use `currentInstance`. - * - * @internal this function needs manual type declaration because it relies - * on previously manually authored types from Vue 2 - */ - function getCurrentInstance() { - return currentInstance && { proxy: currentInstance }; - } - /** - * @internal - */ - function setCurrentInstance(vm) { - if (vm === void 0) { - vm = null; - } - if (!vm) currentInstance && currentInstance._scope.off(); - currentInstance = vm; - vm && vm._scope.on(); - } - - /** - * @internal - */ - var VNode = /** @class */ (function () { - function VNode( - tag, - data, - children, - text, - elm, - context, - componentOptions, - asyncFactory - ) { - this.tag = tag; - this.data = data; - this.children = children; - this.text = text; - this.elm = elm; - this.ns = undefined; - this.context = context; - this.fnContext = undefined; - this.fnOptions = undefined; - this.fnScopeId = undefined; - this.key = data && data.key; - this.componentOptions = componentOptions; - this.componentInstance = undefined; - this.parent = undefined; - this.raw = false; - this.isStatic = false; - this.isRootInsert = true; - this.isComment = false; - this.isCloned = false; - this.isOnce = false; - this.asyncFactory = asyncFactory; - this.asyncMeta = undefined; - this.isAsyncPlaceholder = false; - } - Object.defineProperty(VNode.prototype, "child", { - // DEPRECATED: alias for componentInstance for backwards compat. - /* istanbul ignore next */ - get: function () { - return this.componentInstance; - }, - enumerable: false, - configurable: true, - }); - return VNode; - })(); - var createEmptyVNode = function (text) { - if (text === void 0) { - text = ""; - } - var node = new VNode(); - node.text = text; - node.isComment = true; - return node; - }; - function createTextVNode(val) { - return new VNode(undefined, undefined, undefined, String(val)); - } - // optimized shallow clone - // used for static nodes and slot nodes because they may be reused across - // multiple renders, cloning them avoids errors when DOM manipulations rely - // on their elm reference. - function cloneVNode(vnode) { - var cloned = new VNode( - vnode.tag, - vnode.data, - // #7975 - // clone children array to avoid mutating original in case of cloning - // a child. - vnode.children && vnode.children.slice(), - vnode.text, - vnode.elm, - vnode.context, - vnode.componentOptions, - vnode.asyncFactory - ); - cloned.ns = vnode.ns; - cloned.isStatic = vnode.isStatic; - cloned.key = vnode.key; - cloned.isComment = vnode.isComment; - cloned.fnContext = vnode.fnContext; - cloned.fnOptions = vnode.fnOptions; - cloned.fnScopeId = vnode.fnScopeId; - cloned.asyncMeta = vnode.asyncMeta; - cloned.isCloned = true; - return cloned; - } - - /* not type checking this file because flow doesn't play well with Proxy */ - var initProxy; - { - var allowedGlobals_1 = makeMap( - "Infinity,undefined,NaN,isFinite,isNaN," + - "parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent," + - "Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt," + - "require" // for Webpack/Browserify - ); - var warnNonPresent_1 = function (target, key) { - warn$2( - 'Property or method "'.concat( - key, - '" is not defined on the instance but ' - ) + - "referenced during render. Make sure that this property is reactive, " + - "either in the data option, or for class-based components, by " + - "initializing the property. " + - "See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.", - target - ); - }; - var warnReservedPrefix_1 = function (target, key) { - warn$2( - 'Property "' - .concat(key, '" must be accessed with "$data.') - .concat(key, '" because ') + - 'properties starting with "$" or "_" are not proxied in the Vue instance to ' + - "prevent conflicts with Vue internals. " + - "See: https://v2.vuejs.org/v2/api/#data", - target - ); - }; - var hasProxy_1 = typeof Proxy !== "undefined" && isNative(Proxy); - if (hasProxy_1) { - var isBuiltInModifier_1 = makeMap( - "stop,prevent,self,ctrl,shift,alt,meta,exact" - ); - config.keyCodes = new Proxy(config.keyCodes, { - set: function (target, key, value) { - if (isBuiltInModifier_1(key)) { - warn$2( - "Avoid overwriting built-in modifier in config.keyCodes: .".concat( - key - ) - ); - return false; - } else { - target[key] = value; - return true; - } - }, - }); - } - var hasHandler_1 = { - has: function (target, key) { - var has = key in target; - var isAllowed = - allowedGlobals_1(key) || - (typeof key === "string" && - key.charAt(0) === "_" && - !(key in target.$data)); - if (!has && !isAllowed) { - if (key in target.$data) warnReservedPrefix_1(target, key); - else warnNonPresent_1(target, key); - } - return has || !isAllowed; - }, - }; - var getHandler_1 = { - get: function (target, key) { - if (typeof key === "string" && !(key in target)) { - if (key in target.$data) warnReservedPrefix_1(target, key); - else warnNonPresent_1(target, key); - } - return target[key]; - }, - }; - initProxy = function initProxy(vm) { - if (hasProxy_1) { - // determine which proxy handler to use - var options = vm.$options; - var handlers = - options.render && options.render._withStripped - ? getHandler_1 - : hasHandler_1; - vm._renderProxy = new Proxy(vm, handlers); - } else { - vm._renderProxy = vm; - } - }; - } - - /****************************************************************************** - Copyright (c) Microsoft Corporation. - - Permission to use, copy, modify, and/or distribute this software for any - purpose with or without fee is hereby granted. - - THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH - REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY - AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, - INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM - LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR - OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR - PERFORMANCE OF THIS SOFTWARE. - ***************************************************************************** */ - - var __assign = function () { - __assign = - Object.assign || - function __assign(t) { - for (var s, i = 1, n = arguments.length; i < n; i++) { - s = arguments[i]; - for (var p in s) - if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; - } - return t; - }; - return __assign.apply(this, arguments); - }; - - var uid$2 = 0; - var pendingCleanupDeps = []; - var cleanupDeps = function () { - for (var i = 0; i < pendingCleanupDeps.length; i++) { - var dep = pendingCleanupDeps[i]; - dep.subs = dep.subs.filter(function (s) { - return s; - }); - dep._pending = false; - } - pendingCleanupDeps.length = 0; - }; - /** - * A dep is an observable that can have multiple - * directives subscribing to it. - * @internal - */ - var Dep = /** @class */ (function () { - function Dep() { - // pending subs cleanup - this._pending = false; - this.id = uid$2++; - this.subs = []; - } - Dep.prototype.addSub = function (sub) { - this.subs.push(sub); - }; - Dep.prototype.removeSub = function (sub) { - // #12696 deps with massive amount of subscribers are extremely slow to - // clean up in Chromium - // to workaround this, we unset the sub for now, and clear them on - // next scheduler flush. - this.subs[this.subs.indexOf(sub)] = null; - if (!this._pending) { - this._pending = true; - pendingCleanupDeps.push(this); - } - }; - Dep.prototype.depend = function (info) { - if (Dep.target) { - Dep.target.addDep(this); - if (info && Dep.target.onTrack) { - Dep.target.onTrack(__assign({ effect: Dep.target }, info)); - } - } - }; - Dep.prototype.notify = function (info) { - // stabilize the subscriber list first - var subs = this.subs.filter(function (s) { - return s; - }); - if (!config.async) { - // subs aren't sorted in scheduler if not running async - // we need to sort them now to make sure they fire in correct - // order - subs.sort(function (a, b) { - return a.id - b.id; - }); - } - for (var i = 0, l = subs.length; i < l; i++) { - var sub = subs[i]; - if (info) { - sub.onTrigger && sub.onTrigger(__assign({ effect: subs[i] }, info)); - } - sub.update(); - } - }; - return Dep; - })(); - // The current target watcher being evaluated. - // This is globally unique because only one watcher - // can be evaluated at a time. - Dep.target = null; - var targetStack = []; - function pushTarget(target) { - targetStack.push(target); - Dep.target = target; - } - function popTarget() { - targetStack.pop(); - Dep.target = targetStack[targetStack.length - 1]; - } - - /* - * not type checking this file because flow doesn't play well with - * dynamically accessing methods on Array prototype - */ - var arrayProto = Array.prototype; - var arrayMethods = Object.create(arrayProto); - var methodsToPatch = [ - "push", - "pop", - "shift", - "unshift", - "splice", - "sort", - "reverse", - ]; - /** - * Intercept mutating methods and emit events - */ - methodsToPatch.forEach(function (method) { - // cache original method - var original = arrayProto[method]; - def(arrayMethods, method, function mutator() { - var args = []; - for (var _i = 0; _i < arguments.length; _i++) { - args[_i] = arguments[_i]; - } - var result = original.apply(this, args); - var ob = this.__ob__; - var inserted; - switch (method) { - case "push": - case "unshift": - inserted = args; - break; - case "splice": - inserted = args.slice(2); - break; - } - if (inserted) ob.observeArray(inserted); - // notify change - { - ob.dep.notify({ - type: "array mutation" /* TriggerOpTypes.ARRAY_MUTATION */, - target: this, - key: method, - }); - } - return result; - }); - }); - - var arrayKeys = Object.getOwnPropertyNames(arrayMethods); - var NO_INIITIAL_VALUE = {}; - /** - * In some cases we may want to disable observation inside a component's - * update computation. - */ - var shouldObserve = true; - function toggleObserving(value) { - shouldObserve = value; - } - // ssr mock dep - var mockDep = { - notify: noop, - depend: noop, - addSub: noop, - removeSub: noop, - }; - /** - * Observer class that is attached to each observed - * object. Once attached, the observer converts the target - * object's property keys into getter/setters that - * collect dependencies and dispatch updates. - */ - var Observer = /** @class */ (function () { - function Observer(value, shallow, mock) { - if (shallow === void 0) { - shallow = false; - } - if (mock === void 0) { - mock = false; - } - this.value = value; - this.shallow = shallow; - this.mock = mock; - // this.value = value - this.dep = mock ? mockDep : new Dep(); - this.vmCount = 0; - def(value, "__ob__", this); - if (isArray(value)) { - if (!mock) { - if (hasProto) { - value.__proto__ = arrayMethods; - /* eslint-enable no-proto */ - } else { - for (var i = 0, l = arrayKeys.length; i < l; i++) { - var key = arrayKeys[i]; - def(value, key, arrayMethods[key]); - } - } - } - if (!shallow) { - this.observeArray(value); - } - } else { - /** - * Walk through all properties and convert them into - * getter/setters. This method should only be called when - * value type is Object. - */ - var keys = Object.keys(value); - for (var i = 0; i < keys.length; i++) { - var key = keys[i]; - defineReactive( - value, - key, - NO_INIITIAL_VALUE, - undefined, - shallow, - mock - ); - } - } - } - /** - * Observe a list of Array items. - */ - Observer.prototype.observeArray = function (value) { - for (var i = 0, l = value.length; i < l; i++) { - observe(value[i], false, this.mock); - } - }; - return Observer; - })(); - // helpers - /** - * Attempt to create an observer instance for a value, - * returns the new observer if successfully observed, - * or the existing observer if the value already has one. - */ - function observe(value, shallow, ssrMockReactivity) { - if (value && hasOwn(value, "__ob__") && value.__ob__ instanceof Observer) { - return value.__ob__; - } - if ( - shouldObserve && - (ssrMockReactivity || !isServerRendering()) && - (isArray(value) || isPlainObject(value)) && - Object.isExtensible(value) && - !value.__v_skip /* ReactiveFlags.SKIP */ && - !isRef(value) && - !(value instanceof VNode) - ) { - return new Observer(value, shallow, ssrMockReactivity); - } - } - /** - * Define a reactive property on an Object. - */ - function defineReactive(obj, key, val, customSetter, shallow, mock) { - var dep = new Dep(); - var property = Object.getOwnPropertyDescriptor(obj, key); - if (property && property.configurable === false) { - return; - } - // cater for pre-defined getter/setters - var getter = property && property.get; - var setter = property && property.set; - if ( - (!getter || setter) && - (val === NO_INIITIAL_VALUE || arguments.length === 2) - ) { - val = obj[key]; - } - var childOb = !shallow && observe(val, false, mock); - Object.defineProperty(obj, key, { - enumerable: true, - configurable: true, - get: function reactiveGetter() { - var value = getter ? getter.call(obj) : val; - if (Dep.target) { - { - dep.depend({ - target: obj, - type: "get" /* TrackOpTypes.GET */, - key: key, - }); - } - if (childOb) { - childOb.dep.depend(); - if (isArray(value)) { - dependArray(value); - } - } - } - return isRef(value) && !shallow ? value.value : value; - }, - set: function reactiveSetter(newVal) { - var value = getter ? getter.call(obj) : val; - if (!hasChanged(value, newVal)) { - return; - } - if (customSetter) { - customSetter(); - } - if (setter) { - setter.call(obj, newVal); - } else if (getter) { - // #7981: for accessor properties without setter - return; - } else if (!shallow && isRef(value) && !isRef(newVal)) { - value.value = newVal; - return; - } else { - val = newVal; - } - childOb = !shallow && observe(newVal, false, mock); - { - dep.notify({ - type: "set" /* TriggerOpTypes.SET */, - target: obj, - key: key, - newValue: newVal, - oldValue: value, - }); - } - }, - }); - return dep; - } - function set(target, key, val) { - if (isUndef(target) || isPrimitive(target)) { - warn$2( - "Cannot set reactive property on undefined, null, or primitive value: ".concat( - target - ) - ); - } - if (isReadonly(target)) { - warn$2( - 'Set operation on key "'.concat(key, '" failed: target is readonly.') - ); - return; - } - var ob = target.__ob__; - if (isArray(target) && isValidArrayIndex(key)) { - target.length = Math.max(target.length, key); - target.splice(key, 1, val); - // when mocking for SSR, array methods are not hijacked - if (ob && !ob.shallow && ob.mock) { - observe(val, false, true); - } - return val; - } - if (key in target && !(key in Object.prototype)) { - target[key] = val; - return val; - } - if (target._isVue || (ob && ob.vmCount)) { - warn$2( - "Avoid adding reactive properties to a Vue instance or its root $data " + - "at runtime - declare it upfront in the data option." - ); - return val; - } - if (!ob) { - target[key] = val; - return val; - } - defineReactive(ob.value, key, val, undefined, ob.shallow, ob.mock); - { - ob.dep.notify({ - type: "add" /* TriggerOpTypes.ADD */, - target: target, - key: key, - newValue: val, - oldValue: undefined, - }); - } - return val; - } - function del(target, key) { - if (isUndef(target) || isPrimitive(target)) { - warn$2( - "Cannot delete reactive property on undefined, null, or primitive value: ".concat( - target - ) - ); - } - if (isArray(target) && isValidArrayIndex(key)) { - target.splice(key, 1); - return; - } - var ob = target.__ob__; - if (target._isVue || (ob && ob.vmCount)) { - warn$2( - "Avoid deleting properties on a Vue instance or its root $data " + - "- just set it to null." - ); - return; - } - if (isReadonly(target)) { - warn$2( - 'Delete operation on key "'.concat(key, '" failed: target is readonly.') - ); - return; - } - if (!hasOwn(target, key)) { - return; - } - delete target[key]; - if (!ob) { - return; - } - { - ob.dep.notify({ - type: "delete" /* TriggerOpTypes.DELETE */, - target: target, - key: key, - }); - } - } - /** - * Collect dependencies on array elements when the array is touched, since - * we cannot intercept array element access like property getters. - */ - function dependArray(value) { - for (var e = void 0, i = 0, l = value.length; i < l; i++) { - e = value[i]; - if (e && e.__ob__) { - e.__ob__.dep.depend(); - } - if (isArray(e)) { - dependArray(e); - } - } - } - - function reactive(target) { - makeReactive(target, false); - return target; - } - /** - * Return a shallowly-reactive copy of the original object, where only the root - * level properties are reactive. It also does not auto-unwrap refs (even at the - * root level). - */ - function shallowReactive(target) { - makeReactive(target, true); - def(target, "__v_isShallow" /* ReactiveFlags.IS_SHALLOW */, true); - return target; - } - function makeReactive(target, shallow) { - // if trying to observe a readonly proxy, return the readonly version. - if (!isReadonly(target)) { - { - if (isArray(target)) { - warn$2( - "Avoid using Array as root value for " - .concat( - shallow ? "shallowReactive()" : "reactive()", - " as it cannot be tracked in watch() or watchEffect(). Use " - ) - .concat( - shallow ? "shallowRef()" : "ref()", - " instead. This is a Vue-2-only limitation." - ) - ); - } - var existingOb = target && target.__ob__; - if (existingOb && existingOb.shallow !== shallow) { - warn$2( - "Target is already a " - .concat( - existingOb.shallow ? "" : "non-", - "shallow reactive object, and cannot be converted to " - ) - .concat(shallow ? "" : "non-", "shallow.") - ); - } - } - var ob = observe( - target, - shallow, - isServerRendering() /* ssr mock reactivity */ - ); - if (!ob) { - if (target == null || isPrimitive(target)) { - warn$2("value cannot be made reactive: ".concat(String(target))); - } - if (isCollectionType(target)) { - warn$2( - "Vue 2 does not support reactive collection types such as Map or Set." - ); - } - } - } - } - function isReactive(value) { - if (isReadonly(value)) { - return isReactive(value["__v_raw" /* ReactiveFlags.RAW */]); - } - return !!(value && value.__ob__); - } - function isShallow(value) { - return !!(value && value.__v_isShallow); - } - function isReadonly(value) { - return !!(value && value.__v_isReadonly); - } - function isProxy(value) { - return isReactive(value) || isReadonly(value); - } - function toRaw(observed) { - var raw = observed && observed["__v_raw" /* ReactiveFlags.RAW */]; - return raw ? toRaw(raw) : observed; - } - function markRaw(value) { - // non-extensible objects won't be observed anyway - if (Object.isExtensible(value)) { - def(value, "__v_skip" /* ReactiveFlags.SKIP */, true); - } - return value; - } - /** - * @internal - */ - function isCollectionType(value) { - var type = toRawType(value); - return ( - type === "Map" || - type === "WeakMap" || - type === "Set" || - type === "WeakSet" - ); - } - - /** - * @internal - */ - var RefFlag = "__v_isRef"; - function isRef(r) { - return !!(r && r.__v_isRef === true); - } - function ref$1(value) { - return createRef(value, false); - } - function shallowRef(value) { - return createRef(value, true); - } - function createRef(rawValue, shallow) { - if (isRef(rawValue)) { - return rawValue; - } - var ref = {}; - def(ref, RefFlag, true); - def(ref, "__v_isShallow" /* ReactiveFlags.IS_SHALLOW */, shallow); - def( - ref, - "dep", - defineReactive(ref, "value", rawValue, null, shallow, isServerRendering()) - ); - return ref; - } - function triggerRef(ref) { - if (!ref.dep) { - warn$2("received object is not a triggerable ref."); - } - { - ref.dep && - ref.dep.notify({ - type: "set" /* TriggerOpTypes.SET */, - target: ref, - key: "value", - }); - } - } - function unref(ref) { - return isRef(ref) ? ref.value : ref; - } - function proxyRefs(objectWithRefs) { - if (isReactive(objectWithRefs)) { - return objectWithRefs; - } - var proxy = {}; - var keys = Object.keys(objectWithRefs); - for (var i = 0; i < keys.length; i++) { - proxyWithRefUnwrap(proxy, objectWithRefs, keys[i]); - } - return proxy; - } - function proxyWithRefUnwrap(target, source, key) { - Object.defineProperty(target, key, { - enumerable: true, - configurable: true, - get: function () { - var val = source[key]; - if (isRef(val)) { - return val.value; - } else { - var ob = val && val.__ob__; - if (ob) ob.dep.depend(); - return val; - } - }, - set: function (value) { - var oldValue = source[key]; - if (isRef(oldValue) && !isRef(value)) { - oldValue.value = value; - } else { - source[key] = value; - } - }, - }); - } - function customRef(factory) { - var dep = new Dep(); - var _a = factory( - function () { - { - dep.depend({ - target: ref, - type: "get" /* TrackOpTypes.GET */, - key: "value", - }); - } - }, - function () { - { - dep.notify({ - target: ref, - type: "set" /* TriggerOpTypes.SET */, - key: "value", - }); - } - } - ), - get = _a.get, - set = _a.set; - var ref = { - get value() { - return get(); - }, - set value(newVal) { - set(newVal); - }, - }; - def(ref, RefFlag, true); - return ref; - } - function toRefs(object) { - if (!isReactive(object)) { - warn$2("toRefs() expects a reactive object but received a plain one."); - } - var ret = isArray(object) ? new Array(object.length) : {}; - for (var key in object) { - ret[key] = toRef(object, key); - } - return ret; - } - function toRef(object, key, defaultValue) { - var val = object[key]; - if (isRef(val)) { - return val; - } - var ref = { - get value() { - var val = object[key]; - return val === undefined ? defaultValue : val; - }, - set value(newVal) { - object[key] = newVal; - }, - }; - def(ref, RefFlag, true); - return ref; - } - - var rawToReadonlyFlag = "__v_rawToReadonly"; - var rawToShallowReadonlyFlag = "__v_rawToShallowReadonly"; - function readonly(target) { - return createReadonly(target, false); - } - function createReadonly(target, shallow) { - if (!isPlainObject(target)) { - { - if (isArray(target)) { - warn$2("Vue 2 does not support readonly arrays."); - } else if (isCollectionType(target)) { - warn$2( - "Vue 2 does not support readonly collection types such as Map or Set." - ); - } else { - warn$2("value cannot be made readonly: ".concat(typeof target)); - } - } - return target; - } - if (!Object.isExtensible(target)) { - warn$2( - "Vue 2 does not support creating readonly proxy for non-extensible object." - ); - } - // already a readonly object - if (isReadonly(target)) { - return target; - } - // already has a readonly proxy - var existingFlag = shallow ? rawToShallowReadonlyFlag : rawToReadonlyFlag; - var existingProxy = target[existingFlag]; - if (existingProxy) { - return existingProxy; - } - var proxy = Object.create(Object.getPrototypeOf(target)); - def(target, existingFlag, proxy); - def(proxy, "__v_isReadonly" /* ReactiveFlags.IS_READONLY */, true); - def(proxy, "__v_raw" /* ReactiveFlags.RAW */, target); - if (isRef(target)) { - def(proxy, RefFlag, true); - } - if (shallow || isShallow(target)) { - def(proxy, "__v_isShallow" /* ReactiveFlags.IS_SHALLOW */, true); - } - var keys = Object.keys(target); - for (var i = 0; i < keys.length; i++) { - defineReadonlyProperty(proxy, target, keys[i], shallow); - } - return proxy; - } - function defineReadonlyProperty(proxy, target, key, shallow) { - Object.defineProperty(proxy, key, { - enumerable: true, - configurable: true, - get: function () { - var val = target[key]; - return shallow || !isPlainObject(val) ? val : readonly(val); - }, - set: function () { - warn$2( - 'Set operation on key "'.concat(key, '" failed: target is readonly.') - ); - }, - }); - } - /** - * Returns a reactive-copy of the original object, where only the root level - * properties are readonly, and does NOT unwrap refs nor recursively convert - * returned properties. - * This is used for creating the props proxy object for stateful components. - */ - function shallowReadonly(target) { - return createReadonly(target, true); - } - - function computed(getterOrOptions, debugOptions) { - var getter; - var setter; - var onlyGetter = isFunction(getterOrOptions); - if (onlyGetter) { - getter = getterOrOptions; - setter = function () { - warn$2("Write operation failed: computed value is readonly"); - }; - } else { - getter = getterOrOptions.get; - setter = getterOrOptions.set; - } - var watcher = isServerRendering() - ? null - : new Watcher(currentInstance, getter, noop, { lazy: true }); - if (watcher && debugOptions) { - watcher.onTrack = debugOptions.onTrack; - watcher.onTrigger = debugOptions.onTrigger; - } - var ref = { - // some libs rely on the presence effect for checking computed refs - // from normal refs, but the implementation doesn't matter - effect: watcher, - get value() { - if (watcher) { - if (watcher.dirty) { - watcher.evaluate(); - } - if (Dep.target) { - if (Dep.target.onTrack) { - Dep.target.onTrack({ - effect: Dep.target, - target: ref, - type: "get" /* TrackOpTypes.GET */, - key: "value", - }); - } - watcher.depend(); - } - return watcher.value; - } else { - return getter(); - } - }, - set value(newVal) { - setter(newVal); - }, - }; - def(ref, RefFlag, true); - def(ref, "__v_isReadonly" /* ReactiveFlags.IS_READONLY */, onlyGetter); - return ref; - } - - var mark; - var measure; - { - var perf_1 = inBrowser && window.performance; - /* istanbul ignore if */ - if ( - perf_1 && - // @ts-ignore - perf_1.mark && - // @ts-ignore - perf_1.measure && - // @ts-ignore - perf_1.clearMarks && - // @ts-ignore - perf_1.clearMeasures - ) { - mark = function (tag) { - return perf_1.mark(tag); - }; - measure = function (name, startTag, endTag) { - perf_1.measure(name, startTag, endTag); - perf_1.clearMarks(startTag); - perf_1.clearMarks(endTag); - // perf.clearMeasures(name) - }; - } - } - - var normalizeEvent = cached(function (name) { - var passive = name.charAt(0) === "&"; - name = passive ? name.slice(1) : name; - var once = name.charAt(0) === "~"; // Prefixed last, checked first - name = once ? name.slice(1) : name; - var capture = name.charAt(0) === "!"; - name = capture ? name.slice(1) : name; - return { - name: name, - once: once, - capture: capture, - passive: passive, - }; - }); - function createFnInvoker(fns, vm) { - function invoker() { - var fns = invoker.fns; - if (isArray(fns)) { - var cloned = fns.slice(); - for (var i = 0; i < cloned.length; i++) { - invokeWithErrorHandling( - cloned[i], - null, - arguments, - vm, - "v-on handler" - ); - } - } else { - // return handler return value for single handlers - return invokeWithErrorHandling( - fns, - null, - arguments, - vm, - "v-on handler" - ); - } - } - invoker.fns = fns; - return invoker; - } - function updateListeners(on, oldOn, add, remove, createOnceHandler, vm) { - var name, cur, old, event; - for (name in on) { - cur = on[name]; - old = oldOn[name]; - event = normalizeEvent(name); - if (isUndef(cur)) { - warn$2( - 'Invalid handler for event "'.concat(event.name, '": got ') + - String(cur), - vm - ); - } else if (isUndef(old)) { - if (isUndef(cur.fns)) { - cur = on[name] = createFnInvoker(cur, vm); - } - if (isTrue(event.once)) { - cur = on[name] = createOnceHandler(event.name, cur, event.capture); - } - add(event.name, cur, event.capture, event.passive, event.params); - } else if (cur !== old) { - old.fns = cur; - on[name] = old; - } - } - for (name in oldOn) { - if (isUndef(on[name])) { - event = normalizeEvent(name); - remove(event.name, oldOn[name], event.capture); - } - } - } - - function mergeVNodeHook(def, hookKey, hook) { - if (def instanceof VNode) { - def = def.data.hook || (def.data.hook = {}); - } - var invoker; - var oldHook = def[hookKey]; - function wrappedHook() { - hook.apply(this, arguments); - // important: remove merged hook to ensure it's called only once - // and prevent memory leak - remove$2(invoker.fns, wrappedHook); - } - if (isUndef(oldHook)) { - // no existing hook - invoker = createFnInvoker([wrappedHook]); - } else { - /* istanbul ignore if */ - if (isDef(oldHook.fns) && isTrue(oldHook.merged)) { - // already a merged invoker - invoker = oldHook; - invoker.fns.push(wrappedHook); - } else { - // existing plain hook - invoker = createFnInvoker([oldHook, wrappedHook]); - } - } - invoker.merged = true; - def[hookKey] = invoker; - } - - function extractPropsFromVNodeData(data, Ctor, tag) { - // we are only extracting raw values here. - // validation and default values are handled in the child - // component itself. - var propOptions = Ctor.options.props; - if (isUndef(propOptions)) { - return; - } - var res = {}; - var attrs = data.attrs, - props = data.props; - if (isDef(attrs) || isDef(props)) { - for (var key in propOptions) { - var altKey = hyphenate(key); - { - var keyInLowerCase = key.toLowerCase(); - if ( - key !== keyInLowerCase && - attrs && - hasOwn(attrs, keyInLowerCase) - ) { - tip( - 'Prop "'.concat(keyInLowerCase, '" is passed to component ') + - "".concat( - formatComponentName( - // @ts-expect-error tag is string - tag || Ctor - ), - ", but the declared prop name is" - ) + - ' "'.concat(key, '". ') + - "Note that HTML attributes are case-insensitive and camelCased " + - "props need to use their kebab-case equivalents when using in-DOM " + - 'templates. You should probably use "' - .concat(altKey, '" instead of "') - .concat(key, '".') - ); - } - } - checkProp(res, props, key, altKey, true) || - checkProp(res, attrs, key, altKey, false); - } - } - return res; - } - function checkProp(res, hash, key, altKey, preserve) { - if (isDef(hash)) { - if (hasOwn(hash, key)) { - res[key] = hash[key]; - if (!preserve) { - delete hash[key]; - } - return true; - } else if (hasOwn(hash, altKey)) { - res[key] = hash[altKey]; - if (!preserve) { - delete hash[altKey]; - } - return true; - } - } - return false; - } - - // The template compiler attempts to minimize the need for normalization by - // statically analyzing the template at compile time. - // - // For plain HTML markup, normalization can be completely skipped because the - // generated render function is guaranteed to return Array. There are - // two cases where extra normalization is needed: - // 1. When the children contains components - because a functional component - // may return an Array instead of a single root. In this case, just a simple - // normalization is needed - if any child is an Array, we flatten the whole - // thing with Array.prototype.concat. It is guaranteed to be only 1-level deep - // because functional components already normalize their own children. - function simpleNormalizeChildren(children) { - for (var i = 0; i < children.length; i++) { - if (isArray(children[i])) { - return Array.prototype.concat.apply([], children); - } - } - return children; - } - // 2. When the children contains constructs that always generated nested Arrays, - // e.g.