herenshan112
8 months ago
35 changed files with 6053 additions and 1939 deletions
@ -0,0 +1,561 @@ |
|||
@font-face { |
|||
font-family: "iconfont"; /* Project id 3559670 */ |
|||
src: url("iconfont.woff2?t=1667531544868") format("woff2"), |
|||
url("iconfont.woff?t=1667531544868") format("woff"), |
|||
url("iconfont.ttf?t=1667531544868") format("truetype"); |
|||
} |
|||
|
|||
.iconfont { |
|||
font-family: "iconfont" !important; |
|||
font-size: 16px; |
|||
font-style: normal; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
|
|||
.sv-edit-data:before { |
|||
content: "\e655"; |
|||
} |
|||
|
|||
.sv-shimmer:before { |
|||
content: "\e6d6"; |
|||
} |
|||
|
|||
.sv-origin:before { |
|||
content: "\e6ac"; |
|||
} |
|||
|
|||
.sv-zIndex:before { |
|||
content: "\e603"; |
|||
} |
|||
|
|||
.sv-structure:before { |
|||
content: "\ec6f"; |
|||
} |
|||
|
|||
.sv-list:before { |
|||
content: "\e742"; |
|||
} |
|||
|
|||
.sv-grid:before { |
|||
content: "\e849"; |
|||
} |
|||
|
|||
.sv-flow:before { |
|||
content: "\e611"; |
|||
} |
|||
|
|||
.sv-switch:before { |
|||
content: "\e6f6"; |
|||
} |
|||
|
|||
.sv-theme:before { |
|||
content: "\e644"; |
|||
} |
|||
|
|||
.sv-element:before { |
|||
content: "\e615"; |
|||
} |
|||
|
|||
.sv-pdf:before { |
|||
content: "\e67a"; |
|||
} |
|||
|
|||
.sv-browser:before { |
|||
content: "\e726"; |
|||
} |
|||
|
|||
.sv-font-big:before { |
|||
content: "\eb04"; |
|||
} |
|||
|
|||
.sv-font-small:before { |
|||
content: "\eb05"; |
|||
} |
|||
|
|||
.sv-font-bold:before { |
|||
content: "\ec83"; |
|||
} |
|||
|
|||
.sv-font-tiny:before { |
|||
content: "\e6c1"; |
|||
} |
|||
|
|||
.sv-options:before { |
|||
content: "\e607"; |
|||
} |
|||
|
|||
.sv-close:before { |
|||
content: "\e646"; |
|||
} |
|||
|
|||
.sv-clone:before { |
|||
content: "\ec7a"; |
|||
} |
|||
|
|||
.sv-cut:before { |
|||
content: "\e643"; |
|||
} |
|||
|
|||
.sv-preview:before { |
|||
content: "\e61c"; |
|||
} |
|||
|
|||
.sv-zoom-in:before { |
|||
content: "\e60f"; |
|||
} |
|||
|
|||
.sv-zoom-out:before { |
|||
content: "\e610"; |
|||
} |
|||
|
|||
.sv-edit:before { |
|||
content: "\e6b9"; |
|||
} |
|||
|
|||
.sv-paste:before { |
|||
content: "\e6c0"; |
|||
} |
|||
|
|||
.sv-copy:before { |
|||
content: "\e6c2"; |
|||
} |
|||
|
|||
.sv-unlock:before { |
|||
content: "\e6e7"; |
|||
} |
|||
|
|||
.sv-lock:before { |
|||
content: "\e6e8"; |
|||
} |
|||
|
|||
.sv-zIndex-plus:before { |
|||
content: "\e715"; |
|||
} |
|||
|
|||
.sv-zIndex-minus:before { |
|||
content: "\e716"; |
|||
} |
|||
|
|||
.sv-zIndex-top:before { |
|||
content: "\e71f"; |
|||
} |
|||
|
|||
.sv-sigh:before { |
|||
content: "\e724"; |
|||
} |
|||
|
|||
.sv-ask:before { |
|||
content: "\e725"; |
|||
} |
|||
|
|||
.sv-dev-code:before { |
|||
content: "\e733"; |
|||
} |
|||
|
|||
.sv-bug:before { |
|||
content: "\e73f"; |
|||
} |
|||
|
|||
.sv-zIndex-bottom:before { |
|||
content: "\e71d"; |
|||
} |
|||
|
|||
.sv-new:before { |
|||
content: "\e64d"; |
|||
} |
|||
|
|||
.sv-clear:before { |
|||
content: "\e62d"; |
|||
} |
|||
|
|||
.sv-base:before { |
|||
content: "\e7d0"; |
|||
} |
|||
|
|||
.sv-export:before { |
|||
content: "\eabf"; |
|||
} |
|||
|
|||
.sv-import:before { |
|||
content: "\eac0"; |
|||
} |
|||
|
|||
.sv-add:before { |
|||
content: "\eaf3"; |
|||
} |
|||
|
|||
.sv-printer:before { |
|||
content: "\eabe"; |
|||
} |
|||
|
|||
.sv-save:before { |
|||
content: "\eabd"; |
|||
} |
|||
|
|||
.sv-more:before { |
|||
content: "\e625"; |
|||
} |
|||
|
|||
.sv-menu:before { |
|||
content: "\e628"; |
|||
} |
|||
|
|||
.sv-nav-right:before { |
|||
content: "\e629"; |
|||
} |
|||
|
|||
.sv-nav-up:before { |
|||
content: "\e62a"; |
|||
} |
|||
|
|||
.sv-nav-left:before { |
|||
content: "\e62b"; |
|||
} |
|||
|
|||
.sv-nav-down:before { |
|||
content: "\e62c"; |
|||
} |
|||
|
|||
.sv-setting:before { |
|||
content: "\e62e"; |
|||
} |
|||
|
|||
.sv-delete:before { |
|||
content: "\e630"; |
|||
} |
|||
|
|||
.sv-undo:before { |
|||
content: "\e631"; |
|||
} |
|||
|
|||
.sv-redo:before { |
|||
content: "\e632"; |
|||
} |
|||
|
|||
.sv-refresh:before { |
|||
content: "\e634"; |
|||
} |
|||
|
|||
.sv-history:before { |
|||
content: "\e635"; |
|||
} |
|||
|
|||
.sv-html:before { |
|||
content: "\e633"; |
|||
} |
|||
|
|||
.sv-longText:before { |
|||
content: "\e64c"; |
|||
} |
|||
|
|||
.sv-table:before { |
|||
content: "\ec15"; |
|||
} |
|||
|
|||
.sv-qrcode:before { |
|||
content: "\e642"; |
|||
} |
|||
|
|||
.sv-image:before { |
|||
content: "\e8ba"; |
|||
} |
|||
|
|||
.sv-barcode:before { |
|||
content: "\eb64"; |
|||
} |
|||
|
|||
.sv-text:before { |
|||
content: "\e60b"; |
|||
} |
|||
|
|||
.sv-vline:before { |
|||
content: "\e63a"; |
|||
} |
|||
|
|||
.sv-oval:before { |
|||
content: "\eb99"; |
|||
} |
|||
|
|||
.sv-rect:before { |
|||
content: "\e620"; |
|||
} |
|||
|
|||
.sv-hline:before { |
|||
content: "\e60a"; |
|||
} |
|||
|
|||
.sv-print-c:before { |
|||
content: "\e602"; |
|||
} |
|||
|
|||
.sv-print:before { |
|||
content: "\e601"; |
|||
} |
|||
|
|||
.sv-c:before { |
|||
content: "\e600"; |
|||
} |
|||
|
|||
.sv-vertical:before { |
|||
content: "\e706"; |
|||
} |
|||
|
|||
.sv-distributeHor:before { |
|||
content: "\e707"; |
|||
} |
|||
|
|||
.sv-right:before { |
|||
content: "\e708"; |
|||
} |
|||
|
|||
.sv-left:before { |
|||
content: "\e709"; |
|||
} |
|||
|
|||
.sv-distributeVer:before { |
|||
content: "\e70f"; |
|||
} |
|||
|
|||
.sv-bottom:before { |
|||
content: "\e710"; |
|||
} |
|||
|
|||
.sv-top:before { |
|||
content: "\e711"; |
|||
} |
|||
|
|||
.sv-horizontal:before { |
|||
content: "\e712"; |
|||
} |
|||
|
|||
.sv-rotate:before { |
|||
content: "\e66f"; |
|||
} |
|||
|
|||
.sv-butongbu:before { |
|||
content: "\e636"; |
|||
} |
|||
|
|||
.sv-synchronization:before { |
|||
content: "\e676"; |
|||
} |
|||
/* 重写全局 hiprint 样式 */ |
|||
.hiprint-headerLine, |
|||
.hiprint-footerLine { |
|||
border-color: purple !important; |
|||
} |
|||
|
|||
.hiprint-headerLine:hover, |
|||
.hiprint-footerLine:hover { |
|||
border-top: 3px dashed purple !important; |
|||
} |
|||
|
|||
.hiprint-headerLine:hover:before { |
|||
content: "页眉线"; |
|||
left: calc(50% - 18px); |
|||
position: relative; |
|||
background: #ffff; |
|||
top: -14px; |
|||
color: purple; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.hiprint-footerLine:hover:before { |
|||
content: "页脚线"; |
|||
left: calc(50% - 18px); |
|||
position: relative; |
|||
color: purple; |
|||
background: #ffff; |
|||
top: -14px; |
|||
font-size: 12px; |
|||
} |
|||
/* 区域 */ |
|||
.left { |
|||
background: white; |
|||
border-radius: 4px; |
|||
border: 1px solid #d9d9d9; |
|||
padding: 10px 0; |
|||
box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%); |
|||
overflow: auto; |
|||
} |
|||
.center { |
|||
margin: 0 10px; |
|||
background: white; |
|||
border-radius: 4px; |
|||
border: 1px solid #d9d9d9; |
|||
padding: 20px; |
|||
box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%); |
|||
overflow: auto; |
|||
} |
|||
.right { |
|||
background: white; |
|||
border-radius: 4px; |
|||
border: 1px solid #d9d9d9; |
|||
padding: 10px 0; |
|||
box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%); |
|||
overflow: auto; |
|||
} |
|||
/* 左侧拖拽元素样式 */ |
|||
.title { |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
width: 100%; |
|||
margin: 10px 0 0 24px; |
|||
} |
|||
.item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
background: white; |
|||
padding: 4px 10px; |
|||
margin: 10px 8px 4px 8px; |
|||
width: 38%; |
|||
min-height: 60px; |
|||
border-radius: 4px; |
|||
box-shadow: 2px 2px 2px 2px rgba(171, 171, 171, 0.2); |
|||
} |
|||
.item .iconfont { |
|||
font-size: 1.5rem; |
|||
} |
|||
.item span { |
|||
font-size: 14px; |
|||
} |
|||
|
|||
/* scrollbar */ |
|||
::-webkit-scrollbar { |
|||
height: 4px; |
|||
width: 4px; |
|||
} |
|||
::-webkit-scrollbar-corner { |
|||
height: 4px; |
|||
width: 4px; |
|||
} |
|||
::-webkit-scrollbar-thumb { |
|||
background: purple; |
|||
border-radius: 2px; |
|||
background-image: -webkit-linear-gradient( |
|||
45deg, |
|||
rgba(255, 255, 255, 0.2) 25%, |
|||
transparent 25%, |
|||
transparent 50%, |
|||
rgba(255, 255, 255, 0.2) 50%, |
|||
rgba(255, 255, 255, 0.2) 75%, |
|||
transparent 75%, |
|||
transparent |
|||
); |
|||
} |
|||
::-webkit-scrollbar-thumb:hover { |
|||
background: purple; |
|||
} |
|||
|
|||
/* flex */ |
|||
.flex-row { |
|||
display: flex; |
|||
} |
|||
.flex-col { |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
.flex-wrap { |
|||
flex-wrap: wrap; |
|||
} |
|||
.align-center { |
|||
align-items: center; |
|||
} |
|||
.justify-center { |
|||
justify-content: center; |
|||
} |
|||
|
|||
.flex-1 { |
|||
flex: 1; |
|||
} |
|||
.flex-2 { |
|||
flex: 2; |
|||
} |
|||
.flex-3 { |
|||
flex: 3; |
|||
} |
|||
.flex-4 { |
|||
flex: 4; |
|||
} |
|||
.flex-5 { |
|||
flex: 5; |
|||
} |
|||
|
|||
.ml-10 { |
|||
margin-left: 10px; |
|||
} |
|||
.mr-10 { |
|||
margin-right: 10px; |
|||
} |
|||
.mt-10 { |
|||
margin-top: 10px; |
|||
} |
|||
.mb-10 { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
button:hover { |
|||
opacity: 1; |
|||
} |
|||
button i { |
|||
font-size: 16px !important; |
|||
} |
|||
.circle, |
|||
.circle-4 { |
|||
border-radius: 4px !important; |
|||
} |
|||
.circle-10 { |
|||
border-radius: 10px !important; |
|||
} |
|||
|
|||
/* modal */ |
|||
.modal { |
|||
padding: 0; |
|||
margin: 0; |
|||
} |
|||
.modal .mask { |
|||
position: fixed; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
z-index: 1000; |
|||
height: 100%; |
|||
background-color: #00000073; |
|||
} |
|||
.modal .wrap { |
|||
position: fixed; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
z-index: 1000; |
|||
overflow: auto; |
|||
background-color: #00000073; |
|||
outline: 0; |
|||
} |
|||
.modal .wrap .box { |
|||
position: relative; |
|||
margin: 10% auto; |
|||
width: 40%; |
|||
background: #fff; |
|||
border-radius: 4px; |
|||
z-index: 1001; |
|||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); |
|||
transition: all 0.3s ease; |
|||
} |
|||
.modal-box__header { |
|||
padding: 10px 14px; |
|||
border-bottom: 1px solid #e9e9e9; |
|||
} |
|||
.modal-box__footer { |
|||
text-align: end; |
|||
} |
|||
.modal-box__footer button { |
|||
min-width: 100px; |
|||
} |
|||
.modal-box__footer button:not(:last-child) { |
|||
margin-right: 10px; |
|||
} |
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,561 @@ |
|||
@font-face { |
|||
font-family: "iconfont"; /* Project id 3559670 */ |
|||
src: url("iconfont.woff2?t=1667531544868") format("woff2"), |
|||
url("iconfont.woff?t=1667531544868") format("woff"), |
|||
url("iconfont.ttf?t=1667531544868") format("truetype"); |
|||
} |
|||
|
|||
.iconfont { |
|||
font-family: "iconfont" !important; |
|||
font-size: 16px; |
|||
font-style: normal; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
|
|||
.sv-edit-data:before { |
|||
content: "\e655"; |
|||
} |
|||
|
|||
.sv-shimmer:before { |
|||
content: "\e6d6"; |
|||
} |
|||
|
|||
.sv-origin:before { |
|||
content: "\e6ac"; |
|||
} |
|||
|
|||
.sv-zIndex:before { |
|||
content: "\e603"; |
|||
} |
|||
|
|||
.sv-structure:before { |
|||
content: "\ec6f"; |
|||
} |
|||
|
|||
.sv-list:before { |
|||
content: "\e742"; |
|||
} |
|||
|
|||
.sv-grid:before { |
|||
content: "\e849"; |
|||
} |
|||
|
|||
.sv-flow:before { |
|||
content: "\e611"; |
|||
} |
|||
|
|||
.sv-switch:before { |
|||
content: "\e6f6"; |
|||
} |
|||
|
|||
.sv-theme:before { |
|||
content: "\e644"; |
|||
} |
|||
|
|||
.sv-element:before { |
|||
content: "\e615"; |
|||
} |
|||
|
|||
.sv-pdf:before { |
|||
content: "\e67a"; |
|||
} |
|||
|
|||
.sv-browser:before { |
|||
content: "\e726"; |
|||
} |
|||
|
|||
.sv-font-big:before { |
|||
content: "\eb04"; |
|||
} |
|||
|
|||
.sv-font-small:before { |
|||
content: "\eb05"; |
|||
} |
|||
|
|||
.sv-font-bold:before { |
|||
content: "\ec83"; |
|||
} |
|||
|
|||
.sv-font-tiny:before { |
|||
content: "\e6c1"; |
|||
} |
|||
|
|||
.sv-options:before { |
|||
content: "\e607"; |
|||
} |
|||
|
|||
.sv-close:before { |
|||
content: "\e646"; |
|||
} |
|||
|
|||
.sv-clone:before { |
|||
content: "\ec7a"; |
|||
} |
|||
|
|||
.sv-cut:before { |
|||
content: "\e643"; |
|||
} |
|||
|
|||
.sv-preview:before { |
|||
content: "\e61c"; |
|||
} |
|||
|
|||
.sv-zoom-in:before { |
|||
content: "\e60f"; |
|||
} |
|||
|
|||
.sv-zoom-out:before { |
|||
content: "\e610"; |
|||
} |
|||
|
|||
.sv-edit:before { |
|||
content: "\e6b9"; |
|||
} |
|||
|
|||
.sv-paste:before { |
|||
content: "\e6c0"; |
|||
} |
|||
|
|||
.sv-copy:before { |
|||
content: "\e6c2"; |
|||
} |
|||
|
|||
.sv-unlock:before { |
|||
content: "\e6e7"; |
|||
} |
|||
|
|||
.sv-lock:before { |
|||
content: "\e6e8"; |
|||
} |
|||
|
|||
.sv-zIndex-plus:before { |
|||
content: "\e715"; |
|||
} |
|||
|
|||
.sv-zIndex-minus:before { |
|||
content: "\e716"; |
|||
} |
|||
|
|||
.sv-zIndex-top:before { |
|||
content: "\e71f"; |
|||
} |
|||
|
|||
.sv-sigh:before { |
|||
content: "\e724"; |
|||
} |
|||
|
|||
.sv-ask:before { |
|||
content: "\e725"; |
|||
} |
|||
|
|||
.sv-dev-code:before { |
|||
content: "\e733"; |
|||
} |
|||
|
|||
.sv-bug:before { |
|||
content: "\e73f"; |
|||
} |
|||
|
|||
.sv-zIndex-bottom:before { |
|||
content: "\e71d"; |
|||
} |
|||
|
|||
.sv-new:before { |
|||
content: "\e64d"; |
|||
} |
|||
|
|||
.sv-clear:before { |
|||
content: "\e62d"; |
|||
} |
|||
|
|||
.sv-base:before { |
|||
content: "\e7d0"; |
|||
} |
|||
|
|||
.sv-export:before { |
|||
content: "\eabf"; |
|||
} |
|||
|
|||
.sv-import:before { |
|||
content: "\eac0"; |
|||
} |
|||
|
|||
.sv-add:before { |
|||
content: "\eaf3"; |
|||
} |
|||
|
|||
.sv-printer:before { |
|||
content: "\eabe"; |
|||
} |
|||
|
|||
.sv-save:before { |
|||
content: "\eabd"; |
|||
} |
|||
|
|||
.sv-more:before { |
|||
content: "\e625"; |
|||
} |
|||
|
|||
.sv-menu:before { |
|||
content: "\e628"; |
|||
} |
|||
|
|||
.sv-nav-right:before { |
|||
content: "\e629"; |
|||
} |
|||
|
|||
.sv-nav-up:before { |
|||
content: "\e62a"; |
|||
} |
|||
|
|||
.sv-nav-left:before { |
|||
content: "\e62b"; |
|||
} |
|||
|
|||
.sv-nav-down:before { |
|||
content: "\e62c"; |
|||
} |
|||
|
|||
.sv-setting:before { |
|||
content: "\e62e"; |
|||
} |
|||
|
|||
.sv-delete:before { |
|||
content: "\e630"; |
|||
} |
|||
|
|||
.sv-undo:before { |
|||
content: "\e631"; |
|||
} |
|||
|
|||
.sv-redo:before { |
|||
content: "\e632"; |
|||
} |
|||
|
|||
.sv-refresh:before { |
|||
content: "\e634"; |
|||
} |
|||
|
|||
.sv-history:before { |
|||
content: "\e635"; |
|||
} |
|||
|
|||
.sv-html:before { |
|||
content: "\e633"; |
|||
} |
|||
|
|||
.sv-longText:before { |
|||
content: "\e64c"; |
|||
} |
|||
|
|||
.sv-table:before { |
|||
content: "\ec15"; |
|||
} |
|||
|
|||
.sv-qrcode:before { |
|||
content: "\e642"; |
|||
} |
|||
|
|||
.sv-image:before { |
|||
content: "\e8ba"; |
|||
} |
|||
|
|||
.sv-barcode:before { |
|||
content: "\eb64"; |
|||
} |
|||
|
|||
.sv-text:before { |
|||
content: "\e60b"; |
|||
} |
|||
|
|||
.sv-vline:before { |
|||
content: "\e63a"; |
|||
} |
|||
|
|||
.sv-oval:before { |
|||
content: "\eb99"; |
|||
} |
|||
|
|||
.sv-rect:before { |
|||
content: "\e620"; |
|||
} |
|||
|
|||
.sv-hline:before { |
|||
content: "\e60a"; |
|||
} |
|||
|
|||
.sv-print-c:before { |
|||
content: "\e602"; |
|||
} |
|||
|
|||
.sv-print:before { |
|||
content: "\e601"; |
|||
} |
|||
|
|||
.sv-c:before { |
|||
content: "\e600"; |
|||
} |
|||
|
|||
.sv-vertical:before { |
|||
content: "\e706"; |
|||
} |
|||
|
|||
.sv-distributeHor:before { |
|||
content: "\e707"; |
|||
} |
|||
|
|||
.sv-right:before { |
|||
content: "\e708"; |
|||
} |
|||
|
|||
.sv-left:before { |
|||
content: "\e709"; |
|||
} |
|||
|
|||
.sv-distributeVer:before { |
|||
content: "\e70f"; |
|||
} |
|||
|
|||
.sv-bottom:before { |
|||
content: "\e710"; |
|||
} |
|||
|
|||
.sv-top:before { |
|||
content: "\e711"; |
|||
} |
|||
|
|||
.sv-horizontal:before { |
|||
content: "\e712"; |
|||
} |
|||
|
|||
.sv-rotate:before { |
|||
content: "\e66f"; |
|||
} |
|||
|
|||
.sv-butongbu:before { |
|||
content: "\e636"; |
|||
} |
|||
|
|||
.sv-synchronization:before { |
|||
content: "\e676"; |
|||
} |
|||
/* 重写全局 hiprint 样式 */ |
|||
.hiprint-headerLine, |
|||
.hiprint-footerLine { |
|||
border-color: purple !important; |
|||
} |
|||
|
|||
.hiprint-headerLine:hover, |
|||
.hiprint-footerLine:hover { |
|||
border-top: 3px dashed purple !important; |
|||
} |
|||
|
|||
.hiprint-headerLine:hover:before { |
|||
content: "页眉线"; |
|||
left: calc(50% - 18px); |
|||
position: relative; |
|||
background: #ffff; |
|||
top: -14px; |
|||
color: purple; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.hiprint-footerLine:hover:before { |
|||
content: "页脚线"; |
|||
left: calc(50% - 18px); |
|||
position: relative; |
|||
color: purple; |
|||
background: #ffff; |
|||
top: -14px; |
|||
font-size: 12px; |
|||
} |
|||
/* 区域 */ |
|||
.left { |
|||
background: white; |
|||
border-radius: 4px; |
|||
border: 1px solid #d9d9d9; |
|||
padding: 10px 0; |
|||
box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%); |
|||
overflow: auto; |
|||
} |
|||
.center { |
|||
margin: 0 10px; |
|||
background: white; |
|||
border-radius: 4px; |
|||
border: 1px solid #d9d9d9; |
|||
padding: 20px; |
|||
box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%); |
|||
overflow: auto; |
|||
} |
|||
.right { |
|||
background: white; |
|||
border-radius: 4px; |
|||
border: 1px solid #d9d9d9; |
|||
padding: 10px 0; |
|||
box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%); |
|||
overflow: auto; |
|||
} |
|||
/* 左侧拖拽元素样式 */ |
|||
.title { |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
width: 100%; |
|||
margin: 10px 0 0 24px; |
|||
} |
|||
.item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
background: white; |
|||
padding: 4px 10px; |
|||
margin: 10px 8px 4px 8px; |
|||
width: 38%; |
|||
min-height: 60px; |
|||
border-radius: 4px; |
|||
box-shadow: 2px 2px 2px 2px rgba(171, 171, 171, 0.2); |
|||
} |
|||
.item .iconfont { |
|||
font-size: 1.5rem; |
|||
} |
|||
.item span { |
|||
font-size: 14px; |
|||
} |
|||
|
|||
/* scrollbar */ |
|||
::-webkit-scrollbar { |
|||
height: 4px; |
|||
width: 4px; |
|||
} |
|||
::-webkit-scrollbar-corner { |
|||
height: 4px; |
|||
width: 4px; |
|||
} |
|||
::-webkit-scrollbar-thumb { |
|||
background: purple; |
|||
border-radius: 2px; |
|||
background-image: -webkit-linear-gradient( |
|||
45deg, |
|||
rgba(255, 255, 255, 0.2) 25%, |
|||
transparent 25%, |
|||
transparent 50%, |
|||
rgba(255, 255, 255, 0.2) 50%, |
|||
rgba(255, 255, 255, 0.2) 75%, |
|||
transparent 75%, |
|||
transparent |
|||
); |
|||
} |
|||
::-webkit-scrollbar-thumb:hover { |
|||
background: purple; |
|||
} |
|||
|
|||
/* flex */ |
|||
.flex-row { |
|||
display: flex; |
|||
} |
|||
.flex-col { |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
.flex-wrap { |
|||
flex-wrap: wrap; |
|||
} |
|||
.align-center { |
|||
align-items: center; |
|||
} |
|||
.justify-center { |
|||
justify-content: center; |
|||
} |
|||
|
|||
.flex-1 { |
|||
flex: 1; |
|||
} |
|||
.flex-2 { |
|||
flex: 2; |
|||
} |
|||
.flex-3 { |
|||
flex: 3; |
|||
} |
|||
.flex-4 { |
|||
flex: 4; |
|||
} |
|||
.flex-5 { |
|||
flex: 5; |
|||
} |
|||
|
|||
.ml-10 { |
|||
margin-left: 10px; |
|||
} |
|||
.mr-10 { |
|||
margin-right: 10px; |
|||
} |
|||
.mt-10 { |
|||
margin-top: 10px; |
|||
} |
|||
.mb-10 { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
button:hover { |
|||
opacity: 1; |
|||
} |
|||
button i { |
|||
font-size: 16px !important; |
|||
} |
|||
.circle, |
|||
.circle-4 { |
|||
border-radius: 4px !important; |
|||
} |
|||
.circle-10 { |
|||
border-radius: 10px !important; |
|||
} |
|||
|
|||
/* modal */ |
|||
.modal { |
|||
padding: 0; |
|||
margin: 0; |
|||
} |
|||
.modal .mask { |
|||
position: fixed; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
z-index: 1000; |
|||
height: 100%; |
|||
background-color: #00000073; |
|||
} |
|||
.modal .wrap { |
|||
position: fixed; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
z-index: 1000; |
|||
overflow: auto; |
|||
background-color: #00000073; |
|||
outline: 0; |
|||
} |
|||
.modal .wrap .box { |
|||
position: relative; |
|||
margin: 10% auto; |
|||
width: 40%; |
|||
background: #fff; |
|||
border-radius: 4px; |
|||
z-index: 1001; |
|||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); |
|||
transition: all 0.3s ease; |
|||
} |
|||
.modal-box__header { |
|||
padding: 10px 14px; |
|||
border-bottom: 1px solid #e9e9e9; |
|||
} |
|||
.modal-box__footer { |
|||
text-align: end; |
|||
} |
|||
.modal-box__footer button { |
|||
min-width: 100px; |
|||
} |
|||
.modal-box__footer button:not(:last-child) { |
|||
margin-right: 10px; |
|||
} |
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,562 @@ |
|||
@font-face { |
|||
font-family: "iconfont"; /* Project id 3559670 */ |
|||
src: url("iconfont.woff2?t=1667531544868") format("woff2"), |
|||
url("iconfont.woff?t=1667531544868") format("woff"), |
|||
url("iconfont.ttf?t=1667531544868") format("truetype"); |
|||
} |
|||
|
|||
.iconfont { |
|||
font-family: "iconfont" !important; |
|||
font-size: 16px; |
|||
font-style: normal; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
|
|||
.sv-edit-data:before { |
|||
content: "\e655"; |
|||
} |
|||
|
|||
.sv-shimmer:before { |
|||
content: "\e6d6"; |
|||
} |
|||
|
|||
.sv-origin:before { |
|||
content: "\e6ac"; |
|||
} |
|||
|
|||
.sv-zIndex:before { |
|||
content: "\e603"; |
|||
} |
|||
|
|||
.sv-structure:before { |
|||
content: "\ec6f"; |
|||
} |
|||
|
|||
.sv-list:before { |
|||
content: "\e742"; |
|||
} |
|||
|
|||
.sv-grid:before { |
|||
content: "\e849"; |
|||
} |
|||
|
|||
.sv-flow:before { |
|||
content: "\e611"; |
|||
} |
|||
|
|||
.sv-switch:before { |
|||
content: "\e6f6"; |
|||
} |
|||
|
|||
.sv-theme:before { |
|||
content: "\e644"; |
|||
} |
|||
|
|||
.sv-element:before { |
|||
content: "\e615"; |
|||
} |
|||
|
|||
.sv-pdf:before { |
|||
content: "\e67a"; |
|||
} |
|||
|
|||
.sv-browser:before { |
|||
content: "\e726"; |
|||
} |
|||
|
|||
.sv-font-big:before { |
|||
content: "\eb04"; |
|||
} |
|||
|
|||
.sv-font-small:before { |
|||
content: "\eb05"; |
|||
} |
|||
|
|||
.sv-font-bold:before { |
|||
content: "\ec83"; |
|||
} |
|||
|
|||
.sv-font-tiny:before { |
|||
content: "\e6c1"; |
|||
} |
|||
|
|||
.sv-options:before { |
|||
content: "\e607"; |
|||
} |
|||
|
|||
.sv-close:before { |
|||
content: "\e646"; |
|||
} |
|||
|
|||
.sv-clone:before { |
|||
content: "\ec7a"; |
|||
} |
|||
|
|||
.sv-cut:before { |
|||
content: "\e643"; |
|||
} |
|||
|
|||
.sv-preview:before { |
|||
content: "\e61c"; |
|||
} |
|||
|
|||
.sv-zoom-in:before { |
|||
content: "\e60f"; |
|||
} |
|||
|
|||
.sv-zoom-out:before { |
|||
content: "\e610"; |
|||
} |
|||
|
|||
.sv-edit:before { |
|||
content: "\e6b9"; |
|||
} |
|||
|
|||
.sv-paste:before { |
|||
content: "\e6c0"; |
|||
} |
|||
|
|||
.sv-copy:before { |
|||
content: "\e6c2"; |
|||
} |
|||
|
|||
.sv-unlock:before { |
|||
content: "\e6e7"; |
|||
} |
|||
|
|||
.sv-lock:before { |
|||
content: "\e6e8"; |
|||
} |
|||
|
|||
.sv-zIndex-plus:before { |
|||
content: "\e715"; |
|||
} |
|||
|
|||
.sv-zIndex-minus:before { |
|||
content: "\e716"; |
|||
} |
|||
|
|||
.sv-zIndex-top:before { |
|||
content: "\e71f"; |
|||
} |
|||
|
|||
.sv-sigh:before { |
|||
content: "\e724"; |
|||
} |
|||
|
|||
.sv-ask:before { |
|||
content: "\e725"; |
|||
} |
|||
|
|||
.sv-dev-code:before { |
|||
content: "\e733"; |
|||
} |
|||
|
|||
.sv-bug:before { |
|||
content: "\e73f"; |
|||
} |
|||
|
|||
.sv-zIndex-bottom:before { |
|||
content: "\e71d"; |
|||
} |
|||
|
|||
.sv-new:before { |
|||
content: "\e64d"; |
|||
} |
|||
|
|||
.sv-clear:before { |
|||
content: "\e62d"; |
|||
} |
|||
|
|||
.sv-base:before { |
|||
content: "\e7d0"; |
|||
} |
|||
|
|||
.sv-export:before { |
|||
content: "\eabf"; |
|||
} |
|||
|
|||
.sv-import:before { |
|||
content: "\eac0"; |
|||
} |
|||
|
|||
.sv-add:before { |
|||
content: "\eaf3"; |
|||
} |
|||
|
|||
.sv-printer:before { |
|||
content: "\eabe"; |
|||
} |
|||
|
|||
.sv-save:before { |
|||
content: "\eabd"; |
|||
} |
|||
|
|||
.sv-more:before { |
|||
content: "\e625"; |
|||
} |
|||
|
|||
.sv-menu:before { |
|||
content: "\e628"; |
|||
} |
|||
|
|||
.sv-nav-right:before { |
|||
content: "\e629"; |
|||
} |
|||
|
|||
.sv-nav-up:before { |
|||
content: "\e62a"; |
|||
} |
|||
|
|||
.sv-nav-left:before { |
|||
content: "\e62b"; |
|||
} |
|||
|
|||
.sv-nav-down:before { |
|||
content: "\e62c"; |
|||
} |
|||
|
|||
.sv-setting:before { |
|||
content: "\e62e"; |
|||
} |
|||
|
|||
.sv-delete:before { |
|||
content: "\e630"; |
|||
} |
|||
|
|||
.sv-undo:before { |
|||
content: "\e631"; |
|||
} |
|||
|
|||
.sv-redo:before { |
|||
content: "\e632"; |
|||
} |
|||
|
|||
.sv-refresh:before { |
|||
content: "\e634"; |
|||
} |
|||
|
|||
.sv-history:before { |
|||
content: "\e635"; |
|||
} |
|||
|
|||
.sv-html:before { |
|||
content: "\e633"; |
|||
} |
|||
|
|||
.sv-longText:before { |
|||
content: "\e64c"; |
|||
} |
|||
|
|||
.sv-table:before { |
|||
content: "\ec15"; |
|||
} |
|||
|
|||
.sv-qrcode:before { |
|||
content: "\e642"; |
|||
} |
|||
|
|||
.sv-image:before { |
|||
content: "\e8ba"; |
|||
} |
|||
|
|||
.sv-barcode:before { |
|||
content: "\eb64"; |
|||
} |
|||
|
|||
.sv-text:before { |
|||
content: "\e60b"; |
|||
} |
|||
|
|||
.sv-vline:before { |
|||
content: "\e63a"; |
|||
} |
|||
|
|||
.sv-oval:before { |
|||
content: "\eb99"; |
|||
} |
|||
|
|||
.sv-rect:before { |
|||
content: "\e620"; |
|||
} |
|||
|
|||
.sv-hline:before { |
|||
content: "\e60a"; |
|||
} |
|||
|
|||
.sv-print-c:before { |
|||
content: "\e602"; |
|||
} |
|||
|
|||
.sv-print:before { |
|||
content: "\e601"; |
|||
} |
|||
|
|||
.sv-c:before { |
|||
content: "\e600"; |
|||
} |
|||
|
|||
.sv-vertical:before { |
|||
content: "\e706"; |
|||
} |
|||
|
|||
.sv-distributeHor:before { |
|||
content: "\e707"; |
|||
} |
|||
|
|||
.sv-right:before { |
|||
content: "\e708"; |
|||
} |
|||
|
|||
.sv-left:before { |
|||
content: "\e709"; |
|||
} |
|||
|
|||
.sv-distributeVer:before { |
|||
content: "\e70f"; |
|||
} |
|||
|
|||
.sv-bottom:before { |
|||
content: "\e710"; |
|||
} |
|||
|
|||
.sv-top:before { |
|||
content: "\e711"; |
|||
} |
|||
|
|||
.sv-horizontal:before { |
|||
content: "\e712"; |
|||
} |
|||
|
|||
.sv-rotate:before { |
|||
content: "\e66f"; |
|||
} |
|||
|
|||
.sv-butongbu:before { |
|||
content: "\e636"; |
|||
} |
|||
|
|||
.sv-synchronization:before { |
|||
content: "\e676"; |
|||
} |
|||
/* 重写全局 hiprint 样式 */ |
|||
.hiprint-headerLine, |
|||
.hiprint-footerLine { |
|||
border-color: purple !important; |
|||
} |
|||
|
|||
.hiprint-headerLine:hover, |
|||
.hiprint-footerLine:hover { |
|||
border-top: 3px dashed purple !important; |
|||
} |
|||
|
|||
.hiprint-headerLine:hover:before { |
|||
content: "页眉线"; |
|||
left: calc(50% - 18px); |
|||
position: relative; |
|||
background: #ffff; |
|||
top: -14px; |
|||
color: purple; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.hiprint-footerLine:hover:before { |
|||
content: "页脚线"; |
|||
left: calc(50% - 18px); |
|||
position: relative; |
|||
color: purple; |
|||
background: #ffff; |
|||
top: -14px; |
|||
font-size: 12px; |
|||
} |
|||
/* 区域 */ |
|||
.left { |
|||
background: white; |
|||
border-radius: 4px; |
|||
border: 1px solid #d9d9d9; |
|||
padding: 10px 0; |
|||
box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%); |
|||
overflow: auto; |
|||
} |
|||
.center { |
|||
margin: 0 10px; |
|||
background: white; |
|||
border-radius: 4px; |
|||
border: 1px solid #d9d9d9; |
|||
padding: 20px; |
|||
box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%); |
|||
overflow: auto; |
|||
} |
|||
.right { |
|||
background: white; |
|||
border-radius: 4px; |
|||
border: 1px solid #d9d9d9; |
|||
padding: 10px 0; |
|||
box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%); |
|||
overflow: auto; |
|||
} |
|||
/* 左侧拖拽元素样式 */ |
|||
.title { |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
width: 100%; |
|||
margin: 10px 0 0 24px; |
|||
} |
|||
.item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
background: white; |
|||
padding: 4px 10px; |
|||
margin: 10px 8px 4px 8px; |
|||
width: 38%; |
|||
min-height: 60px; |
|||
border-radius: 4px; |
|||
box-shadow: 2px 2px 2px 2px rgba(171, 171, 171, 0.2); |
|||
} |
|||
.item .iconfont { |
|||
font-size: 1.5rem; |
|||
} |
|||
.item span { |
|||
font-size: 14px; |
|||
} |
|||
|
|||
/* scrollbar */ |
|||
::-webkit-scrollbar { |
|||
height: 4px; |
|||
width: 4px; |
|||
} |
|||
::-webkit-scrollbar-corner { |
|||
height: 4px; |
|||
width: 4px; |
|||
} |
|||
::-webkit-scrollbar-thumb { |
|||
background: purple; |
|||
border-radius: 2px; |
|||
background-image: -webkit-linear-gradient( |
|||
45deg, |
|||
rgba(255, 255, 255, 0.2) 25%, |
|||
transparent 25%, |
|||
transparent 50%, |
|||
rgba(255, 255, 255, 0.2) 50%, |
|||
rgba(255, 255, 255, 0.2) 75%, |
|||
transparent 75%, |
|||
transparent |
|||
); |
|||
} |
|||
::-webkit-scrollbar-thumb:hover { |
|||
background: purple; |
|||
} |
|||
|
|||
/* flex */ |
|||
.flex-row { |
|||
display: flex; |
|||
} |
|||
.flex-col { |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
.flex-wrap { |
|||
flex-wrap: wrap; |
|||
} |
|||
.align-center { |
|||
align-items: center; |
|||
} |
|||
.justify-center { |
|||
justify-content: center; |
|||
} |
|||
|
|||
.flex-1 { |
|||
flex: 1; |
|||
} |
|||
.flex-2 { |
|||
flex: 2; |
|||
} |
|||
.flex-3 { |
|||
flex: 3; |
|||
} |
|||
.flex-4 { |
|||
flex: 4; |
|||
} |
|||
.flex-5 { |
|||
flex: 5; |
|||
} |
|||
|
|||
.ml-10 { |
|||
margin-left: 10px; |
|||
} |
|||
.mr-10 { |
|||
margin-right: 10px; |
|||
} |
|||
.mt-10 { |
|||
margin-top: 10px; |
|||
} |
|||
.mb-10 { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
button:hover { |
|||
opacity: 1; |
|||
} |
|||
button i { |
|||
font-size: 16px !important; |
|||
} |
|||
.circle, |
|||
.circle-4 { |
|||
border-radius: 4px !important; |
|||
} |
|||
.circle-10 { |
|||
border-radius: 10px !important; |
|||
} |
|||
|
|||
/* modal */ |
|||
.modal { |
|||
padding: 0; |
|||
margin: 0; |
|||
} |
|||
.modal .mask { |
|||
position: fixed; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
z-index: 1000; |
|||
height: 100%; |
|||
background-color: #00000073; |
|||
} |
|||
.modal .wrap { |
|||
position: fixed; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
z-index: 1000; |
|||
overflow: auto; |
|||
background-color: #00000073; |
|||
outline: 0; |
|||
} |
|||
.modal .wrap .box { |
|||
position: relative; |
|||
margin: 10% auto; |
|||
width: 40%; |
|||
background: #fff; |
|||
border-radius: 4px; |
|||
z-index: 1001; |
|||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); |
|||
transition: all 0.3s ease; |
|||
} |
|||
.modal-box__header { |
|||
padding: 10px 14px; |
|||
border-bottom: 1px solid #e9e9e9; |
|||
} |
|||
.modal-box__footer { |
|||
text-align: end; |
|||
} |
|||
.modal-box__footer button { |
|||
min-width: 100px; |
|||
} |
|||
.modal-box__footer button:not(:last-child) { |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
@ -0,0 +1,143 @@ |
|||
import { defineStore } from "pinia"; |
|||
import { store } from "@/store"; |
|||
export const printPageConfigStore = defineStore("printPageConfigStore", () => { |
|||
const isMoveCanvas = ref(false); |
|||
const isThumbnail = ref(true); |
|||
const viewWidth = ref<number>(1000); |
|||
const viewHeight = ref<number>(800); |
|||
const scale = ref<number>(100); //缩放
|
|||
const scrollTop = ref<number>(0); |
|||
const scrollLeft = ref<number>(0); |
|||
const screenWidth = ref<number>(1920); |
|||
const screenHeight = ref<number>(1080); |
|||
//bg
|
|||
const backgroundColor = ref<string>('#FFFFFF'); |
|||
const backgroundImage = ref<string>(''); |
|||
|
|||
const scaleSub = () => { |
|||
return scale.value |
|||
} |
|||
|
|||
const percent = () => { |
|||
return scale.value * 0.01 |
|||
} |
|||
|
|||
const thumbnailSize = () => { |
|||
if(scale.value > 100){ |
|||
return 10 / scale.value |
|||
}else{ |
|||
return 0.1; |
|||
} |
|||
} |
|||
|
|||
const viewWidthSub = () => { |
|||
return viewWidth.value; |
|||
} |
|||
|
|||
const viewHeightSub = () => { |
|||
return viewHeight.value; |
|||
} |
|||
|
|||
const scrollTopSub = () => { |
|||
return scrollTop.value; |
|||
} |
|||
const scrollLeftSub = () => { |
|||
return scrollLeft.value; |
|||
} |
|||
const screenWidthSub = () => { |
|||
return screenWidth.value; |
|||
} |
|||
const screenHeightSub = () => { |
|||
return screenHeight.value; |
|||
} |
|||
|
|||
const showWidth = () => { |
|||
return screenWidthSub() * (scaleSub() < 100 ? 1 : percent()) + 400; |
|||
} |
|||
const showHeight = () => { |
|||
return screenHeightSub() * (scaleSub() < 100 ? 1 : percent()) + 400; |
|||
} |
|||
|
|||
const isMoveCanvasSub = () => { |
|||
return isMoveCanvas.value; |
|||
} |
|||
|
|||
const canvasConfig = () =>{ |
|||
return { |
|||
thumbnailWidth: Math.ceil(screenWidthSub() * thumbnailSize() * percent()), |
|||
thumbnailHeight: Math.ceil(screenHeightSub() * thumbnailSize ()* percent()), |
|||
thumbnailWrapWidth: Math.ceil(showWidth()* thumbnailSize()), |
|||
thumbnailWrapHeight: Math.ceil(showHeight() * thumbnailSize()) |
|||
} |
|||
} |
|||
|
|||
const setViewBox = (data:{ width: number; height: number }) => { |
|||
viewWidth.value = data.width; |
|||
viewHeight.value = data.height; |
|||
} |
|||
|
|||
const setScroll = ({ left, top }: { left: number; top: number }) => { |
|||
const distance = 60; |
|||
|
|||
if (left < 0) { |
|||
left = 0; |
|||
} else if (left > showWidth() - viewWidthSub() - distance) { |
|||
left = showWidth() - viewWidthSub() - distance; |
|||
} |
|||
|
|||
if (top < 0) { |
|||
top = 0; |
|||
} else if (top > showHeight() - viewHeightSub() - distance) { |
|||
top = showHeight() - viewHeightSub() - distance; |
|||
} |
|||
scrollLeft.value = Math.round(left); |
|||
scrollTop.value = Math.round(top); |
|||
} |
|||
|
|||
const setMoveCanvas = (data: boolean) => { |
|||
isMoveCanvas.value = data |
|||
} |
|||
|
|||
const setScale = (data: number) => { |
|||
scale.value = data; |
|||
} |
|||
const setThumbnail = (data: boolean) => { |
|||
isThumbnail.value = data; |
|||
} |
|||
return { |
|||
isMoveCanvas, |
|||
isThumbnail, |
|||
viewWidth, |
|||
viewHeight, |
|||
scale, //缩放
|
|||
scrollTop, |
|||
scrollLeft, |
|||
screenWidth, |
|||
screenHeight, |
|||
//bg
|
|||
backgroundColor, |
|||
backgroundImage, |
|||
scaleSub, |
|||
percent, |
|||
thumbnailSize, |
|||
viewWidthSub, |
|||
viewHeightSub, |
|||
scrollTopSub, |
|||
scrollLeftSub, |
|||
screenWidthSub, |
|||
screenHeightSub, |
|||
showWidth, |
|||
showHeight, |
|||
isMoveCanvasSub, |
|||
canvasConfig, |
|||
setViewBox, |
|||
setScroll, |
|||
setMoveCanvas, |
|||
setScale, |
|||
setThumbnail |
|||
}; |
|||
}); |
|||
|
|||
export function useUserStoreHook() { |
|||
return printPageConfigStore(store); |
|||
} |
|||
@ -0,0 +1,214 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-03-24 11:00:01 |
|||
@ 备注: 画板背景 |
|||
--> |
|||
<script lang="ts" setup> |
|||
import { drawRuler } from "./drawRuler.ts"; |
|||
import { printPageConfigStore } from "@/store/ruler/index"; |
|||
|
|||
const editorStore = printPageConfigStore(); |
|||
const topRulerRef = ref(null); //上部标尺 |
|||
const leftRulerRef = ref(null); //左部标尺 |
|||
const scrollLeft = ref(editorStore.scrollLeftSub() - 24); |
|||
const scrollTop = ref(editorStore.scrollLeftSub() - 24); |
|||
const isMoveCanvas = ref(editorStore.isMoveCanvasSub()); |
|||
|
|||
let moveInfo = { |
|||
startX: 0, |
|||
startY: 0, |
|||
}; |
|||
|
|||
const bgStyle = reactive({ |
|||
width: editorStore.showWidth() + "px", |
|||
height: editorStore.showHeight() + "px", |
|||
}); |
|||
const canvasStyle = reactive({ |
|||
left: -scrollLeft.value + "px", |
|||
top: -scrollTop.value + "px", |
|||
width: editorStore.screenWidth + "px", |
|||
height: editorStore.screenHeight + "px", |
|||
transform: `scale(${editorStore.scale * 0.01})`, |
|||
}); |
|||
const topStyle = reactive({ |
|||
left: -scrollLeft.value + "px", |
|||
}); |
|||
const leftStyle = reactive({ |
|||
top: -scrollTop.value + "px", |
|||
}); |
|||
|
|||
let isRuler = false; |
|||
const refreshRuler = () => { |
|||
if (!isRuler) { |
|||
isRuler = true; |
|||
nextTick(() => { |
|||
drawRuler( |
|||
"top", |
|||
topRulerRef.value, |
|||
editorStore.scale, |
|||
editorStore.showWidth(), |
|||
24, |
|||
60 |
|||
); |
|||
drawRuler( |
|||
"left", |
|||
leftRulerRef.value, |
|||
editorStore.scale, |
|||
editorStore.showHeight(), |
|||
24, |
|||
60 |
|||
); |
|||
isRuler = false; |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
//数据监听区域 |
|||
watch( |
|||
() => editorStore.screenWidth, |
|||
() => { |
|||
refreshRuler(); |
|||
}, |
|||
{ |
|||
deep: true, |
|||
} |
|||
); |
|||
watch( |
|||
() => editorStore.screenHeight, |
|||
() => { |
|||
refreshRuler(); |
|||
}, |
|||
{ |
|||
deep: true, |
|||
} |
|||
); |
|||
watch( |
|||
() => editorStore.scale, |
|||
(val: number) => { |
|||
console.log("标尺刻度值---111--》", val); |
|||
canvasStyle.scale = val * 0.01; |
|||
refreshRuler(); |
|||
}, |
|||
{ |
|||
deep: true, |
|||
} |
|||
); |
|||
const onKeyAction = (e: KeyboardEvent) => { |
|||
if (e.keyCode == keyCode.space) { |
|||
editorStore.setMoveCanvas(!editorStore.isMoveCanvas); |
|||
} |
|||
}; |
|||
const onWheelAction = (e: WheelEvent) => { |
|||
// console.log(editorStore.scale); |
|||
if (e.wheelDelta > 0) { |
|||
editorStore.setScale(editorStore.scale + 1); |
|||
} else { |
|||
editorStore.setScale(editorStore.scale - 1); |
|||
} |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
// window.addEventListener("keydown", onKeyAction); |
|||
window.addEventListener("wheel", onWheelAction); |
|||
refreshRuler(); |
|||
}); |
|||
onBeforeUnmount(() => { |
|||
// window.removeEventListener("keydown", onKeyAction); |
|||
window.removeEventListener("wheel", onWheelAction); |
|||
}); |
|||
|
|||
const onMoveCanvasDown = (e: MouseEvent) => { |
|||
e.stopPropagation(); |
|||
console.log("鼠标", editorStore.scale); |
|||
moveInfo = { |
|||
startX: e.clientX, |
|||
startY: e.clientY, |
|||
}; |
|||
}; |
|||
const onMoveCanvasUp = (e: MouseEvent) => { |
|||
e.stopPropagation(); |
|||
let left = scrollLeft.value - (e.clientX - moveInfo.startX); |
|||
let top = scrollTop.value - (e.clientY - moveInfo.startY); |
|||
// console.log('move', left, top); |
|||
editorStore.setScroll({ left, top }); |
|||
}; |
|||
</script> |
|||
<template> |
|||
<div class="dashboard-canvas" id="dashboard"> |
|||
<div class="canvas-bg" :style="bgStyle"> |
|||
<div |
|||
:style="canvasStyle" |
|||
class="canvas-panel-wrap" |
|||
@mousedown="onMoveCanvasDown" |
|||
@mouseup="onMoveCanvasUp" |
|||
> |
|||
{{ canvasStyle }} |
|||
<slot></slot> |
|||
</div> |
|||
<canvas ref="topRulerRef" class="canvas-ruler top" :style="topStyle"></canvas> |
|||
<canvas ref="leftRulerRef" class="canvas-ruler left" :style="leftStyle"></canvas> |
|||
|
|||
<i class="canvas-ruler-cross fa fa-eye"></i> |
|||
<div |
|||
class="canvas-move" |
|||
v-show="isMoveCanvas" |
|||
@mousedown="onMoveCanvasDown" |
|||
@mouseup="onMoveCanvasUp" |
|||
> |
|||
1212312312 |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<style lang="scss" scoped> |
|||
.dashboard-canvas { |
|||
top: 0px; |
|||
height: calc(100vh - 200px); |
|||
overflow: hidden; |
|||
position: relative; |
|||
left: 0px; |
|||
width: 100%; |
|||
} |
|||
.canvas-ruler-cross { |
|||
display: inline-block; |
|||
width: 24px; |
|||
height: 24px; |
|||
position: absolute; |
|||
background-color: var(--ruler-bg); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.canvas-panel-wrap { |
|||
position: absolute; |
|||
box-shadow: var(--canvas-shadow) 0 0 30px 0; |
|||
transform-origin: left top; |
|||
margin-left: 20px; |
|||
margin-top: 20px; |
|||
background-color: #e4e4ed; |
|||
} |
|||
.canvas-move { |
|||
position: absolute; |
|||
height: 100%; |
|||
width: 100%; |
|||
background-color: var(--move-bg); |
|||
cursor: move; |
|||
} |
|||
|
|||
.canvas-ruler { |
|||
position: absolute; |
|||
transform-origin: left top; |
|||
// cursor: ew-resize; |
|||
background-color: var(--ruler-bg); |
|||
|
|||
&.left { |
|||
top: 24px; |
|||
left: 0px; |
|||
} |
|||
|
|||
&.top { |
|||
top: 0px; |
|||
left: 24px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,98 @@ |
|||
/** |
|||
* 画标尺刻度Canvas |
|||
* @param direction 方向 |
|||
* @param canvas canvas DOM |
|||
* @param scale 缩放比例[20-200] |
|||
* @param width 长度 |
|||
* @param height 高度 |
|||
* @param startLen 开始距离 |
|||
*/ |
|||
export function drawRuler( |
|||
direction: string, |
|||
canvas: HTMLCanvasElement, |
|||
scale: number = 100, |
|||
width: number, |
|||
height: number = 24, |
|||
startLen: number = 60 |
|||
) { |
|||
const padding = 2; |
|||
const ctx: CanvasRenderingContext2D = canvas.getContext('2d'); |
|||
const percent = scale * 0.01; |
|||
let unit = Math.ceil(10 / percent); |
|||
if (unit < 8) { |
|||
unit = 8; |
|||
} |
|||
//计算出要绘制多少个刻度
|
|||
const scaleCount = Math.ceil(width + startLen / unit); |
|||
if (direction == 'top') { |
|||
canvas.width = width + startLen; |
|||
canvas.height = height; |
|||
ctx.clearRect(0, 0, width, height); |
|||
ctx.beginPath(); |
|||
//绘制起点
|
|||
ctx.strokeStyle = 'rgb(161, 174, 179)'; |
|||
ctx.font = '10px Arial'; |
|||
ctx.lineWidth = 0.5; |
|||
ctx.moveTo(startLen, 0); |
|||
ctx.lineTo(startLen, height); |
|||
ctx.fillText('0', startLen + padding, 13); |
|||
|
|||
for (let i = 1; i <= scaleCount; i++) { |
|||
//计算每个刻度的位置
|
|||
const step = startLen + Math.round(i * unit * percent); |
|||
//10的倍数刻度大长度
|
|||
if (i % 10 === 0) { |
|||
ctx.moveTo(step, 0); |
|||
ctx.lineTo(step, height); |
|||
//标注刻度值
|
|||
const scaleText = i * unit + ''; |
|||
ctx.fillText(scaleText, step + padding, 13); |
|||
} else if (i % 5 === 0) {//5的倍数刻度中长度
|
|||
ctx.moveTo(step, 15); |
|||
ctx.lineTo(step, height); |
|||
//标注刻度值
|
|||
const scaleText = i * unit + ''; |
|||
ctx.fillText(scaleText, step + padding, 13); |
|||
} else {//其他刻度小长度
|
|||
ctx.moveTo(step, height - 2); |
|||
ctx.lineTo(step, height); |
|||
} |
|||
} |
|||
ctx.stroke(); |
|||
} else { |
|||
canvas.width = height; |
|||
canvas.height = width + startLen; |
|||
ctx.clearRect(0, 0, height, width + startLen); |
|||
|
|||
ctx.beginPath(); |
|||
//绘制起点
|
|||
ctx.strokeStyle = 'rgb(161, 174, 179)'; |
|||
ctx.font = '10px Arial'; |
|||
ctx.lineWidth = 0.5; |
|||
ctx.moveTo(0, startLen); |
|||
ctx.lineTo(height, startLen); |
|||
ctx.fillText('0', padding, startLen - padding); |
|||
//计算出要绘制多少个刻度
|
|||
|
|||
for (let i = 1; i <= scaleCount; i++) { |
|||
const step = startLen + Math.round(i * unit * percent); |
|||
if (i % 10 === 0) { |
|||
ctx.moveTo(0, step); |
|||
ctx.lineTo(height, step); |
|||
//标注刻度值
|
|||
const scaleText = unit * i + ''; |
|||
ctx.fillText(scaleText, padding, step - padding); |
|||
} else if (i % 5 === 0) { |
|||
ctx.moveTo(15, step); |
|||
ctx.lineTo(height, step); |
|||
//标注刻度值
|
|||
const scaleText = unit * i + ''; |
|||
ctx.fillText(scaleText, padding, step - padding); |
|||
} else { |
|||
ctx.moveTo(height - 2, step); |
|||
ctx.lineTo(height, step); |
|||
} |
|||
} |
|||
ctx.stroke(); |
|||
} |
|||
} |
|||
@ -0,0 +1,75 @@ |
|||
import { hiprint } from "vue-plugin-hiprint"; |
|||
export const iCustomProvider = function (options) { |
|||
console.log(options.moduleList.value); |
|||
var addElementTypes = function (context) { |
|||
context.removePrintElementTypes("providerModule1"); |
|||
context.addPrintElementTypes("providerModule1", [ |
|||
new hiprint.PrintElementTypeGroup("追溯业务", [ |
|||
// options.config,
|
|||
...options.moduleList.value.map(item => ({ |
|||
tid: item.defaultModule, |
|||
title: item.title, |
|||
data: item.title, |
|||
type: item.type, |
|||
options: { |
|||
field: item.field, |
|||
height: 14, |
|||
testData: "默认", |
|||
fontSize: 12, |
|||
fontWeight: '500', |
|||
textAlign: 'center', |
|||
textContentVerticalAlign: 'middle', |
|||
...(item.textType ? { textType: item.textType } : {}), |
|||
}, |
|||
})), |
|||
{ |
|||
tid: "providerModule1.text", |
|||
title: "文本", |
|||
data: "文本", |
|||
type: "text", |
|||
options: { |
|||
field: "customText", |
|||
testData: "文本", |
|||
height: 14, |
|||
fontSize: 12, |
|||
fontWeight: "500", |
|||
textAlign: "left", |
|||
textContentVerticalAlign: "middle", |
|||
}, |
|||
}, |
|||
{ |
|||
tid: "providerModule1.barcode", |
|||
title: "条形码", |
|||
data: "XS888888888", |
|||
type: "text", |
|||
options: { |
|||
field: "barcode", |
|||
testData: "XS888888888", |
|||
height: 32, |
|||
fontSize: 12, |
|||
lineHeight: 18, |
|||
textAlign: "left", |
|||
textType: "barcode", |
|||
}, |
|||
}, |
|||
{ |
|||
tid: "providerModule1.qrcode", |
|||
title: "二维码", |
|||
data: "XS888888888", |
|||
type: "qrcode", |
|||
options: { |
|||
field: "qrcode", |
|||
testData: "XS888888888", |
|||
height: 32, |
|||
fontSize: 12, |
|||
lineHeight: 18, |
|||
textType: "qrcode", |
|||
}, |
|||
}, |
|||
]), |
|||
]); |
|||
}; |
|||
return { |
|||
addElementTypes: addElementTypes, |
|||
}; |
|||
}; |
|||
@ -0,0 +1,200 @@ |
|||
<template> |
|||
<div class="canvas-bg" :style="bgStyle"> |
|||
<div :style="canvasStyle" class="canvas-panel-wrap"> |
|||
{{ canvasStyle }} <slot></slot> |
|||
</div> |
|||
|
|||
<canvas ref="topRulerRef" class="canvas-ruler top" :style="topStyle"></canvas> |
|||
<canvas ref="leftRulerRef" class="canvas-ruler left" :style="leftStyle"></canvas> |
|||
<i class="canvas-ruler-cross"></i> |
|||
|
|||
<div |
|||
class="canvas-move" |
|||
v-show="isMoveCanvas" |
|||
@mousedown="onMoveCanvasDown" |
|||
@mouseup="onMoveCanvasUp" |
|||
></div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { |
|||
defineComponent, |
|||
ref, |
|||
onMounted, |
|||
computed, |
|||
watch, |
|||
nextTick, |
|||
onBeforeUnmount, |
|||
} from "vue"; |
|||
import { drawRuler } from "./drawRuler.ts"; |
|||
import { useUserRulerStore } from "@/store/ruler/index"; |
|||
import { keyCode } from "./data/keyCode"; |
|||
|
|||
export default defineComponent({ |
|||
name: "CanvasBg", |
|||
|
|||
setup() { |
|||
const editorStore = useUserRulerStore(); |
|||
const topRulerRef = ref(); |
|||
const leftRulerRef = ref(); |
|||
const isMoveCanvas = computed(() => editorStore.isMoveCanvas); |
|||
watch( |
|||
() => editorStore.screenWidth, |
|||
() => { |
|||
refreshRuler(); |
|||
} |
|||
); |
|||
watch( |
|||
() => editorStore.screenHeight, |
|||
() => { |
|||
refreshRuler(); |
|||
} |
|||
); |
|||
watch( |
|||
() => editorStore.scale, |
|||
() => { |
|||
refreshRuler(); |
|||
} |
|||
); |
|||
|
|||
let isRuler = false; |
|||
const refreshRuler = () => { |
|||
if (!isRuler) { |
|||
isRuler = true; |
|||
nextTick(() => { |
|||
drawRuler( |
|||
"top", |
|||
topRulerRef.value, |
|||
editorStore.scale, |
|||
editorStore.showWidth, |
|||
24, |
|||
60 |
|||
); |
|||
drawRuler( |
|||
"left", |
|||
leftRulerRef.value, |
|||
editorStore.scale, |
|||
editorStore.showWidth, |
|||
24, |
|||
60 |
|||
); |
|||
isRuler = false; |
|||
}); |
|||
} |
|||
}; |
|||
const scrollLeft = computed(() => { |
|||
return editorStore.scrollLeft - 24; |
|||
}); |
|||
const scrollTop = computed(() => { |
|||
return editorStore.scrollTop - 24; |
|||
}); |
|||
const onKeyAction = (e: KeyboardEvent) => { |
|||
if (e.keyCode == keyCode.space) { |
|||
editorStore.setMoveCanvas(!editorStore.isMoveCanvas); |
|||
} |
|||
}; |
|||
const onWheelAction = (e: WheelEvent) => { |
|||
if (isMoveCanvas.value) { |
|||
if (e.wheelDelta > 0) { |
|||
editorStore.setScale(editorStore.scale + 1); |
|||
} else { |
|||
editorStore.setScale(editorStore.scale - 1); |
|||
} |
|||
} |
|||
}; |
|||
onMounted(() => { |
|||
window.addEventListener("keydown", onKeyAction); |
|||
window.addEventListener("wheel", onWheelAction); |
|||
refreshRuler(); |
|||
}); |
|||
onBeforeUnmount(() => { |
|||
window.removeEventListener("keydown", onKeyAction); |
|||
window.removeEventListener("wheel", onWheelAction); |
|||
}); |
|||
let moveInfo = { |
|||
startX: 0, |
|||
startY: 0, |
|||
}; |
|||
return { |
|||
topRulerRef, |
|||
leftRulerRef, |
|||
topStyle: computed(() => ({ |
|||
left: -scrollLeft.value + "px", |
|||
})), |
|||
leftStyle: computed(() => ({ top: -scrollTop.value + "px" })), |
|||
isMoveCanvas, |
|||
bgStyle: computed(() => ({ |
|||
width: editorStore.showWidth + "px", |
|||
height: editorStore.showHeight + "px", |
|||
})), |
|||
canvasStyle: computed(() => ({ |
|||
left: -scrollLeft.value + "px", |
|||
top: -scrollTop.value + "px", |
|||
width: editorStore.screenWidth + "px", |
|||
height: editorStore.screenHeight + "px", |
|||
transform: `scale(${editorStore.scale * 0.01})`, |
|||
})), |
|||
scrollLeft, |
|||
scrollTop, |
|||
onMoveCanvasDown: (e: MouseEvent) => { |
|||
e.stopPropagation(); |
|||
|
|||
moveInfo = { |
|||
startX: e.clientX, |
|||
startY: e.clientY, |
|||
}; |
|||
}, |
|||
onMoveCanvasUp: (e: MouseEvent) => { |
|||
e.stopPropagation(); |
|||
let left = scrollLeft.value - (e.clientX - moveInfo.startX); |
|||
let top = scrollTop.value - (e.clientY - moveInfo.startY); |
|||
// console.log('move', left, top); |
|||
editorStore.setScroll({ left, top }); |
|||
}, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.canvas-ruler-cross { |
|||
display: inline-block; |
|||
width: 24px; |
|||
height: 24px; |
|||
position: absolute; |
|||
|
|||
background-color: var(--ruler-bg); |
|||
} |
|||
.canvas-panel-wrap { |
|||
position: absolute; |
|||
box-shadow: var(--canvas-shadow) 0 0 30px 0; |
|||
transform-origin: left top; |
|||
margin-left: 60px; |
|||
margin-top: 60px; |
|||
} |
|||
.canvas-move { |
|||
position: absolute; |
|||
height: 100%; |
|||
width: 100%; |
|||
background-color: var(--move-bg); |
|||
cursor: move; |
|||
} |
|||
|
|||
.canvas-ruler { |
|||
position: absolute; |
|||
transform-origin: left top; |
|||
// cursor: ew-resize; |
|||
background-color: var(--ruler-bg); |
|||
|
|||
&.left { |
|||
top: 24px; |
|||
left: 0px; |
|||
} |
|||
|
|||
&.top { |
|||
top: 0px; |
|||
left: 24px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,148 @@ |
|||
<template> |
|||
<div class="canvas-slider"> |
|||
<el-tooltip placement="top" effect="light"> |
|||
<template #content> |
|||
<div class="operation-tip-item"> |
|||
<div>按下空格键，可移动画布</div> |
|||
<div>按下空格键，滚动鼠标滑轮可放缩画布</div> |
|||
</div> |
|||
</template> |
|||
<i class="el-icon-thumb" /> |
|||
</el-tooltip> |
|||
<el-input-number v-model="scalePercent" :min="20" :max="200" size="small"></el-input-number> |
|||
<el-slider |
|||
size="small" |
|||
v-model="scalePercent" |
|||
:min="20" |
|||
:max="200" |
|||
:step="5" |
|||
style="width: 100px; margin: 0 12px" |
|||
></el-slider> |
|||
|
|||
<el-tooltip placement="top"> |
|||
<template #content> 实际大小 </template> |
|||
<i class="el-icon-full-screen" @click="onRealCanvas" /> |
|||
</el-tooltip> |
|||
<el-tooltip placement="top"> |
|||
<template #content> 适应屏幕大小 </template> |
|||
<i class="el-icon-aim" @click="onFitCanvas" /> |
|||
</el-tooltip> |
|||
<i |
|||
class="el-icon-monitor" |
|||
:style="{ color: showThumbnail ? 'dodgerblue' : 'rgba(0,0,0,0.5)' }" |
|||
@click="onMagic" |
|||
></i> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { useEditorStore } from '@/stores/editor'; |
|||
|
|||
import { defineComponent, ref, computed, onMounted, onBeforeUnmount } from 'vue'; |
|||
|
|||
//下方状态栏 |
|||
export default defineComponent({ |
|||
name: 'CanvasSlider', |
|||
setup() { |
|||
const store = useEditorStore(); |
|||
|
|||
const scalePercent = computed({ |
|||
get: () => store.scale, |
|||
set: (value) => { |
|||
store.setScale(value); |
|||
} |
|||
}); |
|||
const showThumbnail = computed({ |
|||
get: () => store.$state.isThumbnail, |
|||
set: (value) => { |
|||
store.setThumbnail(value); |
|||
} |
|||
}); |
|||
|
|||
const onFitCanvas = () => { |
|||
store.setScale( |
|||
parseInt( |
|||
//@ts-ignore |
|||
((document.getElementById('dashboard').offsetHeight - 84) / store.screenHeight) * 100 |
|||
) |
|||
); |
|||
}; |
|||
const onRealCanvas = () => { |
|||
store.setScale(100); |
|||
}; |
|||
const onMagic = () => { |
|||
showThumbnail.value = !showThumbnail.value; |
|||
}; |
|||
|
|||
return { |
|||
showThumbnail, |
|||
|
|||
scalePercent, |
|||
|
|||
//method |
|||
onMagic, |
|||
onFitCanvas, |
|||
onRealCanvas |
|||
}; |
|||
} |
|||
}); |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.operation-tip-item > div { |
|||
color: var(--el-color-primary); |
|||
background: rgba(26, 103, 255, 0.1); |
|||
padding: 5px 10px; |
|||
} |
|||
|
|||
.operation-tip-item > div:not(:last-child) { |
|||
margin-bottom: 8px; |
|||
} |
|||
|
|||
i { |
|||
font-size: 16px; |
|||
color: var(--slider-icon); |
|||
cursor: pointer; |
|||
|
|||
&:not(:last-child) { |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
|
|||
:deep(.el-input-number__decrease) { |
|||
border: none; |
|||
background: none; |
|||
} |
|||
|
|||
:deep(.el-input-number__increase) { |
|||
border: none; |
|||
background: none; |
|||
} |
|||
|
|||
:deep(.el-input__wrapper) { |
|||
border: none; |
|||
border-radius: 0; |
|||
background: none; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
.el-input-number--small { |
|||
width: 84px; |
|||
} |
|||
|
|||
$line: solid 1px var(--canvas-slider-border); |
|||
|
|||
.canvas-slider { |
|||
display: flex; |
|||
position: fixed; |
|||
bottom: 10px; |
|||
right: 310px; |
|||
background-color: var(--slider-bg); |
|||
height: 32px; |
|||
justify-content: flex-end; |
|||
align-items: center; |
|||
border: $line; |
|||
z-index: 9; |
|||
border-radius: 2px; |
|||
padding: 0 16px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,193 @@ |
|||
<template> |
|||
<canvas |
|||
class="canvas-thumbnail" |
|||
:width="canvasConfig.thumbnailWrapWidth" |
|||
:height="canvasConfig.thumbnailWrapHeight" |
|||
ref="thumbnailRef" |
|||
v-show="showThumbnail" |
|||
@mousedown="onMoveStart" |
|||
@mousemove="onMove" |
|||
@mouseup="onMoveEnd" |
|||
@mouseleave="onMoveEnd" |
|||
> |
|||
</canvas> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { useEditorStore } from '@/stores/editor'; |
|||
import { |
|||
defineComponent, |
|||
ref, |
|||
computed, |
|||
reactive, |
|||
watch, |
|||
onMounted, |
|||
nextTick, |
|||
onBeforeUnmount |
|||
} from 'vue'; |
|||
export default defineComponent({ |
|||
name: 'CanvasThumbnail', |
|||
setup(props, context) { |
|||
const editorStore = useEditorStore(); |
|||
const thumbnailRef = ref(); |
|||
const canvasConfig = computed(() => editorStore.canvasConfig); |
|||
let isLock = false; |
|||
const viewBox = computed({ |
|||
get: () => ({ viewWidth: editorStore.viewWidth, viewHeight: editorStore.viewHeight }), |
|||
set: (v) => { |
|||
editorStore.setViewBox(v); |
|||
} |
|||
}); |
|||
const unscale = computed(() => { |
|||
if (editorStore.scale > 100) { |
|||
return 1 / editorStore.thumbnailSize; |
|||
} else { |
|||
return 10; |
|||
} |
|||
}); |
|||
|
|||
const getViewBox = () => { |
|||
nextTick(() => { |
|||
let dashboardDom = document.getElementById('dashboard'); |
|||
if (!dashboardDom) { |
|||
return; |
|||
} |
|||
viewBox.value.viewWidth = dashboardDom.offsetWidth; |
|||
viewBox.value.viewHeight = dashboardDom.offsetHeight; |
|||
drawThumbnail(); |
|||
}); |
|||
}; |
|||
const drawThumbnail = () => { |
|||
if (!isLock) { |
|||
isLock = true; |
|||
nextTick(() => { |
|||
let startLen = 6; |
|||
|
|||
const ctx = thumbnailRef.value.getContext('2d'); |
|||
ctx.clearRect( |
|||
0, |
|||
0, |
|||
canvasConfig.value.thumbnailWrapWidth, |
|||
canvasConfig.value.thumbnailWrapHeight |
|||
); |
|||
ctx.beginPath(); |
|||
ctx.fillStyle = 'rgba(26, 103, 255, 0.5)'; |
|||
ctx.rect( |
|||
startLen, |
|||
startLen, |
|||
canvasConfig.value.thumbnailWidth, |
|||
canvasConfig.value.thumbnailHeight |
|||
); |
|||
ctx.fill(); |
|||
ctx.beginPath(); |
|||
ctx.strokeStyle = '#1a67ff'; |
|||
ctx.rect( |
|||
Math.round(editorStore.scrollLeft * editorStore.thumbnailSize), |
|||
Math.round(editorStore.scrollTop * editorStore.thumbnailSize), |
|||
viewBox.value.viewWidth * editorStore.thumbnailSize, |
|||
viewBox.value.viewHeight * editorStore.thumbnailSize |
|||
); |
|||
ctx.stroke(); |
|||
|
|||
isLock = false; |
|||
}); |
|||
} |
|||
}; |
|||
watch( |
|||
() => editorStore.scale, |
|||
() => { |
|||
drawThumbnail(); |
|||
} |
|||
); |
|||
watch( |
|||
() => editorStore.screenWidth, |
|||
() => { |
|||
drawThumbnail(); |
|||
} |
|||
); |
|||
watch( |
|||
() => editorStore.screenHeight, |
|||
() => { |
|||
drawThumbnail(); |
|||
} |
|||
); |
|||
watch( |
|||
() => editorStore.scrollLeft, |
|||
() => { |
|||
drawThumbnail(); |
|||
} |
|||
); |
|||
watch( |
|||
() => editorStore.scrollTop, |
|||
() => { |
|||
drawThumbnail(); |
|||
} |
|||
); |
|||
|
|||
watch( |
|||
() => editorStore.screenHeight, |
|||
() => { |
|||
drawThumbnail(); |
|||
} |
|||
); |
|||
watch( |
|||
() => editorStore.viewHeight, |
|||
() => { |
|||
drawThumbnail(); |
|||
} |
|||
); |
|||
watch( |
|||
() => editorStore.viewWidth, |
|||
() => { |
|||
drawThumbnail(); |
|||
} |
|||
); |
|||
|
|||
onMounted(() => { |
|||
window.addEventListener('resize', getViewBox); |
|||
getViewBox(); |
|||
}); |
|||
onBeforeUnmount(() => { |
|||
window.removeEventListener('resize', getViewBox); |
|||
}); |
|||
let moveInfo = { |
|||
startX: 0, |
|||
startY: 0, |
|||
isMove: false |
|||
}; |
|||
return { |
|||
canvasConfig, |
|||
thumbnailRef, |
|||
showThumbnail: computed(() => editorStore.isThumbnail), |
|||
onMoveStart: (e: MouseEvent) => { |
|||
moveInfo.isMove = true; |
|||
moveInfo.startX = e.clientX; |
|||
moveInfo.startY = e.clientY; |
|||
}, |
|||
onMove: (e: MouseEvent) => { |
|||
if (moveInfo.isMove) { |
|||
let left = editorStore.scrollLeft + (e.clientX - moveInfo.startX) * unscale.value; |
|||
let top = editorStore.scrollTop + (e.clientY - moveInfo.startY) * unscale.value; |
|||
// console.log('thumbnail', left, top); |
|||
editorStore.setScroll({ left, top }); |
|||
moveInfo.startX = e.clientX; |
|||
moveInfo.startY = e.clientY; |
|||
} |
|||
}, |
|||
onMoveEnd: () => { |
|||
moveInfo.isMove = false; |
|||
} |
|||
}; |
|||
} |
|||
}); |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.canvas-thumbnail { |
|||
background-color: var(--thumbnail-wrap-bg); |
|||
position: fixed; |
|||
right: 310px; |
|||
bottom: 48px; |
|||
z-index: 9; |
|||
cursor: move; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,41 @@ |
|||
export const keyCode = { |
|||
space: 32, |
|||
backspace: 8, |
|||
shift: 16, |
|||
ctr: 17, |
|||
option: 18, |
|||
command: 91, |
|||
alt: 18, |
|||
ctrl: 17, |
|||
equal: 187, |
|||
minus: 189, |
|||
q: 81, |
|||
w: 87, |
|||
c: 67, |
|||
d: 68, |
|||
z: 90, |
|||
y: 89, |
|||
g: 71, |
|||
l: 76, |
|||
h: 72, |
|||
u: 85, |
|||
o: 79, |
|||
r: 82, |
|||
t: 84, |
|||
b: 66, |
|||
s: 83, |
|||
p: 80, |
|||
left: 37, |
|||
top: 38, |
|||
right: 39, |
|||
bottom: 40 |
|||
}; |
|||
|
|||
// export function getCodeKey(code) {
|
|||
// for (let k in keyCode) {
|
|||
// if (keyCode[k] == code) {
|
|||
// return k;
|
|||
// }
|
|||
// }
|
|||
// return '';
|
|||
// }
|
|||
@ -0,0 +1,98 @@ |
|||
/** |
|||
* 画标尺刻度Canvas |
|||
* @param direction 方向 |
|||
* @param canvas canvas DOM |
|||
* @param scale 缩放比例[20-200] |
|||
* @param width 长度 |
|||
* @param height 高度 |
|||
* @param startLen 开始距离 |
|||
*/ |
|||
export function drawRuler( |
|||
direction: string, |
|||
canvas: HTMLCanvasElement, |
|||
scale: number = 100, |
|||
width: number, |
|||
height: number = 24, |
|||
startLen: number = 60 |
|||
) { |
|||
const padding = 2; |
|||
const ctx: CanvasRenderingContext2D = canvas.getContext('2d'); |
|||
const percent = scale * 0.01; |
|||
let unit = Math.ceil(10 / percent); |
|||
if (unit < 8) { |
|||
unit = 8; |
|||
} |
|||
//计算出要绘制多少个刻度
|
|||
const scaleCount = Math.ceil(width + startLen / unit); |
|||
if (direction == 'top') { |
|||
canvas.width = width + startLen; |
|||
canvas.height = height; |
|||
ctx.clearRect(0, 0, width, height); |
|||
ctx.beginPath(); |
|||
//绘制起点
|
|||
ctx.strokeStyle = 'rgb(161, 174, 179)'; |
|||
ctx.font = '10px Arial'; |
|||
ctx.lineWidth = 0.5; |
|||
ctx.moveTo(startLen, 0); |
|||
ctx.lineTo(startLen, height); |
|||
ctx.fillText('0', startLen + padding, 13); |
|||
|
|||
for (let i = 1; i <= scaleCount; i++) { |
|||
//计算每个刻度的位置
|
|||
const step = startLen + Math.round(i * unit * percent); |
|||
//10的倍数刻度大长度
|
|||
if (i % 10 === 0) { |
|||
ctx.moveTo(step, 0); |
|||
ctx.lineTo(step, height); |
|||
//标注刻度值
|
|||
const scaleText = i * unit + ''; |
|||
ctx.fillText(scaleText, step + padding, 13); |
|||
} else if (i % 5 === 0) {//5的倍数刻度中长度
|
|||
ctx.moveTo(step, 15); |
|||
ctx.lineTo(step, height); |
|||
//标注刻度值
|
|||
const scaleText = i * unit + ''; |
|||
ctx.fillText(scaleText, step + padding, 13); |
|||
} else {//其他刻度小长度
|
|||
ctx.moveTo(step, height - 2); |
|||
ctx.lineTo(step, height); |
|||
} |
|||
} |
|||
ctx.stroke(); |
|||
} else { |
|||
canvas.width = height; |
|||
canvas.height = width + startLen; |
|||
ctx.clearRect(0, 0, height, width + startLen); |
|||
|
|||
ctx.beginPath(); |
|||
//绘制起点
|
|||
ctx.strokeStyle = 'rgb(161, 174, 179)'; |
|||
ctx.font = '10px Arial'; |
|||
ctx.lineWidth = 0.5; |
|||
ctx.moveTo(0, startLen); |
|||
ctx.lineTo(height, startLen); |
|||
ctx.fillText('0', padding, startLen - padding); |
|||
//计算出要绘制多少个刻度
|
|||
|
|||
for (let i = 1; i <= scaleCount; i++) { |
|||
const step = startLen + Math.round(i * unit * percent); |
|||
if (i % 10 === 0) { |
|||
ctx.moveTo(0, step); |
|||
ctx.lineTo(height, step); |
|||
//标注刻度值
|
|||
const scaleText = unit * i + ''; |
|||
ctx.fillText(scaleText, padding, step - padding); |
|||
} else if (i % 5 === 0) { |
|||
ctx.moveTo(15, step); |
|||
ctx.lineTo(height, step); |
|||
//标注刻度值
|
|||
const scaleText = unit * i + ''; |
|||
ctx.fillText(scaleText, padding, step - padding); |
|||
} else { |
|||
ctx.moveTo(height - 2, step); |
|||
ctx.lineTo(height, step); |
|||
} |
|||
} |
|||
ctx.stroke(); |
|||
} |
|||
} |
|||
@ -0,0 +1,14 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-03-24 09:42:31 |
|||
@ 备注: |
|||
--> |
|||
<script lang="ts" setup> |
|||
import CanvasBg from "@/views/process/canvas-bg/CanvasBg.vue"; |
|||
</script> |
|||
<template> |
|||
<div> |
|||
<CanvasBg /> |
|||
</div> |
|||
</template> |
|||
<style lang="scss" scoped></style> |
|||
@ -0,0 +1,30 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-03-22 11:05:01 |
|||
@ 备注: |
|||
--> |
|||
<script lang="ts" setup> |
|||
import { Vue3RulerTool } from "vue3-ruler-tool"; |
|||
import "vue3-ruler-tool/dist/style.css"; |
|||
const presetLine = ref([ |
|||
{ type: "h", site: 20 }, |
|||
{ type: "v", site: 10 }, |
|||
]); |
|||
const visible = ref(true); |
|||
const input = (list: any) => { |
|||
presetLine.value = list; |
|||
}; |
|||
</script> |
|||
<template> |
|||
<vue3-ruler-tool |
|||
:value="presetLine" |
|||
:step-length="50" |
|||
:parent="true" |
|||
:is-scale-revise="true" |
|||
:visible.sync="visible" |
|||
@input="input" |
|||
> |
|||
<div>我是内容</div> |
|||
</vue3-ruler-tool> |
|||
</template> |
|||
<style lang="scss" scoped></style> |
|||
@ -0,0 +1,39 @@ |
|||
export default { |
|||
paperOrientationList:[ |
|||
{ |
|||
value:1, |
|||
label:"纵向" |
|||
}, |
|||
{ |
|||
value:2, |
|||
label:"横向" |
|||
}, |
|||
], |
|||
// 纸张类型
|
|||
paperTypes: { |
|||
'A3': { |
|||
width: 420, |
|||
height: 296.6 |
|||
}, |
|||
'A4': { |
|||
width: 210, |
|||
height: 296.6 |
|||
}, |
|||
'A5': { |
|||
width: 210, |
|||
height: 147.6 |
|||
}, |
|||
'B3': { |
|||
width: 500, |
|||
height: 352.6 |
|||
}, |
|||
'B4': { |
|||
width: 250, |
|||
height: 352.6 |
|||
}, |
|||
'B5': { |
|||
width: 250, |
|||
height: 175.6 |
|||
} |
|||
}, |
|||
} |
|||
@ -0,0 +1,136 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-03-24 15:32:40 |
|||
@ 备注: 打印模版设计 |
|||
--> |
|||
<script lang="ts" setup> |
|||
import PageConfig from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageConfig"; |
|||
import { printPageConfigStore } from "@/store/ruler/index"; |
|||
|
|||
import CanvasBg from "@/views/process/canvas-bg/CanvasBg.vue"; |
|||
|
|||
const props = defineProps({ |
|||
appCont: { |
|||
type: Object, |
|||
default() { |
|||
return {}; |
|||
}, |
|||
}, |
|||
formKey: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
groupKey: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
menuId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
appPageKey: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
formVersion: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
state: { |
|||
type: Object, |
|||
default() { |
|||
return {}; |
|||
}, |
|||
}, |
|||
}); |
|||
|
|||
const paperOrientation = ref<number>(1); |
|||
const pageSize = ref<number>(2); |
|||
</script> |
|||
<template> |
|||
<div class="common-layout"> |
|||
<el-container> |
|||
<el-aside class="asideBox"> |
|||
<div class="titleBox">打印数据源</div> |
|||
</el-aside> |
|||
<el-container class="contBox"> |
|||
<el-header> |
|||
<div class="titleBox"> |
|||
<el-row :gutter="5" class="rowBox"> |
|||
<el-col :span="4"> |
|||
<el-select |
|||
v-model="paperOrientation" |
|||
placeholder="请选择纸张方向" |
|||
size="small" |
|||
> |
|||
<el-option |
|||
v-for="item in PageConfig.paperOrientationList" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-radio-group v-model="pageSize" size="small"> |
|||
<el-radio-button label="A3" value="A3" /> |
|||
<el-radio-button label="A4" value="A4" /> |
|||
<el-radio-button label="A5" value="A5" /> |
|||
<el-radio-button label="B3" value="B3" /> |
|||
<el-radio-button label="B4" value="B4" /> |
|||
<el-radio-button label="B5" value="B5" /> |
|||
<el-radio-button label="自定义" value="zdy" /> |
|||
</el-radio-group> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-button-group class="ml-4" size="small"> |
|||
<el-button type="primary">预览</el-button> |
|||
<el-button type="danger">清空</el-button> |
|||
<el-button type="primary">保存</el-button> |
|||
</el-button-group> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</el-header> |
|||
<el-main> |
|||
<CanvasBg /> |
|||
</el-main> |
|||
</el-container> |
|||
<el-aside class="asideBox"> |
|||
<div class="titleBox">模块设置</div> |
|||
</el-aside> |
|||
</el-container> |
|||
</div> |
|||
</template> |
|||
<style lang="scss" scoped> |
|||
.common-layout { |
|||
width: 100%; |
|||
height: calc(100vh - 40px); |
|||
:deep .el-header { |
|||
padding: 0px; |
|||
} |
|||
:deep .el-main { |
|||
padding: 0px; |
|||
} |
|||
.asideBox { |
|||
width: 220px; |
|||
height: calc(100vh - 40px); |
|||
} |
|||
.contBox { |
|||
border-left: 1px solid #ccc; |
|||
border-right: 1px solid #ccc; |
|||
} |
|||
.titleBox { |
|||
width: 100%; |
|||
height: 40px; |
|||
border-bottom: 1px solid #ccc; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.rowBox { |
|||
width: 100%; |
|||
text-align: center; |
|||
} |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue