arrow control

This commit is contained in:
2023-03-27 11:10:09 +08:00
parent 3f75b5b378
commit afb4a42b34
32 changed files with 1519 additions and 810 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -5,15 +5,9 @@
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
"@/*": ["src/*"]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
"types": ["naive-ui/volar"],
"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
}
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -24,6 +24,7 @@
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"naive-ui": "^2.34.2",
"postcss-px-to-viewport": "^1.1.1",
"postcss-px2rem-exclude": "^0.0.6",
"sass": "^1.54.9",

View File

@ -9,6 +9,5 @@ module.exports = {
// remUnit: 75,
// exclude: /node_modules|folder_name|asstes/i,
// },
},
};

View File

@ -17,5 +17,7 @@ export default {
<style>
#app {
background-color: #f6f6f6;
//width: 100vw;
//height: 100vh;
}
</style>

View File

@ -1,11 +1,15 @@
/* Logo 字体 */
@font-face {
font-family: "iconfont logo";
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
src: url("https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834");
src: url("https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix")
format("embedded-opentype"),
url("https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834")
format("woff"),
url("https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834")
format("truetype"),
url("https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont")
format("svg");
}
.logo {
@ -48,7 +52,6 @@
color: #666;
}
#tabs .active {
border-bottom-color: #f00;
color: #222;
@ -283,7 +286,7 @@
}
.markdown > table th {
background: #F7F7F7;
background: #f7f7f7;
}
.markdown blockquote {
@ -323,7 +326,6 @@
clear: both;
}
.hljs {
display: block;
background: white;
@ -404,7 +406,7 @@ pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
@ -439,7 +441,6 @@ code[class*="language-"] ::selection {
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
@ -449,7 +450,7 @@ code[class*="language-"] ::selection {
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
margin: 0.5em 0;
overflow: auto;
}
@ -460,8 +461,8 @@ pre[class*="language-"] {
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
padding: 0.1em;
border-radius: 0.3em;
white-space: normal;
}
@ -477,7 +478,7 @@ pre[class*="language-"] {
}
.namespace {
opacity: .7;
opacity: 0.7;
}
.token.property,
@ -505,7 +506,7 @@ pre[class*="language-"] {
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, .5);
background: hsla(0, 0%, 100%, 0.5);
}
.token.atrule,
@ -516,7 +517,7 @@ pre[class*="language-"] {
.token.function,
.token.class-name {
color: #DD4A68;
color: #dd4a68;
}
.token.regex,

View File

@ -3,11 +3,22 @@
<head>
<meta charset="utf-8" />
<title>iconfont Demo</title>
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
<link
rel="shortcut icon"
href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"
type="image/x-icon"
/>
<link
rel="icon"
type="image/svg+xml"
href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"
/>
<link
rel="stylesheet"
href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css"
/>
<link rel="stylesheet" href="demo.css" />
<link rel="stylesheet" href="iconfont.css" />
<script src="iconfont.js"></script>
<!-- jQuery -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
@ -28,7 +39,7 @@
margin-left: 0.5em;
font-size: 22px;
color: #fff;
background: linear-gradient(-45deg, #3967FF, #B500FE);
background: linear-gradient(-45deg, #3967ff, #b500fe);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@ -36,10 +47,18 @@
</head>
<body>
<div class="main">
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
</a></h1>
<h1 class="logo">
<a
href="https://www.iconfont.cn/"
title="iconfont 首页"
target="_blank"
>
<img
width="200"
src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg"
/>
</a>
</h1>
<div class="nav-tabs">
<ul id="tabs" class="dib-box">
<li class="dib active"><span>Unicode</span></li>
@ -47,12 +66,51 @@
<li class="dib"><span>Symbol</span></li>
</ul>
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3725111" target="_blank" class="nav-more">查看项目</a>
<a
href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3725111"
target="_blank"
class="nav-more"
>查看项目</a
>
</div>
<div class="tab-container">
<div class="content unicode" style="display: block;">
<div class="content unicode" style="display: block">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe83d;</span>
<div class="name">left</div>
<div class="code-name">&amp;#xe83d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe839;</span>
<div class="name">down</div>
<div class="code-name">&amp;#xe839;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe840;</span>
<div class="name">right</div>
<div class="code-name">&amp;#xe840;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe845;</span>
<div class="name">up</div>
<div class="code-name">&amp;#xe845;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe659;</span>
<div class="name">prev</div>
<div class="code-name">&amp;#xe659;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe609;</span>
<div class="name">next</div>
<div class="code-name">&amp;#xe609;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xeb98;</span>
@ -77,11 +135,10 @@
<div class="name">全屏_o</div>
<div class="code-name">&amp;#xeb99;</div>
</li>
</ul>
<div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2>
<hr>
<hr />
<p>Unicode 是字体在网页端最原始的应用方式,特点是:</p>
<ul>
@ -89,16 +146,21 @@
<li>默认情况下不支持多色,直接添加多色图标会自动去色。</li>
</ul>
<blockquote>
<p>注意:新版 iconfont 支持两种方式引用多色图标SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)</p>
<p>
注意:新版 iconfont 支持两种方式引用多色图标SVG symbol
引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)
</p>
</blockquote>
<p>Unicode 使用步骤如下:</p>
<h3 id="-font-face">第一步:拷贝项目下面生成的 <code>@font-face</code></h3>
<h3 id="-font-face">
第一步:拷贝项目下面生成的 <code>@font-face</code>
</h3>
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1666600319624') format('woff2'),
url('iconfont.woff?t=1666600319624') format('woff'),
url('iconfont.ttf?t=1666600319624') format('truetype');
src: url('iconfont.woff2?t=1679885453951') format('woff2'),
url('iconfont.woff?t=1679885453951') format('woff'),
url('iconfont.ttf?t=1679885453951') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
@ -117,75 +179,160 @@
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看默认是 "iconfont"。</p>
<p>
"iconfont" 是你项目下的
font-family。可以通过编辑项目查看默认是 "iconfont"。
</p>
</blockquote>
</div>
</div>
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-left"></span>
<div class="name">left</div>
<div class="code-name">.icon-left</div>
</li>
<li class="dib">
<span class="icon iconfont icon-down"></span>
<div class="name">down</div>
<div class="code-name">.icon-down</div>
</li>
<li class="dib">
<span class="icon iconfont icon-right"></span>
<div class="name">right</div>
<div class="code-name">.icon-right</div>
</li>
<li class="dib">
<span class="icon iconfont icon-up"></span>
<div class="name">up</div>
<div class="code-name">.icon-up</div>
</li>
<li class="dib">
<span class="icon iconfont icon-prev"></span>
<div class="name">prev</div>
<div class="code-name">.icon-prev</div>
</li>
<li class="dib">
<span class="icon iconfont icon-next"></span>
<div class="name">next</div>
<div class="code-name">.icon-next</div>
</li>
<li class="dib">
<span class="icon iconfont icon-quxiaoquanping_o"></span>
<div class="name">
取消全屏_o
</div>
<div class="code-name">.icon-quxiaoquanping_o
</div>
<div class="name">取消全屏_o</div>
<div class="code-name">.icon-quxiaoquanping_o</div>
</li>
<li class="dib">
<span class="icon iconfont icon-bofang_o"></span>
<div class="name">
播放_o
</div>
<div class="code-name">.icon-bofang_o
</div>
<div class="name">播放_o</div>
<div class="code-name">.icon-bofang_o</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zanting_o"></span>
<div class="name">
暂停_o
</div>
<div class="code-name">.icon-zanting_o
</div>
<div class="name">暂停_o</div>
<div class="code-name">.icon-zanting_o</div>
</li>
<li class="dib">
<span class="icon iconfont icon-quanping_o"></span>
<div class="name">
全屏_o
</div>
<div class="code-name">.icon-quanping_o
</div>
<div class="name">全屏_o</div>
<div class="code-name">.icon-quanping_o</div>
</li>
</ul>
<div class="article markdown">
<h2 id="font-class-">font-class 引用</h2>
<hr>
<hr />
<p>font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。</p>
<p>
font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode
书写不直观,语意不明确的问题。
</p>
<p>与 Unicode 使用方式相比,具有如下特点:</p>
<ul>
<li>相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。</li>
<li>因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。</li>
<li>
相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon
是什么。
</li>
<li>
因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class
里面的 Unicode 引用。
</li>
</ul>
<p>使用步骤如下:</p>
<h3 id="-fontclass-">第一步:引入项目下面生成的 fontclass 代码:</h3>
<h3 id="-fontclass-">
第一步:引入项目下面生成的 fontclass 代码:
</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
<h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"
iconfont" 是你项目下的 font-family。可以通过编辑项目查看默认是 "iconfont"。</p>
<p>
" iconfont" 是你项目下的
font-family。可以通过编辑项目查看默认是 "iconfont"。
</p>
</blockquote>
</div>
</div>
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-left"></use>
</svg>
<div class="name">left</div>
<div class="code-name">#icon-left</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-down"></use>
</svg>
<div class="name">down</div>
<div class="code-name">#icon-down</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-right"></use>
</svg>
<div class="name">right</div>
<div class="code-name">#icon-right</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-up"></use>
</svg>
<div class="name">up</div>
<div class="code-name">#icon-up</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-prev"></use>
</svg>
<div class="name">prev</div>
<div class="code-name">#icon-prev</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-next"></use>
</svg>
<div class="name">next</div>
<div class="code-name">#icon-next</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
@ -218,17 +365,24 @@
<div class="name">全屏_o</div>
<div class="code-name">#icon-quanping_o</div>
</li>
</ul>
<div class="article markdown">
<h2 id="symbol-">Symbol 引用</h2>
<hr>
<hr />
<p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:</p>
<p>
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a
href=""
>文章</a
>
这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:
</p>
<ul>
<li>支持多色图标了,不再受单色限制。</li>
<li>通过一些技巧,支持像字体那样,通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
<li>
通过一些技巧,支持像字体那样,通过 <code>font-size</code>,
<code>color</code> 来调整样式。
</li>
<li>兼容性较差,支持 IE9+,及现代浏览器。</li>
<li>浏览器渲染 SVG 的性能一般,还不如 png。</li>
</ul>
@ -254,27 +408,26 @@
</code></pre>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('.tab-container .content:first').show()
$(".tab-container .content:first").show();
$('#tabs li').click(function (e) {
var tabContent = $('.tab-container .content')
var index = $(this).index()
$("#tabs li").click(function (e) {
var tabContent = $(".tab-container .content");
var index = $(this).index();
if ($(this).hasClass('active')) {
return
if ($(this).hasClass("active")) {
return;
} else {
$('#tabs li').removeClass('active')
$(this).addClass('active')
$("#tabs li").removeClass("active");
$(this).addClass("active");
tabContent.hide().eq(index).fadeIn()
tabContent.hide().eq(index).fadeIn();
}
})
})
});
});
</script>
</body>
</html>

