wxc
2 months ago
22 changed files with 818 additions and 546 deletions
@ -0,0 +1,43 @@ |
|||||||
|
.wrapper { |
||||||
|
min-height: 100vh; |
||||||
|
padding: 16px 20px; |
||||||
|
-webkit-box-sizing: border-box; |
||||||
|
box-sizing: border-box; |
||||||
|
background-color: #030B39; |
||||||
|
color: #fff; |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.col { |
||||||
|
--label-width: 66px; |
||||||
|
} |
||||||
|
|
||||||
|
.col label { |
||||||
|
color: #5574E1; |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
|
||||||
|
.col span { |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.datav-col { |
||||||
|
font-size: 14px; |
||||||
|
text-align: center; |
||||||
|
margin-bottom: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.datav-col label { |
||||||
|
color: #859DEC; |
||||||
|
} |
||||||
|
|
||||||
|
.descriptions_label { |
||||||
|
color: #24d2ee; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
|
||||||
|
.descriptions_content { |
||||||
|
font-size: 29px; |
||||||
|
font-weight: 700; |
||||||
|
} |
||||||
|
/*# sourceMappingURL=datav.css.map */ |
||||||
@ -0,0 +1,9 @@ |
|||||||
|
{ |
||||||
|
"version": 3, |
||||||
|
"mappings": "AAAA,AAAA,QAAQ,CAAC;EACL,UAAU,EAAE,KAAK;EACjB,OAAO,EAAE,SAAS;EAClB,UAAU,EAAE,UAAU;EACtB,gBAAgB,EAAE,OAAO;EACzB,KAAK,EAAE,IAAI;EACX,SAAS,EAAE,IAAI;CAClB;;AAED,AAAA,IAAI,CAAC;EACD,aAAa,CAAA,KAAC;CASjB;;AAVD,AAEI,IAFA,CAEA,KAAK,CAAC;EACF,KAAK,EAAE,OAAO;EACd,UAAU,EAAE,IAAI;CACnB;;AALL,AAOI,IAPA,CAOA,IAAI,CAAC;EACD,KAAK,EAAE,IAAI;CACd;;AAGL,AAAA,UAAU,CAAC;EACP,SAAS,EAAE,IAAI;EACf,UAAU,EAAE,MAAM;EAClB,aAAa,EAAE,IAAI;CAItB;;AAPD,AAII,UAJM,CAIN,KAAK,CAAC;EACF,KAAK,EAAE,OAAO;CACjB;;AAGL,AAAA,mBAAmB,CAAC;EAChB,KAAK,EAAE,OAAO;EACd,SAAS,EAAE,IAAI;CAClB;;AACD,AAAA,qBAAqB,CAAC;EAClB,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,GAAG;CACnB", |
||||||
|
"sources": [ |
||||||
|
"datav.scss" |
||||||
|
], |
||||||
|
"names": [], |
||||||
|
"file": "datav.css" |
||||||
|
} |
||||||
@ -0,0 +1,581 @@ |
|||||||
|
:root { |
||||||
|
--header-height: 9.26vh; |
||||||
|
--aside-width: 15.6vw; |
||||||
|
--multiple-tabs-height: 50px; |
||||||
|
--primary-color: #162582; |
||||||
|
--success-color: #064D00; |
||||||
|
--danger-color: #F60000; |
||||||
|
--warning-color: #D05200; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
margin: 0; |
||||||
|
overflow: hidden; |
||||||
|
color: #333; |
||||||
|
font-family: SourceHanSansCN; |
||||||
|
line-height: 1.4; |
||||||
|
width: 100% !important; |
||||||
|
} |
||||||
|
|
||||||
|
h2 { |
||||||
|
color: var(--primary-color); |
||||||
|
font-size: 24px; |
||||||
|
font-weight: 500; |
||||||
|
} |
||||||
|
|
||||||
|
h3 { |
||||||
|
color: var(--primary-color); |
||||||
|
font-size: 20px; |
||||||
|
font-weight: 500; |
||||||
|
margin: 20px 0; |
||||||
|
} |
||||||
|
|
||||||
|
h4 { |
||||||
|
font-size: 18px; |
||||||
|
font-weight: 500; |
||||||
|
} |
||||||
|
|
||||||
|
h5 { |
||||||
|
color: var(--primary-color); |
||||||
|
font-size: 16px; |
||||||
|
font-weight: 500; |
||||||
|
} |
||||||
|
|
||||||
|
p { |
||||||
|
margin: 0.5em 0; |
||||||
|
} |
||||||
|
|
||||||
|
img { |
||||||
|
max-width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
svg + span { |
||||||
|
margin-left: .5em; |
||||||
|
} |
||||||
|
|
||||||
|
.none { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.inline-block { |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
|
||||||
|
.flex { |
||||||
|
display: -webkit-box; |
||||||
|
display: -ms-flexbox; |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
|
||||||
|
.flex-inline { |
||||||
|
display: -webkit-inline-box; |
||||||
|
display: -ms-inline-flexbox; |
||||||
|
display: inline-flex; |
||||||
|
} |
||||||
|
|
||||||
|
.flex.v-center, |
||||||
|
.flex-inline.v-center { |
||||||
|
-webkit-box-align: center; |
||||||
|
-ms-flex-align: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.flex.center, |
||||||
|
.flex-inline.center { |
||||||
|
-webkit-box-pack: center; |
||||||
|
-ms-flex-pack: center; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
.flex.between, |
||||||
|
.flex-inline.between { |
||||||
|
-webkit-box-pack: justify; |
||||||
|
-ms-flex-pack: justify; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
|
||||||
|
.flex.end, |
||||||
|
.flex-inline.end { |
||||||
|
-webkit-box-pack: end; |
||||||
|
-ms-flex-pack: end; |
||||||
|
justify-content: flex-end; |
||||||
|
} |
||||||
|
|
||||||
|
.flex.wrap, |
||||||
|
.flex-inline.wrap, |
||||||
|
.flex-wrap { |
||||||
|
-ms-flex-wrap: wrap; |
||||||
|
flex-wrap: wrap; |
||||||
|
} |
||||||
|
|
||||||
|
.flex.max-content, |
||||||
|
.flex-inline.max-content { |
||||||
|
width: -webkit-max-content; |
||||||
|
width: -moz-max-content; |
||||||
|
width: max-content; |
||||||
|
} |
||||||
|
|
||||||
|
.flex.column, |
||||||
|
.flex-inline.column { |
||||||
|
-webkit-box-orient: vertical; |
||||||
|
-webkit-box-direction: normal; |
||||||
|
-ms-flex-direction: column; |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
|
||||||
|
.flex.gap-4 > *, |
||||||
|
.flex-inline.gap-4 > * { |
||||||
|
margin-right: 4px; |
||||||
|
} |
||||||
|
|
||||||
|
.flex.gap-4 > *:last-child, |
||||||
|
.flex-inline.gap-4 > *:last-child { |
||||||
|
margin-right: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.flex.gap > *, |
||||||
|
.flex-inline.gap > * { |
||||||
|
margin-right: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
.flex.gap > *:last-child, |
||||||
|
.flex-inline.gap > *:last-child { |
||||||
|
margin-right: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.flex.gap-10 > * { |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.flex.gap-10 > *:last-child { |
||||||
|
margin-right: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.flex.gap-12 > * { |
||||||
|
margin-right: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
.flex.gap-12 > *:last-child { |
||||||
|
margin-right: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.flex.gap-16 { |
||||||
|
margin-right: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.flex.gap-16:last-child { |
||||||
|
margin-right: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.flex.gap-20 { |
||||||
|
margin-right: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.flex.gap-20:last-child { |
||||||
|
margin-right: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.text-small { |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
.text-center { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.text-right { |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
|
||||||
|
.text-nowrap { |
||||||
|
white-space: nowrap; |
||||||
|
text-overflow: ellipsis; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.text-wrap { |
||||||
|
white-space: pre-wrap; |
||||||
|
} |
||||||
|
|
||||||
|
.text-primary { |
||||||
|
color: var(--primary-color); |
||||||
|
} |
||||||
|
|
||||||
|
.text-danger { |
||||||
|
color: var(--danger-color); |
||||||
|
} |
||||||
|
|
||||||
|
.text-success { |
||||||
|
color: var(--success-color); |
||||||
|
} |
||||||
|
|
||||||
|
.text-warning { |
||||||
|
color: var(--warning-color); |
||||||
|
} |
||||||
|
|
||||||
|
.text-bold { |
||||||
|
font-weight: 700; |
||||||
|
} |
||||||
|
|
||||||
|
.container { |
||||||
|
padding: 20px; |
||||||
|
-webkit-box-sizing: border-box; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
.pointer:hover { |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.relative { |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.pt-20 { |
||||||
|
padding-top: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.m-1 { |
||||||
|
margin: 1px; |
||||||
|
} |
||||||
|
|
||||||
|
.ml-2 { |
||||||
|
margin-left: 2px; |
||||||
|
} |
||||||
|
|
||||||
|
.ml-4 { |
||||||
|
margin-left: 4px; |
||||||
|
} |
||||||
|
|
||||||
|
.ml-8 { |
||||||
|
margin-left: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
.ml-10 { |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.ml-16 { |
||||||
|
margin-left: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.ml-20 { |
||||||
|
margin-left: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.mr-4 { |
||||||
|
margin-right: 4px; |
||||||
|
} |
||||||
|
|
||||||
|
.mr-8 { |
||||||
|
margin-right: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
.mr-10 { |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.mr-16 { |
||||||
|
margin-right: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.mr-18 { |
||||||
|
margin-right: 18px; |
||||||
|
} |
||||||
|
|
||||||
|
.mr-20 { |
||||||
|
margin-right: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.mr-40 { |
||||||
|
margin-right: 40px; |
||||||
|
} |
||||||
|
|
||||||
|
.mt-4 { |
||||||
|
margin-top: 4px; |
||||||
|
} |
||||||
|
|
||||||
|
.mt-8 { |
||||||
|
margin-top: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
.mt-10 { |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.mt-16 { |
||||||
|
margin-top: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.mt-18 { |
||||||
|
margin-top: 18px; |
||||||
|
} |
||||||
|
|
||||||
|
.mt-20 { |
||||||
|
margin-top: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.mt-30 { |
||||||
|
margin-top: 30px; |
||||||
|
} |
||||||
|
|
||||||
|
.mt-40 { |
||||||
|
margin-top: 40px; |
||||||
|
} |
||||||
|
|
||||||
|
.mt-60 { |
||||||
|
margin-top: 60px; |
||||||
|
} |
||||||
|
|
||||||
|
.mb-0 { |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.mb-3 { |
||||||
|
margin-bottom: 3px; |
||||||
|
} |
||||||
|
|
||||||
|
.mb-4 { |
||||||
|
margin-bottom: 4px; |
||||||
|
} |
||||||
|
|
||||||
|
.mb-8 { |
||||||
|
margin-bottom: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
.mb-10 { |
||||||
|
margin-bottom: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.mb-12 { |
||||||
|
margin-bottom: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
.mb-16 { |
||||||
|
margin-bottom: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.mb-18 { |
||||||
|
margin-bottom: 18px; |
||||||
|
} |
||||||
|
|
||||||
|
.mb-20 { |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.mb-25 { |
||||||
|
margin-bottom: 25px; |
||||||
|
} |
||||||
|
|
||||||
|
.mb-26 { |
||||||
|
margin-bottom: 26px; |
||||||
|
} |
||||||
|
|
||||||
|
.mb-32 { |
||||||
|
margin-bottom: 32px; |
||||||
|
} |
||||||
|
|
||||||
|
.mb-40 { |
||||||
|
margin-bottom: 40px; |
||||||
|
} |
||||||
|
|
||||||
|
.h100 { |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.row { |
||||||
|
display: -webkit-box; |
||||||
|
display: -ms-flexbox; |
||||||
|
display: flex; |
||||||
|
-ms-flex-wrap: wrap; |
||||||
|
flex-wrap: wrap; |
||||||
|
--label-width: 100px; |
||||||
|
} |
||||||
|
|
||||||
|
.row .col { |
||||||
|
margin-bottom: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
.col { |
||||||
|
--gap-width: 10px; |
||||||
|
display: -webkit-box; |
||||||
|
display: -ms-flexbox; |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
|
||||||
|
.col.col-4 { |
||||||
|
width: 16.6%; |
||||||
|
} |
||||||
|
|
||||||
|
.col.col-6 { |
||||||
|
width: 25%; |
||||||
|
} |
||||||
|
|
||||||
|
.col.col-8 { |
||||||
|
width: 33.3%; |
||||||
|
} |
||||||
|
|
||||||
|
.col.col-12 { |
||||||
|
width: 50%; |
||||||
|
} |
||||||
|
|
||||||
|
.col.col-18 { |
||||||
|
width: 75%; |
||||||
|
} |
||||||
|
|
||||||
|
.col.col-24 { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.col label { |
||||||
|
width: var(--label-width); |
||||||
|
text-align: right; |
||||||
|
color: #999; |
||||||
|
margin-right: var(--gap-width); |
||||||
|
} |
||||||
|
|
||||||
|
.col > span { |
||||||
|
width: calc(100% - var(--label-width) - var(--gap-width)); |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
|
||||||
|
.col.short { |
||||||
|
width: 140px; |
||||||
|
} |
||||||
|
|
||||||
|
.link { |
||||||
|
color: #004EFF; |
||||||
|
text-decoration: none; |
||||||
|
display: inline; |
||||||
|
padding: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
.link:hover { |
||||||
|
font-weight: 700; |
||||||
|
} |
||||||
|
|
||||||
|
.table-container { |
||||||
|
border: 1px solid #c6d0fb; |
||||||
|
} |
||||||
|
|
||||||
|
.overlay { |
||||||
|
position: fixed; |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
right: 0; |
||||||
|
bottom: 0; |
||||||
|
background-color: #4d515d80; |
||||||
|
-webkit-backdrop-filter: blur(10px); |
||||||
|
backdrop-filter: blur(10px); |
||||||
|
z-index: 9999999; |
||||||
|
} |
||||||
|
|
||||||
|
.position-center { |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
-webkit-transform: translate(-50%, -50%); |
||||||
|
transform: translate(-50%, -50%); |
||||||
|
} |
||||||
|
|
||||||
|
.h100 { |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.h-280 { |
||||||
|
height: 280px; |
||||||
|
} |
||||||
|
|
||||||
|
.tips p { |
||||||
|
line-height: 20px; |
||||||
|
margin: 0; |
||||||
|
color: #888; |
||||||
|
} |
||||||
|
|
||||||
|
.content { |
||||||
|
padding: 16px; |
||||||
|
white-space: pre-wrap; |
||||||
|
} |
||||||
|
|
||||||
|
.step { |
||||||
|
--setp-background-color: #fff; |
||||||
|
--setp-font-color: #666; |
||||||
|
--setp-border-color: rgba(195, 202, 245, 1); |
||||||
|
--setp-font-size: 20px; |
||||||
|
height: 45px; |
||||||
|
padding-left: 6px; |
||||||
|
background-color: var(--setp-background-color); |
||||||
|
border: 1px solid var(--setp-border-color); |
||||||
|
-webkit-box-sizing: border-box; |
||||||
|
box-sizing: border-box; |
||||||
|
color: var(--setp-font-color); |
||||||
|
position: relative; |
||||||
|
font-size: var(--setp-font-size); |
||||||
|
} |
||||||
|
|
||||||
|
.step:last-child::before { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.step::before { |
||||||
|
display: block; |
||||||
|
content: ""; |
||||||
|
position: absolute; |
||||||
|
right: -17px; |
||||||
|
top: 50%; |
||||||
|
width: 31px; |
||||||
|
height: 31px; |
||||||
|
background-color: var(--setp-background-color); |
||||||
|
border-top: 1px solid var(--setp-border-color); |
||||||
|
border-right: 1px solid var(--setp-border-color); |
||||||
|
-webkit-transform: translateY(-50%) rotate(45deg); |
||||||
|
transform: translateY(-50%) rotate(45deg); |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.step::after { |
||||||
|
display: block; |
||||||
|
content: ""; |
||||||
|
position: absolute; |
||||||
|
left: 26%; |
||||||
|
top: 50%; |
||||||
|
width: 16px; |
||||||
|
height: 16px; |
||||||
|
background-color: #fff; |
||||||
|
border: 1px solid var(--setp-border-color); |
||||||
|
border-radius: 50%; |
||||||
|
-webkit-transform: translateY(-50%); |
||||||
|
transform: translateY(-50%); |
||||||
|
} |
||||||
|
|
||||||
|
.form-row { |
||||||
|
margin-bottom: 8px; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
|
||||||
|
.form-row label { |
||||||
|
width: 120px; |
||||||
|
line-height: 32px; |
||||||
|
padding-right: 12px; |
||||||
|
-webkit-box-sizing: border-box; |
||||||
|
box-sizing: border-box; |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
|
||||||
|
.form-row label + * { |
||||||
|
width: calc(100% - 126px); |
||||||
|
} |
||||||
|
|
||||||
|
.form-row .btn-box { |
||||||
|
width: 70px; |
||||||
|
} |
||||||
|
|
||||||
|
.form-row .el-form-item { |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.query-box > * { |
||||||
|
margin-right: 10px; |
||||||
|
margin-bottom: 10px; |
||||||
|
} |
||||||
|
/*# sourceMappingURL=public.css.map */ |
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,17 @@ |
|||||||
|
@forward "element-plus/theme-chalk/src/common/var.scss" with ( |
||||||
|
$colors: ( |
||||||
|
"primary": ( |
||||||
|
"base": #162582, |
||||||
|
), |
||||||
|
'success': ( |
||||||
|
'base': #064D00, |
||||||
|
), |
||||||
|
'danger': ( |
||||||
|
'base': #F60000, |
||||||
|
), |
||||||
|
'warning': ( |
||||||
|
'base': #D05200, |
||||||
|
), |
||||||
|
) |
||||||
|
); |
||||||
|
/*# sourceMappingURL=theme.css.map */ |
||||||
@ -0,0 +1,9 @@ |
|||||||
|
{ |
||||||
|
"version": 3, |
||||||
|
"mappings": "AACA,QAAQ,CAAR;;;;;;;;;;;;;;;CAAQ", |
||||||
|
"sources": [ |
||||||
|
"theme.scss" |
||||||
|
], |
||||||
|
"names": [], |
||||||
|
"file": "theme.css" |
||||||
|
} |
||||||
@ -1,134 +0,0 @@ |
|||||||
<template> |
|
||||||
|
|
||||||
<div ref="container" class="univer-container" /> |
|
||||||
</template> |
|
||||||
<script lang="ts" setup> |
|
||||||
import '@univerjs/sheets-data-validation/lib/index.css'; |
|
||||||
|
|
||||||
import { Univer, UniverInstanceType, Workbook, LocaleType, IWorkbookData, Tools } from "@univerjs/core"; |
|
||||||
import { defaultTheme } from "@univerjs/design"; |
|
||||||
import { UniverDocsPlugin } from "@univerjs/docs"; |
|
||||||
import { UniverDocsUIPlugin } from "@univerjs/docs-ui"; |
|
||||||
import { UniverFormulaEnginePlugin } from "@univerjs/engine-formula"; |
|
||||||
import { UniverRenderEnginePlugin } from "@univerjs/engine-render"; |
|
||||||
import { UniverSheetsPlugin } from "@univerjs/sheets"; |
|
||||||
import { UniverSheetsFormulaPlugin } from "@univerjs/sheets-formula"; |
|
||||||
import { UniverSheetsUIPlugin } from "@univerjs/sheets-ui"; |
|
||||||
import { UniverUIPlugin } from "@univerjs/ui"; |
|
||||||
import { UniverDataValidationPlugin } from '@univerjs/data-validation'; |
|
||||||
import { UniverSheetsDataValidationPlugin } from '@univerjs/sheets-data-validation'; |
|
||||||
|
|
||||||
import DesignZhCN from '@univerjs/design/locale/zh-CN'; |
|
||||||
import UIZhCN from '@univerjs/ui/locale/zh-CN'; |
|
||||||
import DocsUIZhCN from '@univerjs/docs-ui/locale/zh-CN'; |
|
||||||
import SheetsZhCN from '@univerjs/sheets/locale/zh-CN'; |
|
||||||
import SheetsUIZhCN from '@univerjs/sheets-ui/locale/zh-CN'; |
|
||||||
import SheetsDataValidationZhCN from '@univerjs/sheets-data-validation/locale/zh-CN'; |
|
||||||
|
|
||||||
/** |
|
||||||
* |
|
||||||
* The ability to import locales from virtual modules and automatically import styles is provided by Univer Plugins. For more details, please refer to: https://univer.ai/guides/sheet/advanced/univer-plugins. |
|
||||||
* If you encounter issues while using the plugin or have difficulty understanding how to use it, please disable Univer Plugins and manually import the language packs and styles. |
|
||||||
* |
|
||||||
* 【从虚拟模块导入语言包】以及【自动导入样式】是由 Univer Plugins 提供的能力，详情参考：https://univer.ai/zh-CN/guides/sheet/advanced/univer-plugins |
|
||||||
* 如果您在使用该插件的时候出现了问题，或者无法理解如何使用，请禁用 Univer Plugins，并手动导入语言包和样式 |
|
||||||
*/ |
|
||||||
// import { zhCN, enUS } from 'univer:locales' |
|
||||||
|
|
||||||
const { data } = defineProps({ |
|
||||||
// workbook data |
|
||||||
data: { |
|
||||||
type: Object, |
|
||||||
default: () => ({}), |
|
||||||
}, |
|
||||||
}); |
|
||||||
|
|
||||||
const univerRef = ref<Univer | null>(null); |
|
||||||
const workbook = ref<Workbook | null>(null); |
|
||||||
const container = ref<HTMLElement | null>(null); |
|
||||||
|
|
||||||
onMounted(() => { |
|
||||||
init(data); |
|
||||||
}); |
|
||||||
|
|
||||||
onBeforeUnmount(() => { |
|
||||||
destroyUniver(); |
|
||||||
}); |
|
||||||
|
|
||||||
/** |
|
||||||
* Initialize univer instance and workbook instance |
|
||||||
* @param data {IWorkbookData} document see https://univer.ai/typedoc/@univerjs/core/interfaces/IWorkbookData |
|
||||||
*/ |
|
||||||
const init = (data = {}) => { |
|
||||||
const univer = new Univer({ |
|
||||||
theme: defaultTheme, |
|
||||||
locale: LocaleType.ZH_CN, |
|
||||||
locales: { |
|
||||||
[LocaleType.ZH_CN]: Tools.deepMerge( |
|
||||||
SheetsZhCN, |
|
||||||
DocsUIZhCN, |
|
||||||
SheetsUIZhCN, |
|
||||||
UIZhCN, |
|
||||||
DesignZhCN, |
|
||||||
SheetsDataValidationZhCN |
|
||||||
), |
|
||||||
}, |
|
||||||
}); |
|
||||||
univerRef.value = univer; |
|
||||||
|
|
||||||
|
|
||||||
// core plugins |
|
||||||
// univer.registerPlugin(UniverRenderEnginePlugin); |
|
||||||
// univer.registerPlugin(UniverFormulaEnginePlugin); |
|
||||||
univer.registerPlugin(UniverUIPlugin, { |
|
||||||
container: container.value!, |
|
||||||
toolbar: true |
|
||||||
}); |
|
||||||
|
|
||||||
// doc plugins |
|
||||||
univer.registerPlugin(UniverDocsPlugin, { |
|
||||||
hasScroll: false, |
|
||||||
}); |
|
||||||
univer.registerPlugin(UniverDocsUIPlugin); |
|
||||||
|
|
||||||
// sheet plugins |
|
||||||
univer.registerPlugin(UniverSheetsPlugin); |
|
||||||
univer.registerPlugin(UniverSheetsUIPlugin); |
|
||||||
univer.registerPlugin(UniverSheetsFormulaPlugin); |
|
||||||
univer.registerPlugin(UniverDataValidationPlugin); |
|
||||||
univer.registerPlugin(UniverSheetsDataValidationPlugin); |
|
||||||
|
|
||||||
// create workbook instance |
|
||||||
workbook.value = univer.createUnit<IWorkbookData, Workbook>(UniverInstanceType.UNIVER_SHEET, data) |
|
||||||
}; |
|
||||||
|
|
||||||
/** |
|
||||||
* Destroy univer instance and workbook instance |
|
||||||
*/ |
|
||||||
const destroyUniver = () => { |
|
||||||
toRaw(univerRef.value)?.dispose(); |
|
||||||
univerRef.value = null; |
|
||||||
workbook.value = null; |
|
||||||
}; |
|
||||||
|
|
||||||
/** |
|
||||||
* Get workbook data |
|
||||||
*/ |
|
||||||
const getData = () => { |
|
||||||
if (!workbook.value) { |
|
||||||
throw new Error('Workbook is not initialized'); |
|
||||||
} |
|
||||||
console.log(workbook.value.save()) |
|
||||||
return ; |
|
||||||
}; |
|
||||||
|
|
||||||
defineExpose({ |
|
||||||
getData, |
|
||||||
destroyUniver |
|
||||||
}); |
|
||||||
</script> |
|
||||||
<style lang="scss" scoped> |
|
||||||
.univer-container { |
|
||||||
height: 100%; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,295 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="container"> |
|
||||||
<header class="mb-20"> |
|
||||||
<el-form :label-width="114"> |
|
||||||
<el-row> |
|
||||||
<el-col :span="6"> |
|
||||||
<el-form-item label="单位"> |
|
||||||
<el-tree-select |
|
||||||
v-model="query.departId" |
|
||||||
:data="departs" |
|
||||||
:props="{ label: 'shortName', value: 'id' }" |
|
||||||
node-key="id" |
|
||||||
:default-expanded-keys="['12630']" |
|
||||||
clearable |
|
||||||
filterable |
|
||||||
check-strictly |
|
||||||
/> |
|
||||||
</el-form-item> |
|
||||||
</el-col> |
|
||||||
</el-row> |
|
||||||
</el-form> |
|
||||||
<div class="flex between"> |
|
||||||
<el-button type="primary" @click="handleShowAdd"> |
|
||||||
<template #icon> |
|
||||||
<icon name="el-icon-Plus" /> |
|
||||||
</template> |
|
||||||
新增视频配置</el-button |
|
||||||
> |
|
||||||
<div> |
|
||||||
<el-button type="primary" @click="getList"> |
|
||||||
<template #icon> |
|
||||||
<icon name="el-icon-Search" /> |
|
||||||
</template> |
|
||||||
查询</el-button |
|
||||||
> |
|
||||||
<el-button @click="reset">重置</el-button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</header> |
|
||||||
<div class="table-container"> |
|
||||||
<el-table :data="list"> |
|
||||||
<el-table-column |
|
||||||
label="单位" |
|
||||||
prop="departName" |
|
||||||
show-overflow-tooltip |
|
||||||
/> |
|
||||||
<el-table-column label="设备" prop="deviceName" /> |
|
||||||
<el-table-column |
|
||||||
label="视频地址" |
|
||||||
prop="videoUrl" |
|
||||||
show-overflow-tooltip |
|
||||||
/> |
|
||||||
<el-table-column |
|
||||||
label="排序" |
|
||||||
prop="sortId" |
|
||||||
width="90" |
|
||||||
align="center" |
|
||||||
/> |
|
||||||
<el-table-column |
|
||||||
label="创建时间" |
|
||||||
prop="createTime" |
|
||||||
width="180" |
|
||||||
/> |
|
||||||
<el-table-column label="操作" width="200"> |
|
||||||
<template #default="{ row }"> |
|
||||||
<el-button |
|
||||||
type="primary" |
|
||||||
link |
|
||||||
@click="handleEdit(row)" |
|
||||||
v-perms="['user:edit']" |
|
||||||
>编辑</el-button |
|
||||||
> |
|
||||||
<el-button type="danger" link @click="handleDel(row)" |
|
||||||
>删除</el-button |
|
||||||
> |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
</el-table> |
|
||||||
</div> |
|
||||||
<div class="flex end mt-8"> |
|
||||||
<el-pagination |
|
||||||
@size-change="getList" |
|
||||||
@current-change="getList" |
|
||||||
:page-sizes="[10, 20, 50]" |
|
||||||
v-model:page-size="query.size" |
|
||||||
v-model:current-page="query.current" |
|
||||||
layout="total, sizes, prev, pager, next" |
|
||||||
:total="total" |
|
||||||
> |
|
||||||
</el-pagination> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<el-dialog |
|
||||||
:title="mode === 'add' ? '新增视频配置' : '编辑视频配置'" |
|
||||||
v-model="show" |
|
||||||
width="600" |
|
||||||
> |
|
||||||
<el-form :label-width="120" ref="formRef" :model="form"> |
|
||||||
<el-form-item |
|
||||||
label="单位" |
|
||||||
:rules="{ |
|
||||||
required: true, |
|
||||||
message: '请选择', |
|
||||||
trigger: ['blur'], |
|
||||||
}" |
|
||||||
prop="departId" |
|
||||||
> |
|
||||||
<el-tree-select |
|
||||||
v-model="form.departId" |
|
||||||
:data="departs" |
|
||||||
:props="{ label: 'shortName', value: 'id' }" |
|
||||||
node-key="id" |
|
||||||
:default-expanded-keys="['12630']" |
|
||||||
clearable |
|
||||||
filterable |
|
||||||
check-strictly |
|
||||||
@node-click="handleDepartChange" |
|
||||||
/> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item |
|
||||||
label="设备" |
|
||||||
:rules="{ |
|
||||||
required: true, |
|
||||||
message: '请选择', |
|
||||||
trigger: ['blur'], |
|
||||||
}" |
|
||||||
prop="deviceId" |
|
||||||
> |
|
||||||
<el-tree-select |
|
||||||
:data="devices" |
|
||||||
v-model="form.deviceId" |
|
||||||
:props="{ |
|
||||||
label: 'name', |
|
||||||
value: 'deviceId', |
|
||||||
disabled: nodeDisabled, |
|
||||||
}" |
|
||||||
node-key="id" |
|
||||||
clearable |
|
||||||
filterable |
|
||||||
@current-change="handleDeviceChange" |
|
||||||
> |
|
||||||
<template #default="{ node, data }"> |
|
||||||
<div> |
|
||||||
<span class="mr-10">{{ data.name }}</span> |
|
||||||
<el-tag type="success" size="small" v-if="data.status === 'ON'">在线</el-tag> |
|
||||||
<el-tag type="danger" size="small" v-if="data.status === 'OFF'">离线</el-tag> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
</el-tree-select> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item label="排序" prop="sortId"> |
|
||||||
<el-input |
|
||||||
v-model="form.sortId" |
|
||||||
type="number" |
|
||||||
placeholder="排序" |
|
||||||
/> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item label="视频"> |
|
||||||
<div style="width: 100%"> |
|
||||||
<div style="width: 400px"> |
|
||||||
<VideoPlay :url="form.videoUrl" /> |
|
||||||
</div> |
|
||||||
<p style="height: 32px;" :title="form.videoUrl">{{ form.videoUrl }}</p> |
|
||||||
</div> |
|
||||||
</el-form-item> |
|
||||||
</el-form> |
|
||||||
|
|
||||||
<footer class="flex end"> |
|
||||||
<el-button @click="show = false" size="large">取消</el-button> |
|
||||||
<el-button type="primary" @click="submit" size="large" |
|
||||||
>确定</el-button |
|
||||||
> |
|
||||||
</footer> |
|
||||||
</el-dialog> |
|
||||||
</template> |
|
||||||
<script setup> |
|
||||||
import { |
|
||||||
listVideoConfig, |
|
||||||
listDevice, |
|
||||||
addVideoConfig, |
|
||||||
updateVideoConfig, |
|
||||||
delVideoConfig, |
|
||||||
getVideoWsUrl, |
|
||||||
} from "@/api/system/videoConfig"; |
|
||||||
import { getCountyAndCityBureausTree } from "@/api/system/depart"; |
|
||||||
import feedback from "@/utils/feedback"; |
|
||||||
|
|
||||||
const list = ref([]); |
|
||||||
const query = ref({ |
|
||||||
current: 1, |
|
||||||
size: 10, |
|
||||||
}); |
|
||||||
const total = ref(0); |
|
||||||
function getList() { |
|
||||||
listVideoConfig(query.value).then((data) => { |
|
||||||
list.value = data.records; |
|
||||||
total.value = data.total; |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
function reset() { |
|
||||||
query.value = { |
|
||||||
current: 1, |
|
||||||
size: 10, |
|
||||||
}; |
|
||||||
getList(); |
|
||||||
} |
|
||||||
|
|
||||||
const devices = ref([]); |
|
||||||
const departs = ref([]); |
|
||||||
let videoWsUrl = ""; |
|
||||||
onMounted(() => { |
|
||||||
getList(); |
|
||||||
listDevice().then((data) => { |
|
||||||
devices.value = data; |
|
||||||
}); |
|
||||||
getCountyAndCityBureausTree().then((data) => { |
|
||||||
departs.value = data; |
|
||||||
}); |
|
||||||
getVideoWsUrl().then((data) => { |
|
||||||
videoWsUrl = data; |
|
||||||
}); |
|
||||||
}); |
|
||||||
|
|
||||||
const show = ref(false); |
|
||||||
const mode = ref("add"); |
|
||||||
const form = ref({}); |
|
||||||
const formRef = ref(null); |
|
||||||
function handleEdit(row) { |
|
||||||
show.value = true; |
|
||||||
mode.value = "edit"; |
|
||||||
form.value = row; |
|
||||||
} |
|
||||||
|
|
||||||
function handleDepartChange(node) { |
|
||||||
form.value.departName = node.shortName; |
|
||||||
} |
|
||||||
|
|
||||||
function handleDeviceChange(node) { |
|
||||||
if (departs.value.length > 0) { |
|
||||||
form.value.parentId = devices.value[0].deviceId |
|
||||||
} |
|
||||||
form.value.deviceName = node.name; |
|
||||||
} |
|
||||||
|
|
||||||
watch(() => form.value.deviceId, () => { |
|
||||||
form.value.videoUrl = `${videoWsUrl}rtp/${form.value.parentId}_${form.value.deviceId}.live.flv`; |
|
||||||
}) |
|
||||||
|
|
||||||
function submit() { |
|
||||||
formRef.value.validate((flag) => { |
|
||||||
if (flag) { |
|
||||||
if (mode.value === "edit") { |
|
||||||
updateVideoConfig(form.value).then((data) => { |
|
||||||
show.value = false; |
|
||||||
form.value = {}; |
|
||||||
getList(); |
|
||||||
feedback.msgSuccess("操作成功"); |
|
||||||
}); |
|
||||||
} else { |
|
||||||
addVideoConfig(form.value).then((data) => { |
|
||||||
show.value = false; |
|
||||||
form.value = {}; |
|
||||||
getList(); |
|
||||||
feedback.msgSuccess("操作成功"); |
|
||||||
}); |
|
||||||
} |
|
||||||
} |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
watch(mode, (val) => { |
|
||||||
if (val === "add") { |
|
||||||
form.value = {}; |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
function handleShowAdd() { |
|
||||||
mode.value = "add"; |
|
||||||
show.value = true; |
|
||||||
} |
|
||||||
|
|
||||||
async function handleDel(row) { |
|
||||||
await feedback.confirm("确定要删除该数据？"); |
|
||||||
await delVideoConfig(row.id); |
|
||||||
getList(); |
|
||||||
} |
|
||||||
|
|
||||||
function nodeDisabled(data) { |
|
||||||
return data.status === "OFF"; |
|
||||||
} |
|
||||||
</script> |
|
||||||
<style lang="scss" scoped> |
|
||||||
</style> |
|
||||||
Loading…
Reference in new issue