From 64e01e5e5c0414ee10521a4cb13277f6e091fe14 Mon Sep 17 00:00:00 2001 From: unknown <525765282@qq.com> Date: Mon, 14 Nov 2022 18:11:44 +0800 Subject: [PATCH] 新增边框组件 --- src/assets/images/widget/div1.svg | 13 +++++++++++++ src/assets/images/widget/div10.svg | 5 +++++ src/assets/images/widget/div11.svg | 93 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/assets/images/widget/div12.svg | 40 ++++++++++++++++++++++++++++++++++++++++ src/assets/images/widget/div2.svg | 13 +++++++++++++ src/assets/images/widget/div3.svg | 11 +++++++++++ src/assets/images/widget/div4.svg | 20 ++++++++++++++++++++ src/assets/images/widget/div5.svg | 15 +++++++++++++++ src/assets/images/widget/div6.svg | 23 +++++++++++++++++++++++ src/assets/images/widget/div7.svg | 12 ++++++++++++ src/assets/images/widget/div8.svg | 21 +++++++++++++++++++++ src/assets/images/widget/div9.svg | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++ src/views/bigscreenDesigner/designer/index.vue | 342 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- src/views/bigscreenDesigner/designer/tools/configure/widget-div.js | 77 ++++++++++++++++++++++++++++++++++++++++++----------------------------------- src/views/bigscreenDesigner/designer/tools/index.js | 108 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------------------- src/views/bigscreenDesigner/designer/widget/div/svg/div1.vue | 158 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/views/bigscreenDesigner/designer/widget/div/svg/div2.vue | 47 +++++++++++++++++++++++++++++++++++++++++++++++ src/views/bigscreenDesigner/designer/widget/div/widgetDiv.vue | 179 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------- src/views/bigscreenDesigner/designer/widget/widget.vue | 4 +++- 19 files changed, 922 insertions(+), 309 deletions(-) create mode 100644 src/assets/images/widget/div1.svg create mode 100644 src/assets/images/widget/div10.svg create mode 100644 src/assets/images/widget/div11.svg create mode 100644 src/assets/images/widget/div12.svg create mode 100644 src/assets/images/widget/div2.svg create mode 100644 src/assets/images/widget/div3.svg create mode 100644 src/assets/images/widget/div4.svg create mode 100644 src/assets/images/widget/div5.svg create mode 100644 src/assets/images/widget/div6.svg create mode 100644 src/assets/images/widget/div7.svg create mode 100644 src/assets/images/widget/div8.svg create mode 100644 src/assets/images/widget/div9.svg create mode 100644 src/views/bigscreenDesigner/designer/widget/div/svg/div1.vue create mode 100644 src/views/bigscreenDesigner/designer/widget/div/svg/div2.vue diff --git a/src/assets/images/widget/div1.svg b/src/assets/images/widget/div1.svg new file mode 100644 index 0000000..57b72d8 --- /dev/null +++ b/src/assets/images/widget/div1.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/widget/div10.svg b/src/assets/images/widget/div10.svg new file mode 100644 index 0000000..47bd60b --- /dev/null +++ b/src/assets/images/widget/div10.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/src/assets/images/widget/div11.svg b/src/assets/images/widget/div11.svg new file mode 100644 index 0000000..3b77bde --- /dev/null +++ b/src/assets/images/widget/div11.svg @@ -0,0 +1,93 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/widget/div12.svg b/src/assets/images/widget/div12.svg new file mode 100644 index 0000000..d7ffaa0 --- /dev/null +++ b/src/assets/images/widget/div12.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/widget/div2.svg b/src/assets/images/widget/div2.svg new file mode 100644 index 0000000..3d86390 --- /dev/null +++ b/src/assets/images/widget/div2.svg @@ -0,0 +1,13 @@ + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/widget/div3.svg b/src/assets/images/widget/div3.svg new file mode 100644 index 0000000..f9baf1d --- /dev/null +++ b/src/assets/images/widget/div3.svg @@ -0,0 +1,11 @@ + + + + + + + \ No newline at end of file diff --git a/src/assets/images/widget/div4.svg b/src/assets/images/widget/div4.svg new file mode 100644 index 0000000..313d6ac --- /dev/null +++ b/src/assets/images/widget/div4.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/widget/div5.svg b/src/assets/images/widget/div5.svg new file mode 100644 index 0000000..3163cea --- /dev/null +++ b/src/assets/images/widget/div5.svg @@ -0,0 +1,15 @@ + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/widget/div6.svg b/src/assets/images/widget/div6.svg new file mode 100644 index 0000000..3bff46a --- /dev/null +++ b/src/assets/images/widget/div6.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/widget/div7.svg b/src/assets/images/widget/div7.svg new file mode 100644 index 0000000..8dae26b --- /dev/null +++ b/src/assets/images/widget/div7.svg @@ -0,0 +1,12 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/widget/div8.svg b/src/assets/images/widget/div8.svg new file mode 100644 index 0000000..7805af9 --- /dev/null +++ b/src/assets/images/widget/div8.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/widget/div9.svg b/src/assets/images/widget/div9.svg new file mode 100644 index 0000000..af9eb19 --- /dev/null +++ b/src/assets/images/widget/div9.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/views/bigscreenDesigner/designer/index.vue b/src/views/bigscreenDesigner/designer/index.vue index 5a98955..0d0d9bd 100644 --- a/src/views/bigscreenDesigner/designer/index.vue +++ b/src/views/bigscreenDesigner/designer/index.vue @@ -7,45 +7,51 @@ !--> @@ -407,9 +306,8 @@ export default { return Math.min(widthScale, heightScale); }, workbenchTransform() { - return `scale(${this.bigscreenScaleInWorkbench}, ${ - this.bigscreenScaleInWorkbench - })`; + return `scale(${this.bigscreenScaleInWorkbench}, ${this.bigscreenScaleInWorkbench + })`; }, // 大屏在设计模式的大小 bigscreenWidthInWorkbench() { @@ -616,7 +514,7 @@ export default { if (type == "application/json") { let reader = new FileReader(); reader.readAsText(res, "utf-8"); - reader.onload = function() { + reader.onload = function () { const data = JSON.parse(reader.result); that.$message.error(data.message); }; @@ -1021,8 +919,8 @@ export default { border: 1px solid #3a4659; background: #282a30; } - .tools-item-text { - } + + .tools-item-text {} } } @@ -1076,10 +974,14 @@ export default { .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 */ + -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; } @@ -1088,10 +990,14 @@ export default { .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 */ + -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; } } @@ -1132,10 +1038,8 @@ export default { width: 100%; height: 100%; background-size: 30px 30px, 30px 30px; - background-image: linear-gradient( - hsla(0, 0%, 100%, 0.1) 1px, - transparent 0 - ), + 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; } @@ -1255,13 +1159,13 @@ li { clear: both; } -.nav > li { +.nav>li { width: 55px; text-align: left; position: relative; } -.nav > li a { +.nav>li a { float: left; padding: 12px 30px; color: #999; @@ -1269,11 +1173,11 @@ li { text-decoration: none; } -.nav > li:hover { +.nav>li:hover { color: #788994; } -.nav > li ul { +.nav>li ul { visibility: hidden; position: absolute; z-index: 1000; @@ -1287,7 +1191,7 @@ li { transition: all 0.2s ease-in-out; } -.nav > li:hover > ul { +.nav>li:hover>ul { opacity: 1; visibility: visible; margin: 0; @@ -1320,7 +1224,7 @@ li { border: 1px solid #3c5e88; } -.nav ul li:first-child > a:hover:before { +.nav ul li:first-child>a:hover:before { border-bottom-color: #04acec; } @@ -1353,4 +1257,26 @@ li { /deep/ .vue-ruler-v { opacity: 0.3; } + + +.border-card { + /deep/ .el-tabs__content { + padding: 0; + } +} + +.toolBar { + /deep/ .el-submenu__title { + padding: 0 0 0 15px !important; + } + + .el-menu { + border: 0; + } + + /deep/ .el-menu-item { + padding: 0 !important; + min-width: none !important; + } +} diff --git a/src/views/bigscreenDesigner/designer/tools/configure/widget-div.js b/src/views/bigscreenDesigner/designer/tools/configure/widget-div.js index 0f406b4..47ba9a7 100644 --- a/src/views/bigscreenDesigner/designer/tools/configure/widget-div.js +++ b/src/views/bigscreenDesigner/designer/tools/configure/widget-div.js @@ -17,14 +17,14 @@ export const widgetDiv = { placeholder: '', value: '边框', }, - { - type: 'el-input-text', - label: '隐藏', - name: 'bHide', - required: false, - placeholder: '', - value: false, - }, + // { + // type: 'el-input-text', + // label: '隐藏', + // name: 'bHide', + // required: false, + // placeholder: '', + // value: false, + // }, { type: 'el-select', label: '边框类型', @@ -37,41 +37,48 @@ export const widgetDiv = { {code: 'div_Style_3', name: '边框3'}, {code: 'div_Style_4', name: '边框4'}, {code: 'div_Style_5', name: '边框5'}, + {code: 'div_Style_6', name: '边框6'}, + {code: 'div_Style_7', name: '边框7'}, + {code: 'div_Style_8', name: '边框8'}, + {code: 'div_Style_9', name: '边框9'}, + {code: 'div_Style_10', name: '边框10'}, + {code: 'div_Style_11', name: '边框11'}, + {code: 'div_Style_12', name: '边框12'}, ], value: 'div_Style_1' }, - { - type: 'vue-color', - label: '边框主颜色', - name: 'colorOne', - required: false, - placeholder: '', - value: '#FAD400', - }, - { - type: 'vue-color', - label: '边框副颜色', - name: 'colorTwo', - required: false, - placeholder: '', - value: '#FAD400', - }, + // { + // type: 'vue-color', + // label: '边框主颜色', + // name: 'colorOne', + // required: false, + // placeholder: '', + // value: '#FAD400', + // }, + // { + // type: 'vue-color', + // label: '边框副颜色', + // name: 'colorTwo', + // required: false, + // placeholder: '', + // value: '#FAD400', + // }, { type: 'vue-color', label: '背景色', name: 'background', required: false, placeholder: '', - value: 'rgba(115,170,229,.5)', - }, - { - type: 'el-input-text', - label: '动画时长(秒)', - name: 'time', - required: false, - placeholder: '', - value: '3', + value: '', }, + // { + // type: 'el-input-text', + // label: '动画时长(秒)', + // name: 'time', + // required: false, + // placeholder: '', + // value: '3', + // }, ], // 数据 data: [], @@ -99,7 +106,7 @@ export const widgetDiv = { name: 'width', required: false, placeholder: '该容器在1920px大屏中的宽度', - value: 100, + value: 1000, }, { type: 'el-input-number', @@ -107,7 +114,7 @@ export const widgetDiv = { name: 'height', required: false, placeholder: '该容器在1080px大屏中的高度', - value: 40, + value: 600, }, ], } diff --git a/src/views/bigscreenDesigner/designer/tools/index.js b/src/views/bigscreenDesigner/designer/tools/index.js index 9ff919e..ebfd230 100644 --- a/src/views/bigscreenDesigner/designer/tools/index.js +++ b/src/views/bigscreenDesigner/designer/tools/index.js @@ -6,80 +6,88 @@ * @LastEditors: qianlishi * @LastEditTime: 2022-03-11 10:35:35 */ -import { widgetTool } from "./main" +import { widgetTool } from "./main"; const screenConfig = { - code: 'screen', - type: 'screen', - label: '大屏设置', - icon: '', + code: "screen", + type: "screen", + label: "大屏设置", + icon: "", options: { setup: [ { - type: 'el-input-number', - label: '大屏宽度', - name: 'width', + type: "el-input-number", + label: "大屏宽度", + name: "width", required: false, - placeholder: 'px', - value: '1920', + placeholder: "px", + value: "1920" }, { - type: 'el-input-number', - label: '大屏高度', - name: 'height', + type: "el-input-number", + label: "大屏高度", + name: "height", required: false, - placeholder: 'px', - value: '1080', + placeholder: "px", + value: "1080" }, { - type: 'el-input-text', - label: '标题', - name: 'title', + type: "el-input-text", + label: "标题", + name: "title", require: false, - placeholder: '', - value: '大屏', + placeholder: "", + value: "大屏" }, { - type: 'el-input-textarea', - label: '大屏简介', - name: 'description', + type: "el-input-textarea", + label: "大屏简介", + name: "description", required: false, - placeholder: '', + placeholder: "" }, { - type: 'vue-color', - label: '背景颜色', - name: 'backgroundColor', + type: "vue-color", + label: "背景颜色", + name: "backgroundColor", required: false, - placeholder: '', - value: '#000', + placeholder: "", + value: "#000" }, { - type: 'custom-upload', - label: '图片地址', - name: 'backgroundImage', + type: "custom-upload", + label: "图片地址", + name: "backgroundImage", required: false, - placeholder: '', - value: 'https://ajreport.beliefteam.cn/file/download/bf566e48-ccad-40e1-8ee9-228427e5466b', - }, + placeholder: "", + value: + "https://ajreport.beliefteam.cn/file/download/bf566e48-ccad-40e1-8ee9-228427e5466b" + } ], data: [], - position: [], + position: [] } -} -const widgetTools = [ - ...widgetTool -] +}; +const widgetTools = [...widgetTool]; -const getToolByCode = function (code) { +const getToolByCode = function(code) { // 获取大屏底层设置属性 - if (code == 'screen') { - return screenConfig + if (code == "screen") { + return screenConfig; } // 获取组件 - let item = widgetTools.find(function (item, index, arrs) { - return item.code === code - }) - return item -} -console.log(widgetTools) -export {widgetTools, getToolByCode} + let item = widgetTools.find(function(item, index, arrs) { + return item.code === code; + }); + return item; +}; +console.log(widgetTools); + +const widgetToolsGroup = () => { + let chartGroup = []; + + for (const item of widgetTools) { + + } + +}; +export { widgetTools, getToolByCode, widgetToolsGroup }; diff --git a/src/views/bigscreenDesigner/designer/widget/div/svg/div1.vue b/src/views/bigscreenDesigner/designer/widget/div/svg/div1.vue new file mode 100644 index 0000000..60cb5f8 --- /dev/null +++ b/src/views/bigscreenDesigner/designer/widget/div/svg/div1.vue @@ -0,0 +1,158 @@ + + + + + \ No newline at end of file diff --git a/src/views/bigscreenDesigner/designer/widget/div/svg/div2.vue b/src/views/bigscreenDesigner/designer/widget/div/svg/div2.vue new file mode 100644 index 0000000..ab38b09 --- /dev/null +++ b/src/views/bigscreenDesigner/designer/widget/div/svg/div2.vue @@ -0,0 +1,47 @@ + + + + + \ No newline at end of file diff --git a/src/views/bigscreenDesigner/designer/widget/div/widgetDiv.vue b/src/views/bigscreenDesigner/designer/widget/div/widgetDiv.vue index a6b8859..7b1fd8c 100644 --- a/src/views/bigscreenDesigner/designer/widget/div/widgetDiv.vue +++ b/src/views/bigscreenDesigner/designer/widget/div/widgetDiv.vue @@ -1,24 +1,41 @@ -