View File

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 3725111 */
src: url('iconfont.woff2?t=1666600319624') format('woff2'),
url('iconfont.woff?t=1666600319624') format('woff'),
url('iconfont.ttf?t=1666600319624') format('truetype');
src: url("iconfont.woff2?t=1679885453951") format("woff2"),
url("iconfont.woff?t=1679885453951") format("woff"),
url("iconfont.ttf?t=1679885453951") format("truetype");
}
.iconfont {
@ -13,6 +13,30 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-left:before {
content: "\e83d";
}
.icon-down:before {
content: "\e839";
}
.icon-right:before {
content: "\e840";
}
.icon-up:before {
content: "\e845";
}
.icon-prev:before {
content: "\e659";
}
.icon-next:before {
content: "\e609";
}
.icon-quxiaoquanping_o:before {
content: "\eb98";
}
@ -28,4 +52,3 @@
.icon-quanping_o:before {
content: "\eb99";
}

View File

@ -1 +1,69 @@
window._iconfont_svg_string_3725111='<svg><symbol id="icon-quxiaoquanping_o" viewBox="0 0 1024 1024"><path d="M354.133333 682.666667H256v-42.666667h170.666667v170.666667H384v-98.133334L243.2 853.333333l-29.866667-29.866666L354.133333 682.666667z m358.4 0l140.8 140.8-29.866666 29.866666-140.8-140.8V810.666667h-42.666667v-170.666667h170.666667v42.666667h-98.133334zM354.133333 384L213.333333 243.2l29.866667-29.866667L384 354.133333V256h42.666667v170.666667H256V384h98.133333z m358.4 0H810.666667v42.666667h-170.666667V256h42.666667v98.133333L823.466667 213.333333l29.866666 29.866667L712.533333 384z" fill="#444444" ></path></symbol><symbol id="icon-bofang_o" viewBox="0 0 1024 1024"><path d="M533.333333 896C332.8 896 170.666667 733.866667 170.666667 533.333333S332.8 170.666667 533.333333 170.666667 896 332.8 896 533.333333 733.866667 896 533.333333 896z m0-42.666667c174.933333 0 320-145.066667 320-320S708.266667 213.333333 533.333333 213.333333 213.333333 358.4 213.333333 533.333333 358.4 853.333333 533.333333 853.333333z m149.333334-320L469.333333 682.666667V384l213.333334 149.333333z m-68.266667 0L512 460.8v145.066667l102.4-72.533334z" fill="#444444" ></path></symbol><symbol id="icon-zanting_o" viewBox="0 0 1024 1024"><path d="M533.333333 896C332.8 896 170.666667 733.866667 170.666667 533.333333S332.8 170.666667 533.333333 170.666667 896 332.8 896 533.333333 733.866667 896 533.333333 896z m0-42.666667c174.933333 0 320-145.066667 320-320S708.266667 213.333333 533.333333 213.333333 213.333333 358.4 213.333333 533.333333 358.4 853.333333 533.333333 853.333333zM469.333333 426.666667v213.333333h-42.666666v-213.333333h42.666666z m170.666667 0v213.333333h-42.666667v-213.333333h42.666667z" fill="#444444" ></path></symbol><symbol id="icon-quanping_o" viewBox="0 0 1024 1024"><path d="M285.866667 810.666667H384v42.666666H213.333333v-170.666666h42.666667v98.133333l128-128 29.866667 29.866667-128 128z m494.933333 0l-128-128 29.866667-29.866667 128 128V682.666667h42.666666v170.666666h-170.666666v-42.666666h98.133333zM285.866667 256l128 128-29.866667 29.866667-128-128V384H213.333333V213.333333h170.666667v42.666667H285.866667z m494.933333 0H682.666667V213.333333h170.666666v170.666667h-42.666666V285.866667l-128 128-29.866667-29.866667 128-128z" fill="#444444" ></path></symbol></svg>',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var o,i,l,d,a,c=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}o=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_3725111,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?c(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(o,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),o()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(l=o,d=n.document,a=!1,v(),d.onreadystatechange=function(){"complete"==d.readyState&&(d.onreadystatechange=null,s())})}function s(){a||(a=!0,l())}function v(){try{d.documentElement.doScroll("left")}catch(t){return void setTimeout(v,50)}s()}}(window);
(window._iconfont_svg_string_3725111 =
'<svg><symbol id="icon-left" viewBox="0 0 1024 1024"><path d="M659.748571 245.272381l-51.687619-51.687619-318.439619 318.585905 318.415238 318.268952 51.712-51.736381-266.703238-266.556952z" ></path></symbol><symbol id="icon-down" viewBox="0 0 1024 1024"><path d="M512.146286 619.52L245.296762 352.792381 193.584762 404.48l318.585905 318.415238 318.268952-318.415238-51.736381-51.687619z" ></path></symbol><symbol id="icon-right" viewBox="0 0 1024 1024"><path d="M605.086476 512.146286L338.358857 245.272381l51.760762-51.687619 318.415238 318.585905L390.095238 830.415238l-51.687619-51.736381z" ></path></symbol><symbol id="icon-up" viewBox="0 0 1024 1024"><path d="M512.146286 454.753524l-266.849524 266.727619L193.584762 669.744762l318.585905-318.415238 318.268952 318.415238-51.736381 51.687619z" ></path></symbol><symbol id="icon-prev" viewBox="0 0 1024 1024"><path d="M784.652701 955.6957 346.601985 517.644983c-2.822492-2.822492-2.822492-7.902977 0-11.289967l439.179713-439.179713c6.77398-6.77398 10.725469-16.370452 10.725469-25.966924L796.507166 36.692393c0-20.32194-16.370452-36.692393-36.692393-36.692393l-4.515987 0c-9.596472 0-19.192944 3.951488-25.966924 10.725469L250.072767 489.420066c-12.418964 12.418964-12.418964 32.740904 0 45.159868l477.565601 477.565601c7.338479 7.338479 17.499449 11.854465 28.224917 11.854465l0 0c22.015436 0 40.079383-18.063947 40.079383-40.079383l0 0C796.507166 973.759647 791.99118 963.598677 784.652701 955.6957z" ></path></symbol><symbol id="icon-next" viewBox="0 0 1024 1024"><path d="M778.541176 490.706824L352.557176 64.752941a30.117647 30.117647 0 0 0-42.586352 42.586353L714.631529 512 310.061176 916.570353a30.087529 30.087529 0 0 0-0.060235 42.646588 29.967059 29.967059 0 0 0 42.646588-0.030117l425.833412-425.86353a30.087529 30.087529 0 0 0 0.030118-42.61647z" fill="#000000" ></path></symbol><symbol id="icon-quxiaoquanping_o" viewBox="0 0 1024 1024"><path d="M354.133333 682.666667H256v-42.666667h170.666667v170.666667H384v-98.133334L243.2 853.333333l-29.866667-29.866666L354.133333 682.666667z m358.4 0l140.8 140.8-29.866666 29.866666-140.8-140.8V810.666667h-42.666667v-170.666667h170.666667v42.666667h-98.133334zM354.133333 384L213.333333 243.2l29.866667-29.866667L384 354.133333V256h42.666667v170.666667H256V384h98.133333z m358.4 0H810.666667v42.666667h-170.666667V256h42.666667v98.133333L823.466667 213.333333l29.866666 29.866667L712.533333 384z" fill="#444444" ></path></symbol><symbol id="icon-bofang_o" viewBox="0 0 1024 1024"><path d="M533.333333 896C332.8 896 170.666667 733.866667 170.666667 533.333333S332.8 170.666667 533.333333 170.666667 896 332.8 896 533.333333 733.866667 896 533.333333 896z m0-42.666667c174.933333 0 320-145.066667 320-320S708.266667 213.333333 533.333333 213.333333 213.333333 358.4 213.333333 533.333333 358.4 853.333333 533.333333 853.333333z m149.333334-320L469.333333 682.666667V384l213.333334 149.333333z m-68.266667 0L512 460.8v145.066667l102.4-72.533334z" fill="#444444" ></path></symbol><symbol id="icon-zanting_o" viewBox="0 0 1024 1024"><path d="M533.333333 896C332.8 896 170.666667 733.866667 170.666667 533.333333S332.8 170.666667 533.333333 170.666667 896 332.8 896 533.333333 733.866667 896 533.333333 896z m0-42.666667c174.933333 0 320-145.066667 320-320S708.266667 213.333333 533.333333 213.333333 213.333333 358.4 213.333333 533.333333 358.4 853.333333 533.333333 853.333333zM469.333333 426.666667v213.333333h-42.666666v-213.333333h42.666666z m170.666667 0v213.333333h-42.666667v-213.333333h42.666667z" fill="#444444" ></path></symbol><symbol id="icon-quanping_o" viewBox="0 0 1024 1024"><path d="M285.866667 810.666667H384v42.666666H213.333333v-170.666666h42.666667v98.133333l128-128 29.866667 29.866667-128 128z m494.933333 0l-128-128 29.866667-29.866667 128 128V682.666667h42.666666v170.666666h-170.666666v-42.666666h98.133333zM285.866667 256l128 128-29.866667 29.866667-128-128V384H213.333333V213.333333h170.666667v42.666667H285.866667z m494.933333 0H682.666667V213.333333h170.666666v170.666667h-42.666666V285.866667l-128 128-29.866667-29.866667 128-128z" fill="#444444" ></path></symbol></svg>'),
(function (o) {
var t = (t = document.getElementsByTagName("script"))[t.length - 1],
e = t.getAttribute("data-injectcss"),
t = t.getAttribute("data-disable-injectsvg");
if (!t) {
var i,
n,
l,
a,
d,
c = function (t, e) {
e.parentNode.insertBefore(t, e);
};
if (e && !o.__iconfont__svg__cssinject__) {
o.__iconfont__svg__cssinject__ = !0;
try {
document.write(
"<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>"
);
} catch (t) {
console && console.log(t);
}
}
(i = function () {
var t,
e = document.createElement("div");
(e.innerHTML = o._iconfont_svg_string_3725111),
(e = e.getElementsByTagName("svg")[0]) &&
(e.setAttribute("aria-hidden", "true"),
(e.style.position = "absolute"),
(e.style.width = 0),
(e.style.height = 0),
(e.style.overflow = "hidden"),
(e = e),
(t = document.body).firstChild
? c(e, t.firstChild)
: t.appendChild(e));
}),
document.addEventListener
? ~["complete", "loaded", "interactive"].indexOf(document.readyState)
? setTimeout(i, 0)
: ((n = function () {
document.removeEventListener("DOMContentLoaded", n, !1), i();
}),
document.addEventListener("DOMContentLoaded", n, !1))
: document.attachEvent &&
((l = i),
(a = o.document),
(d = !1),
h(),
(a.onreadystatechange = function () {
"complete" == a.readyState &&
((a.onreadystatechange = null), s());
}));
}
function s() {
d || ((d = !0), l());
}
function h() {
try {
a.documentElement.doScroll("left");
} catch (t) {
return void setTimeout(h, 50);
}
s();
}
})(window);

