视频回放,缩略图
This commit is contained in:
5
.prettierignore
Normal file
5
.prettierignore
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
dist
|
||||||
|
node_modules
|
||||||
|
yarn.lock
|
||||||
|
/apps/
|
||||||
|
/dist/
|
||||||
0
.prettierrc.yaml
Normal file
0
.prettierrc.yaml
Normal file
@ -1,24 +1,29 @@
|
|||||||
# data_visual_webpack
|
# data_visual_webpack
|
||||||
|
|
||||||
## Project setup
|
## Project setup
|
||||||
|
|
||||||
```
|
```
|
||||||
yarn install
|
yarn install
|
||||||
```
|
```
|
||||||
|
|
||||||
### Compiles and hot-reloads for development
|
### Compiles and hot-reloads for development
|
||||||
|
|
||||||
```
|
```
|
||||||
yarn serve
|
yarn serve
|
||||||
```
|
```
|
||||||
|
|
||||||
### Compiles and minifies for production
|
### Compiles and minifies for production
|
||||||
|
|
||||||
```
|
```
|
||||||
yarn build
|
yarn build
|
||||||
```
|
```
|
||||||
|
|
||||||
### Lints and fixes files
|
### Lints and fixes files
|
||||||
|
|
||||||
```
|
```
|
||||||
yarn lint
|
yarn lint
|
||||||
```
|
```
|
||||||
|
|
||||||
### Customize configuration
|
### Customize configuration
|
||||||
|
|
||||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||||
|
|||||||
@ -1,5 +1,3 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
presets: [
|
presets: ["@vue/cli-plugin-babel/preset"],
|
||||||
'@vue/cli-plugin-babel/preset'
|
};
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|||||||
@ -19,6 +19,7 @@
|
|||||||
"element-plus": "^2.2.19",
|
"element-plus": "^2.2.19",
|
||||||
"flv.js": "^1.6.2",
|
"flv.js": "^1.6.2",
|
||||||
"lodash-es": "^4.17.21",
|
"lodash-es": "^4.17.21",
|
||||||
|
"pinia": "^2.0.33",
|
||||||
"vue": "^3.2.13",
|
"vue": "^3.2.13",
|
||||||
"vue-router": "^4.1.5"
|
"vue-router": "^4.1.5"
|
||||||
},
|
},
|
||||||
|
|||||||
@ -3,4 +3,4 @@ module.exports = {
|
|||||||
tailwindcss: {},
|
tailwindcss: {},
|
||||||
autoprefixer: {},
|
autoprefixer: {},
|
||||||
},
|
},
|
||||||
}
|
};
|
||||||
|
|||||||
@ -1,34 +1,35 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="">
|
<html lang="">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
window._AMapSecurityConfig = {
|
window._AMapSecurityConfig = {
|
||||||
securityJsCode: 'd9ded0c99c2545c9feb200da26b29fbf',
|
securityJsCode: "d9ded0c99c2545c9feb200da26b29fbf",
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
<script type="text/javascript"
|
<script
|
||||||
src="https://webapi.amap.com/maps?v=1.4.15&key=7891f1238368a895ff1967c79643102d"></script>
|
type="text/javascript"
|
||||||
|
src="https://webapi.amap.com/maps?v=1.4.15&key=7891f1238368a895ff1967c79643102d"
|
||||||
|
></script>
|
||||||
<script>
|
<script>
|
||||||
var sid = '<#sid>';
|
var sid = "<#sid>";
|
||||||
</script>
|
</script>
|
||||||
<title>
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||||
<%= htmlWebpackPlugin.options.title %>
|
|
||||||
</title>
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<noscript>
|
<noscript>
|
||||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
|
<strong
|
||||||
Please enable it to continue.</strong>
|
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
|
||||||
|
properly without JavaScript enabled. Please enable it to
|
||||||
|
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>
|
||||||
@ -1,5 +1,8 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import Layout from "./views/Layout.vue";
|
import { useTokenStore } from "@/store/token";
|
||||||
|
|
||||||
|
const tokenStore = useTokenStore();
|
||||||
|
tokenStore.fetchToken();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
import request from '../utils/request'
|
import request from "../utils/request";
|
||||||
|
|
||||||
// 获取安全情况数据
|
// 获取安全情况数据
|
||||||
export const getSecuritySituation = () => request('http://127.0.0.1:9090/proxies', {
|
export const getSecuritySituation = () =>
|
||||||
method: 'GET'
|
request("http://127.0.0.1:9090/proxies", {
|
||||||
})
|
method: "GET",
|
||||||
|
});
|
||||||
|
|||||||
@ -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=1666579652662') format('woff2'),
|
src: url("iconfont.woff2?t=1666579652662") format("woff2"),
|
||||||
url('iconfont.woff?t=1666579652662') format('woff'),
|
url("iconfont.woff?t=1666579652662") format("woff"),
|
||||||
url('iconfont.ttf?t=1666579652662') format('truetype');
|
url("iconfont.ttf?t=1666579652662") format("truetype");
|
||||||
}
|
}
|
||||||
|
|
||||||
.iconfont {
|
.iconfont {
|
||||||
@ -24,4 +24,3 @@
|
|||||||
.icon-quanping_o:before {
|
.icon-quanping_o:before {
|
||||||
content: "\eb99";
|
content: "\eb99";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1 +1,69 @@
|
|||||||
window._iconfont_svg_string_3725111='<svg><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,c,a=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?a(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,c=!1,m(),d.onreadystatechange=function(){"complete"==d.readyState&&(d.onreadystatechange=null,s())})}function s(){c||(c=!0,l())}function m(){try{d.documentElement.doScroll("left")}catch(t){return void setTimeout(m,50)}s()}}(window);
|
(window._iconfont_svg_string_3725111 =
|
||||||
|
'<svg><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,
|
||||||
|
c,
|
||||||
|
a = 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
|
||||||
|
? a(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),
|
||||||
|
(c = !1),
|
||||||
|
m(),
|
||||||
|
(d.onreadystatechange = function () {
|
||||||
|
"complete" == d.readyState &&
|
||||||
|
((d.onreadystatechange = null), s());
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
function s() {
|
||||||
|
c || ((c = !0), l());
|
||||||
|
}
|
||||||
|
function m() {
|
||||||
|
try {
|
||||||
|
d.documentElement.doScroll("left");
|
||||||
|
} catch (t) {
|
||||||
|
return void setTimeout(m, 50);
|
||||||
|
}
|
||||||
|
s();
|
||||||
|
}
|
||||||
|
})(window);
|
||||||
|
|||||||
539
src/assets/iconfont/demo.css
Normal file
539
src/assets/iconfont/demo.css
Normal file
@ -0,0 +1,539 @@
|
|||||||
|
/* 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');
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-family: "iconfont logo";
|
||||||
|
font-size: 160px;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* tabs */
|
||||||
|
.nav-tabs {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-tabs .nav-more {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
height: 42px;
|
||||||
|
line-height: 42px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs {
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs li {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 100px;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 16px;
|
||||||
|
border-bottom: 2px solid transparent;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
margin-bottom: -1px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#tabs .active {
|
||||||
|
border-bottom-color: #f00;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-container .content {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 页面布局 */
|
||||||
|
.main {
|
||||||
|
padding: 30px 100px;
|
||||||
|
width: 960px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main .logo {
|
||||||
|
color: #333;
|
||||||
|
text-align: left;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
line-height: 1;
|
||||||
|
height: 110px;
|
||||||
|
margin-top: -50px;
|
||||||
|
overflow: hidden;
|
||||||
|
*zoom: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main .logo a {
|
||||||
|
font-size: 160px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helps {
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helps pre {
|
||||||
|
padding: 20px;
|
||||||
|
margin: 10px 0;
|
||||||
|
border: solid 1px #e7e1cd;
|
||||||
|
background-color: #fffdef;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists {
|
||||||
|
width: 100% !important;
|
||||||
|
overflow: hidden;
|
||||||
|
*zoom: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists li {
|
||||||
|
width: 100px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-right: 20px;
|
||||||
|
text-align: center;
|
||||||
|
list-style: none !important;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists li .code-name {
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists .icon {
|
||||||
|
display: block;
|
||||||
|
height: 100px;
|
||||||
|
line-height: 100px;
|
||||||
|
font-size: 42px;
|
||||||
|
margin: 10px auto;
|
||||||
|
color: #333;
|
||||||
|
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
|
||||||
|
-moz-transition: font-size 0.25s linear, width 0.25s linear;
|
||||||
|
transition: font-size 0.25s linear, width 0.25s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists .icon:hover {
|
||||||
|
font-size: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists .svg-icon {
|
||||||
|
/* 通过设置 font-size 来改变图标大小 */
|
||||||
|
width: 1em;
|
||||||
|
/* 图标和文字相邻时，垂直对齐 */
|
||||||
|
vertical-align: -0.15em;
|
||||||
|
/* 通过设置 color 来改变 SVG 的颜色/fill */
|
||||||
|
fill: currentColor;
|
||||||
|
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
|
||||||
|
normalize.css 中也包含这行 */
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists li .name,
|
||||||
|
.icon_lists li .code-name {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* markdown 样式 */
|
||||||
|
.markdown {
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown img {
|
||||||
|
vertical-align: middle;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h1 {
|
||||||
|
color: #404040;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 40px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h2,
|
||||||
|
.markdown h3,
|
||||||
|
.markdown h4,
|
||||||
|
.markdown h5,
|
||||||
|
.markdown h6 {
|
||||||
|
color: #404040;
|
||||||
|
margin: 1.6em 0 0.6em 0;
|
||||||
|
font-weight: 500;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h1 {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h2 {
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h3 {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h4 {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h5 {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h6 {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown hr {
|
||||||
|
height: 1px;
|
||||||
|
border: 0;
|
||||||
|
background: #e9e9e9;
|
||||||
|
margin: 16px 0;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown p {
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown>p,
|
||||||
|
.markdown>blockquote,
|
||||||
|
.markdown>.highlight,
|
||||||
|
.markdown>ol,
|
||||||
|
.markdown>ul {
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown ul>li {
|
||||||
|
list-style: circle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown>ul li,
|
||||||
|
.markdown blockquote ul>li {
|
||||||
|
margin-left: 20px;
|
||||||
|
padding-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown>ul li p,
|
||||||
|
.markdown>ol li p {
|
||||||
|
margin: 0.6em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown ol>li {
|
||||||
|
list-style: decimal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown>ol li,
|
||||||
|
.markdown blockquote ol>li {
|
||||||
|
margin-left: 20px;
|
||||||
|
padding-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown code {
|
||||||
|
margin: 0 3px;
|
||||||
|
padding: 0 5px;
|
||||||
|
background: #eee;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown strong,
|
||||||
|
.markdown b {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown>table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0px;
|
||||||
|
empty-cells: show;
|
||||||
|
border: 1px solid #e9e9e9;
|
||||||
|
width: 95%;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown>table th {
|
||||||
|
white-space: nowrap;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown>table th,
|
||||||
|
.markdown>table td {
|
||||||
|
border: 1px solid #e9e9e9;
|
||||||
|
padding: 8px 16px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown>table th {
|
||||||
|
background: #F7F7F7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown blockquote {
|
||||||
|
font-size: 90%;
|
||||||
|
color: #999;
|
||||||
|
border-left: 4px solid #e9e9e9;
|
||||||
|
padding-left: 0.8em;
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown blockquote p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown .anchor {
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown .waiting {
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h1:hover .anchor,
|
||||||
|
.markdown h2:hover .anchor,
|
||||||
|
.markdown h3:hover .anchor,
|
||||||
|
.markdown h4:hover .anchor,
|
||||||
|
.markdown h5:hover .anchor,
|
||||||
|
.markdown h6:hover .anchor {
|
||||||
|
opacity: 1;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown>br,
|
||||||
|
.markdown>p>br {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.hljs {
|
||||||
|
display: block;
|
||||||
|
background: white;
|
||||||
|
padding: 0.5em;
|
||||||
|
color: #333333;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-comment,
|
||||||
|
.hljs-meta {
|
||||||
|
color: #969896;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-string,
|
||||||
|
.hljs-variable,
|
||||||
|
.hljs-template-variable,
|
||||||
|
.hljs-strong,
|
||||||
|
.hljs-emphasis,
|
||||||
|
.hljs-quote {
|
||||||
|
color: #df5000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-keyword,
|
||||||
|
.hljs-selector-tag,
|
||||||
|
.hljs-type {
|
||||||
|
color: #a71d5d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-literal,
|
||||||
|
.hljs-symbol,
|
||||||
|
.hljs-bullet,
|
||||||
|
.hljs-attribute {
|
||||||
|
color: #0086b3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-section,
|
||||||
|
.hljs-name {
|
||||||
|
color: #63a35c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-tag {
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-title,
|
||||||
|
.hljs-attr,
|
||||||
|
.hljs-selector-id,
|
||||||
|
.hljs-selector-class,
|
||||||
|
.hljs-selector-attr,
|
||||||
|
.hljs-selector-pseudo {
|
||||||
|
color: #795da3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-addition {
|
||||||
|
color: #55a532;
|
||||||
|
background-color: #eaffea;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-deletion {
|
||||||
|
color: #bd2c00;
|
||||||
|
background-color: #ffecec;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-link {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 代码高亮 */
|
||||||
|
/* PrismJS 1.15.0
|
||||||
|
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
|
||||||
|
/**
|
||||||
|
* prism.js default theme for JavaScript, CSS and HTML
|
||||||
|
* Based on dabblet (http://dabblet.com)
|
||||||
|
* @author Lea Verou
|
||||||
|
*/
|
||||||
|
code[class*="language-"],
|
||||||
|
pre[class*="language-"] {
|
||||||
|
color: black;
|
||||||
|
background: none;
|
||||||
|
text-shadow: 0 1px white;
|
||||||
|
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||||
|
text-align: left;
|
||||||
|
white-space: pre;
|
||||||
|
word-spacing: normal;
|
||||||
|
word-break: normal;
|
||||||
|
word-wrap: normal;
|
||||||
|
line-height: 1.5;
|
||||||
|
|
||||||
|
-moz-tab-size: 4;
|
||||||
|
-o-tab-size: 4;
|
||||||
|
tab-size: 4;
|
||||||
|
|
||||||
|
-webkit-hyphens: none;
|
||||||
|
-moz-hyphens: none;
|
||||||
|
-ms-hyphens: none;
|
||||||
|
hyphens: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre[class*="language-"]::-moz-selection,
|
||||||
|
pre[class*="language-"] ::-moz-selection,
|
||||||
|
code[class*="language-"]::-moz-selection,
|
||||||
|
code[class*="language-"] ::-moz-selection {
|
||||||
|
text-shadow: none;
|
||||||
|
background: #b3d4fc;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre[class*="language-"]::selection,
|
||||||
|
pre[class*="language-"] ::selection,
|
||||||
|
code[class*="language-"]::selection,
|
||||||
|
code[class*="language-"] ::selection {
|
||||||
|
text-shadow: none;
|
||||||
|
background: #b3d4fc;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
|
||||||
|
code[class*="language-"],
|
||||||
|
pre[class*="language-"] {
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Code blocks */
|
||||||
|
pre[class*="language-"] {
|
||||||
|
padding: 1em;
|
||||||
|
margin: .5em 0;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
:not(pre)>code[class*="language-"],
|
||||||
|
pre[class*="language-"] {
|
||||||
|
background: #f5f2f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Inline code */
|
||||||
|
:not(pre)>code[class*="language-"] {
|
||||||
|
padding: .1em;
|
||||||
|
border-radius: .3em;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.comment,
|
||||||
|
.token.prolog,
|
||||||
|
.token.doctype,
|
||||||
|
.token.cdata {
|
||||||
|
color: slategray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.punctuation {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.namespace {
|
||||||
|
opacity: .7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.property,
|
||||||
|
.token.tag,
|
||||||
|
.token.boolean,
|
||||||
|
.token.number,
|
||||||
|
.token.constant,
|
||||||
|
.token.symbol,
|
||||||
|
.token.deleted {
|
||||||
|
color: #905;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.selector,
|
||||||
|
.token.attr-name,
|
||||||
|
.token.string,
|
||||||
|
.token.char,
|
||||||
|
.token.builtin,
|
||||||
|
.token.inserted {
|
||||||
|
color: #690;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.operator,
|
||||||
|
.token.entity,
|
||||||
|
.token.url,
|
||||||
|
.language-css .token.string,
|
||||||
|
.style .token.string {
|
||||||
|
color: #9a6e3a;
|
||||||
|
background: hsla(0, 0%, 100%, .5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.atrule,
|
||||||
|
.token.attr-value,
|
||||||
|
.token.keyword {
|
||||||
|
color: #07a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.function,
|
||||||
|
.token.class-name {
|
||||||
|
color: #DD4A68;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.regex,
|
||||||
|
.token.important,
|
||||||
|
.token.variable {
|
||||||
|
color: #e90;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.important,
|
||||||
|
.token.bold {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.italic {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.entity {
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
487
src/assets/iconfont/demo_index.html
Normal file
487
src/assets/iconfont/demo_index.html
Normal file
@ -0,0 +1,487 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<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">
|
||||||
|
<script src="iconfont.js"></script>
|
||||||
|
<!-- 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/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
|
||||||
|
<style>
|
||||||
|
.main .logo {
|
||||||
|
margin-top: 0;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main .logo a {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main .logo .sub-title {
|
||||||
|
margin-left: 0.5em;
|
||||||
|
font-size: 22px;
|
||||||
|
color: #fff;
|
||||||
|
background: linear-gradient(-45deg, #3967FF, #B500FE);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</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>
|
||||||
|
<div class="nav-tabs">
|
||||||
|
<ul id="tabs" class="dib-box">
|
||||||
|
<li class="dib active"><span>Unicode</span></li>
|
||||||
|
<li class="dib"><span>Font class</span></li>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="tab-container">
|
||||||
|
<div class="content unicode" style="display: block;">
|
||||||
|
<ul class="icon_lists dib-box">
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">plus</div>
|
||||||
|
<div class="code-name">&#xe627;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">reduce</div>
|
||||||
|
<div class="code-name">&#xe66d;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">close</div>
|
||||||
|
<div class="code-name">&#xe613;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">left</div>
|
||||||
|
<div class="code-name">&#xe83d;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">down</div>
|
||||||
|
<div class="code-name">&#xe839;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">right</div>
|
||||||
|
<div class="code-name">&#xe840;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">up</div>
|
||||||
|
<div class="code-name">&#xe845;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">prev</div>
|
||||||
|
<div class="code-name">&#xe659;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">next</div>
|
||||||
|
<div class="code-name">&#xe609;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">取消全屏_o</div>
|
||||||
|
<div class="code-name">&#xeb98;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">播放_o</div>
|
||||||
|
<div class="code-name">&#xeb5e;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">暂停_o</div>
|
||||||
|
<div class="code-name">&#xeb6c;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">全屏_o</div>
|
||||||
|
<div class="code-name">&#xeb99;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
<div class="article markdown">
|
||||||
|
<h2 id="unicode-">Unicode 引用</h2>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
|
||||||
|
<ul>
|
||||||
|
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
|
||||||
|
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
|
||||||
|
</ul>
|
||||||
|
<blockquote>
|
||||||
|
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
|
||||||
|
</blockquote>
|
||||||
|
<p>Unicode 使用步骤如下：</p>
|
||||||
|
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
|
||||||
|
<pre><code class="language-css"
|
||||||
|
>@font-face {
|
||||||
|
font-family: 'iconfont';
|
||||||
|
src: url('iconfont.woff2?t=1680768908297') format('woff2'),
|
||||||
|
url('iconfont.woff?t=1680768908297') format('woff'),
|
||||||
|
url('iconfont.ttf?t=1680768908297') format('truetype');
|
||||||
|
}
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
||||||
|
<pre><code class="language-css"
|
||||||
|
>.iconfont {
|
||||||
|
font-family: "iconfont" !important;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
|
||||||
|
<pre>
|
||||||
|
<code class="language-html"
|
||||||
|
><span class="iconfont">&#x33;</span>
|
||||||
|
</code></pre>
|
||||||
|
<blockquote>
|
||||||
|
<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-plus"></span>
|
||||||
|
<div class="name">
|
||||||
|
plus
|
||||||
|
</div>
|
||||||
|
<div class="code-name">.icon-plus
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont icon-reduce"></span>
|
||||||
|
<div class="name">
|
||||||
|
reduce
|
||||||
|
</div>
|
||||||
|
<div class="code-name">.icon-reduce
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
</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>
|
||||||
|
</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>
|
||||||
|
</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>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
<div class="article markdown">
|
||||||
|
<h2 id="font-class-">font-class 引用</h2>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
|
||||||
|
<p>与 Unicode 使用方式相比，具有如下特点：</p>
|
||||||
|
<ul>
|
||||||
|
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
|
||||||
|
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
|
||||||
|
</ul>
|
||||||
|
<p>使用步骤如下：</p>
|
||||||
|
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
|
||||||
|
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css">
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||||
|
<pre><code class="language-html"><span class="iconfont icon-xxx"></span>
|
||||||
|
</code></pre>
|
||||||
|
<blockquote>
|
||||||
|
<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-plus"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">plus</div>
|
||||||
|
<div class="code-name">#icon-plus</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-reduce"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">reduce</div>
|
||||||
|
<div class="code-name">#icon-reduce</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</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">
|
||||||
|
<use xlink:href="#icon-quxiaoquanping_o"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">取消全屏_o</div>
|
||||||
|
<div class="code-name">#icon-quxiaoquanping_o</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-bofang_o"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">播放_o</div>
|
||||||
|
<div class="code-name">#icon-bofang_o</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-zanting_o"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">暂停_o</div>
|
||||||
|
<div class="code-name">#icon-zanting_o</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-quanping_o"></use>
|
||||||
|
</svg>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
|
||||||
|
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
|
||||||
|
<ul>
|
||||||
|
<li>支持多色图标了，不再受单色限制。</li>
|
||||||
|
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
|
||||||
|
<li>兼容性较差，支持 IE9+，及现代浏览器。</li>
|
||||||
|
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
|
||||||
|
</ul>
|
||||||
|
<p>使用步骤如下：</p>
|
||||||
|
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
|
||||||
|
<pre><code class="language-html"><script src="./iconfont.js"></script>
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
|
||||||
|
<pre><code class="language-html"><style>
|
||||||
|
.icon {
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
vertical-align: -0.15em;
|
||||||
|
fill: currentColor;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||||
|
<pre><code class="language-html"><svg class="icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-xxx"></use>
|
||||||
|
</svg>
|
||||||
|
</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
$(document).ready(function () {
|
||||||
|
$('.tab-container .content:first').show()
|
||||||
|
|
||||||
|
$('#tabs li').click(function (e) {
|
||||||
|
var tabContent = $('.tab-container .content')
|
||||||
|
var index = $(this).index()
|
||||||
|
|
||||||
|
if ($(this).hasClass('active')) {
|
||||||
|
return
|
||||||
|
} else {
|
||||||
|
$('#tabs li').removeClass('active')
|
||||||
|
$(this).addClass('active')
|
||||||
|
|
||||||
|
tabContent.hide().eq(index).fadeIn()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
67
src/assets/iconfont/iconfont.css
Normal file
67
src/assets/iconfont/iconfont.css
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: "iconfont"; /* Project id 3725111 */
|
||||||
|
src: url('iconfont.woff2?t=1680768908297') format('woff2'),
|
||||||
|
url('iconfont.woff?t=1680768908297') format('woff'),
|
||||||
|
url('iconfont.ttf?t=1680768908297') format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
font-family: "iconfont" !important;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-plus:before {
|
||||||
|
content: "\e627";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-reduce:before {
|
||||||
|
content: "\e66d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-close:before {
|
||||||
|
content: "\e613";
|
||||||
|
}
|
||||||
|
|
||||||
|
.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";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-bofang_o:before {
|
||||||
|
content: "\eb5e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-zanting_o:before {
|
||||||
|
content: "\eb6c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-quanping_o:before {
|
||||||
|
content: "\eb99";
|
||||||
|
}
|
||||||
|
|
||||||
1
src/assets/iconfont/iconfont.js
Normal file
1
src/assets/iconfont/iconfont.js
Normal file
File diff suppressed because one or more lines are too long
100
src/assets/iconfont/iconfont.json
Normal file
100
src/assets/iconfont/iconfont.json
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
{
|
||||||
|
"id": "3725111",
|
||||||
|
"name": "screen",
|
||||||
|
"font_family": "iconfont",
|
||||||
|
"css_prefix_text": "icon-",
|
||||||
|
"description": "",
|
||||||
|
"glyphs": [
|
||||||
|
{
|
||||||
|
"icon_id": "737957",
|
||||||
|
"name": "plus",
|
||||||
|
"font_class": "plus",
|
||||||
|
"unicode": "e627",
|
||||||
|
"unicode_decimal": 58919
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "26867329",
|
||||||
|
"name": "reduce",
|
||||||
|
"font_class": "reduce",
|
||||||
|
"unicode": "e66d",
|
||||||
|
"unicode_decimal": 58989
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "11230059",
|
||||||
|
"name": "close",
|
||||||
|
"font_class": "close",
|
||||||
|
"unicode": "e613",
|
||||||
|
"unicode_decimal": 58899
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"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",
|
||||||
|
"font_class": "quxiaoquanping_o",
|
||||||
|
"unicode": "eb98",
|
||||||
|
"unicode_decimal": 60312
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "5387806",
|
||||||
|
"name": "播放_o",
|
||||||
|
"font_class": "bofang_o",
|
||||||
|
"unicode": "eb5e",
|
||||||
|
"unicode_decimal": 60254
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "5387839",
|
||||||
|
"name": "暂停_o",
|
||||||
|
"font_class": "zanting_o",
|
||||||
|
"unicode": "eb6c",
|
||||||
|
"unicode_decimal": 60268
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "5387948",
|
||||||
|
"name": "全屏_o",
|
||||||
|
"font_class": "quanping_o",
|
||||||
|
"unicode": "eb99",
|
||||||
|
"unicode_decimal": 60313
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
BIN
src/assets/iconfont/iconfont.ttf
Normal file
BIN
src/assets/iconfont/iconfont.ttf
Normal file
Binary file not shown.
BIN
src/assets/iconfont/iconfont.woff
Normal file
BIN
src/assets/iconfont/iconfont.woff
Normal file
Binary file not shown.
BIN
src/assets/iconfont/iconfont.woff2
Normal file
BIN
src/assets/iconfont/iconfont.woff2
Normal file
Binary file not shown.
@ -3,7 +3,10 @@ import "./style.css";
|
|||||||
import App from "./App.vue";
|
import App from "./App.vue";
|
||||||
import router from "./router";
|
import router from "./router";
|
||||||
// import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
|
// import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
|
||||||
|
import "@/assets/iconfont/iconfont.css";
|
||||||
|
|
||||||
import '@/assets/fonts/iconfont.css'
|
import { createPinia } from "pinia";
|
||||||
|
|
||||||
createApp(App).use(router).mount("#app");
|
const pinia = createPinia();
|
||||||
|
|
||||||
|
createApp(App).use(pinia).use(router).mount("#app");
|
||||||
|
|||||||
22
src/store/token.js
Normal file
22
src/store/token.js
Normal 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);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
@ -1,6 +1,6 @@
|
|||||||
const service = async (url, config) => {
|
const service = async (url, config) => {
|
||||||
const response = await fetch(url, config)
|
const response = await fetch(url, config);
|
||||||
return response.json()
|
return response.json();
|
||||||
}
|
};
|
||||||
|
|
||||||
export default service
|
export default service;
|
||||||
|
|||||||
@ -4,21 +4,87 @@
|
|||||||
:style="`width: ${width}px;height: ${height}px;`"
|
:style="`width: ${width}px;height: ${height}px;`"
|
||||||
>
|
>
|
||||||
<!-- <img src="../../assets/screen.png" class="monitor-screen" /> -->
|
<!-- <img src="../../assets/screen.png" class="monitor-screen" /> -->
|
||||||
<div class="video-wrap">
|
<div ref="videoWrapRef" :class="`video-wrap`">
|
||||||
<video class="monitor-screen" ref="videoElementRef"></video>
|
<!-- <div v-if="isFull" class="zoom-bar">-->
|
||||||
<!-- <div class="overlay" @click="router.push('/monitor/detail')"></div> -->
|
<!-- <div-->
|
||||||
|
<!-- :class="`zoomin iconfont icon-reduce ${pressed.up ? 'pressed' : ''}`"-->
|
||||||
|
<!-- @mousedown="moveCamera('zoomout')"-->
|
||||||
|
<!-- @mouseup="moveCamera('stop')"-->
|
||||||
|
<!-- ></div>-->
|
||||||
|
<!-- <div-->
|
||||||
|
<!-- :class="`zoomout iconfont icon-plus ${pressed.up ? 'pressed' : ''}`"-->
|
||||||
|
<!-- @mousedown="moveCamera('zoomin')"-->
|
||||||
|
<!-- @mouseup="moveCamera('stop')"-->
|
||||||
|
<!-- ></div>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<div v-if="isFull" class="playback-time">
|
||||||
|
<n-config-provider :date-locale="dateZhCN" :locale="zhCN">
|
||||||
|
<n-date-picker
|
||||||
|
clearable
|
||||||
|
format="yyyy-MM-dd"
|
||||||
|
placeholder="选择回放日期"
|
||||||
|
type="date"
|
||||||
|
@clear="destroyPlayback"
|
||||||
|
@update-formatted-value="handleConfirmRange"
|
||||||
|
/>
|
||||||
|
</n-config-provider>
|
||||||
|
</div>
|
||||||
|
<n-slider
|
||||||
|
v-if="isFull && playbackFlvUrl"
|
||||||
|
v-model:value="playbackProcess"
|
||||||
|
:format-tooltip="formatSeconds"
|
||||||
|
:marks="sliderMarks"
|
||||||
|
:max="isToday ? getNowSeconds() - 600 : 86399"
|
||||||
|
:min="0"
|
||||||
|
:step="300"
|
||||||
|
class="absolute bottom-2 z-50"
|
||||||
|
@update-value="setPlaybackProcess"
|
||||||
|
></n-slider>
|
||||||
|
<div v-if="isFull && name.includes('球机')" class="arrow-control">
|
||||||
|
<div
|
||||||
|
:class="`up iconfont icon-up ${pressed.up ? 'pressed' : ''}`"
|
||||||
|
@mousedown="moveCamera('up')"
|
||||||
|
@mouseup="moveCamera('stop')"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
:class="`down iconfont icon-down ${pressed.down ? 'pressed' : ''}`"
|
||||||
|
@mousedown="moveCamera('down')"
|
||||||
|
@mouseup="moveCamera('stop')"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
:class="`left iconfont icon-left ${pressed.left ? 'pressed' : ''}`"
|
||||||
|
@mousedown="moveCamera('left')"
|
||||||
|
@mouseup="moveCamera('stop')"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
:class="`right iconfont icon-right ${pressed.right ? 'pressed' : ''}`"
|
||||||
|
@mousedown="moveCamera('right')"
|
||||||
|
@mouseup="moveCamera('stop')"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="isFull"
|
||||||
|
class="exit-fullscreen iconfont icon-quxiaoquanping_o z-50"
|
||||||
|
@click="exitFullScreen"
|
||||||
|
></div>
|
||||||
|
<img
|
||||||
|
v-if="!isPlaying"
|
||||||
|
:src="previewImage"
|
||||||
|
alt=""
|
||||||
|
class="preview-image absolute left-0 top-0 w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
<video ref="videoElementRef" class="monitor-screen"></video>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex w-full justify-between pt-2 pl-4 pr-4">
|
<div class="flex w-full justify-between pt-2 pl-4 pr-4">
|
||||||
<div class="controls flex justify-between">
|
<div class="controls flex justify-between">
|
||||||
<!-- <img src="../../assets/prev.png" alt="" /> -->
|
|
||||||
<div
|
<div
|
||||||
ref="playBtnRef"
|
ref="playBtnRef"
|
||||||
@click="switchPlayStatus"
|
|
||||||
:class="`playbtn iconfont icon-${
|
:class="`playbtn iconfont icon-${
|
||||||
isPlaying ? 'zanting_o' : 'bofang_o'
|
isPlaying ? 'zanting_o' : 'bofang_o'
|
||||||
}`"
|
}`"
|
||||||
alt=""
|
alt=""
|
||||||
|
@click="switchPlayStatus"
|
||||||
></div>
|
></div>
|
||||||
<div class="desc">{{ name }}</div>
|
<div class="desc">{{ name }}</div>
|
||||||
<div
|
<div
|
||||||
@ -31,11 +97,25 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="camera">
|
<script name="camera" setup>
|
||||||
import flvjs from "flv.js";
|
import flvjs from "flv.js";
|
||||||
import { onMounted, onUnmounted, ref, toRefs } from "vue";
|
import { onMounted, onUnmounted, reactive, ref, toRefs, watch } from "vue";
|
||||||
import { useRouter } from "vue-router";
|
import { debounce } from "lodash-es";
|
||||||
const router = useRouter();
|
import {
|
||||||
|
dateZhCN,
|
||||||
|
NConfigProvider,
|
||||||
|
NDatePicker,
|
||||||
|
NSlider,
|
||||||
|
zhCN,
|
||||||
|
} from "naive-ui";
|
||||||
|
import axios from "axios";
|
||||||
|
import { useTokenStore } from "@/store/token";
|
||||||
|
|
||||||
|
const isFull = ref(false);
|
||||||
|
const previewImage = ref("");
|
||||||
|
const tokenStore = useTokenStore();
|
||||||
|
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
width: {
|
width: {
|
||||||
type: [String, Number],
|
type: [String, Number],
|
||||||
@ -56,22 +136,179 @@ const props = defineProps({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
const { width, height, source, name } = toRefs(props);
|
const { width, height, source, name } = toRefs(props);
|
||||||
|
const playbackProcess = ref(0);
|
||||||
|
const videoWrapRef = ref();
|
||||||
const videoElementRef = ref();
|
const videoElementRef = ref();
|
||||||
// const playBtnRef = ref();
|
const playbackFlvUrl = ref(null); /*回放视频url*/
|
||||||
|
const playbackStreamId = ref(null); /*回放id*/
|
||||||
let flvPlayer = flvjs.createPlayer({
|
let flvPlayer = null;
|
||||||
type: "flv",
|
|
||||||
url: source.value,
|
|
||||||
// url: "http://localhost:8000/lycoris_recoil.flv",
|
|
||||||
});
|
|
||||||
const isPlaying = ref(false);
|
const isPlaying = ref(false);
|
||||||
|
|
||||||
|
const pressed = reactive({
|
||||||
|
left: false,
|
||||||
|
right: false,
|
||||||
|
up: false,
|
||||||
|
down: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 创建播放器并(播放)
|
||||||
|
* @param url
|
||||||
|
* @param delay_play
|
||||||
|
*/
|
||||||
|
function flvCreate(url, delay_play) {
|
||||||
|
flvPlayer = flvjs.createPlayer({
|
||||||
|
type: "flv",
|
||||||
|
url: url,
|
||||||
|
});
|
||||||
|
if (flvjs.isSupported()) {
|
||||||
|
flvPlayer.attachMediaElement(videoElementRef.value);
|
||||||
|
flvPlayer.load();
|
||||||
|
flvPlayer.on("ERROR", flvPlayerEventHandler);
|
||||||
|
if (!delay_play) {
|
||||||
|
flvPlayer.play();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 移动摄像头
|
||||||
|
* @param arrow 方向
|
||||||
|
* @return {Promise<void>}
|
||||||
|
*/
|
||||||
|
const moveCamera = async (arrow) => {
|
||||||
|
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=${tokenStore.token}`
|
||||||
|
);
|
||||||
|
if (arrow === "stop") {
|
||||||
|
pressed.left = false;
|
||||||
|
pressed.right = false;
|
||||||
|
pressed.up = false;
|
||||||
|
pressed.down = false;
|
||||||
|
} else {
|
||||||
|
pressed[arrow] = true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/*进度条的刻度*/
|
||||||
|
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",
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取今天0点到现在的秒数
|
||||||
|
* @return {number}
|
||||||
|
*/
|
||||||
|
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;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 格式化进度条的 tooltip
|
||||||
|
* @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 setPlaybackProcess = 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);
|
||||||
|
|
||||||
|
const isToday = ref(false);
|
||||||
|
const handleConfirmRange = (value) => {
|
||||||
|
playbackProcess.value = 0;
|
||||||
|
if (value) {
|
||||||
|
startPlayHistory(value);
|
||||||
|
}
|
||||||
|
const _date = new Date(value);
|
||||||
|
const now = new Date();
|
||||||
|
isToday.value = _date.getDate() === now.getDate();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 开始播放回放
|
||||||
|
* @param value
|
||||||
|
* @return {Promise<void>}
|
||||||
|
*/
|
||||||
|
const startPlayHistory = async (value) => {
|
||||||
|
if (!tokenStore.token) {
|
||||||
|
await tokenStore.fetchToken();
|
||||||
|
}
|
||||||
|
const serial = source.value.split("/flv/hls/")[1].split("_")[0];
|
||||||
|
const url = new URL(source.value);
|
||||||
|
/*stop回放*/
|
||||||
|
if (playbackStreamId.value) {
|
||||||
|
await axios.get(
|
||||||
|
`${url.protocol}//${url.host}/api/v1/playback/stop?serial=${serial}&code=${serial}&streamid=${playbackStreamId.value}&token=${tokenStore.token}`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
/*开始回放*/
|
||||||
|
const resp = await axios.get(
|
||||||
|
`${url.protocol}//${url.host}/api/v1/playback/start?serial=${serial}&code=${serial}&starttime=${value}T00:00:00&endtime=${value}T23:59:59&token=${tokenStore.token}`
|
||||||
|
);
|
||||||
|
|
||||||
|
playbackStreamId.value = resp.data.StreamID;
|
||||||
|
playbackFlvUrl.value = resp.data.FLV;
|
||||||
|
};
|
||||||
|
|
||||||
// 切换播放状态
|
// 切换播放状态
|
||||||
const switchPlayStatus = () => {
|
const switchPlayStatus = () => {
|
||||||
if (!videoElementRef.value) return;
|
if (!videoElementRef.value) return;
|
||||||
|
if (!flvPlayer) {
|
||||||
|
flvCreate(props.source, true);
|
||||||
|
}
|
||||||
if (videoElementRef.value.paused) {
|
if (videoElementRef.value.paused) {
|
||||||
console.log(flvPlayer);
|
// if(flvPlayer)
|
||||||
flvPlayer.play();
|
flvPlayer.play();
|
||||||
isPlaying.value = true;
|
isPlaying.value = true;
|
||||||
} else {
|
} else {
|
||||||
@ -83,19 +320,75 @@ const flvPlayerEventHandler = (e) => {
|
|||||||
console.log(e);
|
console.log(e);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 点击全屏按钮
|
||||||
|
*/
|
||||||
const videoFullscreen = () => {
|
const videoFullscreen = () => {
|
||||||
videoElementRef.value.requestFullscreen();
|
if (!videoElementRef.value) return;
|
||||||
|
if (!flvPlayer) {
|
||||||
|
flvCreate(props.source, true);
|
||||||
|
}
|
||||||
|
if (videoElementRef.value.paused) {
|
||||||
|
flvPlayer.play();
|
||||||
|
isPlaying.value = true;
|
||||||
|
}
|
||||||
|
videoWrapRef.value.requestFullscreen();
|
||||||
};
|
};
|
||||||
onMounted(() => {
|
/**
|
||||||
if (flvjs.isSupported()) {
|
* 退出全屏
|
||||||
flvPlayer.attachMediaElement(videoElementRef.value);
|
*/
|
||||||
flvPlayer.load();
|
const exitFullScreen = () => {
|
||||||
flvPlayer.on("ERROR", flvPlayerEventHandler);
|
document.exitFullscreen();
|
||||||
// flvPlayer.play();
|
};
|
||||||
|
|
||||||
|
async function fullscreenChanged() {
|
||||||
|
// 如果有元素处于全屏模式，则 document.fullscreenElement 将指向该元素。如果没有元素处于全屏模式，则该属性的值为 null。
|
||||||
|
if (document.fullscreenElement) {
|
||||||
|
isFull.value = true;
|
||||||
|
} else {
|
||||||
|
isFull.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}`
|
||||||
|
);
|
||||||
|
playbackFlvUrl.value = null;
|
||||||
|
playbackStreamId.value = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const loadPreviewImage = 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}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
/*监听回放url,销毁原播放器,如果有值则播放回放,没有则播放原视频*/
|
||||||
|
watch(playbackFlvUrl, async (url) => {
|
||||||
|
flvDestroy();
|
||||||
|
if (url) {
|
||||||
|
flvCreate(url);
|
||||||
|
} else {
|
||||||
|
flvCreate(props.source);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
onUnmounted(() => {
|
|
||||||
console.log("destroy player here");
|
onMounted(async () => {
|
||||||
|
loadPreviewImage();
|
||||||
|
document.addEventListener("fullscreenchange", fullscreenChanged);
|
||||||
|
});
|
||||||
|
|
||||||
|
/*销毁播放器*/
|
||||||
function flvDestroy() {
|
function flvDestroy() {
|
||||||
flvPlayer.off("ERROR", flvPlayerEventHandler);
|
flvPlayer.off("ERROR", flvPlayerEventHandler);
|
||||||
flvPlayer.pause();
|
flvPlayer.pause();
|
||||||
@ -104,7 +397,27 @@ onUnmounted(() => {
|
|||||||
flvPlayer.destroy();
|
flvPlayer.destroy();
|
||||||
flvPlayer = null;
|
flvPlayer = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const destroyPlayback = async () => {
|
||||||
|
/*如果有回放,stop it*/
|
||||||
|
if (!tokenStore.token) {
|
||||||
|
await tokenStore.fetchToken();
|
||||||
|
}
|
||||||
|
const serial = source.value.split("/flv/hls/")[1].split("_")[0];
|
||||||
|
const url = new URL(source.value);
|
||||||
|
/*stop回放*/
|
||||||
|
if (playbackStreamId.value) {
|
||||||
|
axios.get(
|
||||||
|
`${url.protocol}//${url.host}/api/v1/playback/stop?serial=${serial}&code=${serial}&streamid=${playbackStreamId.value}&token=${tokenStore.token}`
|
||||||
|
);
|
||||||
|
playbackFlvUrl.value = null;
|
||||||
|
playbackStreamId.value = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
onUnmounted(() => {
|
||||||
|
console.log("destroy player here");
|
||||||
flvDestroy();
|
flvDestroy();
|
||||||
|
destroyPlayback();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@ -115,16 +428,114 @@ onUnmounted(() => {
|
|||||||
// background-color: #158eff;
|
// background-color: #158eff;
|
||||||
background-image: url(../../assets/monitor.png);
|
background-image: url(../../assets/monitor.png);
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
|
|
||||||
.video-wrap {
|
.video-wrap {
|
||||||
background-color: #333;
|
background-color: #333;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-top: 10%;
|
margin-top: 10%;
|
||||||
width: 98%;
|
width: 98%;
|
||||||
height: 65%;
|
height: 65%;
|
||||||
|
|
||||||
|
.exit-fullscreen {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 40px;
|
||||||
|
color: white;
|
||||||
|
z-index: 99999;
|
||||||
|
right: 5px;
|
||||||
|
bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zoom-bar {
|
||||||
|
width: 200px;
|
||||||
|
height: 60px;
|
||||||
|
position: absolute;
|
||||||
|
right: 100px;
|
||||||
|
bottom: 320px;
|
||||||
|
display: flex;
|
||||||
|
z-index: 9999;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
div {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
font-size: 48px;
|
||||||
|
background-color: rgba(255, 255, 255, 0.56);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconfont.pressed {
|
||||||
|
background-color: gray;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*回放日期选择*/
|
||||||
|
.playback-time {
|
||||||
|
width: 160px;
|
||||||
|
position: absolute;
|
||||||
|
left: 12px;
|
||||||
|
top: 12px;
|
||||||
|
z-index: 99;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-control {
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: rgba(255, 255, 255, 0.56);
|
||||||
|
position: absolute;
|
||||||
|
right: 100px;
|
||||||
|
bottom: 100px;
|
||||||
|
z-index: 9999;
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
font-size: 36px;
|
||||||
|
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: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.down {
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left {
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
right: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.monitor-screen {
|
.monitor-screen {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overlay {
|
.overlay {
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -134,21 +545,26 @@ onUnmounted(() => {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.controls {
|
.controls {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.playbtn {
|
.playbtn {
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fullscreen {
|
.fullscreen {
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 28px;
|
width: 28px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.desc {
|
.desc {
|
||||||
font-family: PingFangSC-Medium;
|
font-family: PingFangSC-Medium;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
@ -160,3 +576,8 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<style>
|
||||||
|
.n-slider-mark {
|
||||||
|
color: springgreen;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -2,10 +2,10 @@
|
|||||||
<div class="wrap flex justify-between relative">
|
<div class="wrap flex justify-between relative">
|
||||||
<NConfigProvider :theme="darkTheme">
|
<NConfigProvider :theme="darkTheme">
|
||||||
<n-tabs
|
<n-tabs
|
||||||
type="segment"
|
v-model:value="mode"
|
||||||
class="absolute right-3 w-80"
|
class="absolute right-3 w-80"
|
||||||
style="top: -45px"
|
style="top: -45px"
|
||||||
v-model:value="mode"
|
type="segment"
|
||||||
>
|
>
|
||||||
<n-tab-pane name="camera" tab="摄像头列表"></n-tab-pane>
|
<n-tab-pane name="camera" tab="摄像头列表"></n-tab-pane>
|
||||||
<n-tab-pane name="image" tab="图片列表"></n-tab-pane>
|
<n-tab-pane name="image" tab="图片列表"></n-tab-pane>
|
||||||
@ -18,13 +18,12 @@
|
|||||||
<li
|
<li
|
||||||
v-for="(item, index) in projectList"
|
v-for="(item, index) in projectList"
|
||||||
:key="index"
|
:key="index"
|
||||||
@click="projectClicked(index)"
|
|
||||||
:class="`localtion-item flex items-center ${
|
:class="`localtion-item flex items-center ${
|
||||||
index == activeIndex ? 'active' : ''
|
index == activeIndex ? 'active' : ''
|
||||||
}`"
|
}`"
|
||||||
|
@click="projectClicked(index)"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src="../../assets/location-fill@3x.png"
|
|
||||||
:style="{
|
:style="{
|
||||||
width: `18px`,
|
width: `18px`,
|
||||||
height: `18px`,
|
height: `18px`,
|
||||||
@ -32,6 +31,7 @@
|
|||||||
marginLeft: `26px`,
|
marginLeft: `26px`,
|
||||||
}"
|
}"
|
||||||
alt=""
|
alt=""
|
||||||
|
src="../../assets/location-fill@3x.png"
|
||||||
/>
|
/>
|
||||||
<div>{{ item.PRONAME }}</div>
|
<div>{{ item.PRONAME }}</div>
|
||||||
</li>
|
</li>
|
||||||
@ -40,9 +40,9 @@
|
|||||||
<div v-if="mode === 'camera'" class="monitor-list grid grid-cols-2">
|
<div v-if="mode === 'camera'" class="monitor-list grid grid-cols-2">
|
||||||
<Camera
|
<Camera
|
||||||
v-for="(item, index) in cameraList"
|
v-for="(item, index) in cameraList"
|
||||||
:source="item.flvUrl"
|
|
||||||
:key="index"
|
:key="index"
|
||||||
:name="item.address"
|
:name="item.address"
|
||||||
|
:source="item.flvUrl"
|
||||||
></Camera>
|
></Camera>
|
||||||
<!-- <div
|
<!-- <div
|
||||||
v-for="(item, index) in projectList.slice(0, 9)"
|
v-for="(item, index) in projectList.slice(0, 9)"
|
||||||
@ -66,21 +66,21 @@
|
|||||||
>
|
>
|
||||||
<!-- <div :key="item"> -->
|
<!-- <div :key="item"> -->
|
||||||
<n-image
|
<n-image
|
||||||
:style="{
|
|
||||||
// width: `500px`,
|
|
||||||
height: `420px`,
|
|
||||||
}"
|
|
||||||
v-for="item in imageList.slice(imageIndexStart, 4)"
|
v-for="item in imageList.slice(imageIndexStart, 4)"
|
||||||
object-fit="cover"
|
:key="item"
|
||||||
class="image-item"
|
|
||||||
:img-props="{
|
:img-props="{
|
||||||
style: {
|
style: {
|
||||||
width: `100%`,
|
width: `100%`,
|
||||||
height: `100%`,
|
height: `100%`,
|
||||||
},
|
},
|
||||||
}"
|
}"
|
||||||
:key="item"
|
|
||||||
:src="`${protocol}//${host}/portal/r/${item.PIC}`"
|
:src="`${protocol}//${host}/portal/r/${item.PIC}`"
|
||||||
|
:style="{
|
||||||
|
// width: `500px`,
|
||||||
|
height: `420px`,
|
||||||
|
}"
|
||||||
|
class="image-item"
|
||||||
|
object-fit="cover"
|
||||||
width="100%"
|
width="100%"
|
||||||
></n-image>
|
></n-image>
|
||||||
</div>
|
</div>
|
||||||
@ -89,12 +89,12 @@
|
|||||||
class="controls flex flex-col justify-end pb-8"
|
class="controls flex flex-col justify-end pb-8"
|
||||||
>
|
>
|
||||||
<el-pagination
|
<el-pagination
|
||||||
background
|
|
||||||
:total="total"
|
|
||||||
v-model:current-page="currentPage"
|
v-model:current-page="currentPage"
|
||||||
:page-size="4"
|
:page-size="4"
|
||||||
layout="pager"
|
|
||||||
:pager-count="5"
|
:pager-count="5"
|
||||||
|
:total="total"
|
||||||
|
background
|
||||||
|
layout="pager"
|
||||||
></el-pagination>
|
></el-pagination>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
@ -102,22 +102,22 @@
|
|||||||
class="controls flex flex-col justify-end pb-8"
|
class="controls flex flex-col justify-end pb-8"
|
||||||
>
|
>
|
||||||
<el-pagination
|
<el-pagination
|
||||||
background
|
|
||||||
:total="imageList.length"
|
|
||||||
v-model:current-page="currentImagePage"
|
v-model:current-page="currentImagePage"
|
||||||
:page-size="4"
|
:page-size="4"
|
||||||
layout="pager"
|
|
||||||
:pager-count="5"
|
:pager-count="5"
|
||||||
|
:total="imageList.length"
|
||||||
|
background
|
||||||
|
layout="pager"
|
||||||
></el-pagination>
|
></el-pagination>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup name="Monitor">
|
<script name="Monitor" setup>
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import { computed, onMounted, reactive, ref } from "vue";
|
import { computed, reactive, ref } from "vue";
|
||||||
import { ElPagination } from "element-plus";
|
import { ElPagination } from "element-plus";
|
||||||
import Camera from "./camera.vue";
|
import Camera from "./camera.vue";
|
||||||
import { NImage, NTabs, NTabPane, NConfigProvider, darkTheme } from "naive-ui";
|
import { darkTheme, NConfigProvider, NImage, NTabPane, NTabs } from "naive-ui";
|
||||||
|
|
||||||
const protocol = ref("");
|
const protocol = ref("");
|
||||||
protocol.value = location.protocol;
|
protocol.value = location.protocol;
|
||||||
@ -157,16 +157,106 @@ const currentImagePage = computed({
|
|||||||
|
|
||||||
const activeIndex = ref(0);
|
const activeIndex = ref(0);
|
||||||
const loadProjectList = async () => {
|
const loadProjectList = async () => {
|
||||||
const resp = await axios.get(
|
// const resp = await axios.get(
|
||||||
"./jd?cmd=com.awspaas.user.apps.cmp_screen_getProjectList&sid=" + sid
|
// "./jd?cmd=com.awspaas.user.apps.cmp_screen_getProjectList&sid=" + sid
|
||||||
);
|
// );
|
||||||
|
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",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
return resp.data;
|
return resp.data;
|
||||||
};
|
};
|
||||||
|
|
||||||
const loadCameraList = async () => {
|
const loadCameraList = async () => {
|
||||||
const resp = await axios(`./jd`, {
|
// const resp = await axios(`./jd`, {
|
||||||
params: queryParams,
|
// 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;
|
cameraList.value = resp.data.rows;
|
||||||
total.value = resp.data.total;
|
total.value = resp.data.total;
|
||||||
// if (total.value === 0) {
|
// if (total.value === 0) {
|
||||||
@ -309,6 +399,7 @@ loadProjectList()
|
|||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-list {
|
.image-list {
|
||||||
// flex: 1;
|
// flex: 1;
|
||||||
margin-left: 80px;
|
margin-left: 80px;
|
||||||
@ -319,6 +410,7 @@ loadProjectList()
|
|||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
.controls {
|
.controls {
|
||||||
width: 260px;
|
width: 260px;
|
||||||
|
|
||||||
|
|||||||
@ -2,62 +2,54 @@
|
|||||||
<div class="select">
|
<div class="select">
|
||||||
<n-config-provider :locale="zhCN" :theme="darkTheme">
|
<n-config-provider :locale="zhCN" :theme="darkTheme">
|
||||||
<n-select
|
<n-select
|
||||||
placeholder="请选择项目"
|
|
||||||
v-model:value="activeId"
|
v-model:value="activeId"
|
||||||
class="my-2"
|
|
||||||
size="large"
|
|
||||||
:options="dataList"
|
:options="dataList"
|
||||||
|
class="my-2"
|
||||||
label-field="PRONAME"
|
label-field="PRONAME"
|
||||||
|
placeholder="请选择项目"
|
||||||
|
size="large"
|
||||||
value-field="PROID"
|
value-field="PROID"
|
||||||
/>
|
/>
|
||||||
</n-config-provider>
|
</n-config-provider>
|
||||||
</div>
|
</div>
|
||||||
<ChartContainer class="project-detail" title="项目详情">
|
<ChartContainer class="project-detail" title="项目详情">
|
||||||
<div class="body grid grid-cols-2 px-5">
|
<div class="body grid grid-cols-2 px-5">
|
||||||
<div class="detail-item flex flex-col justify-between py-2">
|
<div class="detail-item flex flex-col justify-between py-2 col-span-2">
|
||||||
<div class="title-row flex items-center">
|
<div class="title-row flex items-center">
|
||||||
<div class="icon"></div>
|
<div class="icon"></div>
|
||||||
<div class="title ml-2">项目名称</div>
|
<div class="title ml-2">项目名称</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">{{ detailData.PRONAME }}</div>
|
<div class="content truncate">
|
||||||
|
{{ detailData.PRONAME }}
|
||||||
</div>
|
</div>
|
||||||
<div
|
|
||||||
:style="`visibility: hidden;`"
|
|
||||||
class="detail-item flex flex-col justify-between py-2"
|
|
||||||
>
|
|
||||||
<div class="title-row flex items-center">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="title ml-2"></div>
|
|
||||||
</div>
|
|
||||||
<div class="content"></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-item flex flex-col justify-between py-2">
|
<div class="detail-item flex flex-col justify-between py-2">
|
||||||
<div class="title-row flex items-center">
|
<div class="title-row flex items-center">
|
||||||
<div class="icon"></div>
|
<div class="icon"></div>
|
||||||
<div class="title ml-2">项目地点</div>
|
<div class="title ml-2">项目地点</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">{{ detailData.PROADDRESS }}</div>
|
<div class="content truncate">{{ detailData.PROADDRESS }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-item flex flex-col justify-between py-2">
|
<div class="detail-item flex flex-col justify-between py-2">
|
||||||
<div class="title-row flex items-center">
|
<div class="title-row flex items-center">
|
||||||
<div class="icon"></div>
|
<div class="icon"></div>
|
||||||
<div class="title ml-2">项目类别</div>
|
<div class="title ml-2">项目类别</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">{{ detailData.PROTYPE }}</div>
|
<div class="content truncate">{{ detailData.PROTYPE }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-item flex flex-col justify-between py-2">
|
<div class="detail-item flex flex-col justify-between py-2">
|
||||||
<div class="title-row flex items-center">
|
<div class="title-row flex items-center">
|
||||||
<div class="icon"></div>
|
<div class="icon"></div>
|
||||||
<div class="title ml-2">建筑面积(m²)</div>
|
<div class="title ml-2">建筑面积(m²)</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">{{ detailData.FLOORAREA }}</div>
|
<div class="content truncate">{{ detailData.FLOORAREA }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-item flex flex-col justify-between py-2">
|
<div class="detail-item flex flex-col justify-between py-2">
|
||||||
<div class="title-row flex items-center">
|
<div class="title-row flex items-center">
|
||||||
<div class="icon"></div>
|
<div class="icon"></div>
|
||||||
<div class="title ml-2">项目造价(元)</div>
|
<div class="title ml-2">项目造价(元)</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content truncate">
|
||||||
{{
|
{{
|
||||||
detailData.PROCOST && parseInt(detailData.PROCOST).toLocaleString()
|
detailData.PROCOST && parseInt(detailData.PROCOST).toLocaleString()
|
||||||
}}
|
}}
|
||||||
@ -68,7 +60,7 @@
|
|||||||
<div class="icon"></div>
|
<div class="icon"></div>
|
||||||
<div class="title ml-2">合同额(元)</div>
|
<div class="title ml-2">合同额(元)</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content truncate">
|
||||||
{{ detailData.STCV && parseInt(detailData.STCV).toLocaleString() }}
|
{{ detailData.STCV && parseInt(detailData.STCV).toLocaleString() }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -77,42 +69,42 @@
|
|||||||
<div class="icon"></div>
|
<div class="icon"></div>
|
||||||
<div class="title ml-2">项目概况</div>
|
<div class="title ml-2">项目概况</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">{{ detailData.PROFILE }}</div>
|
<div class="content truncate">{{ detailData.PROFILE }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-item flex flex-col justify-between py-2">
|
<div class="detail-item flex flex-col justify-between py-2">
|
||||||
<div class="title-row flex items-center">
|
<div class="title-row flex items-center">
|
||||||
<div class="icon"></div>
|
<div class="icon"></div>
|
||||||
<div class="title ml-2">合同开工日期</div>
|
<div class="title ml-2">合同开工日期</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">{{ detailData.CBDATE }}</div>
|
<div class="content truncate">{{ detailData.CBDATE }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-item flex flex-col justify-between py-2">
|
<div class="detail-item flex flex-col justify-between py-2">
|
||||||
<div class="title-row flex items-center">
|
<div class="title-row flex items-center">
|
||||||
<div class="icon"></div>
|
<div class="icon"></div>
|
||||||
<div class="title ml-2">合同竣工日期</div>
|
<div class="title ml-2">合同竣工日期</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">{{ detailData.CEDATE }}</div>
|
<div class="content truncate">{{ detailData.CEDATE }}</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="detail-item flex flex-col justify-between py-2">
|
<!-- <div class="detail-item flex flex-col justify-between py-2">
|
||||||
<div class="title-row flex items-center">
|
<div class="title-row flex items-center">
|
||||||
<div class="icon"></div>
|
<div class="icon"></div>
|
||||||
<div class="title ml-2">审批状态</div>
|
<div class="title ml-2">审批状态</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">{{ detailData.PROSTATUS }}</div>
|
<div class="content truncate">{{ detailData.PROSTATUS }}</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
<div class="detail-item flex flex-col justify-between py-2">
|
<div class="detail-item flex flex-col justify-between py-2">
|
||||||
<div class="title-row flex items-center">
|
<div class="title-row flex items-center">
|
||||||
<div class="icon"></div>
|
<div class="icon"></div>
|
||||||
<div class="title ml-2">建设单位项目管理部门</div>
|
<div class="title ml-2">建设单位项目管理部门</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">{{ detailData.PROOWNER }}</div>
|
<div class="content truncate">{{ detailData.PROOWNER }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-item flex flex-col justify-between py-2">
|
<div class="detail-item flex flex-col justify-between py-2">
|
||||||
<div class="title-row flex items-center">
|
<div class="title-row flex items-center">
|
||||||
<div class="icon"></div>
|
<div class="icon"></div>
|
||||||
<div class="title ml-2">项目管理人员</div>
|
<div class="title ml-2">项目管理人员</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">{{ detailData.PROLEADER }}</div>
|
<div class="content truncate">{{ detailData.PROLEADER }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="detail-item flex flex-col justify-between py-2">
|
<div class="detail-item flex flex-col justify-between py-2">
|
||||||
@ -120,21 +112,21 @@
|
|||||||
<div class="icon"></div>
|
<div class="icon"></div>
|
||||||
<div class="title ml-2">施工企业</div>
|
<div class="title ml-2">施工企业</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">{{ detailData.CONTRACTOR }}</div>
|
<div class="content truncate">{{ detailData.CONTRACTOR }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-item flex flex-col justify-between py-2">
|
<div class="detail-item flex flex-col justify-between py-2">
|
||||||
<div class="title-row flex items-center">
|
<div class="title-row flex items-center">
|
||||||
<div class="icon"></div>
|
<div class="icon"></div>
|
||||||
<div class="title ml-2">监理企业</div>
|
<div class="title ml-2">监理企业</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">{{ detailData.SUPERVISOR }}</div>
|
<div class="content truncate">{{ detailData.SUPERVISOR }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-item flex flex-col justify-between py-2">
|
<div class="detail-item flex flex-col justify-between py-2">
|
||||||
<div class="title-row flex items-center">
|
<div class="title-row flex items-center">
|
||||||
<div class="icon"></div>
|
<div class="icon"></div>
|
||||||
<div class="title ml-2">预算执行情况(元)</div>
|
<div class="title ml-2">预算执行情况(元)</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content truncate">
|
||||||
{{ detailData.PAY && parseInt(detailData.PAY).toLocaleString() }}
|
{{ detailData.PAY && parseInt(detailData.PAY).toLocaleString() }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -143,7 +135,7 @@
|
|||||||
<div class="icon"></div>
|
<div class="icon"></div>
|
||||||
<div class="title ml-2">勘察企业</div>
|
<div class="title ml-2">勘察企业</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">{{ detailData.SURVEY }}</div>
|
<div class="content truncate">{{ detailData.SURVEY }}</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</ChartContainer>
|
</ChartContainer>
|
||||||
@ -151,9 +143,8 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import ChartContainer from "@/components/ChartContainer.vue";
|
import ChartContainer from "@/components/ChartContainer.vue";
|
||||||
import { onMounted, reactive, ref, toRefs, watch } from "vue";
|
import { onMounted, reactive, ref, toRefs, watch } from "vue";
|
||||||
import { NSelect, NConfigProvider, darkTheme, zhCN } from "naive-ui";
|
import { darkTheme, NConfigProvider, NSelect, zhCN } from "naive-ui";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
// import { watch } from "fs";
|
|
||||||
|
|
||||||
const data = reactive({
|
const data = reactive({
|
||||||
detailData: {},
|
detailData: {},
|
||||||
@ -162,6 +153,7 @@ const data = reactive({
|
|||||||
|
|
||||||
const { detailData, dataList } = toRefs(data);
|
const { detailData, dataList } = toRefs(data);
|
||||||
|
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
const emits = defineEmits(["project-change"]);
|
const emits = defineEmits(["project-change"]);
|
||||||
const activeId = ref();
|
const activeId = ref();
|
||||||
|
|
||||||
@ -177,6 +169,7 @@ onMounted(() => {
|
|||||||
});
|
});
|
||||||
const loadData = async () => {
|
const loadData = async () => {
|
||||||
const resp = await axios.get(
|
const resp = await axios.get(
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
"./jd?cmd=com.awspaas.user.apps.cmp_screen_getProjectList&sid=" + sid
|
"./jd?cmd=com.awspaas.user.apps.cmp_screen_getProjectList&sid=" + sid
|
||||||
);
|
);
|
||||||
dataList.value = resp.data;
|
dataList.value = resp.data;
|
||||||
@ -187,6 +180,7 @@ const loadData = async () => {
|
|||||||
|
|
||||||
watch(activeId, async (val) => {
|
watch(activeId, async (val) => {
|
||||||
const resp = await axios.get(
|
const resp = await axios.get(
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
`./jd?cmd=com.awspaas.user.apps.cmp_screen_getProjectInfo&sid=${sid}&projectId=${val}`
|
`./jd?cmd=com.awspaas.user.apps.cmp_screen_getProjectInfo&sid=${sid}&projectId=${val}`
|
||||||
);
|
);
|
||||||
detailData.value = resp.data;
|
detailData.value = resp.data;
|
||||||
@ -199,9 +193,11 @@ loadData();
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.project-detail {
|
.project-detail {
|
||||||
width: 465px;
|
width: 465px;
|
||||||
|
|
||||||
.select {
|
.select {
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.body {
|
.body {
|
||||||
// margin-top: 24px;
|
// margin-top: 24px;
|
||||||
height: 730px;
|
height: 730px;
|
||||||
@ -211,6 +207,7 @@ loadData();
|
|||||||
rgba(4, 53, 99, 0.4) 0%,
|
rgba(4, 53, 99, 0.4) 0%,
|
||||||
rgba(4, 53, 99, 0.13) 100%
|
rgba(4, 53, 99, 0.13) 100%
|
||||||
);
|
);
|
||||||
|
|
||||||
.detail-item {
|
.detail-item {
|
||||||
.title-row {
|
.title-row {
|
||||||
.icon {
|
.icon {
|
||||||
@ -219,8 +216,9 @@ loadData();
|
|||||||
background-image: linear-gradient(180deg, #abd6ff 0%, #379eff 100%);
|
background-image: linear-gradient(180deg, #abd6ff 0%, #379eff 100%);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-family: PingFangSC-Regular;
|
font-family: PingFangSC-Regular, serif;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #b1e1ff;
|
color: #b1e1ff;
|
||||||
letter-spacing: 0;
|
letter-spacing: 0;
|
||||||
@ -229,6 +227,7 @@ loadData();
|
|||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
// margin-top: 16px;
|
// margin-top: 16px;
|
||||||
font-family: PingFangSC-Regular;
|
font-family: PingFangSC-Regular;
|
||||||
@ -238,7 +237,7 @@ loadData();
|
|||||||
line-height: 26px;
|
line-height: 26px;
|
||||||
text-shadow: 0 0 9px #158eff;
|
text-shadow: 0 0 9px #158eff;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
display: -webkit-box;
|
//display: -webkit-box;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
-webkit-line-clamp: 3;
|
-webkit-line-clamp: 3;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -246,4 +245,13 @@ loadData();
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.two-line-ellipsis {
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,11 +1,8 @@
|
|||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
module.exports = {
|
module.exports = {
|
||||||
content: [
|
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
|
||||||
"./index.html",
|
|
||||||
"./src/**/*.{vue,js,ts,jsx,tsx}",
|
|
||||||
],
|
|
||||||
theme: {
|
theme: {
|
||||||
extend: {},
|
extend: {},
|
||||||
},
|
},
|
||||||
plugins: [],
|
plugins: [],
|
||||||
}
|
};
|
||||||
|
|||||||
@ -13,10 +13,17 @@ module.exports = defineConfig({
|
|||||||
target: "http://localhost:8000",
|
target: "http://localhost:8000",
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
},
|
},
|
||||||
|
"/api": {
|
||||||
|
target: "http://81.68.90.198:8088",
|
||||||
|
changeOrigin: true,
|
||||||
|
pathRewrite: {
|
||||||
|
"^/api": "", // 假设我们想把 localhost:8888/api/login 变成www.baidu.com/login 就需要这么做 js把路径中的/api去掉
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
transpileDependencies: true,
|
transpileDependencies: true,
|
||||||
lintOnSave: false,
|
lintOnSave: false,
|
||||||
publicPath: "./",
|
// publicPath: "./",
|
||||||
assetsDir: "../apps/com.awspaas.user.apps.cmp/screen",
|
// assetsDir: "../apps/com.awspaas.user.apps.cmp/screen",
|
||||||
});
|
});
|
||||||
|
|||||||
13
yarn.lock
13
yarn.lock
@ -1784,6 +1784,11 @@
|
|||||||
resolved "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.2.1.tgz#6f2948ff002ec46df01420dfeff91de16c5b4092"
|
resolved "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.2.1.tgz#6f2948ff002ec46df01420dfeff91de16c5b4092"
|
||||||
integrity sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ==
|
integrity sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ==
|
||||||
|
|
||||||
|
"@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"
|
||||||
@ -5068,6 +5073,14 @@ pify@^2.3.0:
|
|||||||
resolved "https://registry.npmmirror.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
|
resolved "https://registry.npmmirror.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
|
||||||
integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
|
integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
|
||||||
|
|
||||||
|
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"
|
||||||
|
|||||||
Reference in New Issue
Block a user