cxc/monitor
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

temp

Browse Source
This commit is contained in:
ailanyin
2023-05-05 15:55:40 +08:00
parent 8c9afda249
commit 50f75ff394
18 changed files with 1268 additions and 856 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -8,11 +8,14 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"@vicons/ionicons5": "^0.12.0",
"autoprefixer": "^10.4.12", "autoprefixer": "^10.4.12",
"axios": "^1.1.3", "axios": "^1.1.3",
"core-js": "^3.8.3", "core-js": "^3.8.3",
"flv.js": "^1.6.2", "flv.js": "^1.6.2",
"lodash-es": "^4.17.21",
"modern-normalize": "^1.1.0", "modern-normalize": "^1.1.0",
"pinia": "^2.0.33",
"postcss-pxtorem": "^6.0.0", "postcss-pxtorem": "^6.0.0",
"vue": "^3.2.13" "vue": "^3.2.13"
}, },

18
public/index.html
View File

@ -1,11 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang=""> <html lang="en" style="touch-action: none">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0" /> <meta content="width=device-width,initial-scale=1.0" name="viewport"/>
<link rel="icon" href="<%= BASE_URL %>favicon.ico" /> <link href="<%= BASE_URL %>favicon.ico" rel="icon"/>
<!-- <title><%= htmlWebpackPlugin.options.title %></title> --> <!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
<script> <script>
var sid = '<#sid>'; var sid = '<#sid>';
@ -14,13 +14,13 @@
</head> </head>
<body> <body>
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to properly without JavaScript enabled. Please enable it to
continue.</strong> continue.</strong>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>
</html> </html>

24
src/App.vue
View File

@ -1,27 +1,43 @@
<template> <template>
<CameraList /> <CameraList/>
<!-- <n-config-provider :date-locale="dateZhCN" :locale="zhCN">-->
<!-- <CameraItem--> <!-- <CameraItem-->
<!-- name="测试球机视频"--> <!-- name="测试球机视频"-->
<!-- source="https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv"--> <!-- source="https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv"-->
<!-- />--> <!-- />-->
<!-- </n-config-provider>-->
<!-- source="/video/sms/34020000002020000001/flv/hls/34020000001320000011_34020000001320000011.flv"-->
<!-- source="https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-720p.flv"-->
<!-- source="http://106.74.152.123:10000/sms/34020000002020000001/flv/hls/34020000001320000011_34020000001320000011.flv"-->
</template> </template>
<script> <script>
// import {NConfigProvider, zhCN,dateZhCN} from 'naive-ui'
import CameraList from "./components/CameraList.vue"; import CameraList from "./components/CameraList.vue";
// import CameraItem from "@/components/CameraItem.vue"; import CameraItem from "@/components/CameraItem.vue";
import {useTokenStore} from "@/store/token";
// import List from "./infinite-list-vue.umd.cjs"; // import List from "./infinite-list-vue.umd.cjs";
export default { export default {
name: "App", name: "App",
computed: {
zhCN() {
return zhCN
}
},
components: { components: {
// CameraItem, CameraItem,
CameraList, CameraList,
}, },
mounted() {
const tokenStore = useTokenStore();
tokenStore.fetchToken();
},
}; };
</script> </script>
<style> <style>
#app { #app {
background-color: #f6f6f6; background-color: #f6f6f6;
//width: 100vw; //height: 100vh; //width: 100vw; //height: 100vh;
} }
</style> </style>

77
src/assets/fonts/demo.css
View File

