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"
},
"dependencies": {
"@vicons/ionicons5": "^0.12.0",
"autoprefixer": "^10.4.12",
"axios": "^1.1.3",
"core-js": "^3.8.3",
"flv.js": "^1.6.2",
"lodash-es": "^4.17.21",
"modern-normalize": "^1.1.0",
"pinia": "^2.0.33",
"postcss-pxtorem": "^6.0.0",
"vue": "^3.2.13"
},

8
public/index.html
View File

@ -1,11 +1,11 @@
<!DOCTYPE html>
<html lang="">
<html lang="en" style="touch-action: none">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
<meta content="width=device-width,initial-scale=1.0" name="viewport"/>
<link href="<%= BASE_URL %>favicon.ico" rel="icon"/>
<!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
<script>
var sid = '<#sid>';

20
src/App.vue
View File

@ -1,21 +1,37 @@
<template>
<CameraList/>
<!-- <n-config-provider :date-locale="dateZhCN" :locale="zhCN">-->
<!-- <CameraItem-->
<!-- name="测试球机视频"-->
<!-- 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>
<script>
// import {NConfigProvider, zhCN,dateZhCN} from 'naive-ui'
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";
export default {
name: "App",
computed: {
zhCN() {
return zhCN
}
},
components: {
// CameraItem,
CameraItem,
CameraList,
},
mounted() {
const tokenStore = useTokenStore();
tokenStore.fetchToken();
},
};
</script>

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

