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