diff --git a/package.json b/package.json index d7bf6ee17..e171fb1b7 100644 --- a/package.json +++ b/package.json @@ -85,9 +85,97 @@ "env": { "node": true }, - "extends": [ - "plugin:vue/essential", - "@vue/standard" + "dependencies": { + "@antv/l7": "2.9.14", + "@antv/l7-draw": "3.0.5", + "@antv/l7-maps": "2.9.14", + "@riophae/vue-treeselect": "^0.4.0", + "@tinymce/tinymce-vue": "^3.2.8", + "async-validator": "^4.2.5", + "axios": "^0.19.0", + "babel-eslint": "^8.0.1", + "babel-plugin-component": "^1.1.1", + "css-loader": "^5.0.0", + "echarts": "^5.2.2", + "echarts-gl": "^2.0.9", + "element-theme": "2.0.1", + "element-ui": "2.13.2", + "file-saver": "^2.0.5", + "gulp-autoprefixer": "^6.1.0", + "gulp-clean-css": "^4.2.0", + "gulp-load-plugins": "^2.0.0", + "gulp-rename": "^1.4.0", + "gulp-sass": "^4.0.2", + "js-cookie": "^2.2.0", + "jsencrypt": "^3.0.3", + "lodash": "^4.17.15", + "mint-ui": "^2.2.13", + "moment": "^2.29.4", + "node-sass": "^4.12.0", + "ol": "7.2.2", + "portfinder": "^1.0.21", + "proj4": "^2.8.0", + "qs": "^6.7.0", + "quill": "^1.3.6", + "screenfull": "^4.2.1", + "sortablejs": "^1.12.0", + "svg-sprite-loader": "^4.1.6", + "throttle-debounce": "^3.0.1", + "turf": "^3.0.14", + "v-distpicker": "^1.2.2", + "vue": "^2.6.11", + "vue-baidu-map": "^0.21.22", + "vue-i18n": "^8.12.0", + "vue-quill-editor": "^3.0.6", + "vue-router": "^3.0.7", + "vuex": "^3.1.1", + "xlsx": "^0.17.1" + }, + "devDependencies": { + "@antv/f2": "^3.8.10-beta.1", + "@tinymce/tinymce-vue": "3.2.8", + "@vue/cli-plugin-babel": "^3.10.0", + "@vue/cli-plugin-eslint": "^3.10.0", + "@vue/cli-service": "^3.10.0", + "@vue/eslint-config-standard": "^4.0.0", + "cross-env": "^7.0.3", + "dai-js": "^0.0.12", + "element-theme-chalk": "^2.13.0", + "natives": "^1.1.6", + "ol": "^7.2.2", + "sass-loader": "^7.3.1", + "script-loader": "^0.7.2", + "style-loader": "^3.3.3", + "tinymce": "5.8.2", + "vue-template-compiler": "^2.6.11" + }, + "eslintConfig": { + "root": true, + "env": { + "node": true + }, + "extends": [ + "plugin:vue/essential", + "@vue/standard" + ], + "rules": {}, + "parserOptions": { + "parser": "babel-eslint" + } + }, + "postcss": { + "plugins": { + "autoprefixer": {} + } + }, + "engines": { + "node": ">= 8.11.1", + "npm": ">= 5.6.0" + }, + "browserslist": [ + "> 1%", + "last 2 versions", + "not ie <= 10" ], "rules": {}, "parserOptions": { diff --git a/src/assets/css/workflow.scss b/src/assets/css/workflow.scss new file mode 100644 index 000000000..dc9467a73 --- /dev/null +++ b/src/assets/css/workflow.scss @@ -0,0 +1,1354 @@ +.ant-btn { + line-height: 1.5; + display: inline-block; + font-weight: 400; + text-align: center; + touch-action: manipulation; + cursor: pointer; + background-image: none; + border: 1px solid transparent; + white-space: nowrap; + padding: 0 15px; + font-size: 14px; + border-radius: 4px; + height: 32px; + user-select: none; + transition: all .3s cubic-bezier(.645, .045, .355, 1); + position: relative; + color: rgba(0, 0, 0, .65); + background-color: #fff; + border-color: #d9d9d9 +} + +.ant-btn>.anticon { + line-height: 1 +} + +// .ant-btn, +// .ant-btn:active, +// .ant-btn:focus { +// outline: 0 +// } + +.zoom { + display: flex; + position: fixed; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + height: 40px; + width: 125px; + right: 40px; + margin-top: 30px; + z-index: 10 +} + +.zoom .zoom-in, +.zoom .zoom-out { + width: 30px; + height: 30px; + background: #fff; + color: #c1c1cd; + cursor: pointer; + background-size: 100%; + background-repeat: no-repeat +} + +.zoom .zoom-out { + background-image: url(https://gw.alicdn.com/tfs/TB1s0qhBHGYBuNjy0FoXXciBFXa-90-90.png) +} + +.zoom .zoom-out.disabled { + opacity: .5 +} + +.zoom .zoom-in { + background-image: url(https://gw.alicdn.com/tfs/TB1UIgJBTtYBeNjy1XdXXXXyVXa-90-90.png) +} + +.zoom .zoom-in.disabled { + opacity: .5 +} + +.ant-btn>a:only-child { + color: currentColor +} + +.ant-btn>a:only-child:after { + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + background: transparent +} + +// .ant-btn:focus, +// .ant-btn:hover { +// color: #40a9ff; +// background-color: #fff; +// border-color: #40a9ff +// } + +// .ant-btn:focus>a:only-child, +// .ant-btn:hover>a:only-child { +// color: currentColor +// } + +// .ant-btn:focus>a:only-child:after, +// .ant-btn:hover>a:only-child:after { +// content: ""; +// position: absolute; +// top: 0; +// left: 0; +// bottom: 0; +// right: 0; +// background: transparent +// } + +// .ant-btn.active, +// .ant-btn:active { +// color: #096dd9; +// background-color: #fff; +// border-color: #096dd9 +// } + +// .ant-btn.active>a:only-child, +// .ant-btn:active>a:only-child { +// color: currentColor +// } + +// .ant-btn.active>a:only-child:after, +// .ant-btn:active>a:only-child:after { +// content: ""; +// position: absolute; +// top: 0; +// left: 0; +// bottom: 0; +// right: 0; +// background: transparent +// } + +// .ant-btn.active, +// .ant-btn:active, +// .ant-btn:focus, +// .ant-btn:hover { +// background: #fff; +// text-decoration: none +// } + +.ant-btn>i, +.ant-btn>span { + pointer-events: none +} + +.ant-btn:before { + position: absolute; + top: -1px; + left: -1px; + bottom: -1px; + right: -1px; + background: #fff; + opacity: .35; + content: ""; + border-radius: inherit; + z-index: 1; + transition: opacity .2s; + pointer-events: none; + display: none +} + +.ant-btn .anticon { + transition: margin-left .3s cubic-bezier(.645, .045, .355, 1) +} + +// .ant-btn:active>span, +// .ant-btn:focus>span { +// position: relative +// } + +.ant-btn>.anticon+span, +.ant-btn>span+.anticon { + margin-left: 8px +} + +.fd-nav-container { + display: inline-block; + position: relative +} + +.fd-nav-container .ghost-bar { + position: absolute; + width: 150px; + height: 100%; + left: 0; + background: #1583f2; + -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1); + transition: all .3s cubic-bezier(.645, .045, .355, 1) +} + +.fd-nav-container .ghost-bar:after { + content: ""; + position: absolute; + bottom: 0; + left: 50%; + margin-left: -5px; + width: 0; + height: 0; + border-style: solid; + border-width: 0 5px 6px; + border-color: transparent transparent #f6f6f6 +} + +.fd-nav-item { + position: relative; + cursor: pointer; + display: inline-block; + line-height: 60px; + width: 150px; + text-align: center; + white-space: nowrap +} + +.fd-nav-item .order-num { + display: inline-block; + width: 20px; + height: 20px; + line-height: 20px; + border: 1px solid #fff; + border-radius: 50%; + margin-right: 6px; + -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1); + transition: all .3s cubic-bezier(.645, .045, .355, 1) +} + +// .fd-nav-item.active .order-num { +// color: #1583f2; +// background: #fff +// } + +.ant-input { + font-family: Chinese Quote, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif; + font-variant: tabular-nums; + box-sizing: border-box; + margin: 0; + padding: 0; + list-style: none; + position: relative; + display: inline-block; + padding: 4px 11px; + width: 100%; + height: 32px; + font-size: 14px; + line-height: 1.5; + color: rgba(0, 0, 0, .65); + background-color: #fff; + background-image: none; + border: 1px solid #d9d9d9; + border-radius: 4px; + transition: all .3s +} + +.ant-input::-moz-placeholder { + color: #bfbfbf; + opacity: 1 +} + +.ant-input:-ms-input-placeholder { + color: #bfbfbf +} + +.ant-input::-webkit-input-placeholder { + color: #bfbfbf +} + +.ant-input:focus, +.ant-input:hover { + border-color: #40a9ff; + border-right-width: 1px !important +} + +.ant-input:focus { + outline: 0; + box-shadow: 0 0 0 2px rgba(24, 144, 255, .2) +} + +textarea.ant-input { + max-width: 100%; + height: auto; + vertical-align: bottom; + transition: all .3s, height 0s; + min-height: 32px +} + +a, +abbr, +acronym, +address, +applet, +article, +aside, +audio, +b, +big, +blockquote, +body, +canvas, +caption, +center, +cite, +code, +dd, +del, +details, +dfn, +div, +dl, +dt, +em, +fieldset, +figcaption, +figure, +footer, +form, +h1, +h2, +h3, +h4, +h5, +h6, +header, +hgroup, +html, +i, +iframe, +img, +ins, +kbd, +label, +legend, +li, +mark, +menu, +nav, +object, +ol, +p, +pre, +q, +s, +samp, +section, +small, +span, +strike, +strong, +sub, +summary, +sup, +table, +tbody, +td, +tfoot, +th, +thead, +time, +tr, +tt, +u, +ul, +var, +video { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline +} + +*, +:after, +:before { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box +} + +html { + font-family: sans-serif; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100% +} + +body, +html { + font-size: 14px +} + +body { + font-family: Microsoft Yahei, Lucida Grande, Lucida Sans Unicode, Helvetica, Arial, Verdana, sans-serif; + line-height: 1.6; + background-color: #fff; + position: static !important; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0) +} + +ol, +ul { + list-style-type: none +} + +b, +strong { + font-weight: 700 +} + +img { + border: 0 +} + +button, +input, +select, +textarea { + font-family: inherit; + font-size: 100%; + margin: 0 +} + +textarea { + overflow: auto; + vertical-align: top; + -webkit-appearance: none +} + +button, +input { + line-height: normal +} + +button, +select { + text-transform: none +} + +button, +html input[type=button], +input[type=reset], +input[type=submit] { + -webkit-appearance: button; + cursor: pointer +} + +input[type=search] { + -webkit-appearance: textfield; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box +} + +input[type=search]::-webkit-search-cancel-button, +input[type=search]::-webkit-search-decoration { + -webkit-appearance: none +} + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0 +} + +table { + width: 100%; + border-spacing: 0; + border-collapse: collapse +} + +table, +td, +th { + border: 0 +} + +td, +th { + padding: 0; + vertical-align: top +} + +th { + font-weight: 700; + text-align: left +} + +thead th { + white-space: nowrap +} + +a { + text-decoration: none; + cursor: pointer; + color: #3296fa +} + +// a:active, +// a:hover { +// outline: 0; +// color: #3296fa +// } + +small { + font-size: 80% +} + +body, +html { + font-size: 12px !important; + color: #191f25 !important; + background: #f6f6f6 !important +} + +.wrap { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + height: 100% +} + +@font-face { + font-family: IconFont; + src: url("//at.alicdn.com/t/font_135284_ph2thxxbzgf.eot"); + src: url("//at.alicdn.com/t/font_135284_ph2thxxbzgf.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_135284_ph2thxxbzgf.woff") format("woff"), url("//at.alicdn.com/t/font_135284_ph2thxxbzgf.ttf") format("truetype"), url("//at.alicdn.com/t/font_135284_ph2thxxbzgf.svg#IconFont") format("svg") +} + +.iconfont { + font-family: IconFont !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -webkit-text-stroke-width: .2px; + -moz-osx-font-smoothing: grayscale +} + +.fd-nav { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 997; + width: 100%; + height: 60px; + font-size: 14px; + color: #fff; + background: #3296fa; + display: flex; + align-items: center +} + +.fd-nav>* { + flex: 1; + width: 100% +} + +.fd-nav .fd-nav-left { + display: -webkit-box; + display: flex; + align-items: center +} + +.fd-nav .fd-nav-center { + flex: none; + width: 600px; + text-align: center +} + +.fd-nav .fd-nav-right { + display: flex; + align-items: center; + justify-content: flex-end; + text-align: right +} + +.fd-nav .fd-nav-back { + display: inline-block; + width: 60px; + height: 60px; + font-size: 22px; + border-right: 1px solid #1583f2; + text-align: center; + cursor: pointer +} + +.fd-nav .fd-nav-back:hover { + background: #5af +} + +// .fd-nav .fd-nav-back:active { +// background: #1583f2 +// } + +.fd-nav .fd-nav-back .anticon { + line-height: 60px +} + +.fd-nav .fd-nav-title { + width: 0; + flex: 1; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + padding: 0 15px +} + +.fd-nav a { + color: #fff; + margin-left: 12px +} + +.fd-nav .button-publish { + min-width: 80px; + margin-left: 4px; + margin-right: 15px; + color: #3296fa; + border-color: #fff +} + +.fd-nav .button-publish.ant-btn:focus, +.fd-nav .button-publish.ant-btn:hover { + color: #3296fa; + border-color: #fff; + box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .3) +} + +// .fd-nav .button-publish.ant-btn:active { +// color: #3296fa; +// background: #d6eaff; +// box-shadow: none +// } + +.fd-nav .button-preview { + min-width: 80px; + margin-left: 16px; + margin-right: 4px; + color: #fff; + border-color: #fff; + background: transparent +} + +.fd-nav .button-preview.ant-btn:focus, +.fd-nav .button-preview.ant-btn:hover { + color: #fff; + border-color: #fff; + background: #59acfc +} + +// .fd-nav .button-preview.ant-btn:active { +// color: #fff; +// border-color: #fff; +// background: #2186ef +// } + +.fd-nav-content { + position: fixed; + top: 60px; + left: 0; + right: 0; + bottom: 0; + z-index: 1; + overflow-x: hidden; + overflow-y: auto; + padding-bottom: 30px +} + +.error-modal-desc { + font-size: 13px; + color: rgba(25, 31, 37, .56); + line-height: 22px; + margin-bottom: 14px +} + +.error-modal-list { + height: 200px; + overflow-y: auto; + margin-right: -25px; + padding-right: 25px +} + +.error-modal-item { + padding: 10px 20px; + line-height: 21px; + background: #f6f6f6; + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 8px; + border-radius: 4px +} + +.error-modal-item-label { + flex: none; + font-size: 15px; + color: rgba(25, 31, 37, .56); + padding-right: 10px +} + +.error-modal-item-content { + text-align: right; + flex: 1; + font-size: 13px; + color: #191f25 +} + +#body.blur { + -webkit-filter: blur(3px); + filter: blur(3px) +} + +.zoom { + display: flex; + position: fixed; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + height: 40px; + width: 125px; + right: 40px; + margin-top: 30px; + z-index: 10 +} + +.zoom .zoom-in, +.zoom .zoom-out { + width: 30px; + height: 30px; + background: #fff; + color: #c1c1cd; + cursor: pointer; + background-size: 100%; + background-repeat: no-repeat +} + +.zoom .zoom-out { + background-image: url(https://gw.alicdn.com/tfs/TB1s0qhBHGYBuNjy0FoXXciBFXa-90-90.png) +} + +.zoom .zoom-out.disabled { + opacity: .5 +} + +.zoom .zoom-in { + background-image: url(https://gw.alicdn.com/tfs/TB1UIgJBTtYBeNjy1XdXXXXyVXa-90-90.png) +} + +.zoom .zoom-in.disabled { + opacity: .5 +} + +// .auto-judge:hover .editable-title, +// .node-wrap-box:hover .editable-title { +// border-bottom: 1px dashed #fff +// } + +// .auto-judge:hover .editable-title.editing, +// .node-wrap-box:hover .editable-title.editing { +// text-decoration: none; +// border: 1px solid #d9d9d9 +// } + +// .auto-judge:hover .editable-title { +// border-color: #15bc83 +// } + +.editable-title { + line-height: 15px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + border-bottom: 1px dashed transparent +} + +.editable-title:before { + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 40px +} + +// .editable-title:hover { +// border-bottom: 1px dashed #fff +// } + +.editable-title-input { + flex: none; + height: 18px; + padding-left: 4px; + text-indent: 0; + font-size: 12px; + line-height: 18px; + z-index: 1 +} + +// .editable-title-input:hover { +// text-decoration: none +// } + +.ant-btn { + position: relative +} + +.node-wrap-box { + color: #fff; + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + position: relative; + // width: 220px; + // min-height: 72px; + -ms-flex-negative: 0; + // flex-shrink: 0; + // background: #fff; + // border-radius: 4px; + // cursor: pointer +} + +.node-wrap-box:after { + // pointer-events: none; + // content: ""; + // position: absolute; + // top: 0; + // bottom: 0; + // left: 0; + // right: 0; + // z-index: 2; + // border-radius: 4px; + // // border: 1px solid transparent; + // transition: all .1s cubic-bezier(.645, .045, .355, 1); + // box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1) +} + +// .node-wrap-box.active:after, +// .node-wrap-box:active:after, +// .node-wrap-box:hover:after { +// border: 1px solid #3296fa; +// box-shadow: 0 0 6px 0 rgba(50, 150, 250, .3) +// } + +// .node-wrap-box.active .close, +// .node-wrap-box:active .close, +// .node-wrap-box:hover .close { +// display: block +// } + +.node-wrap-box.error:after { + border: 1px solid #f25643; + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1) +} + +.node-wrap-box .title { + position: relative; + display: flex; + align-items: center; + padding-left: 16px; + padding-right: 30px; + width: 100%; + height: 24px; + line-height: 24px; + font-size: 12px; + color: #fff; + text-align: left; + background: #576a95; + border-radius: 4px 4px 0 0 +} + +.node-wrap-box .title .iconfont { + font-size: 12px; + margin-right: 5px +} + +.node-wrap-box .placeholder { + color: #bfbfbf +} + +.node-wrap-box .close { + display: none; + position: absolute; + right: 10px; + top: 50%; + transform: translateY(-50%); + width: 20px; + height: 20px; + font-size: 14px; + color: #fff; + border-radius: 50%; + text-align: center; + line-height: 20px +} + +.node-wrap-box .content { + position: relative; + font-size: 14px; + padding: 16px; + padding-right: 30px +} + +.node-wrap-box .content .text { + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical +} + +.node-wrap-box .content .arrow { + position: absolute; + right: 10px; + top: 50%; + transform: translateY(-50%); + width: 20px; + height: 14px; + font-size: 14px; + color: #979797 +} + +.start-node.node-wrap-box .content .text { + display: block; + white-space: nowrap +} + +// .node-wrap-box:before { +// content: ""; +// position: absolute; +// top: -12px; +// left: 50%; +// -webkit-transform: translateX(-50%); +// transform: translateX(-50%); +// width: 0; +// height: 4px; +// border-style: solid; +// border-width: 8px 6px 4px; +// border-color: #cacaca transparent transparent; +// background: #f5f5f7 +// } + +.node-wrap-box.start-node:before { + content: none +} + +.top-left-cover-line { + left: -1px +} + +.top-left-cover-line, +.top-right-cover-line { + position: absolute; + height: 5px; + width: 50%; + background-color: #00143C; + top: -4px +} + +.top-right-cover-line { + right: -1px +} + +.bottom-left-cover-line { + left: -1px +} + +.bottom-left-cover-line, +.bottom-right-cover-line { + position: absolute; + height: 8px; + width: 50%; + background-color: #00143C; + bottom: -4px +} + +.bottom-right-cover-line { + right: -1px +} + +.dingflow-design .box-scale { + transform: scale(1); + display: inline-block; + position: relative; + width: 100%; + padding: 54.5px 0; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + min-width: -webkit-min-content; + min-width: -moz-min-content; + min-width: min-content; + background-color: #00143C; + transform-origin: 50% 0px 0px; +} + +.dingflow-design .node-wrap { + flex-direction: column; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + padding: 0 50px; + position: relative +} + +.dingflow-design .branch-wrap, +.dingflow-design .node-wrap { + display: inline-flex; + width: 100% +} + +.dingflow-design .branch-box-wrap { + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 270px; + width: 100%; + -ms-flex-negative: 0; + flex-shrink: 0 +} + +.dingflow-design .branch-box { + display: flex; + overflow: visible; + min-height: 180px; + height: auto; + // border-bottom: px solid #2F87FF; + border-top: 1px solid #2F87FF; + position: relative; + margin-top: 15px +} + +.dingflow-design .branch-box .col-box { + // background: #00143C +} + +.dingflow-design .branch-box .col-box:before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + // bottom: 0px; + z-index: 0; + margin: auto; + width: 1px; + height: 20px; + background-color: #2F87FF +} + +.dingflow-design .add-branch { + border: none; + outline: none; + user-select: none; + justify-content: center; + font-size: 12px; + padding: 0 10px; + height: 30px; + line-height: 30px; + border-radius: 15px; + color: #3296fa; + background: #fff; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1); + position: absolute; + top: -16px; + left: 50%; + transform: translateX(-50%); + transform-origin: center center; + cursor: pointer; + z-index: 1; + display: inline-flex; + align-items: center; + -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1); + transition: all .3s cubic-bezier(.645, .045, .355, 1) +} + +// .dingflow-design .add-branch:hover { +// transform: translateX(-50%) scale(1.1); +// box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .1) +// } + +// .dingflow-design .add-branch:active { +// transform: translateX(-50%); +// box-shadow: none +// } + +.dingflow-design .col-box { + display: inline-flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + flex-direction: column; + -webkit-box-align: center; + align-items: center; + position: relative +} + +.popperClass { + width: 130px !important; + height: 136px !important; + background: #0E3164; + border: 1px solid #4883CD; + border-radius: 4px; + + .popper__arrow { + border-right-color: #4883CD !important; + + &::after { + bottom: -6px !important; + left: 1px !important; + border-right-color: #0E3164 !important; + border-left-width: 0 !important; + } + } + + .popperList { + font-size: 13px; + color: #fff; + + .listMsg { + display: flex; + align-items: center; + margin-bottom: 5px; + } + } +} + +.dingflow-design .condition-node { + + // min-height: 220px +} + +.dingflow-design .condition-node, +.dingflow-design .condition-node-box { + display: inline-flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + flex-direction: column; + -webkit-box-flex: 1 +} + +.dingflow-design .condition-node-box { + padding-top: 35px; + padding-right: 20px; + padding-left: 20px; + -webkit-box-pack: center; + justify-content: center; + -webkit-box-align: center; + align-items: center; + // flex-grow: 1; + position: relative +} + +// .dingflow-design .condition-node-box:before { +// content: ""; +// position: absolute; +// top: 0; +// left: 0; +// right: 0; +// bottom: 0; +// margin: auto; +// width: 1px; +// height: 40px; +// background-color: #2F87FF +// } + +.dingflow-design .auto-judge { + position: relative; + // width: 220px; + // min-height: 72px; + // background: #fff; + // border-radius: 4px; + // padding: 14px 19px; + // cursor: pointer +} + +.dingflow-design .auto-judge:after { + // pointer-events: none; + // content: ""; + // position: absolute; + // top: 0; + // bottom: 105px; + // left: 0; + // right: 0; + // height: 40px; + // width: 1px; + // background-color: #2F87FF; + // margin: auto; + // z-index: 2; + // border-radius: 4px; + // border: 1px solid transparent; + // transition: all .1s cubic-bezier(.645, .045, .355, 1); + // box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1) +} + +// .dingflow-design .auto-judge.active:after, +// .dingflow-design .auto-judge:active:after, +// .dingflow-design .auto-judge:hover:after { +// border: 1px solid #3296fa; +// box-shadow: 0 0 6px 0 rgba(50, 150, 250, .3) +// } + +// .dingflow-design .auto-judge.active .close, +// .dingflow-design .auto-judge:active .close, +// .dingflow-design .auto-judge:hover .close { +// display: block +// } + +.dingflow-design .auto-judge.error:after { + border: 1px solid #f25643; + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1) +} + +.dingflow-design .auto-judge .title-wrapper { + position: relative; + font-size: 12px; + color: #15bc83; + text-align: left; + line-height: 16px +} + +.dingflow-design .auto-judge .title-wrapper .editable-title { + display: inline-block; + max-width: 120px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis +} + +.dingflow-design .auto-judge .title-wrapper .priority-title { + display: inline-block; + float: right; + margin-right: 10px; + color: rgba(25, 31, 37, .56) +} + +.dingflow-design .auto-judge .placeholder { + color: #bfbfbf +} + +.dingflow-design .auto-judge .close { + display: none; + position: absolute; + right: -10px; + top: -10px; + width: 20px; + height: 20px; + font-size: 14px; + color: rgba(0, 0, 0, .25); + border-radius: 50%; + text-align: center; + line-height: 20px; + z-index: 2 +} + +.dingflow-design .auto-judge .content { + font-size: 14px; + color: #191f25; + text-align: left; + margin-top: 6px; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical +} + +.dingflow-design .auto-judge .sort-left, +.dingflow-design .auto-judge .sort-right { + position: absolute; + top: 0; + bottom: 0; + display: none; + z-index: 1 +} + +.dingflow-design .auto-judge .sort-left { + left: 0; + border-right: 1px solid #f6f6f6 +} + +.dingflow-design .auto-judge .sort-right { + right: 0; + border-left: 1px solid #f6f6f6 +} + +// .dingflow-design .auto-judge:hover .sort-left, +// .dingflow-design .auto-judge:hover .sort-right { +// display: flex; +// align-items: center +// } + +// .dingflow-design .auto-judge .sort-left:hover, +// .dingflow-design .auto-judge .sort-right:hover { +// background: #efefef +// } + +.dingflow-design .end-node { + border-radius: 50%; + font-size: 14px; + color: rgba(25, 31, 37, .4); + text-align: left +} + +.dingflow-design .end-node .end-node-circle { + width: 10px; + height: 10px; + margin: auto; + border-radius: 50%; + background: #dbdcdc +} + +.dingflow-design .end-node .end-node-text { + margin-top: 5px; + text-align: center +} + +.approval-setting { + border-radius: 2px; + margin: 20px 0; + position: relative; + background: #fff +} + +.ant-btn { + position: relative +} \ No newline at end of file diff --git a/src/assets/images/home/back.png b/src/assets/images/home/back.png new file mode 100644 index 000000000..fb03908db Binary files /dev/null and b/src/assets/images/home/back.png differ diff --git a/src/assets/images/home/bg.png b/src/assets/images/home/bg.png new file mode 100644 index 000000000..7b536817f Binary files /dev/null and b/src/assets/images/home/bg.png differ diff --git a/src/assets/images/home/choose.png b/src/assets/images/home/choose.png new file mode 100644 index 000000000..c8067a50f Binary files /dev/null and b/src/assets/images/home/choose.png differ diff --git a/src/assets/images/home/chooseMain.png b/src/assets/images/home/chooseMain.png new file mode 100644 index 000000000..ec34a0afa Binary files /dev/null and b/src/assets/images/home/chooseMain.png differ diff --git a/src/assets/images/home/cjr.png b/src/assets/images/home/cjr.png new file mode 100644 index 000000000..37c598632 Binary files /dev/null and b/src/assets/images/home/cjr.png differ diff --git a/src/assets/images/home/dwbg.png b/src/assets/images/home/dwbg.png new file mode 100644 index 000000000..f9aaaac73 Binary files /dev/null and b/src/assets/images/home/dwbg.png differ diff --git a/src/assets/images/home/dyzxh.png b/src/assets/images/home/dyzxh.png new file mode 100644 index 000000000..9ae01bddc Binary files /dev/null and b/src/assets/images/home/dyzxh.png differ diff --git a/src/assets/images/home/dyzxhTree.png b/src/assets/images/home/dyzxhTree.png new file mode 100644 index 000000000..97e2c9fd2 Binary files /dev/null and b/src/assets/images/home/dyzxhTree.png differ diff --git a/src/assets/images/home/dzb.png b/src/assets/images/home/dzb.png new file mode 100644 index 000000000..0feb2136d Binary files /dev/null and b/src/assets/images/home/dzb.png differ diff --git a/src/assets/images/home/firstLevel.png b/src/assets/images/home/firstLevel.png new file mode 100644 index 000000000..7580106e4 Binary files /dev/null and b/src/assets/images/home/firstLevel.png differ diff --git a/src/assets/images/home/jr.png b/src/assets/images/home/jr.png new file mode 100644 index 000000000..e5c202e86 Binary files /dev/null and b/src/assets/images/home/jr.png differ diff --git a/src/assets/images/home/kclr.png b/src/assets/images/home/kclr.png new file mode 100644 index 000000000..fbf2f0612 Binary files /dev/null and b/src/assets/images/home/kclr.png differ diff --git a/src/assets/images/home/lxjt.png b/src/assets/images/home/lxjt.png new file mode 100644 index 000000000..ff69e5f4d Binary files /dev/null and b/src/assets/images/home/lxjt.png differ diff --git a/src/assets/images/home/lydxz.png b/src/assets/images/home/lydxz.png new file mode 100644 index 000000000..73a661c2e Binary files /dev/null and b/src/assets/images/home/lydxz.png differ diff --git a/src/assets/images/home/lydxzTree.png b/src/assets/images/home/lydxzTree.png new file mode 100644 index 000000000..bd83131c7 Binary files /dev/null and b/src/assets/images/home/lydxzTree.png differ diff --git a/src/assets/images/home/noChooseMain.png b/src/assets/images/home/noChooseMain.png new file mode 100644 index 000000000..63967a135 Binary files /dev/null and b/src/assets/images/home/noChooseMain.png differ diff --git a/src/assets/images/home/top.png b/src/assets/images/home/top.png new file mode 100644 index 000000000..1e91cdcfb Binary files /dev/null and b/src/assets/images/home/top.png differ diff --git a/src/assets/images/home/zbbg.png b/src/assets/images/home/zbbg.png new file mode 100644 index 000000000..6aa9b22ab Binary files /dev/null and b/src/assets/images/home/zbbg.png differ diff --git a/src/assets/scss/dataBoardMain.scss b/src/assets/scss/dataBoardMain.scss index 4594321ce..d96c38afc 100644 --- a/src/assets/scss/dataBoardMain.scss +++ b/src/assets/scss/dataBoardMain.scss @@ -7,24 +7,31 @@ .g-pg { position: relative; + background-image: url(../images/home/bg.png); + background-repeat: no-repeat; + background-size: 100% 100%; } .i-corner { position: absolute; z-index: 0; width: 121px; + &.z-left-top { top: 15px; left: 15px; } + &.z-left-bottom { bottom: 15px; left: 15px; } + &.z-right-top { top: 15px; right: 15px; } + &.z-right-bottom { bottom: 15px; right: 15px; @@ -36,22 +43,39 @@ z-index: 1; width: 100%; height: 101px; - background-image: url(../images/shuju/main/top-bg.png); + background-image: url(../images/home/top.png); background-repeat: no-repeat; background-position: top center; background-size: 100%; + + .back { + position: absolute; + left: 21px; + right: 0; + top: 0; + line-height: 70px; + + img { + width: 21px; + } + } + .title { position: absolute; - left: 0; + left: 90px; right: 0; top: 0; - margin: 0 auto; + // margin: 0 auto; + // text-align: center; line-height: 70px; - text-align: center; - font-size: 32px; - font-family: PingFangSC-Medium, PingFang SC; - font-weight: 500; - color: #ffffff; + font-family: PingFang SC; + font-weight: bold; + color: #FFFFFF; + font-size: 34px; + // text-shadow: 0px 4px 3px rgba(18, 27, 70, 0.51); + background: linear-gradient(0deg, #8FD4FF 0%, #FFFFFF 64.0380859375%); + background-clip: text; + -webkit-text-fill-color: transparent; } .btn-back { @@ -70,18 +94,22 @@ width: 16px; margin-right: 5px; } + .z-default { display: block; } + .z-on { display: none; } &:hover { color: #fff; + .z-default { display: none; } + .z-on { display: block; } @@ -90,16 +118,18 @@ .nav-list { position: absolute; - top: 40px; - left: 120px; + top: 60px; + left: 850px; display: flex; - width: 500px; + // width: 500px; &.z-right { left: auto; right: 120px; + .nav-item { background-image: url(../images/shuju/main/nav-right.png); + &.z-on { &::before { background-image: url(../images/shuju/main/nav-right-on.png); @@ -110,45 +140,77 @@ .nav-item { position: relative; + margin-right: 95px; width: 120px; height: 40px; line-height: 40px; - font-size: 16px; + font-size: 18px; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; - background-image: url(../images/shuju/main/nav-left.png); - background-size: 100%; + // background-image: url(../images/shuju/main/nav-left.png); + // background-size: 100%; text-align: center; cursor: pointer; - color: rgba(#fff, 0.85); + color: #41A5F2; span { position: relative; z-index: 1; } - &:hover { - color: #fff; - } + // &:hover { + // color: #fff; + // } &.z-on { background-image: none; - &::before { + color: #86F3FF; + font-size: 20px; + + &::after { position: absolute; z-index: -1; content: ""; display: block; - top: -2px; - left: -5px; - width: 132px; - height: 47px; - background-image: url(../images/shuju/main/nav-left-on.png); + bottom: -2px; + left: -50px; + width: 226px; + height: 20px; + background-image: url(../images/home/choose.png); background-size: 100%; } } } } + .date { + position: absolute; + right: 20px; + top: 30px; + color: #91D5FF; + text-align: center; + + .dateFlex { + display: flex; + align-items: center; + justify-content: center; + + .dateFlex_mw { + .date-month { + font-size: 14px; + } + .date-week { + font-size: 16px; + } + } + + .date-time { + font-size: 34px; + margin-left: 11px; + } + } + } + .msg { position: absolute; display: flex; @@ -160,21 +222,26 @@ font-weight: 500; color: #ffffff; line-height: 22px; + .weather { display: flex; align-items: center; + img { position: relative; width: 20px; } + div { margin-left: 3px; } } + .date { margin-left: 24px; display: flex; align-items: center; + .date-div { margin: 0 10px; height: 22px; @@ -187,5 +254,5 @@ } .g-cnt { - padding: 15px; -} + padding: 24px; +} \ No newline at end of file diff --git a/src/components/Tree/addNode.vue b/src/components/Tree/addNode.vue new file mode 100644 index 000000000..5f8582e38 --- /dev/null +++ b/src/components/Tree/addNode.vue @@ -0,0 +1,237 @@ + + + + diff --git a/src/components/Tree/nodeWrap.vue b/src/components/Tree/nodeWrap.vue new file mode 100644 index 000000000..33fd304be --- /dev/null +++ b/src/components/Tree/nodeWrap.vue @@ -0,0 +1,196 @@ + + + diff --git a/src/main.js b/src/main.js index b8b3a8e84..6fbcd5d3d 100644 --- a/src/main.js +++ b/src/main.js @@ -4,8 +4,8 @@ * @LastEditors: mk 2403457699@qq.com * @LastEditTime: 2023-08-10 16:49:19 * @Description: 全局挂载提示信息,避免同时出现多条信息 - * - * + * + * */ import Vue from "vue"; import Element from "element-ui"; @@ -13,13 +13,16 @@ import Element from "element-ui"; import App from "@/App"; import i18n from "@/i18n"; import router from "@/router"; +import Moment from "moment"; import "@/icons"; import "@/element-ui/theme/index.css"; import "@/assets/scss/aui.scss"; -import {message} from "@/utils/message.js"; - +import { message } from "@/utils/message.js"; +import NodeWrap from "@/components/Tree/nodeWrap.vue"; +import AddNode from "@/components/Tree/addNode.vue"; //按钮 - +Vue.component("nodeWrap", NodeWrap); +Vue.component("addNode", AddNode); import http from "@/utils/request"; import cloneDeep from "lodash/cloneDeep"; @@ -56,26 +59,47 @@ Vue.use(Element, { size: "default", i18n: (key, value) => i18n.t(key, value), }); - -Vue.prototype.$message = message +Moment.locale("zh-cn"); +Vue.prototype.$moment = Moment; +Vue.prototype.$message = message; // 弹窗底部滚动问题 弹窗需配合v-if使用 Vue.directive("fixed", { inserted() { - let scrollTop = - document.body.scrollTop || document.documentElement.scrollTop; - document.body.style.cssText += - "position:fixed;width:100%;top:-" + scrollTop + "px;"; + let scrollTop = document.body.scrollTop || document.documentElement.scrollTop; + document.body.style.cssText += "position:fixed;width:100%;top:-" + scrollTop + "px;"; }, unbind() { let body = document.body; body.style.position = ""; let top = body.style.top; - document.body.scrollTop = document.documentElement.scrollTop = - -parseInt(top); + document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top); body.style.top = ""; }, }); +Vue.directive("drag", { + bind(el, binding, vnode) { + el.style.position = "absolute"; + el.style.cursor = "grab"; + el.onmousedown = (event) => { + const offsetX = event.clientX - el.getBoundingClientRect().left; + const offsetY = event.clientY - el.getBoundingClientRect().top; + el.style.zIndex = 1000; // 确保拖拽的元素在最前面 + document.onmousemove = (e) => { + const x = e.clientX - offsetX; + const y = e.clientY - offsetY; + el.style.left = x + "px"; + el.style.top = y + "px"; + }; + document.onmouseup = () => { + document.onmousemove = null; + document.onmouseup = null; + el.style.zIndex = null; + }; + }; + }, +}); + // 挂载全局 Vue.prototype.$http = http; @@ -86,12 +110,12 @@ Vue.prototype.$getElUploadHeaders = () => ({ // Vue.prototype.$getDictLabel = getDictLabel //事件总线 -Vue.prototype.$EventBus = new Vue() +Vue.prototype.$EventBus = new Vue(); // 保存整站vuex本地储存初始状态 window.SITE_CONFIG["storeState"] = cloneDeep(store.state); -Vue.prototype.tableHeaderStyle = { background: 'linear-gradient(0deg, #005EB3 0%, #0083F0 100%)', color: '#FFFFFF', padding: '6px 0px' }; +Vue.prototype.tableHeaderStyle = { background: "linear-gradient(0deg, #005EB3 0%, #0083F0 100%)", color: "#FFFFFF", padding: "6px 0px" }; new Vue({ i18n, diff --git a/src/views/dataBoard/organizational/components/tree.vue b/src/views/dataBoard/organizational/components/tree.vue new file mode 100644 index 000000000..9304fe630 --- /dev/null +++ b/src/views/dataBoard/organizational/components/tree.vue @@ -0,0 +1,119 @@ + + + + + diff --git a/src/views/dataBoard/organizational/index.vue b/src/views/dataBoard/organizational/index.vue index e69de29bb..3413b09dd 100644 --- a/src/views/dataBoard/organizational/index.vue +++ b/src/views/dataBoard/organizational/index.vue @@ -0,0 +1,559 @@ + + + + + diff --git a/src/views/dataBoardMain/main-navbar.vue b/src/views/dataBoardMain/main-navbar.vue index 445bb1d17..27acda906 100644 --- a/src/views/dataBoardMain/main-navbar.vue +++ b/src/views/dataBoardMain/main-navbar.vue @@ -1,12 +1,15 @@ diff --git a/yarn.lock b/yarn.lock index 43d134f59..c9e3551f5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9213,6 +9213,11 @@ mixin-deep@^1.2.0: dependencies: minimist "^1.2.6" +moment@^2.29.4: + version "2.29.4" + resolved "https://registry.npmmirror.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108" + integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w== + monotone-convex-hull-2d@^1.0.1: version "1.0.1" resolved "https://registry.npmmirror.com/monotone-convex-hull-2d/-/monotone-convex-hull-2d-1.0.1.tgz#47f5daeadf3c4afd37764baa1aa8787a40eee08c"