@ -1,15 +1,11 @@
/* 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 {
@ -52,6 +48,7 @@
color: #666;
}
#tabs .active {
border-bottom-color: #f00;
color: #222;
@ -286,7 +283,7 @@
}
.markdown>table th {
background: #f7f7f7;
background: #F7F7F7;
}
.markdown blockquote {
@ -326,6 +323,7 @@
clear: both;
}
.hljs {
display: block;
background: white;
@ -406,7 +404,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;
@ -441,6 +439,7 @@ code[class*="language-"] ::selection {
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
@ -450,7 +449,7 @@ code[class*="language-"] ::selection {
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: 0.5em 0;
margin: .5em 0;
overflow: auto;
}
@ -461,8 +460,8 @@ pre[class*="language-"] {
/* Inline code */
:not(pre)>code[class*="language-"] {
padding: 0.1em;
border-radius: 0.3em;
padding: .1em;
border-radius: .3em;
white-space: normal;
}
@ -478,7 +477,7 @@ pre[class*="language-"] {
}
.namespace {
opacity: 0.7;
opacity: .7;
}
.token.property,
@ -506,7 +505,7 @@ pre[class*="language-"] {
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, 0.5);
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
@ -517,7 +516,7 @@ pre[class*="language-"] {
.token.function,
.token.class-name {
color: #dd4a68;
color: #DD4A68;
}
.token.regex,

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

@ -3,22 +3,11 @@
<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>
@ -39,7 +28,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;
}
@ -47,18 +36,10 @@
</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>
@ -66,16 +47,19 @@
<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">&#xe613;</span>
<div class="name">close</div>
<div class="code-name">&amp;#xe613;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe83d;</span>
<div class="name">left</div>
@ -135,10 +119,11 @@
<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>
@ -146,21 +131,16 @@
<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=1679885453951') format('woff2'),
url('iconfont.woff?t=1679885453951') format('woff'),
url('iconfont.ttf?t=1679885453951') format('truetype');
src: url('iconfont.woff2?t=1680768207227') format('woff2'),
url('iconfont.woff?t=1680768207227') format('woff'),
url('iconfont.ttf?t=1680768207227') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@ -179,113 +159,147 @@
>&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-close"></span>
<div class="name">
close
</div>
<div class="code-name">.icon-close
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-left"></span>
<div class="name">left</div>
<div class="code-name">.icon-left</div>
<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>
<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>
<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>
<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>
<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>
<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-close"></use>
</svg>
<div class="name">close</div>
<div class="code-name">#icon-close</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-left"></use>
@ -365,24 +379,17 @@
<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>
@ -408,26 +415,27 @@
</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>

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

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 3725111 */
src: url("iconfont.woff2?t=1679885453951") format("woff2"),
url("iconfont.woff?t=1679885453951") format("woff"),
url("iconfont.ttf?t=1679885453951") format("truetype");
src: url('iconfont.woff2?t=1680768207227') format('woff2'),
url('iconfont.woff?t=1680768207227') format('woff'),
url('iconfont.ttf?t=1680768207227') format('truetype');
}
.iconfont {
@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-close:before {
content: "\e613";
}
.icon-left:before {
content: "\e83d";
}
@ -52,3 +56,4 @@
.icon-quanping_o:before {
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-",
"description": "",
"glyphs": [
{
"icon_id": "11230059",
"name": "close",
"font_class": "close",
"unicode": "e613",
"unicode_decimal": 58899
},
{
"icon_id": "34453005",
"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
]

456
src/components/CameraItem.vue
View File

@ -1,28 +1,63 @@
<template>
<div class="camera-item">
<div ref="cameraItemRef" class="camera-item">
<div class="camera-name">
{{ props.name }}
</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
ref="videoElementRef"
: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"
class="quit-fullscreen iconfont icon-quxiaoquanping_o"
@click.stop="exitFullscreen"
></span>
<div ref="rotateElementRef" :class="`modal`">
<div
:class="`video-overlay ${isFullscreen ? 'fullscreen-video' : ''}`"
@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
v-if="isFullscreen && props.name.includes('球机')"
v-if="isFullscreen && !playbackFlvUrl &&props.name.includes('球机')"
class="arrow-control"
>
<div
@ -61,15 +96,22 @@
class="iconfont icon-quanping_o fullscreen"
@click.stop="videoFullscreen"
></div>
<div class="close-button iconfont icon-close" @click="closePlayModal">
</div>
</div>
</div>
</div>
</div>
</template>
<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 axios from "axios";
import {useTokenStore} from "@/store/token";
import {debounce} from "lodash-es";
// eslint-disable-next-line no-undef
const props = defineProps({
@ -82,13 +124,55 @@ const props = defineProps({
},
});
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 isFullscreen = ref(false);
const cameraItemRef = ref();
const rotateElementRef = ref();
const videoElementRef = ref();
const previewImage = ref("");
const showPopover = ref(false)
let flvPlayer;
onMounted(() => {
const tokenStore = useTokenStore();
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({
type: "flv",
url: props.source,
@ -97,34 +181,52 @@ onMounted(() => {
flvPlayer.attachMediaElement(videoElementRef.value);
flvPlayer.load();
flvPlayer.on("ERROR", flvPlayerEventHandler);
}
});
const openPlayModal = () => {
showModal.value = true;
nextTick(() => {
if (videoElementRef.value) {
rotateElementRef.value.appendChild(videoElementRef.value);
}
if (flvjs.isSupported()) {
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();
// 将日期设置为零点
today.setHours(0, 0, 0, 0);
// 获取当前时间戳并计算与今天零点的时间差
const now = new Date();
const diff = now.getTime() - today.getTime();
const seconds = Math.floor(diff / 1000);
return seconds
const closePlayModal = () => {
// flvPlayer.on("ERROR", flvPlayerEventHandler);
// flvPlayer.pause();
// flvPlayer.unload();
// flvPlayer.detachMediaElement();
// flvPlayer.destroy();
// flvPlayer = null;
showModal.value = false;
nextTick(() => {
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",
@ -143,28 +245,36 @@ const switchPlayStatus = () => {
}
};
const scale = ref(0)
/* 进入全屏 */
const videoFullscreen = () => {
const scale = screen.availWidth / videoElementRef.value.offsetHeight;
videoElementRef.value.style.setProperty("--scale", scale);
videoElementRef.value.parentNode.style.setProperty("--scale", scale);
const _scale = screen.availWidth / videoElementRef.value.offsetHeight;
scale.value = _scale
videoElementRef.value.style.setProperty("--scale", _scale);
videoElementRef.value.parentNode.style.setProperty("--scale", _scale);
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 = () => {
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({
left: false,
@ -179,13 +289,14 @@ const pressed = reactive({
* @return {Promise<void>}
*/
const moveCamera = async (arrow) => {
if (!token.value) {
token.value = await loadToken();
// event.preventDefault()
if (!tokenStore.token) {
await tokenStore.fetchToken();
}
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}`
`${url.protocol}//${url.host}/api/v1/control/ptz?serial=${serial}&code=${serial}&command=${arrow}&token=${tokenStore.token}`
);
if (arrow === "stop") {
pressed.left = false;
@ -197,9 +308,6 @@ const moveCamera = async (arrow) => {
}
};
onUnmounted(() => {
console.log("destroy player here");
function flvDestroy() {
flvPlayer.off("ERROR", flvPlayerEventHandler);
flvPlayer.pause();
@ -209,10 +317,188 @@ onUnmounted(() => {
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) {
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>
<style lang="scss" scoped>
@import "../assets/fonts/iconfont.css";
@ -240,6 +526,13 @@ onUnmounted(() => {
z-index: 99;
}
.video-cover {
border-radius: 10px;
object-fit: contain;
width: 100%;
height: 400px;
}
.camera-player {
width: 100%;
height: 400px;
@ -267,6 +560,16 @@ onUnmounted(() => {
z-index: 999;
backdrop-filter: blur(12px);
.time-slider {
//width: 80vh;
//transform-origin: center;
//transform: rotate(90deg);
position: absolute;
z-index: 99;
//left: 20px;
}
.quit-fullscreen {
position: fixed;
font-size: 60px;
@ -285,7 +588,24 @@ onUnmounted(() => {
background-color: #fff;
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 {
//background-color: #fff;
transform-origin: center;
transform: scale(var(--scale)) rotate(90deg);
}
@ -297,6 +617,16 @@ onUnmounted(() => {
z-index: 999999;
left: 0;
top: 0;
.close-button {
position: absolute;
top: 6px;
right: 6px;
color: #fff;
font-size: 48px;
border-radius: 50%;
}
.fullscreen {
position: absolute;
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>

16
src/components/CameraList.vue
View File

@ -37,12 +37,13 @@
<!-- <img :src="`http://81.68.90.198:8088/portal/r/${item}`" alt="" /> -->
<!-- TODO:test -->
<!-- :src="`${protocol}//${host}/portal/r/${item.PIC}`" -->
<!-- :src="`http://81.68.90.198:8088/portal/r/${item.PIC}`"-->
<NImage
:previewed-img-props="{
draggable: true,
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"
></NImage>
<div class="uplode-time">{{ item.CREATEDATE }}</div>
@ -65,14 +66,7 @@
<script setup>
import {reactive, ref} from "vue";
import axios from "axios";
import {
NConfigProvider,
NImage,
NSelect,
NTabPane,
NTabs,
zhCN,
} from "naive-ui";
import {NConfigProvider, NImage, NSelect, NTabPane, NTabs, zhCN,} from "naive-ui";
import Camera from "./CameraItem.vue";
const cameraLoading = ref(true);
@ -226,7 +220,7 @@ const loadImageList = async () => {
const cameraListRef = ref();
// 滚动操作
const handleScroll = (e) => {
console.log(e);
// console.log(e);
if (!cameraListRef.value) return;
let dom = document.documentElement;
//文档内容实际高度（包括超出视窗的溢出部分）
@ -236,7 +230,7 @@ const handleScroll = (e) => {
//窗口可视范围高度
let clientHeight =
dom.innerHeight || Math.min(dom.clientHeight, dom.clientHeight);
console.log(clientHeight, scrollTop, scrollHeight);
// console.log(clientHeight, scrollTop, scrollHeight);
if (clientHeight + scrollTop >= scrollHeight) {
if (queryParams.pageSize * queryParams.pageNum > total.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 "./assets/fonts/iconfont.css";
// import naive from "naive-ui";
import { createPinia } from "pinia";
// const Home = { template: "<div>Home</div>" };
// const About = { template: "<div>About</div>" };
const pinia = createPinia();
// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
@ -26,4 +26,4 @@ import "./assets/fonts/iconfont.css";
// 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);
}
},
},
});

11
vue.config.js
View File

@ -11,8 +11,15 @@ module.exports = defineConfig({
"^/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: "./",
// assetsDir: "../apps/com.awspaas.user.apps.cmp/monitor",
publicPath: "./",
assetsDir: "../apps/com.awspaas.user.apps.cmp/monitor",
});

23
yarn.lock
View File

@ -1339,6 +1339,11 @@
dependencies:
"@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":
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"
@ -1638,6 +1643,11 @@
optionalDependencies:
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":
version "3.2.39"
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"
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:
version "4.2.0"
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:
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:
version "8.3.0"
resolved "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz#5d31129a1b3dd89c0069ca0a1c88f970c360bd0d"