From 5e07fa37c8bd338d6b6629ffce3e1187672b9e66 Mon Sep 17 00:00:00 2001 From: qianlishi Date: Thu, 16 Mar 2023 14:12:33 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- report-ui/config/dev.env.js | 4 +- report-ui/src/assets/styles/screen.scss | 508 ++++++++++++++++ report-ui/src/utils/screenMixins.js | 75 +++ .../bigscreenDesigner/designer/index.vue | 559 +----------------- 4 files changed, 588 insertions(+), 558 deletions(-) create mode 100644 report-ui/src/assets/styles/screen.scss create mode 100644 report-ui/src/utils/screenMixins.js diff --git a/report-ui/config/dev.env.js b/report-ui/config/dev.env.js index ee3d90dc..f50fc84e 100644 --- a/report-ui/config/dev.env.js +++ b/report-ui/config/dev.env.js @@ -4,6 +4,6 @@ const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', - BASE_API: '"http://127.0.0.1:9095"' - // BASE_API: '"http://10.108.26.197:9095"' + // BASE_API: '"http://127.0.0.1:9095"' + BASE_API: '"http://10.108.26.197:9095"' }) diff --git a/report-ui/src/assets/styles/screen.scss b/report-ui/src/assets/styles/screen.scss new file mode 100644 index 00000000..b412dffb --- /dev/null +++ b/report-ui/src/assets/styles/screen.scss @@ -0,0 +1,508 @@ +.mr10 { + margin-right: 10px; +} + +.ml20 { + margin-left: 20px; +} + +.border-right { + border-right: 1px solid #273b4d; +} + +.border-left { + border-left: 1px solid #273b4d; +} + +.el-icon-arrow-down { + font-size: 10px; +} + +.is-active { + background: #31455d !important; + color: #bfcbd9 !important; +} + +.layout { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + width: 100%; + height: 100%; + -webkit-box-sizing: border-box; + box-sizing: border-box; + overflow: hidden; + + .layout-left { + display: inline-block; + height: 100%; + box-sizing: border-box; + -webkit-box-sizing: border-box; + border: 0px; + background-color: #263445; + + //工具栏一个元素 + .tools-item { + display: flex; + position: relative; + width: 100%; + height: 48px; + align-items: center; + -webkit-box-align: center; + padding: 0 6px; + cursor: pointer; + font-size: 12px; + margin-bottom: 1px; + + .tools-item-icon { + color: #409eff; + margin-right: 10px; + width: 53px; + height: 30px; + line-height: 30px; + text-align: center; + display: block; + border: 1px solid #3a4659; + background: #282a30; + } + + .tools-item-text {} + } + } + + .layout-left-fold { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + height: 100%; + + font-size: 12px; + overflow: hidden; + background-color: #242a30; + cursor: pointer; + padding-top: 26%; + + i { + font-size: 18px; + width: 18px; + height: 23px; + margin-left: 0px; + color: #bfcbd9; + } + } + + .layout-middle { + // display: flex; + position: relative; + //width: calc(100% - 445px); + height: 100%; + background-color: rgb(36, 42, 48); + box-sizing: border-box; + -webkit-box-sizing: border-box; + border: 1px solid rgb(36, 42, 48); + align-items: center; + vertical-align: middle; + text-align: center; + + .top-button { + display: flex; + flex-direction: row; + height: 40px; + line-height: 40px; + margin-left: 9px; + + .btn { + color: #788994; + width: 55px; + text-align: center; + display: block; + cursor: pointer; + + .el-icon-arrow-down { + transform: rotate(0deg); + -ms-transform: rotate(0deg); + /* IE 9 */ + -moz-transform: rotate(0deg); + /* Firefox */ + -webkit-transform: rotate(0deg); + /* Safari 和 Chrome */ + -o-transform: rotate(0deg); + /* Opera */ + transition: all 0.4s ease-in-out; + } + + &:hover { + background: rgb(25, 29, 34); + + .el-icon-arrow-down { + transform: rotate(180deg); + -ms-transform: rotate(180deg); + /* IE 9 */ + -moz-transform: rotate(180deg); + /* Firefox */ + -webkit-transform: rotate(180deg); + /* Safari 和 Chrome */ + -o-transform: rotate(180deg); + /* Opera */ + transition: all 0.4s ease-in-out; + } + } + } + + .btn-disable { + opacity: 0.3; + cursor: no-drop; + } + + .scale-num { + color: #788994; + opacity: 1; + cursor: pointer; + + &.btn-disable { + cursor: no-drop; + + &:hover { + background: #20262c; + } + } + } + } + + .workbench-container { + position: relative; + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-box-sizing: border-box; + box-sizing: border-box; + margin: 0; + padding: 0; + overflow: auto; + + .vueRuler { + // width: 100%; + // padding: 18px 0px 0px 18px; + padding: 0; + } + + .workbench { + background-color: #1e1e1e; + position: relative; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + margin: 0; + padding: 0; + } + + .bg-grid { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-size: 30px 30px, 30px 30px; + background-image: linear-gradient(hsla(0, 0%, 100%, 0.1) 1px, + transparent 0), + linear-gradient(90deg, hsla(0, 0%, 100%, 0.1) 1px, transparent 0); + // z-index: 2; + } + } + + .bottom-text { + width: 100%; + color: #a0a0a0; + font-size: 16px; + position: absolute; + bottom: 20px; + } + } + + .layout-right { + display: inline-block; + height: 100%; + } + + /deep/ .el-tabs--border-card { + border: 0; + + .el-tabs__header { + .el-tabs__nav { + .el-tabs__item { + background-color: #242f3b; + border: 0px; + } + + .el-tabs__item.is-active { + background-color: #31455d; + } + } + } + + .el-tabs__content { + background-color: #242a30; + height: calc(100vh - 39px); + overflow-x: hidden; + overflow-y: auto; + + .el-tab-pane { + color: #bfcbd9; + } + + &::-webkit-scrollbar { + width: 5px; + height: 14px; + } + + &::-webkit-scrollbar-track, + &::-webkit-scrollbar-thumb { + border-radius: 1px; + border: 0 solid transparent; + } + + &::-webkit-scrollbar-track-piece { + /*修改滚动条的背景和圆角*/ + background: #29405c; + } + + &::-webkit-scrollbar-track { + box-shadow: 1px 1px 5px rgba(116, 148, 170, 0.5) inset; + } + + &::-webkit-scrollbar-thumb { + min-height: 20px; + background-clip: content-box; + box-shadow: 0 0 0 5px rgba(116, 148, 170, 0.5) inset; + } + + &::-webkit-scrollbar-corner { + background: transparent; + } + + /*修改垂直滚动条的样式*/ + &::-webkit-scrollbar-thumb:vertical { + background-color: #00113a; + // -webkit-border-radius: 7px; + } + + /*修改水平滚动条的样式*/ + &::-webkit-scrollbar-thumb:horizontal { + background-color: #00113a; + // -webkit-border-radius: 7px; + } + } + } +} + +ul, +li { + list-style: none; + margin: 0; + padding: 0; +} + +.nav { + width: 40px; + padding: 0; + list-style: none; + /* overflow: hidden; */ +} + +.nav { + zoom: 1; +} + +.nav:before, +.nav:after { + content: ""; + display: table; +} + +.nav:after { + clear: both; +} + +.nav>li { + width: 55px; + text-align: left; + position: relative; +} + +.nav>li a { + float: left; + padding: 12px 30px; + color: #999; + font: bold 12px; + text-decoration: none; +} + +.nav>li:hover { + color: #788994; +} + +.nav>li ul { + visibility: hidden; + position: absolute; + z-index: 1000; + list-style: none; + left: 0; + padding: 0; + background-color: rgb(36, 42, 48); + opacity: 0; + _margin: 0; + width: 120px; + transition: all 0.2s ease-in-out; +} + +.nav>li:hover>ul { + opacity: 1; + visibility: visible; + margin: 0; + + li:hover { + background-color: rgb(25, 29, 34); + } +} + +.nav ul li { + float: left; + display: block; + border: 0; + width: 100%; + font-size: 12px; +} + +.nav ul a { + padding: 10px; + width: 100%; + display: block; + float: none; + height: 120px; + border: 1px solid #30445c; + background-color: rgb(25, 29, 34); + transition: all 0.2s ease-in-out; +} + +.nav ul a:hover { + border: 1px solid #3c5e88; +} + +.nav ul li:first-child>a:hover:before { + border-bottom-color: #04acec; +} + +.nav ul ul { + top: 0; + left: 120px; + width: 400px; + height: 300px; + overflow: auto; + padding: 10px; + _margin: 0; +} + +.nav ul ul li { + width: 120px; + height: 120px; + margin-right: 3px; + display: block; + float: left; +} + +.nav .item { + padding: 5px; +} + +/deep/ .vue-ruler-h { + opacity: 0.3; +} + +/deep/ .vue-ruler-v { + opacity: 0.3; +} + +.layout-left { + width: 200px; + background: #242a30; + overflow-x: hidden; + overflow-y: auto; + + .chart-type { + display: flex; + flex-direction: row; + overflow: hidden; + + .type-left { + width: 100%; + height: calc(100vh - 80px); + text-align: center; + + /deep/.el-tabs__header { + width: 30%; + margin-right: 0; + + .el-tabs__nav-wrap { + &::after { + background: transparent; + } + + .el-tabs__item { + text-align: center; + width: 100% !important; + color: #fff; + padding: 0; + font-size: 12px !important; + } + } + } + + /deep/.el-tabs__content { + width: 70%; + } + } + } + + //工具栏一个元素 + .tools-item { + display: flex; + position: relative; + width: 100%; + height: 48px; + align-items: center; + -webkit-box-align: center; + padding: 0 6px; + cursor: pointer; + font-size: 12px; + margin-bottom: 1px; + + .tools-item-icon { + color: #409eff; + margin-right: 10px; + width: 53px; + height: 30px; + line-height: 30px; + text-align: center; + display: block; + border: 1px solid #3a4659; + background: #282a30; + } + + .tools-item-text { + font-size: 12px !important; + } + } + + /deep/.el-tabs__content { + padding: 0; + } +} + +/* 设置滚动条的样式 */ + +::-webkit-scrollbar { + width: 0; + height: 10px; +} \ No newline at end of file diff --git a/report-ui/src/utils/screenMixins.js b/report-ui/src/utils/screenMixins.js new file mode 100644 index 00000000..038b0b45 --- /dev/null +++ b/report-ui/src/utils/screenMixins.js @@ -0,0 +1,75 @@ +const mixin = { + methods: { + // 数组 元素互换位置 + swapArr(arr, oldIndex, newIndex) { + arr[oldIndex] = arr.splice(newIndex, 1, arr[oldIndex])[0]; + return arr; + }, + // 删除 + deletelayer() { + this.widgets.splice(this.rightClickIndex, 1); + }, + // 锁定 + lockLayer() { + const obj = this.widgets[this.rightClickIndex]; + this.$set(obj.value.position, "disabled", true); + }, + // 解除锁定 + noLockLayer() { + const obj = this.widgets[this.rightClickIndex]; + this.$set(obj.value.position, "disabled", false); + }, + // 复制 + copylayer() { + const obj = this.deepClone(this.widgets[this.rightClickIndex]); + obj.value.position.top += 40; // 复制的元素向右下角偏移一点 + obj.value.position.left += 40; + obj.value.widgetId = Number(Math.random().toString().substr(2)).toString( + 36 + ); + this.widgets.splice(this.widgets.length, 0, obj); + this.$nextTick(() => { + this.layerClick(this.widgets.length - 1); // 复制后定位到最新的组件 + }); + }, + // 置顶 + istopLayer() { + if (this.rightClickIndex + 1 < this.widgets.length) { + const temp = this.widgets.splice(this.rightClickIndex, 1)[0]; + this.widgets.push(temp); + } + }, + // 置底 + setlowLayer() { + if (this.rightClickIndex != 0) { + this.widgets.unshift(this.widgets.splice(this.rightClickIndex, 1)[0]); + } + }, + // 上移一层 + moveupLayer() { + if (this.rightClickIndex != 0) { + this.widgets[this.rightClickIndex] = this.widgets.splice( + this.rightClickIndex - 1, + 1, + this.widgets[this.rightClickIndex] + )[0]; + } else { + this.widgets.push(this.widgets.shift()); + } + }, + // 下移一层 + movedownLayer() { + if (this.rightClickIndex != this.widgets.length - 1) { + this.widgets[this.rightClickIndex] = this.widgets.splice( + this.rightClickIndex + 1, + 1, + this.widgets[this.rightClickIndex] + )[0]; + } else { + this.widgets.unshift(this.widgets.splice(this.rightClickIndex, 1)[0]); + } + }, + } +} + +export default mixin \ No newline at end of file diff --git a/report-ui/src/views/bigscreenDesigner/designer/index.vue b/report-ui/src/views/bigscreenDesigner/designer/index.vue index 47a256fc..e8bfe268 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/index.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/index.vue @@ -366,6 +366,7 @@ import { exportDashboard, } from "@/api/bigscreen"; import { widgetTools, getToolByCode } from "./tools/index"; +import mixin from "@/utils/screenMixins"; import widget from "./widget/widget.vue"; import dynamicForm from "./components/dynamicForm.vue"; import draggable from "vuedraggable"; @@ -383,6 +384,7 @@ export default { dynamicForm, contentMenu, }, + mixins: [mixin], data() { return { uploadUrl: @@ -1125,565 +1127,10 @@ export default { evt.preventDefault(); this.widgets = this.swapArr(this.widgets, evt.oldIndex, evt.newIndex); }, - // 数组 元素互换位置 - swapArr(arr, oldIndex, newIndex) { - arr[oldIndex] = arr.splice(newIndex, 1, arr[oldIndex])[0]; - return arr; - }, - // 删除 - deletelayer() { - this.widgets.splice(this.rightClickIndex, 1); - }, - // 锁定 - lockLayer() { - const obj = this.widgets[this.rightClickIndex]; - this.$set(obj.value.position, "disabled", true); - }, - // 解除锁定 - noLockLayer() { - const obj = this.widgets[this.rightClickIndex]; - this.$set(obj.value.position, "disabled", false); - }, - // 复制 - copylayer() { - const obj = this.deepClone(this.widgets[this.rightClickIndex]); - obj.value.position.top += 40; // 复制的元素向右下角偏移一点 - obj.value.position.left += 40; - obj.value.widgetId = Number(Math.random().toString().substr(2)).toString( - 36 - ); - this.widgets.splice(this.widgets.length, 0, obj); - this.$nextTick(() => { - this.layerClick(this.widgets.length - 1); // 复制后定位到最新的组件 - }); - }, - // 置顶 - istopLayer() { - if (this.rightClickIndex + 1 < this.widgets.length) { - const temp = this.widgets.splice(this.rightClickIndex, 1)[0]; - this.widgets.push(temp); - } - }, - // 置底 - setlowLayer() { - if (this.rightClickIndex != 0) { - this.widgets.unshift(this.widgets.splice(this.rightClickIndex, 1)[0]); - } - }, - // 上移一层 - moveupLayer() { - if (this.rightClickIndex != 0) { - this.widgets[this.rightClickIndex] = this.widgets.splice( - this.rightClickIndex - 1, - 1, - this.widgets[this.rightClickIndex] - )[0]; - } else { - this.widgets.push(this.widgets.shift()); - } - }, - // 下移一层 - movedownLayer() { - if (this.rightClickIndex != this.widgets.length - 1) { - this.widgets[this.rightClickIndex] = this.widgets.splice( - this.rightClickIndex + 1, - 1, - this.widgets[this.rightClickIndex] - )[0]; - } else { - this.widgets.unshift(this.widgets.splice(this.rightClickIndex, 1)[0]); - } - }, }, };