@ -1,15 +1,11 @@
/* Logo 字体 */ /* Logo 字体 */
@font-face { @font-face {
font-family: "iconfont logo"; 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');
src: url("https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix") src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
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.woff?t=1545807318834") url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
format("woff"), url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
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 { .logo {
@ -52,6 +48,7 @@
color: #666; color: #666;
} }
#tabs .active { #tabs .active {
border-bottom-color: #f00; border-bottom-color: #f00;
color: #222; color: #222;
@ -218,35 +215,35 @@
margin: 1em 0; margin: 1em 0;
} }
.markdown > p, .markdown>p,
.markdown > blockquote, .markdown>blockquote,
.markdown > .highlight, .markdown>.highlight,
.markdown > ol, .markdown>ol,
.markdown > ul { .markdown>ul {
width: 80%; width: 80%;
} }
.markdown ul > li { .markdown ul>li {
list-style: circle; list-style: circle;
} }
.markdown > ul li, .markdown>ul li,
.markdown blockquote ul > li { .markdown blockquote ul>li {
margin-left: 20px; margin-left: 20px;
padding-left: 4px; padding-left: 4px;
} }
.markdown > ul li p, .markdown>ul li p,
.markdown > ol li p { .markdown>ol li p {
margin: 0.6em 0; margin: 0.6em 0;
} }
.markdown ol > li { .markdown ol>li {
list-style: decimal; list-style: decimal;
} }
.markdown > ol li, .markdown>ol li,
.markdown blockquote ol > li { .markdown blockquote ol>li {
margin-left: 20px; margin-left: 20px;
padding-left: 4px; padding-left: 4px;
} }
@ -263,7 +260,7 @@
font-weight: 600; font-weight: 600;
} }
.markdown > table { .markdown>table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0px; border-spacing: 0px;
empty-cells: show; empty-cells: show;
@ -272,21 +269,21 @@
margin-bottom: 24px; margin-bottom: 24px;
} }
.markdown > table th { .markdown>table th {
white-space: nowrap; white-space: nowrap;
color: #333; color: #333;
font-weight: 600; font-weight: 600;
} }
.markdown > table th, .markdown>table th,
.markdown > table td { .markdown>table td {
border: 1px solid #e9e9e9; border: 1px solid #e9e9e9;
padding: 8px 16px; padding: 8px 16px;
text-align: left; text-align: left;
} }
.markdown > table th { .markdown>table th {
background: #f7f7f7; background: #F7F7F7;
} }
.markdown blockquote { .markdown blockquote {
@ -321,11 +318,12 @@
display: inline-block; display: inline-block;
} }
.markdown > br, .markdown>br,
.markdown > p > br { .markdown>p>br {
clear: both; clear: both;
} }
.hljs { .hljs {
display: block; display: block;
background: white; background: white;
@ -406,7 +404,7 @@ pre[class*="language-"] {
color: black; color: black;
background: none; background: none;
text-shadow: 0 1px white; 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; text-align: left;
white-space: pre; white-space: pre;
word-spacing: normal; word-spacing: normal;
@ -441,6 +439,7 @@ code[class*="language-"] ::selection {
} }
@media print { @media print {
code[class*="language-"], code[class*="language-"],
pre[class*="language-"] { pre[class*="language-"] {
text-shadow: none; text-shadow: none;
@ -450,19 +449,19 @@ code[class*="language-"] ::selection {
/* Code blocks */ /* Code blocks */
pre[class*="language-"] { pre[class*="language-"] {
padding: 1em; padding: 1em;
margin: 0.5em 0; margin: .5em 0;
overflow: auto; overflow: auto;
} }
:not(pre) > code[class*="language-"], :not(pre)>code[class*="language-"],
pre[class*="language-"] { pre[class*="language-"] {
background: #f5f2f0; background: #f5f2f0;
} }
/* Inline code */ /* Inline code */
:not(pre) > code[class*="language-"] { :not(pre)>code[class*="language-"] {
padding: 0.1em; padding: .1em;
border-radius: 0.3em; border-radius: .3em;
white-space: normal; white-space: normal;
} }
@ -478,7 +477,7 @@ pre[class*="language-"] {
} }
.namespace { .namespace {
opacity: 0.7; opacity: .7;
} }
.token.property, .token.property,
@ -506,7 +505,7 @@ pre[class*="language-"] {
.language-css .token.string, .language-css .token.string,
.style .token.string { .style .token.string {
color: #9a6e3a; color: #9a6e3a;
background: hsla(0, 0%, 100%, 0.5); background: hsla(0, 0%, 100%, .5);
} }
.token.atrule, .token.atrule,
@ -517,7 +516,7 @@ pre[class*="language-"] {
.token.function, .token.function,
.token.class-name { .token.class-name {
color: #dd4a68; color: #DD4A68;
} }
.token.regex, .token.regex,

262
src/assets/fonts/demo_index.html
View File

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

11
src/assets/fonts/iconfont.css
View File

@ -1,8 +1,8 @@
@font-face { @font-face {
font-family: "iconfont"; /* Project id 3725111 */ font-family: "iconfont"; /* Project id 3725111 */
src: url("iconfont.woff2?t=1679885453951") format("woff2"), src: url('iconfont.woff2?t=1680768207227') format('woff2'),
url("iconfont.woff?t=1679885453951") format("woff"), url('iconfont.woff?t=1680768207227') format('woff'),
url("iconfont.ttf?t=1679885453951") format("truetype"); url('iconfont.ttf?t=1680768207227') format('truetype');
} }
.iconfont { .iconfont {
@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-close:before {
content: "\e613";
}
.icon-left:before { .icon-left:before {
content: "\e83d"; content: "\e83d";
} }
@ -52,3 +56,4 @@
.icon-quanping_o:before { .icon-quanping_o:before {
content: "\eb99"; content: "\eb99";
} }

70
src/assets/fonts/iconfont.js
View File

File diff suppressed because one or more lines are too long

7
src/assets/fonts/iconfont.json
View File

@ -5,6 +5,13 @@
"css_prefix_text": "icon-", "css_prefix_text": "icon-",
"description": "", "description": "",
"glyphs": [ "glyphs": [
{
"icon_id": "11230059",
"name": "close",
"font_class": "close",
"unicode": "e613",
"unicode_decimal": 58899
},
{ {
"icon_id": "34453005", "icon_id": "34453005",
"name": "left", "name": "left",

BIN
src/assets/fonts/iconfont.ttf
View File

Binary file not shown.

BIN
src/assets/fonts/iconfont.woff
View File

Binary file not shown.

BIN
src/assets/fonts/iconfont.woff2
View File

Binary file not shown.

50
src/assets/test.js Normal file
View File

@ -0,0 +1,50 @@
let df = [
0,
1800,
3600,
5400,
7200,
9000,
10800,
12600,
14400,
16200,
18000,
19800,
21600,
23400,
25200,
27000,
28800,
30600,
32400,
34200,
36000,
37800,
39600,
41400,
43200,
45000,
46800,
48600,
50400,
52200,
54000,
55800,
57600,
59400,
61200,
63000,
64800,
66600,
68400,
70200,
72000,
73800,
75600,
77400,
79200,
81000,
82800,
84600
]

462
src/components/CameraItem.vue
View File

@ -1,28 +1,63 @@
<template> <template>
<div class="camera-item"> <div ref="cameraItemRef" class="camera-item">
<div class="camera-name"> <div class="camera-name">
{{ props.name }} {{ props.name }}
</div> </div>
<!-- <n-image :src="previewImage" class="video-cover" object-fit="contain"></n-image>-->
<img :src="previewImage" alt="预览图" class="video-cover"/>
<!-- <video-->
<!-- v-show="false"-->
<!-- ref="previewVideoRef"-->
<!-- :class="`camera-player ${isFullscreen ? 'fullscreen-video' : ''}`"-->
<!-- ></video>-->
<div class="overlay" @click="openPlayModal">
<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 && !playbackFlvUrl"
class="quit-fullscreen iconfont icon-quxiaoquanping_o"
@click.stop="exitFullscreen"
></span>
<n-slider v-if="isFullscreen && playbackFlvUrl" v-model="playbackProcess" :format-tooltip="formatSeconds"
:marks="sliderMarks"
:max="isToday? getNowSeconds()-600 :86399" :min="0" :step="300"
class="time-slider"
reverse
vertical
@update-value="getPlaybackProcess"></n-slider>
<div ref="rotateElementRef" :class="`modal`">
<video <video
ref="videoElementRef" ref="videoElementRef"
:class="`camera-player ${isFullscreen ? 'fullscreen-video' : ''}`" :class="`camera-player ${isFullscreen ? 'fullscreen-video' : ''}`"
></video> ></video>
<div class="overlay" @click="openPlayModal">
<!-- <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"
></span>
<div ref="rotateElementRef" :class="`modal`">
<div <div
:class="`video-overlay ${isFullscreen ? 'fullscreen-video' : ''}`" :class="`video-overlay ${isFullscreen ? 'fullscreen-video' : ''}`"
@click.stop="switchPlayStatus" @click.stop="switchPlayStatus"
> >
<n-popover v-if="isFullscreen" :show="showPopover"
:show-arrow="false"
:style="`transform-origin: center;transform: rotate(90deg);`"
placement="left" trigger="manual">
<template #trigger>
<n-icon class="history-time-range" color="#fff" @click="showPopover =true">
<calendar-outline/>
</n-icon>
</template>
<div>
<n-config-provider :date-locale="dateZhCN" :locale="zhCN">
<n-date-picker v-model="playbackDate" format="yyyy-MM-dd HH:mm:ss" panel type="date"
@update-formatted-value="handleConfirmRange"/>
</n-config-provider>
</div>
</n-popover>
<n-icon v-if="playbackFlvUrl" class="exit-playback" color="#fff"
@click="playbackFlvUrl=null">
<log-out-outline/>
</n-icon>
<div <div
v-if="isFullscreen && props.name.includes('球机')" v-if="isFullscreen && !playbackFlvUrl &&props.name.includes('球机')"
class="arrow-control" class="arrow-control"
> >
<div <div
@ -61,15 +96,22 @@
class="iconfont icon-quanping_o fullscreen" class="iconfont icon-quanping_o fullscreen"
@click.stop="videoFullscreen" @click.stop="videoFullscreen"
></div> ></div>
<div class="close-button iconfont icon-close" @click="closePlayModal">
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script name="camera" setup> <script name="camera" setup>
import { nextTick, onMounted, onUnmounted, reactive, ref, toRefs } from "vue";
import {nextTick, onMounted, onUnmounted, reactive, ref, toRefs, watch} from "vue";
import {dateZhCN, NConfigProvider, NDatePicker, NIcon, NPopover, NSlider, zhCN} from 'naive-ui'
import {CalendarOutline, LogOutOutline} from '@vicons/ionicons5'
import flvjs from "flv.js"; import flvjs from "flv.js";
import axios from "axios"; import axios from "axios";
import {useTokenStore} from "@/store/token";
import {debounce} from "lodash-es";
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
const props = defineProps({ const props = defineProps({
@ -81,14 +123,56 @@ const props = defineProps({
default: null, default: null,
}, },
}); });
const { source } = toRefs(props); const {source} = toRefs(props);
const sliderMarks = {
0: '00:00',
// 3600: '01:00',
7200: '02:00',
// 10800: '03:00',
14400: '04:00',
// 18000: '05:00',
21600: '06:00',
// 25200: '07:00',
28800: '08:00',
// 32400: '09:00',
36000: '10:00',
// 39600: '11:00',
43200: '12:00',
// 46800: '13:00',
50400: '14:00',
// 54000: '15:00',
57600: '16:00',
// 61200: '17:00',
64800: '18:00',
// 68400: '19:00',
72000: '20:00',
// 75600: '21:00',
79200: '22:00',
// 82800: '23:00',
}
const playbackDate = ref(null)
const showModal = ref(false); const showModal = ref(false);
const isFullscreen = ref(false); const isFullscreen = ref(false);
const cameraItemRef = ref();
const rotateElementRef = ref(); const rotateElementRef = ref();
const videoElementRef = ref(); const videoElementRef = ref();
const previewImage = ref("");
const showPopover = ref(false)
let flvPlayer; let flvPlayer;
const tokenStore = useTokenStore();
onMounted(() => { onMounted(async () => {
if (!tokenStore.token) {
await tokenStore.fetchToken();
}
const serial = source.value.split("/flv/hls/")[1].split("_")[0];
const url = new URL(source.value);
previewImage.value = `${url.protocol}//${url.host}/api/v1/device/channelsnap?serial=${serial}&token=${tokenStore.token}`;
});
const openPlayModal = () => {
showModal.value = true;
nextTick(() => {
flvPlayer = flvjs.createPlayer({ flvPlayer = flvjs.createPlayer({
type: "flv", type: "flv",
url: props.source, url: props.source,
@ -97,34 +181,52 @@ onMounted(() => {
flvPlayer.attachMediaElement(videoElementRef.value); flvPlayer.attachMediaElement(videoElementRef.value);
flvPlayer.load(); flvPlayer.load();
flvPlayer.on("ERROR", flvPlayerEventHandler); flvPlayer.on("ERROR", flvPlayerEventHandler);
}
});
const openPlayModal = () => {
showModal.value = true;
nextTick(() => {
if (videoElementRef.value) {
rotateElementRef.value.appendChild(videoElementRef.value);
}
if (flvjs.isSupported()) {
flvPlayer.play(); flvPlayer.play();
} }
}); });
// document.addEventListener("touchstart", handleZoomStart)
// document.addEventListener("touchend", handleZoomEnd)
// document.addEventListener("touchmove", handleZooming)
// console.log('zoom event bind')
}; };
const getNowSeconds = () => {
// 获取今天的日期
const today = new Date();
const closePlayModal = () => { // 将日期设置为零点
// flvPlayer.on("ERROR", flvPlayerEventHandler); today.setHours(0, 0, 0, 0);
// flvPlayer.pause();
// flvPlayer.unload(); // 获取当前时间戳并计算与今天零点的时间差
// flvPlayer.detachMediaElement(); const now = new Date();
// flvPlayer.destroy(); const diff = now.getTime() - today.getTime();
// flvPlayer = null; const seconds = Math.floor(diff / 1000);
showModal.value = false;
nextTick(() => { return seconds
document.querySelector(".camera-item")?.appendChild(videoElementRef.value);
if (flvjs.isSupported()) { }
flvPlayer.pause(); const closePlayModal = async () => {
if (flvPlayer) {
flvDestroy();
} }
}); showModal.value = false;
/*关闭视频时,如果存在回放,则调用停止接口*/
if (!playbackStreamId.value) {
return
}
if (!tokenStore.token) {
await tokenStore.fetchToken();
}
const serial = source.value.split("/flv/hls/")[1].split("_")[0];
const url = new URL(source.value);
axios.get(
`${url.protocol}//${url.host}/api/v1/playback/stop?serial=${serial}&code=${serial}&streamid=${playbackStreamId.value}&token=${tokenStore.token}`
);
// document.removeEventListener("touchstart", handleZoomStart)
// document.removeEventListener("touchend", handleZoomEnd)
// document.removeEventListener("touchmove", handleZooming)
// console.log('zoom event unbind')
}; };
// url: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv", // url: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
@ -143,28 +245,36 @@ const switchPlayStatus = () => {
} }
}; };
const scale = ref(0)
/* 进入全屏 */ /* 进入全屏 */
const videoFullscreen = () => { const videoFullscreen = () => {
const scale = screen.availWidth / videoElementRef.value.offsetHeight; const _scale = screen.availWidth / videoElementRef.value.offsetHeight;
videoElementRef.value.style.setProperty("--scale", scale); scale.value = _scale
videoElementRef.value.parentNode.style.setProperty("--scale", scale); videoElementRef.value.style.setProperty("--scale", _scale);
videoElementRef.value.parentNode.style.setProperty("--scale", _scale);
isFullscreen.value = true; isFullscreen.value = true;
/*进入全屏时,绑定双指缩放事件*/
}; };
/**
* 格式化进度条时间
* @param seconds
* @return {string}
*/
function formatSeconds(seconds) {
const hours = Math.floor(seconds / 3600);
const minutes = Math.floor((seconds - hours * 3600) / 60);
const formattedHours = hours.toString().padStart(2, '0');
const formattedMinutes = minutes.toString().padStart(2, '0');
return `${formattedHours}:${formattedMinutes}`;
}
/* 退出全屏 */ /* 退出全屏 */
const exitFullscreen = () => { const exitFullscreen = () => {
isFullscreen.value = false; isFullscreen.value = false;
}; };
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({ const pressed = reactive({
left: false, left: false,
@ -179,13 +289,14 @@ const pressed = reactive({
* @return {Promise<void>} * @return {Promise<void>}
*/ */
const moveCamera = async (arrow) => { const moveCamera = async (arrow) => {
if (!token.value) { // event.preventDefault()
token.value = await loadToken(); if (!tokenStore.token) {
await tokenStore.fetchToken();
} }
const serial = source.value.split("/flv/hls/")[1].split("_")[0]; const serial = source.value.split("/flv/hls/")[1].split("_")[0];
const url = new URL(source.value); const url = new URL(source.value);
await axios.get( await axios.get(
`${url.protocol}//${url.host}/api/v1/control/ptz?serial=${serial}&code=${serial}&command=${arrow}&token=${token.value}` `${url.protocol}//${url.host}/api/v1/control/ptz?serial=${serial}&code=${serial}&command=${arrow}&token=${tokenStore.token}`
); );
if (arrow === "stop") { if (arrow === "stop") {
pressed.left = false; pressed.left = false;
@ -197,22 +308,197 @@ const moveCamera = async (arrow) => {
} }
}; };
onUnmounted(() => { function flvDestroy() {
console.log("destroy player here");
function flvDestroy() {
flvPlayer.off("ERROR", flvPlayerEventHandler); flvPlayer.off("ERROR", flvPlayerEventHandler);
flvPlayer.pause(); flvPlayer.pause();
flvPlayer.unload(); flvPlayer.unload();
flvPlayer.detachMediaElement(); flvPlayer.detachMediaElement();
flvPlayer.destroy(); flvPlayer.destroy();
flvPlayer = null; flvPlayer = null;
} }
function flvCreate(url) {
flvPlayer = flvjs.createPlayer({
type: "flv",
url: url,
});
if (flvjs.isSupported()) {
flvPlayer.attachMediaElement(videoElementRef.value);
flvPlayer.load();
flvPlayer.on("ERROR", flvPlayerEventHandler);
flvPlayer.play();
}
}
const playbackProcess = ref(0)
/**
* 调整回放进度到指定的秒数
* @param value 秒
* @return {Promise<void>}
*/
const getPlaybackProcess = debounce(async (value) => {
if (!tokenStore.token) {
await tokenStore.fetchToken();
}
const serial = source.value.split("/flv/hls/")[1].split("_")[0];
const url = new URL(source.value);
axios.get(
`${url.protocol}//${url.host}/api/v1/playback/control?serial=${serial}&code=${serial}&streamid=${playbackStreamId.value}&command=play&range=${value}&token=${tokenStore.token}`
);
}, 500)
onUnmounted(() => {
console.log("destroy player here");
if (flvPlayer) { if (flvPlayer) {
flvDestroy(); flvDestroy();
} }
// document.removeEventListener("touchstart", handleZoomStart)
// document.removeEventListener("touchend", handleZoomEnd)
// document.removeEventListener("touchmove", handleZooming)
}); });
const lastDistance = ref(0)
const scaleFactor = ref(1)
const zoomStatus = ref(0) // 0 stop, 1 zoomin, 2 zoomout
const isToday = ref(false)
const handleConfirmRange = (value) => {
console.log(value)
if (value) {
showPopover.value = false
startPlayHistory(value)
}
const _date = new Date(value)
const now = new Date()
isToday.value = _date.getDate() === now.getDate()
console.log(playbackDate.value)
}
const playbackFlvUrl = ref(null)/*回放视频url*/
const playbackStreamId = ref(null)/*回放id*/
/**
* 开始播放回放
* @param value
* @return {Promise<void>}
*/
const startPlayHistory = async (value) => {
const starttime = value.replace(' ', 'T')
if (!tokenStore.token) {
await tokenStore.fetchToken();
}
const serial = source.value.split("/flv/hls/")[1].split("_")[0];
const url = new URL(source.value);
const resp = await axios.get(
`${url.protocol}//${url.host}/api/v1/playback/start?serial=${serial}&code=${serial}&starttime=${starttime}&endtime=${starttime.replace('00:00:00', '23:59:59')}&token=${tokenStore.token}`
);
playbackStreamId.value = resp.data.StreamID
playbackFlvUrl.value = resp.data.FLV
}
/*监听回放url,销毁原播放器,如果有值则播放回放,没有则播放原视频*/
watch(playbackFlvUrl, async (url, oldUrl) => {
flvDestroy()
if (url) {
flvCreate(url)
} else {
flvCreate(props.source)
}
if (oldUrl) {
if (!playbackStreamId.value) {
return
}
if (!tokenStore.token) {
await tokenStore.fetchToken();
}
const serial = source.value.split("/flv/hls/")[1].split("_")[0];
const _url = new URL(source.value);
axios.get(
`${_url.protocol}//${_url.host}/api/v1/playback/stop?serial=${serial}&code=${serial}&streamid=${playbackStreamId.value}&token=${tokenStore.token}`
);
}
})
/*摄像头缩放操作*/
function handleZoomStart(event) {
console.log(event.touches.length)
if (event.touches.length === 2) {
// 计算两个手指的距离
let touch1 = event.touches[0];
let touch2 = event.touches[1];
lastDistance.value = Math.sqrt(
Math.pow(touch2.pageX - touch1.pageX, 2) +
Math.pow(touch2.pageY - touch1.pageY, 2)
);
// 防止整个网页被放大
event.preventDefault();
}
}
function handleZooming(event) {
console.log('zoom in')
if (event.touches.length === 2) {
// 计算两个手指的距离
let touch1 = event.touches[0];
let touch2 = event.touches[1];
let distance = Math.sqrt(
Math.pow(touch2.pageX - touch1.pageX, 2) +
Math.pow(touch2.pageY - touch1.pageY, 2)
);
if (distance - lastDistance.value > 0) {
/*如果距离增加则放大*/
zoomStatus.value = 1
} else if (lastDistance.value - distance > 0) {
/*如果距离减小则缩小*/
zoomStatus.value = 2
}
// 计算缩放比例
scaleFactor.value *= distance / lastDistance.value;
// 保存上一次的距离
lastDistance.value = distance;
console.log(scaleFactor.value)
console.log(lastDistance.value)
// 防止整个网页被放大
event.preventDefault();
}
}
function handleZoomEnd(event) {
zoomStatus.value = 0
if (event.touches.length < 2) {
// 重置缩放比例和距离
scaleFactor.value = 1;
lastDistance.value = 0;
}
}
// watch(zoomStatus, async (value, oldValue) => {
// if (!tokenStore.token) {
// await tokenStore.fetchToken();
// }
// const serial = source.value.split("/flv/hls/")[1].split("_")[0];
// const url = new URL(source.value);
// if (value === 0) {
// await axios.get(
// `${url.protocol}//${url.host}/api/v1/control/ptz?serial=${serial}&code=${serial}&command=stop&token=${tokenStore.token}`
// );
// } else if (value === 1) {
// oldValue !== 0 && await axios.get(
// `${url.protocol}//${url.host}/api/v1/control/ptz?serial=${serial}&code=${serial}&command=stop&token=${tokenStore.token}`
// );
// await axios.get(
// `${url.protocol}//${url.host}/api/v1/control/ptz?serial=${serial}&code=${serial}&command=zoomin&token=${tokenStore.token}`
// );
// } else if (value === 2) {
// oldValue !== 0 && await axios.get(
// `${url.protocol}//${url.host}/api/v1/control/ptz?serial=${serial}&code=${serial}&command=stop&token=${tokenStore.token}`
// );
// await axios.get(
// `${url.protocol}//${url.host}/api/v1/control/ptz?serial=${serial}&code=${serial}&command=zoomout&token=${tokenStore.token}`
// );
// }
// })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../assets/fonts/iconfont.css"; @import "../assets/fonts/iconfont.css";
@ -240,6 +526,13 @@ onUnmounted(() => {
z-index: 99; z-index: 99;
} }
.video-cover {
border-radius: 10px;
object-fit: contain;
width: 100%;
height: 400px;
}
.camera-player { .camera-player {
width: 100%; width: 100%;
height: 400px; height: 400px;
@ -267,6 +560,16 @@ onUnmounted(() => {
z-index: 999; z-index: 999;
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
.time-slider {
//width: 80vh;
//transform-origin: center;
//transform: rotate(90deg);
position: absolute;
z-index: 99;
//left: 20px;
}
.quit-fullscreen { .quit-fullscreen {
position: fixed; position: fixed;
font-size: 60px; font-size: 60px;
@ -285,7 +588,24 @@ onUnmounted(() => {
background-color: #fff; background-color: #fff;
border-radius: 2vw; border-radius: 2vw;
.history-time-range {
border-radius: 6px;
background: rgb(156 163 175);
position: absolute;
left: 20px;
top: 20px
}
.exit-playback {
border-radius: 6px;
background: rgb(156 163 175);
position: absolute;
left: 54px;
top: 20px
}
.fullscreen-video { .fullscreen-video {
//background-color: #fff;
transform-origin: center; transform-origin: center;
transform: scale(var(--scale)) rotate(90deg); transform: scale(var(--scale)) rotate(90deg);
} }
@ -297,6 +617,16 @@ onUnmounted(() => {
z-index: 999999; z-index: 999999;
left: 0; left: 0;
top: 0; top: 0;
.close-button {
position: absolute;
top: 6px;
right: 6px;
color: #fff;
font-size: 48px;
border-radius: 50%;
}
.fullscreen { .fullscreen {
position: absolute; position: absolute;
z-index: 99; z-index: 99;
@ -376,4 +706,20 @@ onUnmounted(() => {
} }
} }
} }
</style>
<style>
.n-slider {
background-color: rgb(209 213 219);
}
.n-slider-mark {
transform: translateY(calc(-50% + var(--n-dot-height) / 2)) rotate(90deg) !important;
color: springgreen;
}
.n-slider-handle-indicator {
transform-origin: center;
transform: rotate(90deg);
}
</style> </style>

24
src/components/CameraList.vue
View File

@ -24,7 +24,7 @@
:source="item.flvUrl" :source="item.flvUrl"
></camera> ></camera>
<div v-if="!cameraList.length" class="empty"> <div v-if="!cameraList.length" class="empty">
<img alt="" src="../assets/empty.png" /> <img alt="" src="../assets/empty.png"/>
摄像头列表为空 摄像头列表为空
</div> </div>
</div> </div>
@ -37,18 +37,19 @@
<!-- <img :src="`http://81.68.90.198:8088/portal/r/${item}`" alt="" /> --> <!-- <img :src="`http://81.68.90.198:8088/portal/r/${item}`" alt="" /> -->
<!-- TODO:test --> <!-- TODO:test -->
<!-- :src="`${protocol}//${host}/portal/r/${item.PIC}`" --> <!-- :src="`${protocol}//${host}/portal/r/${item.PIC}`" -->
<!-- :src="`http://81.68.90.198:8088/portal/r/${item.PIC}`"-->
<NImage <NImage
:previewed-img-props="{ :previewed-img-props="{
draggable: true, draggable: true,
style: { border: 'none' }, style: { border: 'none' },
}" }"
:src="`http://81.68.90.198:8088/portal/r/${item.PIC}`" :src="`${protocol}//${host}/portal/r/${item.PIC}`"
class="n-image-item" class="n-image-item"
></NImage> ></NImage>
<div class="uplode-time">{{ item.CREATEDATE }}</div> <div class="uplode-time">{{ item.CREATEDATE }}</div>
</div> </div>
<div v-if="!imageList.length" class="empty"> <div v-if="!imageList.length" class="empty">
<img alt="" src="../assets/empty.png" /> <img alt="" src="../assets/empty.png"/>
图片列表为空 图片列表为空
</div> </div>
</div> </div>
@ -56,23 +57,16 @@
</NTabs> </NTabs>
</div> </div>
<div v-else class="empty"> <div v-else class="empty">
<img alt="" src="../assets/empty.png" /> <img alt="" src="../assets/empty.png"/>
请选择项目 请选择项目
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { reactive, ref } from "vue"; import {reactive, ref} from "vue";
import axios from "axios"; import axios from "axios";
import { import {NConfigProvider, NImage, NSelect, NTabPane, NTabs, zhCN,} from "naive-ui";
NConfigProvider,
NImage,
NSelect,
NTabPane,
NTabs,
zhCN,
} from "naive-ui";
import Camera from "./CameraItem.vue"; import Camera from "./CameraItem.vue";
const cameraLoading = ref(true); const cameraLoading = ref(true);
@ -226,7 +220,7 @@ const loadImageList = async () => {
const cameraListRef = ref(); const cameraListRef = ref();
// 滚动操作 // 滚动操作
const handleScroll = (e) => { const handleScroll = (e) => {
console.log(e); // console.log(e);
if (!cameraListRef.value) return; if (!cameraListRef.value) return;
let dom = document.documentElement; let dom = document.documentElement;
//文档内容实际高度（包括超出视窗的溢出部分） //文档内容实际高度（包括超出视窗的溢出部分）
@ -236,7 +230,7 @@ const handleScroll = (e) => {
//窗口可视范围高度 //窗口可视范围高度
let clientHeight = let clientHeight =
dom.innerHeight || Math.min(dom.clientHeight, dom.clientHeight); dom.innerHeight || Math.min(dom.clientHeight, dom.clientHeight);
console.log(clientHeight, scrollTop, scrollHeight); // console.log(clientHeight, scrollTop, scrollHeight);
if (clientHeight + scrollTop >= scrollHeight) { if (clientHeight + scrollTop >= scrollHeight) {
if (queryParams.pageSize * queryParams.pageNum > total.value) return; if (queryParams.pageSize * queryParams.pageNum > total.value) return;
if (cameraLoading.value) return; if (cameraLoading.value) return;

6
src/main.js
View File

@ -5,10 +5,10 @@ import "modern-normalize/modern-normalize.css";
// import { createWebHashHistory, createRouter } from "vue-router"; // import { createWebHashHistory, createRouter } from "vue-router";
import "./assets/fonts/iconfont.css"; import "./assets/fonts/iconfont.css";
// import naive from "naive-ui"; // import naive from "naive-ui";
import { createPinia } from "pinia";
// const Home = { template: "<div>Home</div>" }; // const Home = { template: "<div>Home</div>" };
// const About = { template: "<div>About</div>" }; // const About = { template: "<div>About</div>" };
const pinia = createPinia();
// 2. 定义一些路由 // 2. 定义一些路由
// 每个路由都需要映射到一个组件。 // 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。 // 我们后面再讨论嵌套路由。
@ -26,4 +26,4 @@ import "./assets/fonts/iconfont.css";
// routes, // `routes: routes` 的缩写 // routes, // `routes: routes` 的缩写
// }); // });
createApp(App).mount("#app"); createApp(App).use(pinia).mount("#app");

22
src/store/token.js Normal file
View File

@ -0,0 +1,22 @@
import { defineStore } from "pinia";
import axios from "axios";
// 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useTokenStore = defineStore("token", {
// 其他配置...
state: () => ({ token: "" }),
actions: {
async fetchToken() {
try {
const resp = await axios.get(
"http://106.74.152.123:10000/api/v1/login?username=admin&password=de240967f3dff8b62df33e719d646e3e"
);
this.token = resp.data.URLToken;
console.log(resp.data.URLToken);
} catch (e) {
console.log(e);
}
},
},
});

13
vue.config.js
View File

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

23
yarn.lock
View File

@ -1339,6 +1339,11 @@
dependencies: dependencies:
"@types/node" "*" "@types/node" "*"
"@vicons/ionicons5@^0.12.0":
version "0.12.0"
resolved "https://registry.npmmirror.com/@vicons/ionicons5/-/ionicons5-0.12.0.tgz#c39fda04420dfae3b58053faf8aaf3555253299d"
integrity sha512-Iy1EUVRpX0WWxeu1VIReR1zsZLMc4fqpt223czR+Rpnrwu7pt46nbnC2ycO7ItI/uqDLJxnbcMC7FujKs9IfFA==
"@vue/babel-helper-vue-jsx-merge-props@^1.4.0": "@vue/babel-helper-vue-jsx-merge-props@^1.4.0":
version "1.4.0" version "1.4.0"
resolved "https://registry.npmmirror.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.4.0.tgz#8d53a1e21347db8edbe54d339902583176de09f2" resolved "https://registry.npmmirror.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.4.0.tgz#8d53a1e21347db8edbe54d339902583176de09f2"
@ -1638,6 +1643,11 @@
optionalDependencies: optionalDependencies:
prettier "^1.18.2 || ^2.0.0" prettier "^1.18.2 || ^2.0.0"
"@vue/devtools-api@^6.5.0":
version "6.5.0"
resolved "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.5.0.tgz#98b99425edee70b4c992692628fa1ea2c1e57d07"
integrity sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==
"@vue/reactivity-transform@3.2.39": "@vue/reactivity-transform@3.2.39":
version "3.2.39" version "3.2.39"
resolved "https://registry.npmmirror.com/@vue/reactivity-transform/-/reactivity-transform-3.2.39.tgz#da6ae6c8fd77791b9ae21976720d116591e1c4aa" resolved "https://registry.npmmirror.com/@vue/reactivity-transform/-/reactivity-transform-3.2.39.tgz#da6ae6c8fd77791b9ae21976720d116591e1c4aa"
@ -4874,6 +4884,14 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
resolved "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42" resolved "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA== integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
pinia@^2.0.33:
version "2.0.33"
resolved "https://registry.npmmirror.com/pinia/-/pinia-2.0.33.tgz#b70065be697874d5824e9792f59bd5d87ddb5e7d"
integrity sha512-HOj1yVV2itw6rNIrR2f7+MirGNxhORjrULL8GWgRwXsGSvEqIQ+SE0MYt6cwtpegzCda3i+rVTZM+AM7CG+kRg==
dependencies:
"@vue/devtools-api" "^6.5.0"
vue-demi "*"
pkg-dir@^4.1.0: pkg-dir@^4.1.0:
version "4.2.0" version "4.2.0"
resolved "https://registry.npmmirror.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3" resolved "https://registry.npmmirror.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
@ -6256,6 +6274,11 @@ vooks@^0.2.12, vooks@^0.2.4:
dependencies: dependencies:
evtd "^0.2.2" evtd "^0.2.2"
vue-demi@*:
version "0.13.11"
resolved "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz#7d90369bdae8974d87b1973564ad390182410d99"
integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==
vue-eslint-parser@^8.0.1: vue-eslint-parser@^8.0.1:
version "8.3.0" version "8.3.0"
resolved "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz#5d31129a1b3dd89c0069ca0a1c88f970c360bd0d" resolved "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz#5d31129a1b3dd89c0069ca0a1c88f970c360bd0d"