diff --git a/src/assets/images/dialog_right_top.png b/src/assets/images/dialog_right_top.png new file mode 100644 index 0000000..85b0d02 Binary files /dev/null and b/src/assets/images/dialog_right_top.png differ diff --git a/src/assets/images/largeScreen/bg.png b/src/assets/images/largeScreen/bg.png new file mode 100644 index 0000000..d53c65d Binary files /dev/null and b/src/assets/images/largeScreen/bg.png differ diff --git a/src/assets/images/largeScreen/device-1.png b/src/assets/images/largeScreen/device-1.png new file mode 100644 index 0000000..24f32e8 Binary files /dev/null and b/src/assets/images/largeScreen/device-1.png differ diff --git a/src/assets/images/largeScreen/device-2.png b/src/assets/images/largeScreen/device-2.png new file mode 100644 index 0000000..821f34d Binary files /dev/null and b/src/assets/images/largeScreen/device-2.png differ diff --git a/src/assets/images/largeScreen/device-3.png b/src/assets/images/largeScreen/device-3.png new file mode 100644 index 0000000..fa2798b Binary files /dev/null and b/src/assets/images/largeScreen/device-3.png differ diff --git a/src/assets/images/largeScreen/device-4.png b/src/assets/images/largeScreen/device-4.png new file mode 100644 index 0000000..04d1e9c Binary files /dev/null and b/src/assets/images/largeScreen/device-4.png differ diff --git a/src/assets/images/largeScreen/device-5.png b/src/assets/images/largeScreen/device-5.png new file mode 100644 index 0000000..a3e20e6 Binary files /dev/null and b/src/assets/images/largeScreen/device-5.png differ diff --git a/src/assets/images/largeScreen/device-6.png b/src/assets/images/largeScreen/device-6.png new file mode 100644 index 0000000..e2322e2 Binary files /dev/null and b/src/assets/images/largeScreen/device-6.png differ diff --git a/src/assets/images/largeScreen/item-left.png b/src/assets/images/largeScreen/item-left.png new file mode 100644 index 0000000..5b52a18 Binary files /dev/null and b/src/assets/images/largeScreen/item-left.png differ diff --git a/src/assets/images/largeScreen/item-right.png b/src/assets/images/largeScreen/item-right.png new file mode 100644 index 0000000..dc062eb Binary files /dev/null and b/src/assets/images/largeScreen/item-right.png differ diff --git a/src/assets/images/largeScreen/top-title.png b/src/assets/images/largeScreen/top-title.png new file mode 100644 index 0000000..ec3b330 Binary files /dev/null and b/src/assets/images/largeScreen/top-title.png differ diff --git a/src/assets/images/largeScreen/top.png b/src/assets/images/largeScreen/top.png new file mode 100644 index 0000000..5e71fb4 Binary files /dev/null and b/src/assets/images/largeScreen/top.png differ diff --git a/src/assets/images/left_bottom.png b/src/assets/images/left_bottom.png new file mode 100644 index 0000000..c48b86c Binary files /dev/null and b/src/assets/images/left_bottom.png differ diff --git a/src/assets/images/left_top.png b/src/assets/images/left_top.png new file mode 100644 index 0000000..8d4b775 Binary files /dev/null and b/src/assets/images/left_top.png differ diff --git a/src/assets/images/login/dl-bg.png b/src/assets/images/login/dl-bg.png new file mode 100644 index 0000000..96771dc Binary files /dev/null and b/src/assets/images/login/dl-bg.png differ diff --git a/src/assets/images/login/dl-bgt.png b/src/assets/images/login/dl-bgt.png new file mode 100644 index 0000000..dd63a00 Binary files /dev/null and b/src/assets/images/login/dl-bgt.png differ diff --git a/src/assets/images/login/dl-logo.png b/src/assets/images/login/dl-logo.png new file mode 100644 index 0000000..5f7f3a7 Binary files /dev/null and b/src/assets/images/login/dl-logo.png differ diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png new file mode 100644 index 0000000..7d4a3e0 Binary files /dev/null and b/src/assets/images/logo.png differ diff --git a/src/assets/images/panel-n.png b/src/assets/images/panel-n.png new file mode 100644 index 0000000..4622043 Binary files /dev/null and b/src/assets/images/panel-n.png differ diff --git a/src/assets/images/panel-y.png b/src/assets/images/panel-y.png new file mode 100644 index 0000000..49ee2c4 Binary files /dev/null and b/src/assets/images/panel-y.png differ diff --git a/src/assets/images/pop-message.png b/src/assets/images/pop-message.png new file mode 100644 index 0000000..48afdec Binary files /dev/null and b/src/assets/images/pop-message.png differ diff --git a/src/assets/images/pop_arrow.png b/src/assets/images/pop_arrow.png new file mode 100644 index 0000000..3fcfe6b Binary files /dev/null and b/src/assets/images/pop_arrow.png differ diff --git a/src/assets/images/pop_sanjiao.png b/src/assets/images/pop_sanjiao.png new file mode 100644 index 0000000..bed219a Binary files /dev/null and b/src/assets/images/pop_sanjiao.png differ diff --git a/src/assets/images/right_bottom.png b/src/assets/images/right_bottom.png new file mode 100644 index 0000000..01dec39 Binary files /dev/null and b/src/assets/images/right_bottom.png differ diff --git a/src/assets/images/right_top.png b/src/assets/images/right_top.png new file mode 100644 index 0000000..93ca011 Binary files /dev/null and b/src/assets/images/right_top.png differ diff --git a/src/assets/images/sidebar_bg.png b/src/assets/images/sidebar_bg.png new file mode 100644 index 0000000..cec680b Binary files /dev/null and b/src/assets/images/sidebar_bg.png differ diff --git a/src/assets/images/system/logo.png b/src/assets/images/system/logo.png new file mode 100644 index 0000000..9224cb6 Binary files /dev/null and b/src/assets/images/system/logo.png differ diff --git a/src/assets/images/system/xt-gdx.png b/src/assets/images/system/xt-gdx.png new file mode 100644 index 0000000..7d614b0 Binary files /dev/null and b/src/assets/images/system/xt-gdx.png differ diff --git a/src/assets/images/system/xt-gdz.png b/src/assets/images/system/xt-gdz.png new file mode 100644 index 0000000..fe3e625 Binary files /dev/null and b/src/assets/images/system/xt-gdz.png differ diff --git a/src/assets/images/tab_archives_logo.png b/src/assets/images/tab_archives_logo.png new file mode 100644 index 0000000..a801b7c Binary files /dev/null and b/src/assets/images/tab_archives_logo.png differ diff --git a/src/assets/images/tab_collate_logo.png b/src/assets/images/tab_collate_logo.png new file mode 100644 index 0000000..90b3912 Binary files /dev/null and b/src/assets/images/tab_collate_logo.png differ diff --git a/src/assets/images/tab_fullview_logo.png b/src/assets/images/tab_fullview_logo.png new file mode 100644 index 0000000..b3b5be5 Binary files /dev/null and b/src/assets/images/tab_fullview_logo.png differ diff --git a/src/assets/images/tab_img.png b/src/assets/images/tab_img.png new file mode 100644 index 0000000..27d26bb Binary files /dev/null and b/src/assets/images/tab_img.png differ diff --git a/src/assets/images/tab_left.png b/src/assets/images/tab_left.png new file mode 100644 index 0000000..d181934 Binary files /dev/null and b/src/assets/images/tab_left.png differ diff --git a/src/assets/images/tab_left_active.png b/src/assets/images/tab_left_active.png new file mode 100644 index 0000000..a20bd8a Binary files /dev/null and b/src/assets/images/tab_left_active.png differ diff --git a/src/assets/images/tab_read_logo.png b/src/assets/images/tab_read_logo.png new file mode 100644 index 0000000..79198cd Binary files /dev/null and b/src/assets/images/tab_read_logo.png differ diff --git a/src/assets/images/tab_right.png b/src/assets/images/tab_right.png new file mode 100644 index 0000000..f1f72b7 Binary files /dev/null and b/src/assets/images/tab_right.png differ diff --git a/src/assets/images/tab_right_active.png b/src/assets/images/tab_right_active.png new file mode 100644 index 0000000..a1db363 Binary files /dev/null and b/src/assets/images/tab_right_active.png differ diff --git a/src/assets/images/table_head_bg.png b/src/assets/images/table_head_bg.png new file mode 100644 index 0000000..85d4121 Binary files /dev/null and b/src/assets/images/table_head_bg.png differ diff --git a/src/assets/images/warehouse_arrow_left.png b/src/assets/images/warehouse_arrow_left.png new file mode 100644 index 0000000..57d1016 Binary files /dev/null and b/src/assets/images/warehouse_arrow_left.png differ diff --git a/src/assets/images/warehouse_arrow_right.png b/src/assets/images/warehouse_arrow_right.png new file mode 100644 index 0000000..544c165 Binary files /dev/null and b/src/assets/images/warehouse_arrow_right.png differ diff --git a/src/assets/images/warehouse_tab_active.png b/src/assets/images/warehouse_tab_active.png new file mode 100644 index 0000000..3bd18fb Binary files /dev/null and b/src/assets/images/warehouse_tab_active.png differ diff --git a/src/assets/images/warehouse_tab_bg.png b/src/assets/images/warehouse_tab_bg.png new file mode 100644 index 0000000..3f6f73b Binary files /dev/null and b/src/assets/images/warehouse_tab_bg.png differ diff --git a/src/assets/styles/archives-manage.scss b/src/assets/styles/archives-manage.scss new file mode 100644 index 0000000..2c58aa3 --- /dev/null +++ b/src/assets/styles/archives-manage.scss @@ -0,0 +1,769 @@ +@import 'variables'; +@import 'mixin'; + +.head-archives{ + padding: 0 0 20px 0; + .archives-crud{ + float: left; + } + .archives-recycle{ + float: left; + } + .head-search{ + float: left; + margin-left: 10px; + margin-bottom: 0 !important; + .filter-item{ + margin-right: 5px !important; + } + } + .archives-handler-btn{ + float: right; + } +} + +.input-prepend{ + position: relative; + z-index: 99; + .el-input__inner { + padding-left: 80px; + background-color: transparent; + } + .el-input-group__prepend { + position: absolute; + left: 0; + top: 0; + color: #fff; + background-color: transparent; + border: none; + height: 30px; + line-height: 30px; + .el-input__inner { + padding-left: 15px !important; + color: $mainColor !important; + } + .el-input__inner:hover, + .el-input__inner:focus{ + color: $mainColor; + } + .el-select__caret{ + color: $mainColor; + } + } +} +.packing-head{ + display: flex; + justify-content: space-between; + .el-input__inner { + padding-left: 90px; + } +} +.container-main{ + .left-tree-item{ + margin-bottom: 20px; + min-height: calc(100vh/2 - 105px); + &:last-child{ + margin-bottom: 0; + } + } + + .tree-title{ + height: 40px; + line-height: 40px; + text-align: center; + color: $mainColor; + background-color: #02255F; + } +} +.archives-warp{ + margin-bottom: 20px; +} +.archives-top{ + display: flex; + justify-content: right; + margin-bottom: 10px; + .el-checkbox .el-checkbox__label{ + color: #fff; + } +} +.archives-right-list{ + position: relative; +} +.archives-fixed-top{ + position: absolute; + right: 0; + top: 6px; + margin-bottom: 0; +} +.crud-opts{ + justify-content: space-between; +} + +.archives-handler-btn{ + .el-button{ + padding: 0 13px 0 3px; + span{ + margin-left: 5px; + } + &.packing-btn{ + border-color: $arcPurple; + background-color: $arcPurple; + &.is-disabled{ + border-color:#2B1D70; + background-color: #2B1D70; + } + } + &.part-btn{ + border-color: $arcCyan; + background-color: $arcCyan; + &.is-disabled{ + border-color:#075E6C; + background-color: #075E6C; + } + } + &.warehousing-btn{ + border-color: $arcYellow; + background-color: $arcYellow; + &.is-disabled{ + border-color:#7E4021; + background-color: #7E4021; + } + } + &.lending-btn{ + border-color: $arcRed; + background-color: $arcRed; + &.is-disabled{ + border-color:#7A2831; + background-color: #7A2831; + } + } + &.binding-btn{ + border-color: $arcGreen; + background-color: $arcGreen; + &.is-disabled{ + border-color:#0D5649; + background-color: #0D5649; + } + } + &.is-disabled{ + color: #666; + } + } + .iconfont{ + line-height: 30px; + } +} + +.archives-table, +.base-info{ + td.el-table__cell .row-state{ + display: block; + height: 26px; + line-height: 24px; + padding: 0 14px; + margin: 0 6px; + border-width: 1px; + border-style: solid; + border-radius: 26px; + } + .row-packing{ + color: $arcPurple; + border-color: $arcPurple; + &.state-active{ + color: #fff; + background-color: $arcPurple; + } + } + .row-warehousing{ + color: $arcYellow; + border-color: $arcYellow; + &.state-active{ + color: #fff; + background-color: $arcYellow; + } + } + .row-lending{ + color: $arcRed; + border-color: $arcRed; + &.state-active{ + color: #fff; + background-color: $arcRed; + } + } + .row-binding{ + color: $arcGreen; + border-color: $arcGreen; + &.state-active{ + color: #fff; + background-color: $arcGreen; + } + } + .is-scrolling-left, + .is-scrolling-middle, + .is-scrolling-right{ + max-height: calc(100vh - 434px) !important; + } +} +.base-info .row-state{ + width: 68px; + height: 26px; + line-height: 24px; + text-align: center; + margin-top: -6px; + border-width: 1px; + border-style: solid; + border-radius: 26px; +} + +.archives-table.el-table .el-table__fixed-right{ + background-color: $boxBg !important; + box-shadow: -5px 5px 10px 1px rgba(15,164,222,0.16); +} + +// archives - tab +.archives-tab{ + position: relative; + display: flex; + flex-direction: row; + padding: 0 35px; + font-size: 16px; + border-bottom: 1px solid $mainColor; + z-index: 1001; + li{ + padding: 22px 14px 14px 14px; + color: $mainColor; + cursor: pointer; + &.active{ + position: relative; + color: #fff; + &::after{ + content: ""; + position: absolute; + left: 0; + bottom: -1px; + width: 100%; + height: 3px; + border-radius: 3px; + background-color: #fff; + } + } + } +} + +// 上传附件 +.upload-dialog{ + .el-dialog{ + width: 940px; + .el-dialog__body{ + padding: 20px 0 30px 0; + } + } +} +.upload-file{ + position: relative; + z-index: 1001; + .upload-curd{ + display: flex; + flex-direction: row; + margin: 0 32px 20px 32px; + } + .upload-demo{ + position: relative; + margin-right: 10px; + .el-upload-list{ + display: none; + position: absolute; + left: 0; + bottom: 0; + } + } +} +.screenshot{ + display: block; + margin: 0 auto; + object-fit: cover; +} +.file-down, +.packing-handle-btn, +.packing-recall-btn{ + display: block; + width: 66px; + height: 28px; + line-height: 28px; + padding: 0; + color: #fff; + border-radius: 2px; + margin: 0 auto; + &::before{ + margin-right: 5px; + } +} +.file-down{ + padding: 0 !important; + background-color: $mainColor; + border-color: $mainColor; +} +.packing-handle-btn{ + background-color: $arcPurple; + border-color: $arcPurple; +} +.packing-recall-btn{ + background-color: $arcRed; + border-color: $arcRed; +} + +.drag-tip { + display: block; + padding-left: 20px; + padding-bottom: 10px; + font-style: normal; + font-weight: bold; + color: #fff; +} + +// 档案详情 +.base-info{ + padding: 20px 20px 0 60px; + color: #fff; + .base-info-item{ + display: flex; + flex-direction: row; + margin-bottom: 20px; + span{ + display: block; + width: 160px; + margin-right: 5px; + text-align: right; + color: #3A99FD; + } + } +} +// 元数据 +.hljs{ + padding: 0 30px; + color: #fff !important; + background-color: transparent !important; + font-family: "Sans Mono", "Consolas", "Courier", monospace; + font-size: 12px; + .hljs-attribute{ + display: inline-block; + margin: 2px 0 !important; + } +} + +.selct-data-head{ + color: #fff; + line-height: 30px; +} + +// 绑定标签 +.bindingDialog{ + .el-dialog{ + width: 720px; + } + .el-dialog__body{ + padding: 35px 35px 58px 35px; + } +} +.rebinding { + display: flex; + justify-content: space-between; + padding: 50px 65px 35px 65px; + span{ + display: block; + width: 60px; + line-height: 36px; + color: #3A99FD; + } + .el-input { + .el-input__inner{ + font-size: 14px; + height: 36px; + line-height: 36px; + color: #fff; + border: 1px solid #3A99FD; + background-color: transparent; + } + } +} + +.binding-flow{ + .step-item{ + position: relative; + display: flex; + justify-content: space-between; + margin-bottom: 10px; + z-index: 1; + &::before{ + content: ""; + position: absolute; + left: 15px; + top: 10px; + width: 1px; + height: 100%; + background-color: #3A99FD; + z-index: 1; + } + &:last-child::before{ + display: none; + } + } + .step-left-num{ + position: relative; + display: block; + width: 30px; + height: 30px; + line-height: 30px; + border-radius: 50%; + font-size: 16px; + text-align: center; + color: #fff; + border: 1px solid $mainColor; + background-color: $boxBg; + z-index: 4; + &.step-active{ + background-color: $mainColor; + } + &.step-loading{ + &::before, + &::after{ + content: ""; + position: absolute; + left: 50%; + top: 50%; + width: 40px; + height: 40px; + border-radius: 50%; + border: 1px solid #13439E; + box-shadow: inset 0px 0px 8px 1px #13439E; + margin: -20px 0 0 -20px; + z-index: 1; + } + &::before{ + animation: halo 2s linear 0.5s infinite; + } + &::after{ + animation: halo 2s linear 1.5s infinite; + } + } + } + // 晕开效果 + @keyframes halo { + 0% { + transform: scale(1); + -webkit-transform: scale(1); + opacity: 0.0; + } + 25% { + transform: scale(1); + -webkit-transform: scale(1); + opacity: 0.1; + } + 50% { + transform: scale(1); + -webkit-transform: scale(1); + opacity: 0.3; + } + 75% { + transform: scale(1.2); + -webkit-transform: scale(1.2); + opacity: 0.5; + } + 100% { + transform: scale(1.5); + -webkit-transform: scale(1.5); + opacity: 0.0; + } + } + .step-right-cont{ + flex: 1; + margin-left: 12px; + .step-title{ + line-height: 30px; + color: $mainColor; + span{ + padding-left: 10px; + font-weight: bold; + color: #fff; + } + } + .step-tip{ + padding: 0 10px; + height: 40px; + line-height: 40px; + color: #13439E; + background-color: #02255F; + border-radius: 4px; + &.tip-active{ + color: $mainColor; + } + &.tip-error{ + color: #EF3147; + } + } + } +} + +// 分卷装盒 +.partPackingDialog{ + .el-dialog{ + width: 950px !important; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + margin-top: 2vh !important; + } + .el-dialog__body{ + padding: 0; + } + .dialog-footer{ + margin: 20px auto 0 auto; + padding-bottom: 20px; + } + .packing-head{ + border-bottom: 1px solid $mainColor; + .head-search{ + margin-bottom: 0; + } + } +} +.part-packing-cont{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; +} +.part-packing-item{ + width: calc(100%/2 - 10px); + .part-packing-title{ + padding: 0 30px; + height: 40px; + line-height: 40px; + font-size: 16px; + font-weight: normal; + color: #fff; + } + .el-table{ + overflow-x: hidden; + overflow-y: auto; + border: 2px solid #02255f; + border-top: none; + .el-table__body-wrapper{ + background-color: $boxBg; + } + } +} + +.item-content{ + max-height: calc(100vh - 410px); + overflow: hidden; + overflow-y: scroll; +} + +.upload-btn{ + position: relative; + margin-right: 10px; + overflow: hidden; + #upFile{ + position: absolute; + left: 0; + top: 0; + opacity: 0; + height: 34px; + } +} + +// 借阅管理 +.el-dialog .el-dialog__body{ + .el-button{ + background-color: #3A99FD; + border-color: #3A99FD; + } + .el-button.is-disabled, + .el-button.is-disabled:hover, + .el-button.is-disabled:focus{ + background-color: #02255F; + color: #13439E; + border-color: #02255F; + } +} + +.crud-opts { + display: inline-block; +} + +.iconfont::before { + margin-right: 5px; +} + +.cell-lend { + display: inline-block; + height: 26px; + line-height: 26px; + border-radius: 13px; + text-align: center; +} + +.no-lend { + color: $arcRed; + border: 1px solid $arcRed; +} +.wait-lend{ + color: $arcYellow; + border: 1px solid $arcYellow; +} +.have-lend { + color: #fff; + background-color: $arcRed; +} + +.other-lend { + color: $arcRed; + border: 1px solid $arcRed; + position: relative; + + &::after { + content: ''; + display: block; + height: 2px; + width: 20px; + background-color: $arcRed; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + } +} + +.has-return{ + color: #fff; + border: 1px solid $arcGreen; + background-color: $arcGreen; +} + +.clear { + border-radius: 13px; + width: 80px; + height: 26px; + line-height: 26px; + display: inline-block; + text-align: center; +} + +.no-clear .clear { + color: $arcYellow; + border: 1px solid $arcYellow; +} + +.have-clear .clear { + color: $arcGreen; + border: 1px solid $arcGreen; +} + +.fail-clear .clear { + color: $arcRed; + border: 1px solid $arcRed; +} +.other-clear .clear { + color: $arcCyan; + border: 1px solid $arcCyan; +} +.error-clear-bg .clear{ + color: #fff; + background-color: $arcRed; +} +.have-clear-bg .clear{ + color: #fff; + background-color: $arcGreen; +} +.no-clear-bg .clear{ + color: #fff; + background-color: $arcYellow; +} + +//3D库房 +.iframe_box { + width: 100%; + height: calc(100vh - 285px); +} + +.warehouse { + display: flex; + max-height: calc(100vh - 184px); + overflow: hidden; + + .warehouse-left { + flex: 1; + } + + .warehouse-right { + width: 458px; + max-height: calc(100vh - 192px); + } +} + +.warehose-el-table .el-table__header-wrapper { + box-shadow: inset 0px 0px 6px 1px $mainColor; + background: none !important; +} + +.warehose-el-table .el-table__header .el-table__cell { + padding: 0; + height: 30px; + background: transparent; + .cell { + font-size: 14px; + } +} + +.light-blue { + background-color: #011E4F !important; +} + +.el-tag.el-tag--info { + height: 26px; + line-height: 26px; + background-color: #13439E; + border: none; + color: #fff; +} + +.el-tag.el-tag--info .el-tag__close { + background-color: #fff; +} + +//出入库 +.dpflex { + display: flex; + justify-content: space-between; +} + +.orange-btn { + width: 76px; + height: 30px; + background-color: $arcYellow; + border: none; + &.el-button.is-disabled, + &.el-button.is-disabled:hover { + background-color: #7E4021; + color: #666; + } +} + +.green-btn { + width: 106px; + height: 30px; + background-color: $arcGreen; + border: none; + &.el-button.is-disabled, + &.el-button.is-disabled:hover { + background-color: #0D5649; + color: #666; + } +} +//其他 +.delMsg{ + color: #fff; + font-size: 16px; +} \ No newline at end of file diff --git a/src/assets/styles/element-ui.scss b/src/assets/styles/element-ui.scss new file mode 100644 index 0000000..12bba27 --- /dev/null +++ b/src/assets/styles/element-ui.scss @@ -0,0 +1,80 @@ +// cover some element-ui styles + +.el-breadcrumb__inner, +.el-breadcrumb__inner a { + color: #339CFF; + font-weight: 400 !important; +} + +.el-upload { + input[type="file"] { + display: none !important; + } +} + +.el-upload__input { + display: none; +} + +.cell { + .el-tag { + margin-right: 0; + } +} + +.small-padding { + .cell { + padding-left: 5px; + padding-right: 5px; + } +} + +.fixed-width { + .el-button--mini { + padding: 7px 10px; + width: 60px; + } +} + +.status-col { + .cell { + padding: 0 10px; + text-align: center; + + .el-tag { + margin-right: 0; + } + } +} + +// to fixed https://github.com/ElemeFE/element/issues/2461 +.el-dialog { + transform: none; + left: 0; + position: relative; + margin: 0 auto; +} + +// refine element ui upload +.upload-container { + .el-upload { + width: 100%; + + .el-upload-dragger { + width: 100%; + height: 200px; + } + } +} + +// dropdown +.el-dropdown-menu { + a { + display: block + } +} + +// fix date-picker ui bug in filter-item +.el-range-editor.el-input__inner { + display: inline-flex !important; +} diff --git a/src/assets/styles/element-variables.scss b/src/assets/styles/element-variables.scss new file mode 100644 index 0000000..9a646ff --- /dev/null +++ b/src/assets/styles/element-variables.scss @@ -0,0 +1,31 @@ +/** +* I think element-ui's default theme color is too light for long-term use. +* So I modified the default color and you can modify it to your liking. +**/ + +/* theme color */ +$--color-primary: #1890ff; +$--color-success: #13ce66; +$--color-warning: #FFBA00; +$--color-danger: #ff4949; +// $--color-info: #1E1E1E; + +$--button-font-weight: 400; + +// $--color-text-regular: #1f2d3d; + +$--border-color-light: #dfe4ed; +$--border-color-lighter: #e6ebf5; + +$--table-border:1px solid#dfe6ec; + +/* icon font path, required */ +$--font-path: '~element-ui/lib/theme-chalk/fonts'; + +@import "../../../node_modules/element-ui/packages/theme-chalk/src/index"; + +// the :export directive is the magic sauce for webpack +// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass +:export { + theme: $--color-primary; +} diff --git a/src/assets/styles/font-some.css b/src/assets/styles/font-some.css new file mode 100644 index 0000000..e1a2563 --- /dev/null +++ b/src/assets/styles/font-some.css @@ -0,0 +1,46 @@ +.chartNum{ + display: flex; + justify-content: center; + margin-top: -1rem; +} +.box-items { + position: relative; + display: flex; + height: 0.6rem; + text-align: center; +} +/*滚动数字设置*/ +.number-item { + display: flex; + justify-content: center; + text-align: center; + width: 1.95rem; + height: 1.85rem; + line-height: 1.8rem; + margin-right: 0.2rem; + border: 1px solid #0E3465; +} +.number-item span{ + position: relative; + display: inline-block; + width: 100%; + height: 100%; + writing-mode: vertical-rl; + text-orientation: upright; + overflow: hidden; +} +.number-item span i{ + font-style: normal; + position: absolute; + top: 25%; + left: 50%; + font-size: 0.8rem; + font-weight: bold; + color: #fff; + transform: translate(-50%,0); + transition: transform 1s ease-in-out; + letter-spacing: 10px; +} +.number-item:last-child { + margin-right: 0; +} diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss new file mode 100644 index 0000000..3a78dad --- /dev/null +++ b/src/assets/styles/index.scss @@ -0,0 +1,290 @@ +@import 'variables'; +@import 'mixin'; +@import 'transition'; +@import 'element-ui'; +@import 'sidebar'; +@import '~@/assets/iconfonts/light/iconfont.css'; +@import 'yxk-admin'; +@import 'archives-manage'; + +body { + height: 100%; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; +} + +label { + font-weight: 700; +} + +html { + height: 100%; + box-sizing: border-box; +} + +#app { + height: 100%; +} + +*, +*:before, +*:after { + margin: 0; + padding: 0; + box-sizing: inherit; +} + +.no-padding { + padding: 0 !important; +} + +.padding-content { + padding: 4px 0; +} + +a:focus, +a:active { + outline: none; +} + +a, +a:focus, +a:hover { + cursor: pointer; + color: inherit; + text-decoration: none; +} + +div:focus { + outline: none; +} + +.fr { + float: right; +} + +.fl { + float: left; +} + +.pr-5 { + padding-right: 5px; +} + +.pl-5 { + padding-left: 5px; +} + +.block { + display: block; +} + +.pointer { + cursor: pointer; +} + +.inlineBlock { + display: block; +} + +.clearfix { + &:after { + visibility: hidden; + display: block; + font-size: 0; + content: " "; + clear: both; + height: 0; + } +} + +aside { + background: #eef1f6; + padding: 8px 24px; + margin-bottom: 20px; + border-radius: 2px; + display: block; + line-height: 30px; + font-size: 16px; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + color: #2c3e50; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + a { + color: #337ab7; + cursor: pointer; + &:hover { + color: rgb(32, 160, 255); + } + } +} + +ul{ + margin: 0; + padding: 0; + li{ + list-style: none; + } +} + + +//main-container全局样式 +// .app-wrapper{ +// @include bg_color($background-color-theme); +// } + +.app-container { + margin: 20px; +} + + +.components-container { + margin: 30px 50px; + position: relative; +} + +.pagination-container { + margin-top: 30px; +} + +.text-center { + text-align: center +} + +.sub-navbar { + height: 50px; + line-height: 50px; + position: relative; + width: 100%; + text-align: right; + padding-right: 20px; + transition: 600ms ease position; + background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%); + + .subtitle { + font-size: 20px; + color: #fff; + } + + &.draft { + background: #d0d0d0; + } + + &.deleted { + background: #d0d0d0; + } +} + +.link-type, +.link-type:focus { + color: #337ab7; + cursor: pointer; + + &:hover { + color: rgb(32, 160, 255); + } +} + +//refine vue-multiselect plugin +.multiselect { + line-height: 16px; +} + +.multiselect--active { + z-index: 1000 !important; +} + +/**滚动条的宽度*/ +::-webkit-scrollbar { + width: 4px; + height: 4px; +} + +//滚动条的滑块 +::-webkit-scrollbar-thumb { + background-color: #13439E; + border-radius: 3px; +} + +//只需要加上这一行 +::-webkit-scrollbar-corner { + background-color: #021941; +} + +// 设置loading-mask +.el-loading-mask{ + background-color: rgba(0,0,0,0.2); +} + +@media screen and (min-width:1200px) and (max-width:1536px){ + .tab-content .tab-nav { + li{ + font-size: 14px; + padding: 0 4px !important; + letter-spacing: normal; + &:first-child{ + padding: 0 12px !important; + } + } + .tab-right-img{ + width: 73px !important; + } + } + .des-preview-left{ + width: 510px; + flex: auto !important; + .des-form{ + width: 100% !important; + .el-input__inner{ + width: 100% !important; + } + .input-num .el-input__inner{ + width: 30px !important; + } + .input-num { + .el-form-item__content .el-input, + .el-input-number{ + width: 100% !important; + // margin-right: 6px; + } + .el-input__inner{ + padding: 0; + text-align: center; + } + } + } + } + // 档案管理 + .tree-scroll{ + height: calc(100vh - 480px) !important; + } + // 库房 + .warehouse-left{ + .msg-list{ + li{ + .msg-list-svg{ + font-size: 26px !important; + margin-left: 8px !important; + } + .msg-list-unit{ + font-size: 10px !important; + } + .msg-list-num{ + font-size: 20px !important; + top: 20px !important; + } + &.msg-pm{ + .msg-list-svg{ + font-size: 32px !important; + } + .msg-list-unit{ + left: -8px !important; + } + } + } + } + } +} \ No newline at end of file diff --git a/src/assets/styles/mixin.scss b/src/assets/styles/mixin.scss new file mode 100644 index 0000000..2a98052 --- /dev/null +++ b/src/assets/styles/mixin.scss @@ -0,0 +1,86 @@ +@import "variables"; +@mixin clearfix { + &:after { + content: ""; + display: table; + clear: both; + } +} + +@mixin scrollBar { + &::-webkit-scrollbar-track-piece { + background: #d3dce6; + } + + &::-webkit-scrollbar { + width: 6px; + } + + &::-webkit-scrollbar-thumb { + background: #99a9bf; + border-radius: 20px; + } +} + +// @mixin relative { +// position: relative; +// width: 100%; +// height: 100%; +// } + +// @mixin pct($pct) { +// width: #{$pct}; +// position: relative; +// margin: 0 auto; +// } + +// @mixin triangle($width, $height, $color, $direction) { +// $width: $width/2; +// $color-border-style: $height solid $color; +// $transparent-border-style: $width solid transparent; +// height: 0; +// width: 0; + +// @if $direction==up { +// border-bottom: $color-border-style; +// border-left: $transparent-border-style; +// border-right: $transparent-border-style; +// } @else if $direction==right { +// border-left: $color-border-style; +// border-top: $transparent-border-style; +// border-bottom: $transparent-border-style; +// } @else if $direction==down { +// border-top: $color-border-style; +// border-left: $transparent-border-style; +// border-right: $transparent-border-style; +// } @else if $direction==left { +// border-right: $color-border-style; +// border-top: $transparent-border-style; +// border-bottom: $transparent-border-style; +// } +// } + + + +@mixin font_color($color) { + color: $color; + [data-theme="dark"] & { + color: $font-color-theme1; + } + [data-theme="light"] & { + color: $font-color-theme2; + } +} + +@mixin bg_color($color) { + /*通过该函数设置主题颜色，后期方便统一管理；*/ + background-color: $color; + [data-theme="dark"] & { + background-color: $background-color-theme1; + @include font-color($font-color-theme1) + } + [data-theme="light"] & { + background-color: $background-color-theme2; + @include font-color($font-color-theme2) + } +} \ No newline at end of file diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss new file mode 100644 index 0000000..c473f4b --- /dev/null +++ b/src/assets/styles/sidebar.scss @@ -0,0 +1,292 @@ +#app { + .main-container { + min-height: 100%; + transition: margin-left .28s; + margin-left: $sideBarWidth; + position: relative; + padding-top: $headerHeight; + } + + .sidebar-container { + transition: width 0.28s; + width: $sideBarWidth !important; + background-color: $boxBg; + height: 100%; + position: fixed; + font-size: 0; + top: $headerHeight; + bottom: 0; + left: 0; + z-index: 99; + background: url(~@/assets/images/sidebar_bg.png) #031435 no-repeat right bottom; + @include bg_color($background-color-theme); + background-size: contain; + box-shadow: 5px 2px 10px 1px rgba(15,164,222,0.16); + overflow: hidden; + + // reset element-ui css + .horizontal-collapse-transition { + transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; + } + + .scrollbar-wrapper { + overflow-x: hidden !important; + } + + .el-scrollbar__bar.is-vertical { + right: 0; + } + + .el-scrollbar { + height: 100%; + } + + &.has-logo { + .el-scrollbar { + height: calc(100% - 50px); + } + } + + .is-horizontal { + display: none; + } + + a { + display: inline-block; + width: 100%; + overflow: hidden; + } + + .svg-icon { + margin-right: 10px; + } + + .el-submenu__icon-arrow{ + font-size: 18px; + color: $mainColor; + right: 60px; + } + + .el-menu { + border: none; + height: 100%; + width: 100% !important; + background-color: transparent !important; + } + + // menu hover + .submenu-title-noDropdown, + .el-submenu__title { + font-size: 16px; + height: 60px !important; + line-height: 60px !important; + padding: 0 60px 0 58px !important; + background-color: transparent !important; + &:hover { + background-image: $menuActiveBg !important; + &::before{ + content: ""; + position: absolute; + left: 0; + top: 0; + width: 5px; + height: 60px; + background-color: $mainColor; + } + } + } + + .is-active>.el-submenu__title, + .is-active.submenu-title-noDropdown { + position: relative; + color: $mainColor !important; + background-image: $menuActiveBg !important; + &::before{ + content: ""; + position: absolute; + left: 0; + top: 0; + width: 5px; + height: 60px; + background-color: $mainColor; + } + } + + & .nest-menu .el-submenu>.el-submenu__title, + & .el-submenu .el-menu-item { + min-width: $sideBarWidth !important; + background-color: transparent !important; + + &:hover { + background-image: $subMenuHover !important; + } + } + + & .el-submenu .el-menu-item{ + position: relative; + padding: 0 60px 0 82px !important; + height: 40px !important; + line-height: 40px; + &::before{ + content: ""; + position: absolute; + left: 56px; + top: 50%; + width: 6px; + height: 6px; + background-color: #fff; + border-radius: 50%; + transform: translateY(-50%); + } + .svg-icon { + display: none; + } + } + + } + + .hideSidebar { + .sidebar-container { + width: 54px !important; + } + + .main-container { + margin-left: 54px; + } + + .submenu-title-noDropdown { + padding: 0 !important; + position: relative; + + .el-tooltip { + padding: 0 !important; + + .svg-icon { + margin-left: 20px; + } + } + } + + .el-submenu { + overflow: hidden; + + &>.el-submenu__title { + padding: 0 !important; + + .svg-icon { + margin-left: 20px; + } + + .el-submenu__icon-arrow { + display: none; + } + } + } + + .el-menu--collapse { + .el-submenu { + &>.el-submenu__title { + &>span { + height: 0; + width: 0; + overflow: hidden; + visibility: hidden; + display: inline-block; + } + } + } + } + + .main-breadcrumb{ + left: 54px; + } + } + + .el-menu--collapse .el-menu .el-submenu { + min-width: $sideBarWidth !important; + } + + // mobile responsive + .mobile { + .main-container { + margin-left: 0; + } + + .sidebar-container { + transition: transform .28s; + width: $sideBarWidth !important; + } + + &.hideSidebar { + .sidebar-container { + pointer-events: none; + transition-duration: 0.3s; + transform: translate3d(-$sideBarWidth, 0, 0); + } + } + } + + .withoutAnimation { + + .main-container, + .sidebar-container { + transition: none; + } + } +} + +.is-active.el-menu-item { + background-image: $subMenuActiveBg !important; +} + + +// when menu collapsed +.el-menu--vertical { + &>.el-menu { + .svg-icon { + display: none; + margin-right: 16px; + } + } + + .nest-menu .el-submenu>.el-submenu__title, + .el-menu-item { + position: relative; + padding-left: 50px !important; + height: 40px !important; + line-height: 40px; + &::before{ + content: ""; + position: absolute; + left: 30px; + top: 50%; + width: 6px; + height: 6px; + background-color: #fff; + border-radius: 50%; + transform: translateY(-50%); + } + &:hover { + background-image: $subMenuHover !important; + } + } + + // the scroll bar appears when the subMenu is too long + >.el-menu--popup { + max-height: 100vh; + overflow-y: auto; + + &::-webkit-scrollbar-track-piece { + background: #d3dce6; + } + + &::-webkit-scrollbar { + width: 6px; + } + + &::-webkit-scrollbar-thumb { + background: #99a9bf; + border-radius: 20px; + } + } +} diff --git a/src/assets/styles/transition.scss b/src/assets/styles/transition.scss new file mode 100644 index 0000000..25e7e18 --- /dev/null +++ b/src/assets/styles/transition.scss @@ -0,0 +1,48 @@ +// global transition css + +/* fade */ +.fade-enter-active, +.fade-leave-active { + transition: opacity 0.28s; +} + +.fade-enter, +.fade-leave-active { + opacity: 0; +} + +/* fade-transform */ +.fade-transform-leave-active, +.fade-transform-enter-active { + transition: all .5s; +} + +.fade-transform-enter { + opacity: 0; + transform: translateX(-30px); +} + +.fade-transform-leave-to { + opacity: 0; + transform: translateX(30px); +} + +/* breadcrumb transition */ +.breadcrumb-enter-active, +.breadcrumb-leave-active { + transition: all .5s; +} + +.breadcrumb-enter, +.breadcrumb-leave-active { + opacity: 0; + transform: translateX(20px); +} + +.breadcrumb-move { + transition: all .5s; +} + +.breadcrumb-leave-active { + position: absolute; +} diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss new file mode 100644 index 0000000..6b800be --- /dev/null +++ b/src/assets/styles/variables.scss @@ -0,0 +1,45 @@ +$background-color-theme: #031435; //背景主题颜色默认 +$background-color-theme1: #031435; //背景主题颜色1 +$background-color-theme2: #F6F8FC; //背景主题颜色1 + +$font-color-theme : #fff; //字体主题颜色默认 +$font-color-theme1 : #fff; //字体主题颜色1 +$font-color-theme2 : #031435; //字体主题颜色2 + +$boxBg: #031435; // 板块背景色 +$mainColor: #339CFF; // 主色 +$otherColor: #02255F; // 辅助色1 +$otherColor2: #13439E; // 辅助色2 +$btnBorder:#3581CC; // 按钮描边 + +$arcPurple:#563BE1; +$arcYellow:#FD8042; +$arcRed:#F65163; +$arcGreen: #1AAE93; +$arcCyan: #0FBED9; + +$menuText:#359AFC; +$menuActiveBg: linear-gradient(90deg, rgba(59, 160, 255, 0.3) 0% 0%, rgba(42,112,177,0.3) 43%, rgba(51, 156, 255, 0) 100%); +$subMenuActiveBg: linear-gradient(90deg, rgba(59, 160, 255, 0) 0%, rgba(42,112,177,0.3) 43%, rgba(51, 156, 255, 0) 100%); +$subMenuHover: linear-gradient(90deg, rgba(59, 160, 255, 0) 0%, rgba(42,112,177,0.3) 43%, rgba(51, 156, 255, 0) 100%); + + +$headerHeight: 64px; +$sideBarWidth: 300px; + +$breadcrumbBg: #021941; +$mainContainerBorder: 1px solid #113D72; + +$desPreviewColor: #3A99FD; + +:export { + menuText: $menuText; + menuActiveBg: $menuActiveBg; + subMenuHover: $subMenuHover; + sideBarWidth: $sideBarWidth; + headerHeight: $headerHeight; + subMenuActiveBg: $subMenuActiveBg; + mainContainerBorder: $mainContainerBorder; + breadcrumbBg: $breadcrumbBg; + desPreviewColor: $desPreviewColor; +} diff --git a/src/assets/styles/yxk-admin.scss b/src/assets/styles/yxk-admin.scss new file mode 100644 index 0000000..27e6e39 --- /dev/null +++ b/src/assets/styles/yxk-admin.scss @@ -0,0 +1,1211 @@ + +.head-container { + padding: 20px; + .filter-item { + display: inline-block; + vertical-align: middle; + margin-right: 20px; + input { + border: 1px solid $mainColor; + background-color: transparent; + // @include bg_color($background-color-theme); + height: 30px; + line-height: 30px; + color: #fff; + } + .iconfont{ + line-height: 30px; + } + } + .el-select__caret.el-input__icon.el-icon-arrow-up{ + line-height: 30px; + } + .date-item { + display: inline-block; + vertical-align: middle; + border: 1px solid $mainColor; + @include bg_color($background-color-theme); + margin-right: 20px; + height: 30px !important; + width: 230px !important; + } +} + +.el-tabs{ + margin-bottom: 25px; +} + +// xu +// 四角边线 +// 有左右分区时 +.container-main{ + display: flex; + justify-content: space-between; + margin-left: 0 !important; + margin-right: 0 !important; +} +.container-left{ + margin-right: 20px; +} +.container-left, +.container-right, +.container-wrap, +.el-card, +.header-container-wrap{ + position: relative; + min-height: 100%; + padding: 0 !important; + border: $mainContainerBorder; + min-height: calc(100vh - 190px); + &::before, + &::after{ + content: ""; + position: absolute; + width: 17px; + height: 17px; + z-index: 99; + } + &::before{ + top: -1px; + left: -1px; + border-top: 1px solid $mainColor; + border-left: 1px solid $mainColor; + } + &::after{ + right: -1px; + bottom: -1px; + border-right: 1px solid $mainColor; + border-bottom: 1px solid $mainColor; + } +} + +.el-card, +.container-left{ + background-color: transparent; + min-height: auto; + border-radius: 0; + overflow: visible; + .el-card__header{ + background-color: #02255F; + border-bottom: none; + .role-span{ + color: #fff; + } + } + .el-card__body{ + padding: 0; + .head-container{ + padding: 0; + } + } + .crud-opts{ + justify-content: center; + padding: 20px 0 !important; + border-bottom: 1px solid #113D72; + } + .el-tree{ + margin: 20px 0; + } +} + +// xu el-button +.head-search{ + margin-bottom: 20px; + .el-button{ + margin-left: 0; + background-color: $desPreviewColor; + } +} + +.el-button, +.el-button--info.is-plain{ + font-size: 14px; + color: #fff; + border-color: $mainColor; + background-color: transparent; +} +.el-button.is-disabled, +.el-button.is-disabled:hover, +.el-button.is-disabled:focus{ + color: #13439E; + background-color: transparent; + border-color: #13439E; +} +.el-button:hover, +.el-button:focus, +.el-button--info.is-plain:hover, +.el-button--info.is-plain:focus{ + color: #fff; + background-color: #02255F; + border-color: $mainColor; +} + +.el-button--mini{ + padding: 7px 10px; +} +.el-message-box, +.el-popover{ + .el-button{ + border-color: #dcdfe6; + color: #606266; + } + + .el-button:focus, + .el-button:hover { + color: #1890ff; + border-color: #badeff; + background-color: #e8f4ff; + } + .el-button--primary, + .el-button--primary:focus, + .el-button--primary:hover { + background: #46a6ff; + border-color: #46a6ff; + color: #fff; + } +} + +.header-container-wrap{ + min-height: auto; +} + +.right-top-line, +.left-bottom-line, +.right-bottom-line{ + display: block; + position: absolute; + width: 17px; + height: 17px; + z-index: 99; +} + +.left-bottom-line{ + bottom: -1px; + left: -1px; + border-bottom: 1px solid $mainColor; + border-left: 1px solid $mainColor; +} + +.right-top-line{ + right: -1px; + top: -1px; + border-right: 1px solid $mainColor; + border-top: 1px solid $mainColor; +} +.right-bottom-line{ + right: -1px; + bottom: -1px; + border-right: 1px solid $mainColor; + border-bottom: 1px solid $mainColor; +} +.el-tree{ + background: transparent !important; + .el-tree-node:focus>.el-tree-node__content { + background-color: transparent !important; + } + .is-current>.el-tree-node__content { + background-image: $subMenuActiveBg !important; + color: #fff; + } + .el-tree-node__content{ + padding: 0 30px !important; + height: 40px; + color: $mainColor; + background-color: transparent; + .el-tree-node__label{ + font-size: 16px; + font-weight: 600; + } + &:hover{ + background-color: transparent !important; + background-image: $subMenuActiveBg; + } + } + .el-tree-node__expand-icon{ + font-size: 16px; + color: $mainColor; + } + .el-tree-node__children{ + padding: 0 18px; + .el-tree-node__content{ + height: 30px; + } + .el-tree-node__label{ + font-size: 14px; + font-weight: normal; + } + } + +} +.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{ + background-color: transparent; + background-image: $subMenuActiveBg; +} + +.el-date-editor .el-range-input{ + background: transparent; + color: #fff; +} + +// table +.el-table{ + background: transparent; + tr{ + background: transparent; + .el-table__cell{ + height: 40px; + background-color: transparent; + } + } + + .el-table__header-wrapper, + .el-table__header{ + th.el-table__cell{ + background-color: #02255F; + // border-top: 1px solid #113D72; + border-bottom: none; + &>.cell{ + font-size: 16px; + color: $mainColor; + } + } + } + + .el-table__body-wrapper, + .el-table__fixed-right{ + td.el-table__cell{ + color: $mainColor; + font-size: 14px; + border-bottom: 1px dashed #113D72; + padding: 5px 0; + } + } + &::before, + .el-table--group::after, + .el-table--border::after, + .el-table__fixed::before, + .el-table__fixed-right::before{ + background-color: transparent; + } + + .el-checkbox__input.is-checked .el-checkbox__inner, + .el-checkbox__input.is-disabled .el-checkbox__inner{ + border-color: $mainColor; + background: transparent; + &::after{ + border-color: $mainColor; + } + } + + .el-table__body tr.hover-row > td, + .el-table__body tr.hover-row.current-row > td, + .el-table__body tr.hover-row.el-table__row--striped > td, + .el-table__body tr.hover-row.el-table__row--striped.current-row > td { + color: #fff; + background-color: #13439E; + .el-checkbox__input.is-checked .el-checkbox__inner{ + background: #fff; + border-color: #fff; + } + } + .el-button{ + padding: 7px 15px; + } + .el-button--primary { + background-color: #1890ff; + border-color: #1890ff; + } + .el-button--danger { + background-color: #ff4949; + border-color: #ff4949; + } + + .el-button.is-disabled, + .el-button.is-disabled:hover, + .el-button.is-disabled:focus{ + color: #fff; + background-color: #ffa4a4; + border-color: #ffa4a4; + } +} +.el-table__body tr.el-table__row:hover>td.el-table__cell, +.el-table__body tr.el-table__row:focus>td.el-table__cell, +.el-table__body tr.current-row:hover>td.el-table__cell, +.el-table__body tr.current-row:focus>td.el-table__cell{ + color: #fff; + background-color: #13439E; + .el-checkbox__input.is-checked .el-checkbox__inner{ + background: #fff; + border-color: #fff; + } +} + +.el-table__body tr.current-row>td.el-table__cell{ + background-color: transparent; +} + +.el-checkbox__inner{ + background: transparent; + border-color: $mainColor; +} + +.el-icon-arrow-right:before{ + color: #fff; +} +.el-picker-panel__icon-btn:before{ + color: #303133; +} +// 分页 +.el-pagination{ + padding: 2px 10px; + margin: 10px 0 !important; + .el-pagination__total{ + color: $mainColor; + } + button{ + height: 24px; + line-height: 24px; + background-color: transparent; + &:disabled{ + background-color: transparent; + } + } + .el-pager li{ + min-width: 24px; + height: 24px; + line-height: 24px; + color: $mainColor; + background-color: transparent; + } + .el-pager li.active{ + color: #fff; + background-color: #2072D2; + } + .el-select .el-input .el-input__inner{ + background-color: transparent; + color: $mainColor; + border-color: $mainColor; + } + .el-icon-arrow-right:before{ + color: $mainColor; + } + .btn-prev, + .btn-next{ + color: $mainColor; + background-color: transparent; + } + .el-select .el-input .el-select__caret{ + color: $mainColor; + } +} + +// 弹框 +.el-dialog{ + position: relative; + position: fixed; + width: 620px; + padding: 2px; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + margin-top: 2vh !important; + background: linear-gradient(135deg, transparent 10px, $mainColor 0) top left, + linear-gradient(-135deg, transparent 10px, $mainColor 0) top right, + linear-gradient(-45deg, transparent 10px, $mainColor 0) bottom right, + linear-gradient(45deg, transparent 10px, $mainColor 0) bottom left; + background-size: 50% 50%; + background-repeat: no-repeat; + &::before, + &::after, + .dialog-right-top, + .dialog-left-bottom{ + position: absolute; + content: ""; + width: 134px; + height: 63px; + z-index: 99; + } + &::before{ + left: -6px; + top: -6px; + background: url(~@/assets/images/dialog_left_top.png) no-repeat; + background-size: contain; + } + &::after{ + right: -18px; + bottom: -7px; + background: url(~@/assets/images/dialog_right_bottom.png) no-repeat; + background-size: contain; + } + .dialog-right-top{ + right: -23px; + top: -6px; + background: url(~@/assets/images/dialog_right_top.png) no-repeat; + background-size: contain; + } + .dialog-left-bottom{ + left: -6px; + bottom: -7px; + background: url(~@/assets/images/dialog_left_bottom.png) no-repeat; + background-size: contain; + } + .el-dialog__header{ + position: absolute; + top: -40px; + left: 50%; + width: 360px; + padding: 0; + transform: translateX(-50%); + &::before{ + position: absolute; + left: -23px; + top: 0; + content: ""; + width: 23px; + height: 42px; + background: url(~@/assets/images/dialog_left.png) no-repeat; + background-size: cover; + } + &::after{ + position: absolute; + right: -23px; + top: 0; + content: ""; + width: 23px; + height: 42px; + background: url(~@/assets/images/dialog_right.png) no-repeat; + background-size: cover; + } + .el-dialog__title{ + display: block; + font-size: 18px; + font-weight: bold; + line-height: 38px; + color: #fff; + text-align: center; + background-color: $boxBg; + border-top: 2px solid $mainColor; + border-bottom: 2px solid $mainColor; + } + .el-dialog__headerbtn{ + top: 4px; + right: -160px; + } + .el-dialog__close{ + font-family: "iconfont" !important; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-size: 24px; + color: $mainColor; + &::before{ + content: "\e60c"; + } + } + } + .el-dialog__body{ + width: 100%; + background-color: $boxBg; + // border: 2px solid $mainColor; + // min-height: 400px; + // background: linear-gradient(135deg, transparent 12px, $boxBg 0) top left, + // linear-gradient(-135deg, transparent 12px, $boxBg 0) top right, + // linear-gradient(-45deg, transparent 12px, $boxBg 0) bottom right, + // linear-gradient(45deg, transparent 12px, $boxBg 0) bottom left; + // background-size: 50% 50%; + // background-repeat: no-repeat; + // box-shadow: inset 0px 0px 8px 1px rgba(51, 156, 255, 0.6); + } + .dialog-footer{ + margin: 30px auto 0 auto; + text-align: center; + .el-button{ + font-size: 16px; + padding: 8px 28px; + } + .el-button--primary{ + background-color: $desPreviewColor; + } + } +} +.el-dialog, +.right-preview{ + .el-form{ + .el-form-item__label{ + color: $mainColor; + } + .el-input__inner{ + color: #fff; + border: 1px solid $mainColor; + background-color: transparent !important; + } + .vue-treeselect__control, + .vue-treeselect__placeholder, + .vue-treeselect__single-value{ + height: 28px; + // line-height: 28px; + color: #fff; + } + .vue-treeselect__control{ + border: 1px solid $mainColor; + background-color: transparent; + .vue-treeselect__control-arrow{ + color: $mainColor; + } + } + .el-radio{ + color: #fff; + } + .el-textarea__inner{ + color: #fff; + border: 1px solid $mainColor; + background-color: transparent; + } + .el-input-number.is-controls-right[class*=small] [class*=increase], + .el-input-number.is-controls-right[class*=small] [class*=decrease]{ + background-color: transparent; + } + .el-input-number__decrease, + .el-input-number__increase{ + border-left-color: $mainColor; + &>i{ + color: #fff; + } + } + .el-input-number__increase{ + border-bottom-color: $mainColor; + } + .el-select .el-input .el-select__caret{ + color: $mainColor; + } + .vue-treeselect .vue-treeselect__control:focus, + .vue-treeselect .vue-treeselect__control:hover{ + border-color: $mainColor !important; + } + .vue-treeselect.vue-treeselect--disabled .vue-treeselect__control, + .el-input.is-disabled .el-input__inner, + .el-textarea.is-disabled .el-textarea__inner{ + color: $desPreviewColor !important; + border: none !important; + background-color: #02255f!important; + } + } +} +// el-tree 最终节点不显示箭头 +.is-leaf::before { + color: transparent; +} + +.el-input__prefix{ + left: 8px; +} + +// tab样式布局 +.tab-content{ + margin-top: 40px; + border-top: none; + background-color: #021941; + &::before{ + display: none; + } + .tab-nav{ + display: flex; + justify-content: flex-start; + height: 41px; + line-height: 41px; + margin: -41px 0 30px -1px; + font-size: 16px; + font-weight: bold; + color: #359AFC; + border-bottom: 1px solid #113D72; + li{ + position: relative; + padding: 0 24px; + margin: -1px 30px 0 0; + letter-spacing: 2px; + border-top: 1px solid #113D72; + background-color: #021941; + cursor: pointer; + &::before, + &::after{ + content: ""; + position: absolute; + top: 0; + width: 33px; + height: 41px; + } + &::before{ + left: -15px; + background: url(~@/assets/images/tab_left.png) no-repeat; + background-size: contain; + } + &::after{ + right: -32px; + background: url(~@/assets/images/tab_right.png) no-repeat; + background-size: contain; + } + &:first-child{ + border-left: 1px solid #113d72;; + &::before{ + width: 17px; + height: 17px; + left: -1px; + top: -1px; + border-left: 1px solid $mainColor; + border-top: 1px solid $mainColor; + } + } + &.active-tab-nav{ + color: #fff; + &::before{ + background: url(~@/assets/images/tab_left_active.png) no-repeat; + background-size: contain; + } + &::after{ + background: url(~@/assets/images/tab_right_active.png) no-repeat; + background-size: contain; + } + i{ + display: block; + position: absolute; + bottom: -1px; + left: 0; + width: 100%; + height: 1px; + border-bottom: 1px solid #021941; + } + } + } + .tab-right-img{ + display: block; + width: 93px; + margin: 4px 0 0 -14px; + background: url(~@/assets/images/tab_img.png) no-repeat; + background-size: contain; + } + } + .el-table__header{ + border-top: 1px solid #113D72; + } +} + +// 默认底图 - 暂时只有头像 +.user-img-cover{ + border-radius: 50%; + background: url(~@/assets/images/avatar.png) no-repeat #fff; + background-size: cover; + overflow: hidden; +} + +// 著录界面表单 + +.des-form{ + .el-form-item__label{ + font-weight: normal; + color: $desPreviewColor; + } + .el-input__inner{ + color: $desPreviewColor; + background: #021941 !important; + border: none; + &::placeholder{ + color: $desPreviewColor !important; + } + &::-webkit-input-placeholder{ + color: $desPreviewColor !important; + } + } + .el-input.is-disabled .el-input__inner{ + color: $desPreviewColor !important; + border: none; + background-color: #02255f!important; + } + .el-input__icon{ + color: $desPreviewColor !important; + } + .checkbox-item{ + height: 36px; + line-height: 36px; + text-align: right; + .el-form-item__content{ + margin-left: 0 !important; + } + .el-checkbox__input.is-disabled .el-checkbox__inner{ + background-color: transparent; + border-color: $mainColor; + &::after{ + border-color: $desPreviewColor; + } + } + span{ + color: $desPreviewColor; + } + } + .input-num{ + display: flex; + justify-content: flex-end; + .el-input__inner{ + width: 50px; + } + .el-form-item__content{ + display: flex; + justify-content: flex-start; + margin-left: 0 !important; + .el-input, + .el-input-number--small{ + width: 60px; + } + .el-input-number.is-controls-right { + .el-input-number__decrease, + .el-input-number__increase{ + display: none; + } + .el-input__inner{ + padding-left: 0; + padding-right: 0; + } + } + } + span{ + color: $desPreviewColor; + line-height: 36px; + } + } +} +.setting-dialog{ + z-index: 100; + position: relative; + color: #fff; + .des-form{ + width: 100% !important; + margin-top: 0 !important; + padding: 20px 38px 0 20px !important; + background-color: transparent !important; + .el-select, + .el-input__inner{ + width: 100% !important; + } + .input-num{ + .el-input{ + margin-right: 10px !important; + } + } + } +} +.preview-dialog{ + .el-dialog{ + width: 680px !important; + .preview-content{ + max-height: calc(100vh - 330px) !important; + overflow: hidden !important; + overflow-y: auto !important; + border: none !important; + .el-textarea__inner{ + border: 1px solid $mainColor !important; + background-color: transparent !important; + } + } + .el-dialog__header{ + width: 420px !important; + } + } +} +.preview-dialog{ + .el-dialog__body{ + padding: 30px 0 !important; + } +} +// 去除element ui 中el-input type=“number“的上下箭头 +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none !important; +} +input[type ='number'] { + -moz-appearance: textfield !important; +} + +// 弹框-删除等提示 +.setting-dialog{ + .dialog-delt{ + line-height: 26px; + color: #fff; + margin-bottom: 20px; + } + .delt-tip{ + margin-top: 10px; + color: #EF3147; + } +} + +// alert 样式 +.el-message-box{ + position: relative; + width: 588px; + border: 2px solid $mainColor; + border-bottom: none; + border-radius: 4px 4px 0 0; + background-color: $boxBg; + overflow: visible; + &::after{ + position: absolute; + left: -2px; + bottom: -30px; + content: ""; + width: 589px; + height: 30px; + background: url(~@/assets/images/alert_bottom.png) no-repeat; + background-size: contain; + } + .el-message-box__header{ + padding: 18px 60px; + background-color: $mainColor; + .el-message-box__title{ + font-weight: bold; + color: #fff; + } + .el-message-box__headerbtn{ + top: -36px; + right: -16px; + } + .el-icon-close{ + font-family: "iconfont" !important; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-size: 24px; + color: $mainColor; + &::before{ + content: "\E60C"; + } + } + } + .el-message-box__content{ + height: 110px; + padding: 35px 60px 15px 60px; + color: #fff; + } +} +.el-message-box .el-button, +.el-popover .el-button{ + color: #fff; + border-color: $mainColor; + background-color: transparent; +} + +.el-message-box .el-button:hover, +.el-popover .el-button:focus{ + color: #fff; + background-color: #02255F; + border-color: $mainColor; +} +.el-message-box .el-button--primary, +.el-message-box .el-button--primary:focus, +.el-message-box .el-button--primary:hover { + background: #46a6ff; + border-color: #46a6ff; + color: #fff; +} +.el-table__header-wrapper{ + background-color: #02255f; +} + +.svg-style{ + margin-right: 5px; +} +.svg-arc-style{ + margin-right: 10px; +} + +.el-form-item__error--inline{ + margin-left: 0; + vertical-align: top; +} +.inline-error-item .el-form-item__content{ + line-height: normal; + margin-bottom: -15px; +} + +.el-select-dropdown, +.el-dropdown-menu{ + box-shadow: rgb(51 156 255) 0px 0px 10px 1px inset; + background: #02255F; + border: none; +} +.el-select-dropdown__item{ + color: $mainColor; +} +.el-select-dropdown__item.hover, +.el-select-dropdown__item:hover{ + background-color: #13439E; +} + +.el-select-dropdown.is-multiple .el-select-dropdown__item.selected{ + background-color: transparent; + color: #fff; +} +.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover{ + background-color: #13439E; + color: #fff; +} +.el-popper[x-placement^=bottom] .popper__arrow{ + width: 15px; + height: 7px; + top: -7px; + background: url('~@/assets/images/pop_arrow.png') no-repeat !important; + border: none; + transform: rotate(180deg); +} +.el-popper[x-placement^=bottom] .popper__arrow::after{ + content: ''; + border: none; +} +.el-dropdown-menu .el-dropdown-menu__item{ + color: #fff; +} +.el-dropdown-menu .el-dropdown-menu__item:hover{ + background-color: #13439E; + color: #fff; +} +.el-dropdown-menu__item--divided{ + border-top-color: #13439E; + margin-top: 0 !important; +} +.el-dropdown-menu .el-dropdown-menu__item--divided:before{ + background-color: transparent !important; +} + +//vue-treeselect +.vue-treeselect__multi-value-item{ + background:#13439E !important; + border: none !important; +} +.vue-treeselect__multi-value-label{ + color: #fff; +} +.vue-treeselect__value-remove{ + border-left: none !important; +} +.vue-treeselect__value-remove > svg{ + color: #fff; +} + +// 消息中心 pop +.message-icon{ + position: relative; + .icon-xiaoxi{ + font-size: 26px; + color: $mainColor; + } + .message-num{ + position: absolute; + top: 0; + right: -8px; + display: block; + width: 20px; + height: 20px; + font-size: 14px; + text-align: center; + line-height: 20px; + border-radius: 50%; + background-color: #F91832; + color: #fff; + } +} +.el-dropdown-menu--small .el-dropdown-menu__item.message-list-item{ + padding: 0; +} +.message-list-item a{ + display: flex; + justify-content: space-between; + padding: 0 20px; + height: 40px; + font-size: 14px; + border-bottom: 1px solid #113D72; + p, span, i{ + line-height: 40px; + } + p{ + width: 220px; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + } + span{ + display: block; + } + i.el-icon-arrow-right:before{ + font-size: 16px; + color: $mainColor; + } +} +.message-dropdown.el-popper[x-placement^=bottom]{ + .popper__arrow{ + width: 89px; + height: 20px; + top: -8px; + background: url('~@/assets/images/pop-message.png') no-repeat !important; + border: none; + transform: rotate(0); + } +} + +// 库房空气质量监控 +.msg-list{ + position: absolute; + top: 0; + left: 0; + width: calc(100vw - 800px); +} +.msg-list, +.screen-env-list{ + display: flex; + li{ + display: flex; + flex-wrap: nowrap; + align-items: center; + align-content: center; + justify-content: center; + width: calc(100%/6); + height: 80px; + margin-right: 20px; + background: url('~@/assets/images/data_border_default.png') no-repeat; + background-size: 100% 100%; + position: relative; + &.li-warn{ + background: url('~@/assets/images/data_border_warn.png') no-repeat; + background-size: 100% 100%; + } + .msg-list-svg{ + font-size: 36px; + display: inline-block; + height: 80px; + line-height: 80px; + margin-left: 30px; + } + .msg-pm{ + font-size: 46px; + } + .msg-txt{ + position: relative; + flex: 1; + height: 80px; + text-align: center; + } + .msg-list-unit{ + position: absolute; + left: 0; + bottom: 12px; + width: 100%; + font-size: 14px; + color: $mainColor; + } + .msg-list-num{ + color: #fff; + font-size: 26px; + position: absolute; + left: 0; + top: 14px; + width: 100%; + } + } +} + +.el-tag--small{ + margin: 2px 0; + border: 1px solid $mainColor; + background-color: #02255f; +} + +.el-tag.el-tag--warning { + background-color: transparent; + border-color: #FD8042; + color: #FD8042; +} + +.el-tag.el-tag--danger { + background-color: transparent; + border-color: #f65163; + color: #f65163; +} + +// table 选中状态 +.el-table__body .rowStyle>td { + color: #fff !important; + background-color: #13439E !important; +} + +// 数据为空 +.empty-main{ + display: flex; + height: calc(100% - 40px); + flex-flow: column; + justify-content: center; + align-items: center; + .empty-img{ + width: 140px !important; + height: 140px !important; + vertical-align: middle !important; + } + p{ + font-size: 12px; + color: #999; + margin-top: -10px; + } +} + +// 日期控件btn +.el-date-range-picker{ + .el-picker-panel__footer .el-button{ + border: 1px solid $mainColor; + color: $mainColor !important; + } + .el-picker-panel__footer .el-button:hover{ + background-color: transparent; + } + .el-picker-panel__footer .el-button.is-plain { + background-color: #1890ff; + border-color: #1890ff; + color: #fff !important; + } +} +// 档案统计title +.table-title { + // color: #fff; + @include font-color($font-color-theme1); + font-size: 16px; + text-align: center; + height: 40px; + line-height: 40px; +} + +.warehouse-svg { + margin: 0 10px 1px 0; +} +.title-arrow { + position: relative; + display: inline-block; + + &::before { + content: ''; + width: 36px; + height: 12px; + position: absolute; + right: -60px; + top: 50%; + transform: translateY(-50%); + background: url('~@/assets/images/warehouse_arrow_left.png') no-repeat; + } + + &::after { + content: ''; + width: 36px; + height: 12px; + position: absolute; + left: -60px; + top: 50%; + transform: translateY(-50%); + background: url('~@/assets/images/warehouse_arrow_right.png') no-repeat; + } +} \ No newline at end of file diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue new file mode 100644 index 0000000..c849706 --- /dev/null +++ b/src/components/Breadcrumb/index.vue @@ -0,0 +1,104 @@ + + + + + diff --git a/src/components/Crud/CRUD.operation.vue b/src/components/Crud/CRUD.operation.vue new file mode 100644 index 0000000..28a019f --- /dev/null +++ b/src/components/Crud/CRUD.operation.vue @@ -0,0 +1,228 @@ + + + + diff --git a/src/components/Crud/Pagination.vue b/src/components/Crud/Pagination.vue new file mode 100644 index 0000000..8aed184 --- /dev/null +++ b/src/components/Crud/Pagination.vue @@ -0,0 +1,18 @@ + + + diff --git a/src/components/Crud/RR.operation.vue b/src/components/Crud/RR.operation.vue new file mode 100644 index 0000000..4e3e62e --- /dev/null +++ b/src/components/Crud/RR.operation.vue @@ -0,0 +1,28 @@ + + + + diff --git a/src/components/Crud/UD.operation.vue b/src/components/Crud/UD.operation.vue new file mode 100644 index 0000000..806a91b --- /dev/null +++ b/src/components/Crud/UD.operation.vue @@ -0,0 +1,103 @@ + + + + diff --git a/src/components/Crud/crud.js b/src/components/Crud/crud.js new file mode 100644 index 0000000..49b3219 --- /dev/null +++ b/src/components/Crud/crud.js @@ -0,0 +1,869 @@ +import { initData, download } from '@/api/data' +import { parseTime, downloadFile } from '@/utils/index' +import Vue from 'vue' + +/** + * CRUD配置 + * @author moxun + * @param {*} options
+ * @return crud instance. + * @example + * 要使用多crud时，请在关联crud的组件处使用crud-tag进行标记，如： + */ +function CRUD(options) { + const defaultOptions = { + tag: 'default', + // id字段名 + idField: 'id', + // 标题 + title: '', + // 请求数据的url + url: '', + // 表格数据 + data: [], + // 选择项 + selections: [], + // 待查询的对象 + query: {}, + // 查询数据的参数 + params: {}, + // Form 表单 + form: {}, + // 重置表单 + defaultForm: () => {}, + // 排序规则，默认 id 降序， 支持多字段排序 ['id,desc', 'createTime,asc'] + sort: ['id,desc'], + // 等待时间 + time: 50, + // CRUD Method + crudMethod: { + add: (form) => {}, + del: (id) => {}, + edit: (form) => {}, + get: (id) => {} + }, + // 主页操作栏显示哪些按钮 + optShow: { + add: true, + edit: true, + del: true, + download: true, + reset: true, + group: true + }, + // 自定义一些扩展属性 + props: {}, + // 在主页准备 + queryOnPresenterCreated: true, + // 调试开关 + debug: false, + confirmDeleteMsg: null + } + options = mergeOptions(defaultOptions, options) + const data = { + ...options, + // 记录数据状态 + dataStatus: {}, + status: { + add: CRUD.STATUS.NORMAL, + edit: CRUD.STATUS.NORMAL, + // 添加或编辑状态 + get cu() { + if (this.add === CRUD.STATUS.NORMAL && this.edit === CRUD.STATUS.NORMAL) { + return CRUD.STATUS.NORMAL + } else if (this.add === CRUD.STATUS.PREPARED || this.edit === CRUD.STATUS.PREPARED) { + return CRUD.STATUS.PREPARED + } else if (this.add === CRUD.STATUS.PROCESSING || this.edit === CRUD.STATUS.PROCESSING) { + return CRUD.STATUS.PROCESSING + } + throw new Error('wrong crud\'s cu status') + }, + // 标题 + get title() { + return this.add > CRUD.STATUS.NORMAL ? `新增${crud.title}` : this.edit > CRUD.STATUS.NORMAL ? `编辑${crud.title}` : crud.title + } + }, + msg: { + submit: '提交成功', + add: '新增成功', + edit: '编辑成功', + del: '删除成功' + }, + page: { + // 页码 + page: 0, + // 每页数据条数 + size: 10, + // 总数据条数 + total: 0 + }, + // 整体loading + loading: false, + // 导出的 Loading + downloadLoading: false, + // 删除的 Loading + delAllLoading: false + } + const methods = { + /** + * 通用的提示 + */ + submitSuccessNotify() { + crud.notify(crud.msg.submit, CRUD.NOTIFICATION_TYPE.SUCCESS) + }, + addSuccessNotify() { + crud.notify(crud.msg.add, CRUD.NOTIFICATION_TYPE.SUCCESS) + }, + editSuccessNotify() { + crud.notify(crud.msg.edit, CRUD.NOTIFICATION_TYPE.SUCCESS) + }, + delSuccessNotify() { + crud.notify(crud.msg.del, CRUD.NOTIFICATION_TYPE.SUCCESS) + }, + // 搜索 + toQuery() { + crud.page.page = 1 + crud.refresh() + }, + // 刷新 + refresh() { + if (!callVmHook(crud, CRUD.HOOK.beforeRefresh)) { + return + } + return new Promise((resolve, reject) => { + crud.loading = true + // 请求数据 + initData(crud.url, crud.getQueryParams()).then(data => { + const table = crud.getTable() + if (table && table.lazy) { // 懒加载子节点数据，清掉已加载的数据 + table.store.states.treeData = {} + table.store.states.lazyTreeNodeMap = {} + } + crud.page.total = data.totalElements !== null ? data.totalElements : data.length + crud.data = data.content ? data.content : data + crud.resetDataStatus() + // time 毫秒后显示表格 + setTimeout(() => { + crud.loading = false + callVmHook(crud, CRUD.HOOK.afterRefresh) + }, crud.time) + resolve(data) + }).catch(err => { + crud.loading = false + reject(err) + }) + }) + }, + /** + * 启动添加 + */ + toAdd() { + crud.resetForm() + if (!(callVmHook(crud, CRUD.HOOK.beforeToAdd, crud.form) && callVmHook(crud, CRUD.HOOK.beforeToCU, crud.form, 'add'))) { + return + } + crud.status.add = CRUD.STATUS.PREPARED + callVmHook(crud, CRUD.HOOK.afterToAdd, crud.form) + callVmHook(crud, CRUD.HOOK.afterToCU, crud.form) + }, + /** + * 启动编辑 + * @param {*} data 数据项 + */ + toEdit(data) { + crud.resetForm(JSON.parse(JSON.stringify(data))) + if (!(callVmHook(crud, CRUD.HOOK.beforeToEdit, crud.form) && callVmHook(crud, CRUD.HOOK.beforeToCU, crud.form, 'edit'))) { + return + } + crud.status.edit = CRUD.STATUS.PREPARED + crud.getDataStatus(crud.getDataId(data)).edit = CRUD.STATUS.PREPARED + callVmHook(crud, CRUD.HOOK.afterToEdit, crud.form) + callVmHook(crud, CRUD.HOOK.afterToCU, crud.form) + }, + /** + * 启动删除 + * @param {*} data 数据项 + */ + toDelete(data) { + crud.getDataStatus(crud.getDataId(data)).delete = CRUD.STATUS.PREPARED + }, + /** + * 取消删除 + * @param {*} data 数据项 + */ + cancelDelete(data) { + if (!callVmHook(crud, CRUD.HOOK.beforeDeleteCancel, data)) { + return + } + crud.getDataStatus(crud.getDataId(data)).delete = CRUD.STATUS.NORMAL + callVmHook(crud, CRUD.HOOK.afterDeleteCancel, data) + }, + /** + * 取消新增/编辑 + */ + cancelCU() { + const addStatus = crud.status.add + const editStatus = crud.status.edit + if (addStatus === CRUD.STATUS.PREPARED) { + if (!callVmHook(crud, CRUD.HOOK.beforeAddCancel, crud.form)) { + return + } + crud.status.add = CRUD.STATUS.NORMAL + } + if (editStatus === CRUD.STATUS.PREPARED) { + if (!callVmHook(crud, CRUD.HOOK.beforeEditCancel, crud.form)) { + return + } + crud.status.edit = CRUD.STATUS.NORMAL + crud.getDataStatus(crud.getDataId(crud.form)).edit = CRUD.STATUS.NORMAL + } + crud.resetForm() + if (addStatus === CRUD.STATUS.PREPARED) { + callVmHook(crud, CRUD.HOOK.afterAddCancel, crud.form) + } + if (editStatus === CRUD.STATUS.PREPARED) { + callVmHook(crud, CRUD.HOOK.afterEditCancel, crud.form) + } + // 清除表单验证 + if (crud.findVM('form').$refs['form']) { + crud.findVM('form').$refs['form'].clearValidate() + } + }, + /** + * 提交新增/编辑 + */ + submitCU() { + if (!callVmHook(crud, CRUD.HOOK.beforeValidateCU)) { + return + } + crud.findVM('form').$refs['form'].validate(valid => { + if (!valid) { + return + } + if (!callVmHook(crud, CRUD.HOOK.afterValidateCU)) { + return + } + if (crud.status.add === CRUD.STATUS.PREPARED) { + crud.doAdd() + } else if (crud.status.edit === CRUD.STATUS.PREPARED) { + crud.doEdit() + } + }) + }, + /** + * 执行添加 + */ + doAdd() { + if (!callVmHook(crud, CRUD.HOOK.beforeSubmit)) { + return + } + crud.status.add = CRUD.STATUS.PROCESSING + crud.crudMethod.add(crud.form).then((res) => { + crud.status.add = CRUD.STATUS.NORMAL + crud.resetForm() + crud.addSuccessNotify() + if (res && res !== 'SUCCESS' && res !== '保存成功') { + callVmHook(crud, CRUD.HOOK.afterSubmit, res) + } else { + callVmHook(crud, CRUD.HOOK.afterSubmit) + } + crud.toQuery() + }).catch(() => { + crud.status.add = CRUD.STATUS.PREPARED + callVmHook(crud, CRUD.HOOK.afterAddError) + }) + }, + /** + * 执行编辑 + */ + doEdit() { + if (!callVmHook(crud, CRUD.HOOK.beforeSubmit)) { + return + } + crud.status.edit = CRUD.STATUS.PROCESSING + crud.crudMethod.edit(crud.form).then(() => { + crud.status.edit = CRUD.STATUS.NORMAL + crud.getDataStatus(crud.getDataId(crud.form)).edit = CRUD.STATUS.NORMAL + crud.editSuccessNotify() + crud.resetForm() + callVmHook(crud, CRUD.HOOK.afterSubmit) + crud.refresh() + }).catch(() => { + crud.status.edit = CRUD.STATUS.PREPARED + callVmHook(crud, CRUD.HOOK.afterEditError) + }) + }, + /** + * 执行删除 + * @param {*} data 数据项 + */ + doDelete(data) { + let delAll = false + let dataStatus + const ids = [] + if (data instanceof Array) { + delAll = true + data.forEach(val => { + ids.push(this.getDataId(val)) + }) + } else { + ids.push(this.getDataId(data)) + dataStatus = crud.getDataStatus(this.getDataId(data)) + } + if (!callVmHook(crud, CRUD.HOOK.beforeDelete, data)) { + return + } + if (!delAll) { + dataStatus.delete = CRUD.STATUS.PROCESSING + } + return crud.crudMethod.del(ids).then(() => { + if (delAll) { + crud.delAllLoading = false + } else dataStatus.delete = CRUD.STATUS.PREPARED + crud.dleChangePage(1) + // crud.delSuccessNotify() + callVmHook(crud, CRUD.HOOK.afterDelete, data) + crud.refresh() + }).catch(() => { + if (delAll) { + crud.delAllLoading = false + } else dataStatus.delete = CRUD.STATUS.PREPARED + }) + }, + /** + * 通用导出 + */ + doExport() { + crud.downloadLoading = true + download(crud.url + '/download', crud.getQueryParams()).then(result => { + downloadFile(result, crud.title + '数据', 'xlsx') + crud.downloadLoading = false + }).catch(() => { + crud.downloadLoading = false + }) + }, + /** + * 获取查询参数 + */ + getQueryParams: function() { + // 清除参数无值的情况 + Object.keys(crud.query).length !== 0 && Object.keys(crud.query).forEach(item => { + if (crud.query[item] === null || crud.query[item] === '') crud.query[item] = undefined + }) + Object.keys(crud.params).length !== 0 && Object.keys(crud.params).forEach(item => { + if (crud.params[item] === null || crud.params[item] === '') crud.params[item] = undefined + }) + return { + page: crud.page.page - 1, + size: crud.page.size, + sort: crud.sort, + ...crud.query, + ...crud.params + } + }, + // 当前页改变 + pageChangeHandler(e) { + crud.page.page = e + crud.refresh() + }, + // 每页条数改变 + sizeChangeHandler(e) { + crud.page.size = e + crud.page.page = 1 + crud.refresh() + }, + // 预防删除第二页最后一条数据时，或者多选删除第二页的数据时，页码错误导致请求无数据 + dleChangePage(size) { + if (crud.data.length === size && crud.page.page !== 1) { + crud.page.page -= 1 + } + }, + // 选择改变 + selectionChangeHandler(val) { + crud.selections = val + }, + /** + * 重置查询参数 + * @param {Boolean} toQuery 重置后进行查询操作 + */ + resetQuery(toQuery = true) { + const defaultQuery = JSON.parse(JSON.stringify(crud.defaultQuery)) + const query = crud.query + Object.keys(query).forEach(key => { + query[key] = defaultQuery[key] + }) + // 重置参数 + this.params = {} + if (toQuery) { + crud.toQuery() + } + }, + /** + * 重置表单 + * @param {Array} data 数据 + */ + resetForm(data) { + const form = data || (typeof crud.defaultForm === 'object' ? JSON.parse(JSON.stringify(crud.defaultForm)) : crud.defaultForm.apply(crud.findVM('form'))) + const crudFrom = crud.form + for (const key in form) { + if (crudFrom.hasOwnProperty(key)) { + crudFrom[key] = form[key] + } else { + Vue.set(crudFrom, key, form[key]) + } + } + // add by ghl 2020-10-04 页面重复添加信息时，下拉框的校验会存在，需要找工取消 + if (crud.findVM('form').$refs['form']) { + crud.findVM('form').$refs['form'].clearValidate() + } + }, + /** + * 重置数据状态 + */ + resetDataStatus() { + const dataStatus = {} + function resetStatus(datas) { + datas.forEach(e => { + dataStatus[crud.getDataId(e)] = { + delete: 0, + edit: 0 + } + if (e.children) { + resetStatus(e.children) + } + }) + } + resetStatus(crud.data) + crud.dataStatus = dataStatus + }, + /** + * 获取数据状态 + * @param {Number | String} id 数据项id + */ + getDataStatus(id) { + return crud.dataStatus[id] + }, + /** + * 用于树形表格多选, 选中所有 + * @param selection + */ + selectAllChange(selection) { + // 如果选中的数目与请求到的数目相同就选中子节点，否则就清空选中 + if (selection && selection.length === crud.data.length) { + selection.forEach(val => { + crud.selectChange(selection, val) + }) + } else { + crud.getTable().clearSelection() + } + }, + /** + * 用于树形表格多选，单选的封装 + * @param selection + * @param row + */ + selectChange(selection, row) { + // 如果selection中存在row代表是选中，否则是取消选中 + if (selection.find(val => { return crud.getDataId(val) === crud.getDataId(row) })) { + if (row.children) { + row.children.forEach(val => { + crud.getTable().toggleRowSelection(val, true) + selection.push(val) + if (val.children) { + crud.selectChange(selection, val) + } + }) + } + } else { + crud.toggleRowSelection(selection, row) + } + }, + /** + * 切换选中状态 + * @param selection + * @param data + */ + toggleRowSelection(selection, data) { + if (data.children) { + data.children.forEach(val => { + crud.getTable().toggleRowSelection(val, false) + if (val.children) { + crud.toggleRowSelection(selection, val) + } + }) + } + }, + findVM(type) { + return crud.vms.find(vm => vm && vm.type === type).vm + }, + notify(message, type = CRUD.NOTIFICATION_TYPE.INFO) { + crud.vms[0].vm.$message({ + message, + type, + duration: 2500 + }) + }, + updateProp(name, value) { + Vue.set(crud.props, name, value) + }, + getDataId(data) { + return data[this.idField] + }, + getTable() { + return this.findVM('presenter').$refs.table + }, + attchTable() { + const table = this.getTable() + this.updateProp('table', table) + const that = this + table.$on('expand-change', (row, expanded) => { + if (!expanded) { + return + } + const lazyTreeNodeMap = table.store.states.lazyTreeNodeMap + row.children = lazyTreeNodeMap[crud.getDataId(row)] + if (row.children) { + row.children.forEach(ele => { + const id = crud.getDataId(ele) + if (that.dataStatus[id] === undefined) { + that.dataStatus[id] = { + delete: 0, + edit: 0 + } + } + }) + } + }) + } + } + const crud = Object.assign({}, data) + // 可观测化 + Vue.observable(crud) + // 附加方法 + Object.assign(crud, methods) + // 记录初始默认的查询参数，后续重置查询时使用 + Object.assign(crud, { + defaultQuery: JSON.parse(JSON.stringify(data.query)), + // 预留4位存储：组件 主页、头部、分页、表单，调试查看也方便找 + vms: Array(4), + /** + * 注册组件实例 + * @param {String} type 类型 + * @param {*} vm 组件实例 + * @param {Number} index 该参数内部使用 + */ + registerVM(type, vm, index = -1) { + const vmObj = { + type, + vm: vm + } + if (index < 0) { + this.vms.push(vmObj) + return + } + if (index < 4) { // 内置预留vm数 + this.vms[index] = vmObj + return + } + this.vms.length = Math.max(this.vms.length, index) + this.vms.splice(index, 1, vmObj) + }, + /** + * 取消注册组件实例 + * @param {*} vm 组件实例 + */ + unregisterVM(type, vm) { + for (let i = this.vms.length - 1; i >= 0; i--) { + if (this.vms[i] === undefined) { + continue + } + if (this.vms[i].type === type && this.vms[i].vm === vm) { + if (i < 4) { // 内置预留vm数 + this.vms[i] = undefined + } else { + this.vms.splice(i, 1) + } + break + } + } + } + }) + // 冻结处理，需要扩展数据的话，使用crud.updateProp(name, value)，以crud.props.name形式访问，这个是响应式的，可以做数据绑定 + Object.freeze(crud) + return crud +} + +// hook VM +function callVmHook(crud, hook) { + if (crud.debug) { + console.log('callVmHook: ' + hook) + } + const tagHook = crud.tag ? hook + '$' + crud.tag : null + let ret = true + const nargs = [crud] + for (let i = 2; i < arguments.length; ++i) { + nargs.push(arguments[i]) + } + // 有些组件扮演了多个角色，调用钩子时，需要去重 + const vmSet = new Set() + crud.vms.forEach(vm => vm && vmSet.add(vm.vm)) + vmSet.forEach(vm => { + if (vm[hook]) { + ret = vm[hook].apply(vm, nargs) !== false && ret + } + if (tagHook && vm[tagHook]) { + ret = vm[tagHook].apply(vm, nargs) !== false && ret + } + }) + return ret +} + +function mergeOptions(src, opts) { + const optsRet = { + ...src + } + for (const key in src) { + if (opts.hasOwnProperty(key)) { + optsRet[key] = opts[key] + } + } + return optsRet +} + +/** + * 查找crud + * @param {*} vm + * @param {string} tag + */ +function lookupCrud(vm, tag) { + tag = tag || vm.$attrs['crud-tag'] || 'default' + // function lookupCrud(vm, tag) { + if (vm.$crud) { + const ret = vm.$crud[tag] + if (ret) { + return ret + } + } + return vm.$parent ? lookupCrud(vm.$parent, tag) : undefined +} + +/** + * crud主页 + */ +function presenter(crud) { + if (crud) { + console.warn('[CRUD warn]: ' + 'please use $options.cruds() { return CRUD(...) or [CRUD(...), ...] }') + } + return { + data() { + // 在data中返回crud，是为了将crud与当前实例关联，组件观测crud相关属性变化 + return { + crud: this.crud + } + }, + beforeCreate() { + this.$crud = this.$crud || {} + let cruds = this.$options.cruds instanceof Function ? this.$options.cruds() : crud + if (!(cruds instanceof Array)) { + cruds = [cruds] + } + cruds.forEach(ele => { + if (this.$crud[ele.tag]) { + console.error('[CRUD error]: ' + 'crud with tag [' + ele.tag + ' is already exist') + } + this.$crud[ele.tag] = ele + ele.registerVM('presenter', this, 0) + }) + this.crud = this.$crud['defalut'] || cruds[0] + }, + methods: { + parseTime + }, + created() { + for (const k in this.$crud) { + if (this.$crud[k].queryOnPresenterCreated) { + this.$crud[k].toQuery() + } + } + }, + destroyed() { + for (const k in this.$crud) { + this.$crud[k].unregisterVM('presenter', this) + } + }, + mounted() { + // 如果table未实例化（例如使用了v-if），请稍后在适当时机crud.attchTable刷新table信息 + if (this.$refs.table !== undefined) { + this.crud.attchTable() + } + } + } +} + +/** + * 头部 + */ +function header() { + return { + data() { + return { + crud: this.crud, + query: this.crud.query + } + }, + beforeCreate() { + this.crud = lookupCrud(this) + this.crud.registerVM('header', this, 1) + }, + destroyed() { + this.crud.unregisterVM('header', this) + } + } +} + +/** + * 分页 + */ +function pagination() { + return { + data() { + return { + crud: this.crud, + page: this.crud.page + } + }, + beforeCreate() { + this.crud = lookupCrud(this) + this.crud.registerVM('pagination', this, 2) + }, + destroyed() { + this.crud.unregisterVM('pagination', this) + } + } +} + +/** + * 表单 + */ +function form(defaultForm) { + return { + data() { + return { + crud: this.crud, + form: this.crud.form + } + }, + beforeCreate() { + this.crud = lookupCrud(this) + this.crud.registerVM('form', this, 3) + }, + created() { + this.crud.defaultForm = defaultForm + this.crud.resetForm() + }, + destroyed() { + this.crud.unregisterVM('form', this) + } + } +} + +/** + * crud + */ +function crud(options = {}) { + const defaultOptions = { + type: undefined + } + options = mergeOptions(defaultOptions, options) + return { + data() { + return { + crud: this.crud + } + }, + beforeCreate() { + this.crud = lookupCrud(this) + this.crud.registerVM(options.type, this) + }, + destroyed() { + this.crud.unregisterVM(options.type, this) + } + } +} + +/** + * CRUD钩子 + */ +CRUD.HOOK = { + /** 刷新 - 之前 */ + beforeRefresh: 'beforeCrudRefresh', + /** 刷新 - 之后 */ + afterRefresh: 'afterCrudRefresh', + /** 删除 - 之前 */ + beforeDelete: 'beforeCrudDelete', + /** 删除 - 之后 */ + afterDelete: 'afterCrudDelete', + /** 删除取消 - 之前 */ + beforeDeleteCancel: 'beforeCrudDeleteCancel', + /** 删除取消 - 之后 */ + afterDeleteCancel: 'afterCrudDeleteCancel', + /** 新建 - 之前 */ + beforeToAdd: 'beforeCrudToAdd', + /** 新建 - 之后 */ + afterToAdd: 'afterCrudToAdd', + /** 编辑 - 之前 */ + beforeToEdit: 'beforeCrudToEdit', + /** 编辑 - 之后 */ + afterToEdit: 'afterCrudToEdit', + /** 开始 "新建/编辑" - 之前 */ + beforeToCU: 'beforeCrudToCU', + /** 开始 "新建/编辑" - 之后 */ + afterToCU: 'afterCrudToCU', + /** "新建/编辑" 验证 - 之前 */ + beforeValidateCU: 'beforeCrudValidateCU', + /** "新建/编辑" 验证 - 之后 */ + afterValidateCU: 'afterCrudValidateCU', + /** 添加取消 - 之前 */ + beforeAddCancel: 'beforeCrudAddCancel', + /** 添加取消 - 之后 */ + afterAddCancel: 'afterCrudAddCancel', + /** 编辑取消 - 之前 */ + beforeEditCancel: 'beforeCrudEditCancel', + /** 编辑取消 - 之后 */ + afterEditCancel: 'afterCrudEditCancel', + /** 提交 - 之前 */ + beforeSubmit: 'beforeCrudSubmitCU', + /** 提交 - 之后 */ + afterSubmit: 'afterCrudSubmitCU', + afterAddError: 'afterCrudAddError', + afterEditError: 'afterCrudEditError' +} + +/** + * CRUD状态 + */ +CRUD.STATUS = { + NORMAL: 0, + PREPARED: 1, + PROCESSING: 2 +} + +/** + * CRUD通知类型 + */ +CRUD.NOTIFICATION_TYPE = { + SUCCESS: 'success', + WARNING: 'warning', + INFO: 'info', + ERROR: 'error' +} + +export default CRUD + +export { + presenter, + header, + form, + pagination, + crud +} diff --git a/src/components/DateRangePicker/index.vue b/src/components/DateRangePicker/index.vue new file mode 100644 index 0000000..5eac6a4 --- /dev/null +++ b/src/components/DateRangePicker/index.vue @@ -0,0 +1,45 @@ + diff --git a/src/components/Dict/Dict.js b/src/components/Dict/Dict.js new file mode 100644 index 0000000..b2a8a35 --- /dev/null +++ b/src/components/Dict/Dict.js @@ -0,0 +1,29 @@ +import Vue from 'vue' +import { get as getDictDetail } from '@/api/archivesConfig/dictDetail' + +export default class Dict { + constructor(dict) { + this.dict = dict + } + + async init(names, completeCallback) { + if (names === undefined || name === null) { + throw new Error('need Dict names') + } + const ps = [] + names.forEach(n => { + Vue.set(this.dict.dict, n, {}) + Vue.set(this.dict.label, n, {}) + Vue.set(this.dict, n, []) + ps.push(getDictDetail(n).then(data => { + this.dict[n].splice(0, 0, ...data.content) + data.content.forEach(d => { + Vue.set(this.dict.dict[n], d.value, d) + Vue.set(this.dict.label[n], d.value, d.label) + }) + })) + }) + await Promise.all(ps) + completeCallback() + } +} diff --git a/src/components/Dict/index.js b/src/components/Dict/index.js new file mode 100644 index 0000000..7f6d94d --- /dev/null +++ b/src/components/Dict/index.js @@ -0,0 +1,29 @@ +import Dict from './Dict' + +const install = function(Vue) { + Vue.mixin({ + data() { + if (this.$options.dicts instanceof Array) { + const dict = { + dict: {}, + label: {} + } + return { + dict + } + } + return {} + }, + created() { + if (this.$options.dicts instanceof Array) { + new Dict(this.dict).init(this.$options.dicts, () => { + this.$nextTick(() => { + this.$emit('dictReady') + }) + }) + } + } + }) +} + +export default { install } diff --git a/src/components/Doc/index.vue b/src/components/Doc/index.vue new file mode 100644 index 0000000..a9f893e --- /dev/null +++ b/src/components/Doc/index.vue @@ -0,0 +1,16 @@ + + + diff --git a/src/components/Echarts/BarChart.vue b/src/components/Echarts/BarChart.vue new file mode 100644 index 0000000..a9f21fa --- /dev/null +++ b/src/components/Echarts/BarChart.vue @@ -0,0 +1,106 @@ + + + diff --git a/src/components/Echarts/Category.vue b/src/components/Echarts/Category.vue new file mode 100644 index 0000000..9d3318e --- /dev/null +++ b/src/components/Echarts/Category.vue @@ -0,0 +1,438 @@ + + + diff --git a/src/components/Echarts/Funnel.vue b/src/components/Echarts/Funnel.vue new file mode 100644 index 0000000..8abab2d --- /dev/null +++ b/src/components/Echarts/Funnel.vue @@ -0,0 +1,120 @@ + + + diff --git a/src/components/Echarts/Gauge.vue b/src/components/Echarts/Gauge.vue new file mode 100644 index 0000000..9fc94f9 --- /dev/null +++ b/src/components/Echarts/Gauge.vue @@ -0,0 +1,74 @@ + + + diff --git a/src/components/Echarts/Graph.vue b/src/components/Echarts/Graph.vue new file mode 100644 index 0000000..b08a08d --- /dev/null +++ b/src/components/Echarts/Graph.vue @@ -0,0 +1,101 @@ + + + diff --git a/src/components/Echarts/HeatMap.vue b/src/components/Echarts/HeatMap.vue new file mode 100644 index 0000000..69a1a6e --- /dev/null +++ b/src/components/Echarts/HeatMap.vue @@ -0,0 +1,105 @@ + + + diff --git a/src/components/Echarts/Line3D.vue b/src/components/Echarts/Line3D.vue new file mode 100644 index 0000000..710fd75 --- /dev/null +++ b/src/components/Echarts/Line3D.vue @@ -0,0 +1,96 @@ + + + diff --git a/src/components/Echarts/PieChart.vue b/src/components/Echarts/PieChart.vue new file mode 100644 index 0000000..4324919 --- /dev/null +++ b/src/components/Echarts/PieChart.vue @@ -0,0 +1,84 @@ + + + diff --git a/src/components/Echarts/Point.vue b/src/components/Echarts/Point.vue new file mode 100644 index 0000000..bbe81ae --- /dev/null +++ b/src/components/Echarts/Point.vue @@ -0,0 +1,149 @@ + + + diff --git a/src/components/Echarts/RadarChart.vue b/src/components/Echarts/RadarChart.vue new file mode 100644 index 0000000..7285b1f --- /dev/null +++ b/src/components/Echarts/RadarChart.vue @@ -0,0 +1,120 @@ + + + diff --git a/src/components/Echarts/Rich.vue b/src/components/Echarts/Rich.vue new file mode 100644 index 0000000..de9eb92 --- /dev/null +++ b/src/components/Echarts/Rich.vue @@ -0,0 +1,149 @@ + + + diff --git a/src/components/Echarts/Sankey.vue b/src/components/Echarts/Sankey.vue new file mode 100644 index 0000000..b7d5cd9 --- /dev/null +++ b/src/components/Echarts/Sankey.vue @@ -0,0 +1,100 @@ + + + diff --git a/src/components/Echarts/Scatter.vue b/src/components/Echarts/Scatter.vue new file mode 100644 index 0000000..94ad7fc --- /dev/null +++ b/src/components/Echarts/Scatter.vue @@ -0,0 +1,143 @@ + + + diff --git a/src/components/Echarts/Sunburst.vue b/src/components/Echarts/Sunburst.vue new file mode 100644 index 0000000..e5c4465 --- /dev/null +++ b/src/components/Echarts/Sunburst.vue @@ -0,0 +1,107 @@ + + + diff --git a/src/components/Echarts/ThemeRiver.vue b/src/components/Echarts/ThemeRiver.vue new file mode 100644 index 0000000..1b9c707 --- /dev/null +++ b/src/components/Echarts/ThemeRiver.vue @@ -0,0 +1,148 @@ + + + diff --git a/src/components/Echarts/WordCloud.vue b/src/components/Echarts/WordCloud.vue new file mode 100644 index 0000000..1bf1f20 --- /dev/null +++ b/src/components/Echarts/WordCloud.vue @@ -0,0 +1,192 @@ + + + diff --git a/src/components/GithubCorner/index.vue b/src/components/GithubCorner/index.vue new file mode 100644 index 0000000..bd3d7ad --- /dev/null +++ b/src/components/GithubCorner/index.vue @@ -0,0 +1,54 @@ + + + diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue new file mode 100644 index 0000000..4aff58a --- /dev/null +++ b/src/components/Hamburger/index.vue @@ -0,0 +1,44 @@ + + + + + diff --git a/src/components/HeaderSearch/index.vue b/src/components/HeaderSearch/index.vue new file mode 100644 index 0000000..3e6730b --- /dev/null +++ b/src/components/HeaderSearch/index.vue @@ -0,0 +1,188 @@ + + + + + diff --git a/src/components/IconSelect/index.vue b/src/components/IconSelect/index.vue new file mode 100644 index 0000000..a7512b2 --- /dev/null +++ b/src/components/IconSelect/index.vue @@ -0,0 +1,68 @@ + + + + + + diff --git a/src/components/IconSelect/requireIcons.js b/src/components/IconSelect/requireIcons.js new file mode 100644 index 0000000..5d3005d --- /dev/null +++ b/src/components/IconSelect/requireIcons.js @@ -0,0 +1,11 @@ + +const req = require.context('../../assets/icons/svg', false, /\.svg$/) +const requireAll = requireContext => requireContext.keys() + +const re = /\.\/(.*)\.svg/ + +const icons = requireAll(req).map(i => { + return i.match(re)[1] +}) + +export default icons diff --git a/src/components/Iframe/index.vue b/src/components/Iframe/index.vue new file mode 100644 index 0000000..002f8e6 --- /dev/null +++ b/src/components/Iframe/index.vue @@ -0,0 +1,30 @@ +