View File

@ -5,6 +5,48 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "34453005",
"name": "left",
"font_class": "left",
"unicode": "e83d",
"unicode_decimal": 59453
},
{
"icon_id": "34452987",
"name": "down",
"font_class": "down",
"unicode": "e839",
"unicode_decimal": 59449
},
{
"icon_id": "34453038",
"name": "right",
"font_class": "right",
"unicode": "e840",
"unicode_decimal": 59456
},
{
"icon_id": "34453072",
"name": "up",
"font_class": "up",
"unicode": "e845",
"unicode_decimal": 59461
},
{
"icon_id": "879141",
"name": "prev",
"font_class": "prev",
"unicode": "e659",
"unicode_decimal": 58969
},
{
"icon_id": "8078256",
"name": "next",
"font_class": "next",
"unicode": "e609",
"unicode_decimal": 58889
},
{
"icon_id": "5387942",
"name": "取消全屏_o",

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -1,6 +1,19 @@
<template>
<div class="app-container">
<select
<div class="naive-select-wrap">
<NConfigProvider :locale="zhCN">
<NSelect
v-model:value="queryParams.query"
:options="projectList"
placeholder="请选择项目"
label-field="PRONAME"
value-field="PROID"
@update:value="projectClicked"
/>
</NConfigProvider>
</div>
<!-- <select
name="pets"
v-model="queryParams.query"
id="proj-select"
@ -10,38 +23,66 @@
<option v-for="item in projectList" :value="item.PROID">
{{ item.PRONAME }}
</option>
</select>
<div
v-if="queryParams.query && cameraList.length"
class="camera-list"
ref="cameraListRef"
>
</select> -->
<div v-if="queryParams.query" class="naive-tabs">
<NTabs type="segment">
<NTabPane name="camera" tab="摄像头列表">
<!-- v-if="queryParams.query && activeIndex == 0" -->
<div class="camera-list" ref="cameraListRef">
<camera
v-for="(item, index) in cameraList"
:key="index"
:name="item.address"
:source="item.flvUrl"
></camera>
<div v-if="!cameraList.length" class="empty">
<img src="../assets/empty.png" alt="" />
摄像头列表为空
</div>
<div v-else-if="queryParams.query && !total">
</div>
</NTabPane>
<NTabPane name="image" tab="图片列表">
<!-- v-else-if="queryParams.query && activeIndex == 1" -->
<div class="image-list">
<!-- <div class="image-item">
<img
src="https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF"
alt=""
/>
<div class="image-item" v-for="item in imageList" :key="item.PIC">
<!-- <img :src="`${protocol}//${host}/portal/r/${item}`" alt="" /> -->
<!-- <img :src="`http://81.68.90.198:8088/portal/r/${item}`" alt="" /> -->
<!-- TODO:test -->
<!-- :src="`${protocol}//${host}/portal/r/${item.PIC}`" -->
<NImage
class="n-image-item"
:src="`http://81.68.90.198:8088/portal/r/${item.PIC}`"
:previewed-img-props="{
draggable: true,
style: { border: 'none' },
}"
></NImage>
<div class="uplode-time">{{ item.CREATEDATE }}</div>
</div>
<div v-if="!imageList.length" class="empty">
<img src="../assets/empty.png" alt="" />
图片列表为空
</div>
</div>
</NTabPane>
</NTabs>
</div>
<!-- <div class="switch" v-if="queryParams.query">
<div
:class="`switch-item ${activeIndex == 0 ? 'active' : ''}`"
@click="activeIndex = 0"
>
摄像头列表
</div>
<div
:class="`switch-item ${activeIndex == 1 ? 'active' : ''}`"
@click="activeIndex = 1"
>
图片列表
</div>
<div class="image-item">
<img
src="https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF"
alt=""
/>
</div> -->
<div class="image-item" v-for="item in imageList" :key="item">
<img :src="`${protocol}//${host}/portal/r/${item}`" alt="" />
</div>
</div>
</div>
<div v-else class="empty">
<img src="../assets/empty.png" alt="" />
请选择项目
@ -53,9 +94,21 @@
import { reactive, ref } from "vue";
import camera from "./camera.vue";
import axios from "axios";
import {
NSelect,
NConfigProvider,
zhCN,
NTabs,
NTabPane,
NImage,
} from "naive-ui";
const cameraLoading = ref(true);
const projectList = ref([]);
const projectList = ref([
// {
// PROID: "123123",
// PRONAME: "项目12",
// },
]);
const cameraList = ref([]);
const imageList = ref([]);
const total = ref(0);
@ -67,15 +120,69 @@ const queryParams = reactive({
cmd: "com.awspaas.user.apps.cmp_camera_list",
pageNum: 1,
pageSize: 10,
sid: sid,
query: "",
// sid: sid,
// TODO:test
sid: "b9e99f78-2f6e-4d1c-aea9-4364f4191d30",
query: undefined,
});
// const activeIndex = ref(0);
const loadProjectList = async () => {
// const resp = await axios.get(`http://localhost:3000/project-list`);
// TODO:test
const resp = await axios.get(
"./jd?cmd=com.awspaas.user.apps.cmp_screen_getProjectList&sid=" + sid
"/api/portal/r/jd?cmd=com.awspaas.user.apps.cmp_screen_getProjectList&sid=b9e99f78-2f6e-4d1c-aea9-4364f4191d30"
);
// const resp = {
// data: [{
// "SUPERVISORID": "",
// "MAP": "40.763291,111.971932",
// "PROID": "HT6YXM-202303232023030010",
// "PROTYPE": "",
// "UPDATEDATE": 1679559863000,
// "SUPERVISOR": "",
// "DESIGNERID": "",
// "STCV": 800000,
// "PROOWNER": "六院本部/资产运营部/",
// "SURVEY": "",
// "UPDATEUSER": "13088880001",
// "SURVEYID": "",
// "APPENDIX": "",
// "PROCOST": 800000,
// "PRICELEADERID": "13088880004",
// "PRODEPTLEADERID": "13088880003",
// "PROLEADERID": "13088880002",
// "PROLEADER": "建设单位项目管理人员",
// "CONTRACTOR": "",
// "FLOORAREA": 2000,
// "CREATEUSER": "13088880001",
// "ISEND": 0,
// "RSTATUS": "1",
// "LEADERID": "13088880007",
// "PRICELEADER": "工程造价主管部门领导",
// "PROSTATUS": "1",
// "CBDATE": 1677600000000,
// "CONTRACTORID": "",
// "LEADER": "主要领导",
// "PRODEPTLEADER": "建设单位项目管理部门领导",
// "PRONAME": "A区科创园",
// "ASSETLEADER": "固定资产投资主管领导",
// "BINDID": "47856a34-afa4-4a9b-ae28-ba450a4ab798",
// "ORGID": "d8ee92f8-c80f-4741-b92c-cbc60c91d754",
// "PROADDRESS": "内蒙古自治区呼和浩特市赛罕区黄合少镇南地村",
// "DESIGNER": "",
// "PROCESSDEFID": "obj_a48ef53d7a2f4492bf440174e32bef3a",
// "PROPIC": "",
// "CREATEDATE": 1679559863000,
// "ASSETLEADERID": "13088880005",
// "CEDATE": 1703260800000,
// "PROFILE": "",
// "ACCDATE": 1703260800000,
// "ID": "a0fb6df5-48e4-442f-8b9d-da5861c1bf41"
// }]
// }
// const resp = await axios.get(
// "./jd?cmd=com.awspaas.user.apps.cmp_screen_getProjectList&sid=" + sid
// );
return resp.data;
};
@ -85,22 +192,70 @@ const projectClicked = () => {
// queryParams.query = proid;
queryParams.pageNum = 1;
loadCameraList();
loadImageList();
};
const loadCameraList = async () => {
cameraLoading.value = true;
const resp = await axios(`./jd`, {
// TODO:test
const resp = await axios(`/api/portal/r/jd`, {
params: queryParams,
});
// const resp = {
// data: {
// "code": 0,
// "rows": [{
// "address": "A区-科创园南门内",
// "flvUrl": "http://106.74.152.123:10000/sms/34020000002020000001/flv/hls/34020000001320000009_34020000001320000009.flv",
// "id": "2e627e9a-afe8-4065-9196-423467396401",
// "projectId": "HT6YXM-202303232023030010",
// "projectName": "A区科创园"
// }, {
// "address": "A区科创园东门内",
// "flvUrl": "http://106.74.152.123:10000/sms/34020000002020000001/flv/hls/34020000001320000008_34020000001320000008.flv",
// "id": "7ff7ba05-05e4-48e6-a43a-a0983ff1aa2b",
// "projectId": "HT6YXM-202303232023030010",
// "projectName": "A区科创园"
// }, {
// "address": "A区科创园东塔吊东北角球机",
// "flvUrl": "http://106.74.152.123:10000/sms/34020000002020000001/flv/hls/34020000001320000010_34020000001320000010.flv",
// "id": "e410e322-cceb-40b9-899b-4f3d2e8215eb",
// "projectId": "HT6YXM-202303232023030010",
// "projectName": "A区科创园"
// }, {
// "address": "A区科创园东塔吊西南角球机",
// "flvUrl": "http://106.74.152.123:10000/sms/34020000002020000001/flv/hls/34020000001320000011_34020000001320000011.flv",
// "id": "ff3e0079-068c-49f0-b1fe-3fa8544d91f2",
// "projectId": "HT6YXM-202303232023030010",
// "projectName": "A区科创园"
// }],
// "total": 4
// }
// }
cameraList.value = resp.data.rows;
total.value = resp.data.total;
cameraLoading.value = false;
if (total.value == 0) {
const rep = await axios.get(
`./jd?cmd=com.awspaas.user.apps.cmp_photo_list&sid=${sid}&proId=${queryParams.query}`
// if (total.value == 0) {
// const rep = await axios.get(
// `./jd?cmd=com.awspaas.user.apps.cmp_photo_list&sid=${sid}&proId=${queryParams.query}`
// ); // 摄像头列表为空时,获取图片列表
// const rep = await axios.get(
// `/api/portal/r/jd?cmd=com.awspaas.user.apps.cmp_photo_list&sid=${sid}&proId=${queryParams.query}`
// ); // 摄像头列表为空时,获取图片列表
// imageList.value = rep.data;
// }
};
const loadImageList = async () => {
// const resp = await axios.get(
// `./jd?cmd=com.awspaas.user.apps.cmp_photo_list&sid=${sid}&proId=${queryParams.query}`
// ); // 摄像头列表为空时,获取图片列表
// TODO:test
const resp = await axios.get(
`/api/portal/r/jd?cmd=com.awspaas.user.apps.cmp_photo_list&sid=b9e99f78-2f6e-4d1c-aea9-4364f4191d30&proId=${queryParams.query}`
); // 摄像头列表为空时,获取图片列表
imageList.value = rep.data;
}
imageList.value = resp.data;
};
const cameraListRef = ref();
// 滚动操作
@ -147,6 +302,14 @@ loadProjectList().then((data) => {
height: 100vh;
display: flex;
flex-direction: column;
overflow: scroll;
}
.naive-select-wrap {
width: 750px;
padding: 20px 20px 0px;
}
.naive-tabs {
padding: 20px 20px 0;
}
.nav-bar {
width: 750px;
@ -159,94 +322,68 @@ loadProjectList().then((data) => {
font-size: 32px;
position: fixed;
}
.switch {
width: 686px;
height: 76px;
background: #e4e4e4;
border-radius: 8px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 8px;
.switch-item {
width: 331px;
height: 60px;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
&.active {
background-color: #fff;
}
}
}
.camera-list {
// margin-top: 108px;
padding: 0px 20px 0px;
// padding: 0px 20px 0px;
}
.image-list {
padding: 0px 20px 0px;
// padding: 0px 20px 0px;
.image-item {
margin-bottom: 20px;
position: relative;
.uplode-time {
color: indianred;
position: absolute;
font-weight: bold;
right: 20px;
bottom: 20px;
background-color: rgba(255, 255, 255, 0.4);
// backdrop-filter: blur(14px) saturate(150%);
border-radius: 999px;
padding: 0px 10px;
}
// border-radius: 10px;
// overflow: hidden;
:deep(.n-image-item) {
img {
border-radius: 10px;
object-fit: cover;
height: 420px;
// width: 100%;
width: 710px;
height: 420px;
object-fit: cover;
border-radius: 10px;
}
}
// img {
// object-fit: cover;
// border-radius: 10px;
// height: 420px;
// width: 710px;
// }
}
}
// .site-list {
// flex: 1;
// margin-top: 20px;
// padding-bottom: 28px;
// .site-item {
// margin-left: 16px;
// margin-right: 16px;
// border-radius: 8px;
// background-color: #fff;
// &:not(:last-child) {
// margin-bottom: 40px;
// }
// .site-title {
// background-color: #949494;
// width: 120px;
// height: 40px;
// line-height: 20px;
// border-radius: 8px 0px 18px 0px;
// display: flex;
// justify-content: center;
// align-items: center;
// text {
// font-family: YSBiaoTiHei-regular;
// color: white;
// font-size: 20px;
// }
// }
// .camera-list {
// // margin-top: 108px;
// padding: 0px 20px 0px;
// }
// // .camera-list {
// // padding: 0 20px 0;
// // margin-top: 12px;
// // white-space: nowrap;
// // // width: 100%;
// // display: flex;
// // justify-content: space-between;
// // .camera-item {
// // // background-color: aquamarine;
// // .camera-image {
// // width: 200px;
// // height: 140px;
// // }
// // .camera-title {
// // font-size: 20px;
// // text-align: center;
// // }
// // }
// // }
// // .site-time {
// // padding-right: 20px;
// // margin-top: 26px;
// // border-radius: 0 0 8px 8px;
// // text-align: right;
// // height: 30px;
// // font-size: 20px;
// // color: #fff;
// // background-color: #d7d7d7;
// // }
// }
// }
#proj-select {
border: none;
box-shadow: 0 0 0 1px #dcdfe6 inset;

View File

@ -3,27 +3,62 @@
<div class="camera-name">
{{ props.name }}
</div>
<video class="camera-player" ref="previewVideoRef"></video>
<video ref="previewVideoRef" class="camera-player"></video>
<div class="overlay" @click="openPlayModal">
<!-- <img src="../assets/stLine-play-l@3x.png" alt="" width="40" height="40" /> -->
<span class="iconfont icon-bofang_o" style="font-size: 60px"></span>
</div>
<div v-if="showModal" class="modal-overlay" @click="closePlayModal">
<span
v-if="isFullscreen"
class="quit-fullscreen iconfont icon-quxiaoquanping_o"
@click.stop="exitFullscreen"
v-if="isFullscreen"
></span>
<div :class="`modal`" ref="rotateElementRef">
<div ref="rotateElementRef" :class="`modal`">
<video
:class="`camera-player ${isFullscreen ? 'fullscreen-video' : ''}`"
ref="videoElementRef"
:class="`camera-player ${isFullscreen ? 'fullscreen-video' : ''}`"
></video>
<div class="video-overlay" @click.stop="switchPlayStatus">
<div
class="iconfont icon-quanping_o fullscreen"
:class="`video-overlay ${isFullscreen ? 'fullscreen-video' : ''}`"
@click.stop="switchPlayStatus"
>
<div v-if="isFullscreen" class="arrow-control">
<div
:class="`up iconfont icon-up ${pressed.up ? 'pressed' : ''}`"
@touchend="moveCamera('stop')"
@touchstart="moveCamera('up')"
@contextmenu.prevent
></div>
<div
:class="`down iconfont icon-down ${
pressed.down ? 'pressed' : ''
}`"
@touchend="moveCamera('stop')"
@touchstart="moveCamera('down')"
@contextmenu.prevent
></div>
<div
:class="`left iconfont icon-left ${
pressed.left ? 'pressed' : ''
}`"
@touchend="moveCamera('stop')"
@touchstart="moveCamera('left')"
@contextmenu.prevent
></div>
<div
:class="`right iconfont icon-right ${
pressed.right ? 'pressed' : ''
}`"
@touchend="moveCamera('stop')"
@touchstart="moveCamera('right')"
@contextmenu.prevent
></div>
</div>
<div
v-if="!isFullscreen"
class="iconfont icon-quanping_o fullscreen"
@click.stop="videoFullscreen"
></div>
</div>
@ -31,8 +66,8 @@
</div>
</div>
</template>
<script setup name="camera">
import { nextTick, onMounted, onUnmounted, ref } from "vue";
<script name="camera" setup>
import { nextTick, onUnmounted, reactive, ref, toRefs } from "vue";
import flvjs from "flv.js";
import axios from "axios";
// import { useRoute } from "vue-router";
@ -46,6 +81,7 @@ const props = defineProps({
"https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
},
});
const { source } = toRefs(props);
// const route = useRoute();
// document.title = route.query.proname;
const showModal = ref(false);
@ -136,13 +172,51 @@ const rotateElementRef = ref();
const videoFullscreen = () => {
const scale = screen.availWidth / videoElementRef.value.offsetHeight;
videoElementRef.value.style.setProperty("--scale", scale);
videoElementRef.value.parentNode.style.setProperty("--scale", scale);
isFullscreen.value = true;
};
const token = ref("");
const loadToken = async () => {
const url = new URL(source.value);
const resp = await axios.get(
`${url.protocol}//${url.host}/api/v1/login?username=admin&password=de240967f3dff8b62df33e719d646e3e`
);
return resp.data.URLToken;
};
const pressed = reactive({
left: false,
right: false,
up: false,
down: false,
});
const moveCamera = async (arrow) => {
if (!token.value) {
token.value = await loadToken();
}
const serial = source.value.split("/flv/hls/")[1].split("_")[0];
const url = new URL(source.value);
await axios.get(
`${url.protocol}//${url.host}/api/v1/control/ptz?serial=${serial}&code=${serial}&command=${arrow}&token=${token.value}`
);
if (arrow === "stop") {
pressed.left = false;
pressed.right = false;
pressed.up = false;
pressed.down = false;
} else {
pressed[arrow] = true;
}
};
const exitFullscreen = () => {
isFullscreen.value = false;
};
onUnmounted(() => {
console.log("destroy player here");
function flvDestroy() {
flvPlayer.off("ERROR", flvPlayerEventHandler);
flvPlayer.pause();
@ -151,6 +225,7 @@ onUnmounted(() => {
flvPlayer.destroy();
flvPlayer = null;
}
if (flvPlayer) {
flvDestroy();
}
@ -158,6 +233,7 @@ onUnmounted(() => {
</script>
<style lang="scss" scoped>
@import "../assets/fonts/iconfont.css";
.camera-item {
// height: 300px;
background-color: white;
@ -171,13 +247,13 @@ onUnmounted(() => {
align-items: center;
position: absolute;
background-color: #c6c6c6;
border-radius: 10px 0 10px 0;
border-radius: 10px 10px 0 0;
color: white;
top: 0;
left: 0;
font-size: 20px;
height: 50px;
width: 160px;
width: 100%;
z-index: 99;
}
@ -198,6 +274,7 @@ onUnmounted(() => {
justify-content: center;
z-index: 99;
}
.modal-overlay {
width: 100vw;
height: 100vh;
@ -207,6 +284,7 @@ onUnmounted(() => {
z-index: 999;
// position: relative;
background-color: rgba(153, 153, 153, 0.363);
.quit-fullscreen {
position: fixed;
font-size: 60px;
@ -214,6 +292,7 @@ onUnmounted(() => {
bottom: 25px;
z-index: 100;
}
.modal {
position: absolute;
top: 50%;
@ -223,6 +302,7 @@ onUnmounted(() => {
// height: 60vw;
background-color: #fff;
border-radius: 2vw;
.fullscreen-video {
transform-origin: center;
transform: scale(var(--scale)) rotate(90deg);
@ -232,6 +312,7 @@ onUnmounted(() => {
width: 100%;
height: 100%;
position: absolute;
//background-color: #eee;
left: 0;
top: 0;
// display: flex;
@ -245,7 +326,73 @@ onUnmounted(() => {
right: 10px;
bottom: 10px;
font-size: 60px;
width: 60px;
height: 60px;
background-color: #eee;
color: #777;
display: flex;
justify-content: center;
align-items: center;
border-radius: 12px;
}
.exit-fullscreen {
position: absolute;
font-size: 40px;
color: white;
z-index: 99999;
right: 5px;
bottom: 5px;
}
.arrow-control {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.56);
position: absolute;
right: 25px;
bottom: 25px;
z-index: 9999;
.iconfont {
width: 32px;
height: 32px;
font-size: 32px;
position: absolute;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.iconfont.pressed {
background-color: gray;
}
.up {
left: 50%;
transform: translateX(-50%);
top: 4px;
}
.down {
left: 50%;
transform: translateX(-50%);
bottom: 4px;
}
.left {
top: 50%;
transform: translateY(-50%);
left: 4px;
}
.right {
top: 50%;
transform: translateY(-50%);
right: 4px;
}
}
}
}

View File

@ -1,16 +0,0 @@
import { openBlock as r, createElementBlock as s, renderSlot as _ } from "vue";
const l = (t, e) => {
const o = t.__vccOpts || t;
for (const [c, n] of e)
o[c] = n;
return o;
}, a = {}, i = { class: "scroll-wrap" };
function d(t, e) {
return r(), s("div", i, [
_(t.$slots, "default")
]);
}
const p = /* @__PURE__ */ l(a, [["render", d]]);
export {
p as List
};

View File

@ -1 +0,0 @@
(function(e,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(e=typeof globalThis<"u"?globalThis:e||self,t(e["infinite-list"]={},e.Vue))})(this,function(e,t){"use strict";const l="",c=(n,s)=>{const i=n.__vccOpts||n;for(const[f,_]of s)i[f]=_;return i},r={},u={class:"scroll-wrap"};function d(n,s){return t.openBlock(),t.createElementBlock("div",u,[t.renderSlot(n.$slots,"default")])}const o=c(r,[["render",d]]);e.List=o,e.default=o,Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

View File

@ -3,7 +3,8 @@ import { createApp } from "vue";
import App from "./App.vue";
import "modern-normalize/modern-normalize.css";
// import { createWebHashHistory, createRouter } from "vue-router";
import './assets/fonts/iconfont.css'
import "./assets/fonts/iconfont.css";
// import naive from "naive-ui";
// const Home = { template: "<div>Home</div>" };
// const About = { template: "<div>About</div>" };

View File

@ -2,6 +2,17 @@ const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,
devServer: {
proxy: {
"/api": {
target: "http://81.68.90.198:8088",
changeOrigin: true,
pathRewrite: {
"^/api": "", // 假设我们想把 localhost:8888/api/login 变成www.baidu.com/login 就需要这么做 js把路径中的/api去掉
},
},
},
},
publicPath: "./",
assetsDir: "../apps/com.awspaas.user.apps.cmp/monitor",
});

147
yarn.lock
View File

@ -965,6 +965,21 @@
"@babel/helper-validator-identifier" "^7.18.6"
to-fast-properties "^2.0.0"
"@css-render/plugin-bem@^0.15.10":
version "0.15.11"
resolved "https://registry.npmmirror.com/@css-render/plugin-bem/-/plugin-bem-0.15.11.tgz#250b853704af1fbb935b8fcd987839dcc9c95ce2"
integrity sha512-Bn8qadYPIz5DhZ4obTGHOJzeziQH6kY0+Fk5AEvwuuy378SLwwvXuuoechLjBHcgKkPCM03Oo4dDSGP/6NMdyw==
"@css-render/vue3-ssr@^0.15.10":
version "0.15.11"
resolved "https://registry.npmmirror.com/@css-render/vue3-ssr/-/vue3-ssr-0.15.11.tgz#d6646f69c7bd4b54485a40441ac60102822cd492"
integrity sha512-n+SuqLPbY30FUTM8slX75OaEG+c8XlTOFrAklekX2XQGvBbz9XdBE6hTEgGlV5kPcTMqTJeCG7Vzhs9/29VC7w==
"@emotion/hash@~0.8.0":
version "0.8.0"
resolved "https://registry.npmmirror.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
"@eslint/eslintrc@^0.4.3":
version "0.4.3"
resolved "https://registry.npmmirror.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
@ -1054,6 +1069,11 @@
"@jridgewell/resolve-uri" "^3.0.3"
"@jridgewell/sourcemap-codec" "^1.4.10"
"@juggle/resize-observer@^3.3.1":
version "3.4.0"
resolved "https://registry.npmmirror.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
"@leichtgewicht/ip-codec@^2.0.1":
version "2.0.4"
resolved "https://registry.npmmirror.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
@ -1228,6 +1248,23 @@
resolved "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
"@types/katex@^0.14.0":
version "0.14.0"
resolved "https://registry.npmmirror.com/@types/katex/-/katex-0.14.0.tgz#b84c0afc3218069a5ad64fe2a95321881021b5fe"
integrity sha512-+2FW2CcT0K3P+JMR8YG846bmDwplKUTsWgT2ENwdQ1UdVfRk3GQrh6Mi4sTopy30gI8Uau5CEqHTDZ6YvWIUPA==
"@types/lodash-es@^4.17.6":
version "4.17.6"
resolved "https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.6.tgz#c2ed4c8320ffa6f11b43eb89e9eaeec65966a0a0"
integrity sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==
dependencies:
"@types/lodash" "*"
"@types/lodash@*", "@types/lodash@^4.14.181":
version "4.14.191"
resolved "https://registry.npmmirror.com/@types/lodash/-/lodash-4.14.191.tgz#09511e7f7cba275acd8b419ddac8da9a6a79e2fa"
integrity sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==
"@types/mime@*":
version "3.0.1"
resolved "https://registry.npmmirror.com/@types/mime/-/mime-3.0.1.tgz#5f8f2bca0a5863cb69bc0b0acd88c96cb1d4ae10"
@ -1243,6 +1280,11 @@
resolved "https://registry.npmmirror.com/@types/node/-/node-18.7.18.tgz#633184f55c322e4fb08612307c274ee6d5ed3154"
integrity sha512-m+6nTEOadJZuTPkKR/SYK3A2d7FZrgElol9UP1Kae90VVU4a6mxnPuLiIW1m4Cq4gZ/nWb9GrdVXJCoCazDAbg==
"@types/node@~17.0.5":
version "17.0.45"
resolved "https://registry.npmmirror.com/@types/node/-/node-17.0.45.tgz#2c0fafd78705e7a18b7906b5201a522719dc5190"
integrity sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==
"@types/normalize-package-data@^2.4.0":
version "2.4.1"
resolved "https://registry.npmmirror.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
@ -1972,6 +2014,11 @@ astral-regex@^2.0.0:
resolved "https://registry.npmmirror.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
async-validator@^4.0.7:
version "4.2.5"
resolved "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz#c96ea3332a521699d0afaaceed510a54656c6339"
integrity sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==
async@^2.6.4:
version "2.6.4"
resolved "https://registry.npmmirror.com/async/-/async-2.6.4.tgz#706b7ff6084664cd7eae713f6f965433b5504221"
@ -2628,6 +2675,15 @@ css-minimizer-webpack-plugin@^3.0.2:
serialize-javascript "^6.0.0"
source-map "^0.6.1"
css-render@^0.15.10:
version "0.15.11"
resolved "https://registry.npmmirror.com/css-render/-/css-render-0.15.11.tgz#52a77cd8335394485be2417675121c2efe954bb5"
integrity sha512-hnLrHPUndVUTF5nmNPRey6hpixK02IPUGdEsm2xRjvJuewToyrVFx9Nmai8rgfVzhTFo5SJVh2PHAtzaIV8JKw==
dependencies:
"@emotion/hash" "~0.8.0"
"@types/node" "~17.0.5"
csstype "~3.0.5"
css-select@^4.1.3:
version "4.3.0"
resolved "https://registry.npmmirror.com/css-select/-/css-select-4.3.0.tgz#db7129b2846662fd8628cfc496abb2b59e41529b"
@ -2728,6 +2784,21 @@ csstype@^2.6.8:
resolved "https://registry.npmmirror.com/csstype/-/csstype-2.6.21.tgz#2efb85b7cc55c80017c66a5ad7cbd931fda3a90e"
integrity sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==
csstype@~3.0.5:
version "3.0.11"
resolved "https://registry.npmmirror.com/csstype/-/csstype-3.0.11.tgz#d66700c5eacfac1940deb4e3ee5642792d85cd33"
integrity sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==
date-fns-tz@^1.3.3:
version "1.3.7"
resolved "https://registry.npmmirror.com/date-fns-tz/-/date-fns-tz-1.3.7.tgz#e8e9d2aaceba5f1cc0e677631563081fdcb0e69a"
integrity sha512-1t1b8zyJo+UI8aR+g3iqr5fkUHWpd58VBx8J/ZSQ+w7YrGlw80Ag4sA86qkfCXRBLmMc4I2US+aPMd4uKvwj5g==
date-fns@^2.28.0:
version "2.29.3"
resolved "https://registry.npmmirror.com/date-fns/-/date-fns-2.29.3.tgz#27402d2fc67eb442b511b70bbdf98e6411cd68a8"
integrity sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==
debug@2.6.9:
version "2.6.9"
resolved "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@ -3199,6 +3270,11 @@ events@^3.2.0:
resolved "https://registry.npmmirror.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
evtd@^0.2.2, evtd@^0.2.4:
version "0.2.4"
resolved "https://registry.npmmirror.com/evtd/-/evtd-0.2.4.tgz#0aac39ba44d6926e6668948ac27618e0795b9d07"
integrity sha512-qaeGN5bx63s/AXgQo8gj6fBkxge+OoLddLniox5qtLAEY5HSnuSlISXVPxnSae1dWblvTh4/HoMIB+mbMsvZzw==
execa@^0.8.0:
version "0.8.0"
resolved "https://registry.npmmirror.com/execa/-/execa-0.8.0.tgz#d8d76bbc1b55217ed190fd6dd49d3c774ecfc8da"
@ -3650,6 +3726,11 @@ highlight.js@^10.7.1:
resolved "https://registry.npmmirror.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==
highlight.js@^11.5.0:
version "11.7.0"
resolved "https://registry.npmmirror.com/highlight.js/-/highlight.js-11.7.0.tgz#3ff0165bc843f8c9bce1fd89e2fda9143d24b11e"
integrity sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ==
hosted-git-info@^2.1.4:
version "2.8.9"
resolved "https://registry.npmmirror.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
@ -4155,6 +4236,11 @@ locate-path@^5.0.0:
dependencies:
p-locate "^4.1.0"
lodash-es@^4.17.21:
version "4.17.21"
resolved "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
lodash.debounce@^4.0.8:
version "4.0.8"
resolved "https://registry.npmmirror.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
@ -4417,6 +4503,30 @@ mz@^2.4.0:
object-assign "^4.0.1"
thenify-all "^1.0.0"
naive-ui@^2.34.2:
version "2.34.2"
resolved "https://registry.npmmirror.com/naive-ui/-/naive-ui-2.34.2.tgz#0dad81d2fe28178d07de344688a0c027695247bc"
integrity sha512-JyvtVqHzS0O0DyPFFg95cJW0fp2WCEPsjXbeplkxFIfJHCgp5KC75PjnBycryegjPiZNLn9WlRDxXU5emEqRfg==
dependencies:
"@css-render/plugin-bem" "^0.15.10"
"@css-render/vue3-ssr" "^0.15.10"
"@types/katex" "^0.14.0"
"@types/lodash" "^4.14.181"
"@types/lodash-es" "^4.17.6"
async-validator "^4.0.7"
css-render "^0.15.10"
date-fns "^2.28.0"
date-fns-tz "^1.3.3"
evtd "^0.2.4"
highlight.js "^11.5.0"
lodash "^4.17.21"
lodash-es "^4.17.21"
seemly "^0.3.6"
treemate "^0.3.11"
vdirs "^0.1.8"
vooks "^0.2.12"
vueuc "^0.4.47"
nanoid@^3.3.4:
version "3.3.4"
resolved "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
@ -5446,6 +5556,11 @@ schema-utils@^4.0.0:
ajv-formats "^2.1.1"
ajv-keywords "^5.0.0"
seemly@^0.3.6:
version "0.3.6"
resolved "https://registry.npmmirror.com/seemly/-/seemly-0.3.6.tgz#7ef97e8083dea00804965e2662f572a5df9cb18e"
integrity sha512-lEV5VB8BUKTo/AfktXJcy+JeXns26ylbMkIUco8CYREsQijuz4mrXres2Q+vMLdwkuLxJdIPQ8IlCIxLYm71Yw==
select-hose@^2.0.0:
version "2.0.0"
resolved "https://registry.npmmirror.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
@ -5988,6 +6103,11 @@ tr46@~0.0.3:
resolved "https://registry.npmmirror.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
treemate@^0.3.11:
version "0.3.11"
resolved "https://registry.npmmirror.com/treemate/-/treemate-0.3.11.tgz#7d52f8f69ab9ce326f8d139e0a3d1ffb25e48222"
integrity sha512-M8RGFoKtZ8dF+iwJfAJTOH/SM4KluKOKRJpjCMhI8bG3qB74zrFoArKZ62ll0Fr3mqkMJiQOmWYkdYgDeITYQg==
tslib@^2.0.3:
version "2.4.0"
resolved "https://registry.npmmirror.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
@ -6122,6 +6242,20 @@ vary@~1.1.2:
resolved "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
vdirs@^0.1.4, vdirs@^0.1.8:
version "0.1.8"
resolved "https://registry.npmmirror.com/vdirs/-/vdirs-0.1.8.tgz#a103bc43baca738f8dea912a7e9737154a19dbc2"
integrity sha512-H9V1zGRLQZg9b+GdMk8MXDN2Lva0zx72MPahDKc30v+DtwKjfyOSXWRIX4t2mhDubM1H09gPhWeth/BJWPHGUw==
dependencies:
evtd "^0.2.2"
vooks@^0.2.12, vooks@^0.2.4:
version "0.2.12"
resolved "https://registry.npmmirror.com/vooks/-/vooks-0.2.12.tgz#2b6e23330b77bac81c7f7a344c4ca3e9f4f6c373"
integrity sha512-iox0I3RZzxtKlcgYaStQYKEzWWGAduMmq+jS7OrNdQo1FgGfPMubGL3uGHOU9n97NIvfFDBGnpSvkWyb/NSn/Q==
dependencies:
evtd "^0.2.2"
vue-eslint-parser@^8.0.1:
version "8.3.0"
resolved "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz#5d31129a1b3dd89c0069ca0a1c88f970c360bd0d"
@ -6173,6 +6307,19 @@ vue@^3.2.13:
"@vue/server-renderer" "3.2.39"
"@vue/shared" "3.2.39"
vueuc@^0.4.47:
version "0.4.49"
resolved "https://registry.npmmirror.com/vueuc/-/vueuc-0.4.49.tgz#913e6fd629bdfd5bbed79bf108aec605720af2db"
integrity sha512-WarAC44a/Yx78CxkAgROYLq+LkAeCGA/6wHidVoFmHLbzyF3SiP2nzRNGD/8zJeJInXv18EnWK6A//eGgMMq8w==
dependencies:
"@css-render/vue3-ssr" "^0.15.10"
"@juggle/resize-observer" "^3.3.1"
css-render "^0.15.10"
evtd "^0.2.4"
seemly "^0.3.6"
vdirs "^0.1.4"
vooks "^0.2.4"
watchpack@^2.4.0:
version "2.4.0"
resolved "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"