diff --git a/package.json b/package.json index 7f0aed5..f748e09 100644 --- a/package.json +++ b/package.json @@ -67,6 +67,7 @@ "file-loader": "1.1.11", "friendly-errors-webpack-plugin": "1.7.0", "html-webpack-plugin": "4.0.0-alpha", + "iframe-resizer": "^4.3.6", "js-md5": "^0.7.3", "mini-css-extract-plugin": "0.4.1", "monaco-editor-webpack-plugin": "^4.1.1", diff --git a/src/assets/styles/screen.scss b/src/assets/styles/screen.scss new file mode 100644 index 0000000..b412dff --- /dev/null +++ b/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/src/mixins/common.js b/src/mixins/common.js index f3037c1..de6e918 100644 --- a/src/mixins/common.js +++ b/src/mixins/common.js @@ -308,6 +308,9 @@ export default { } return tmpData }, + isObjectFn(value) { + return Object.prototype.toString.call(value) === "[object Object]"; + }, isArrayFn(value) { if (typeof Array.isArray === "function") { return Array.isArray(value); diff --git a/src/mixins/queryform.js b/src/mixins/queryform.js index 43dc103..65832e5 100644 --- a/src/mixins/queryform.js +++ b/src/mixins/queryform.js @@ -59,6 +59,7 @@ export default { }, computed: {}, created() { + }, mounted() { }, @@ -96,7 +97,7 @@ export default { // 查询echarts 数据 queryEchartsData(params) { return new Promise(async (resolve) => { - const {code, data} = await getData(params); + const { code, data } = await getData(params); if (code != 200) return const analysisData = this.analysisChartsData(params, data); resolve(analysisData) @@ -112,6 +113,7 @@ export default { // widget-heatmap 热力图 // widget-mapline 中国地图-路线图 // widget-radar 雷达图 + // widget-select 下拉框 const chartType = params.chartType if (chartType == "widget-linechart" || chartType == "widget-barlinechart" @@ -134,6 +136,8 @@ export default { return this.linemapChartFn(params.chartProperties, data) } else if (chartType == "widget-radar") { return this.radarChartFn(params.chartProperties, data) + } else if (chartType == "widget-select") { + return this.selectChartFn(params.chartProperties, data) } else { return data } @@ -327,6 +331,7 @@ export default { } return ananysicData; }, + // 雷达图 radarChartFn(chartProperties, data) { const ananysicData = {}; // 字段名 @@ -346,6 +351,33 @@ export default { ananysicData["value"] = data; return ananysicData; }, + // 下拉框 + selectChartFn(chartProperties, data){ + let valueField; + let labelField; + for (const key in chartProperties) { + if (chartProperties[key] == "value") { + valueField = key; + } + if (chartProperties[key] == "label") { + labelField = key; + } + } + if (valueField == null && labelField != null) { + valueField = labelField; + } + if (labelField == null && valueField != null) { + labelField = valueField + } + const analysisData = []; + for (let i = 0; i < data.length; i++) { + const obj = {}; + obj["value"] = data[i][valueField]; + obj["label"] = data[i][labelField]; + analysisData.push(obj); + } + return analysisData; + }, setUnique(arr) { let newArr = []; arr.forEach(item => { diff --git a/src/utils/auth.js b/src/utils/auth.js index ca0cc19..1c80845 100644 --- a/src/utils/auth.js +++ b/src/utils/auth.js @@ -11,9 +11,13 @@ export function getShareToken() { return getStorageItem(ShareTokenKey) == null ? '' : getStorageItem(ShareTokenKey); } export function setToken(token) { - return setStorageItem(TokenKey, token) + return setStorageItem(TokenKey, token); } export function setShareToken(shareToken) { + const originalShareToken = getShareToken(); + if ((originalShareToken != null || originalShareToken != '') && originalShareToken.indexOf(shareToken) == -1) { + shareToken = originalShareToken + ',' + shareToken + } return setStorageItem(ShareTokenKey, shareToken) } export function delToken() { diff --git a/src/utils/eventBus.js b/src/utils/eventBus.js new file mode 100644 index 0000000..f3aceb6 --- /dev/null +++ b/src/utils/eventBus.js @@ -0,0 +1,5 @@ +import Vue from 'vue' + +const eventBus = new Vue() + +export { eventBus } \ No newline at end of file diff --git a/src/utils/screen.js b/src/utils/screen.js new file mode 100644 index 0000000..62f8bc0 --- /dev/null +++ b/src/utils/screen.js @@ -0,0 +1,34 @@ +import { eventBus } from "@/utils/eventBus"; + +export function setAssChartData(widgets, options) { + const selectOptions = options.filter(item => item.uuid).map(item => { + return { + code: item.uuid, + name: item.label + } + }) + widgets.forEach(item => { + const setup = item['options']['setup'] + console.log(setup) + setup.forEach(sItem => { + if (sItem.name == 'assChart') { + sItem['selectOptions'] = selectOptions + } + }) + }) +} + +export function eventBusParams(optionsSetup, optionsData, callback) { + eventBus.$on("eventParams", (formParams) => { + const uuid = optionsSetup.uuid; + if (formParams.assChart.includes(uuid)) { + const contextData = optionsData.dynamicData.contextData; + for (const key in contextData) { + if (formParams.hasOwnProperty(key)) { + contextData[key] = formParams[key]; + } + } + callback(optionsData.dynamicData, optionsSetup) + } + }); +} diff --git a/src/views/bigscreenDesigner/designer/components/dynamicComponents.vue b/src/views/bigscreenDesigner/designer/components/dynamicComponents.vue index 4e97c52..5464280 100644 --- a/src/views/bigscreenDesigner/designer/components/dynamicComponents.vue +++ b/src/views/bigscreenDesigner/designer/components/dynamicComponents.vue @@ -120,9 +120,11 @@ export default { }, async selectDataSet() { const { code, data } = await detailBysetId(this.dataSetValue); + if(data){ + this.userNameList =data.dataSetParamDtoList?data.dataSetParamDtoList:this.userNameList; + this.setParamList =data.setParamList?data.setParamList:[]; + } // this.userNameList = this.isNotBlankArray(this.userNameList)?this.userNameList:data.dataSetParamDtoList; - this.userNameList = data.dataSetParamDtoList; - this.setParamList = data.setParamList; if (code != "200") return; }, async saveDataBtn() { @@ -138,6 +140,7 @@ export default { contextData, // userNameList:this.userNameList 去除userNameList对象，这样可以减少前台内存 }; + // console.log("刷新",params) this.$emit("input", params); this.$emit("change", params); }, @@ -152,13 +155,13 @@ export default { async echoDataSet(val) { if (!val) return; const setCode = val.setCode; - await this.loadDataSet(); - - this.dataSetValue = this.dataSet.filter( + const dataSet = this.dataSet. + filter( el => setCode == el.setCode - )[0].id; - + )[0]; + if (!dataSet) return; + this.dataSetValue = dataSet.id; await this.selectDataSet(); this.echoDynamicData(val); }, @@ -178,7 +181,7 @@ export default { } this.userNameList = sUserDataSet; } - if (this.setParamList.length > 0) { + if (this.setParamList && this.setParamList.length > 0) { for (let i = 0; i < this.setParamList.length; i++) { const item = this.setParamList[i]; if (chartProperties.hasOwnProperty(item)) { diff --git a/src/views/bigscreenDesigner/designer/index.vue b/src/views/bigscreenDesigner/designer/index.vue index 12c5727..e280e4a 100644 --- a/src/views/bigscreenDesigner/designer/index.vue +++ b/src/views/bigscreenDesigner/designer/index.vue @@ -64,8 +64,9 @@
+ :style="{ width: widthLeftForToolsHideButton + 'px' }" + @click="toolIsShow = !toolIsShow" + >
@@ -74,46 +75,99 @@ :style="{ width: middleWidth + 'px', height: middleHeight + 'px' }" >
- + - + - + - + - + - + - + - + + + + + + + + + + + + {{ parseInt(scaleNum) }}% + + + + + @@ -149,127 +203,96 @@ placement="right" > - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- +
-
+ -
- -
- +
+
+ +
+ +
- -
- -
-
+
@@ -280,7 +303,7 @@ /> @@ -297,6 +320,8 @@ :visible.sync="visibleContentMenu" :style-obj="styleObj" @deletelayer="deletelayer" + @lockLayer="lockLayer" + @noLockLayer="noLockLayer" @copylayer="copylayer" @istopLayer="istopLayer" @setlowLayer="setlowLayer" @@ -318,12 +343,10 @@ import dynamicForm from "./components/dynamicForm.vue"; import draggable from "vuedraggable"; import VueRulerTool from "vue-ruler-tool"; // 大屏设计页面的标尺插件 import contentMenu from "./components/contentMenu"; -import { getToken } from "@/utils/auth"; import { Revoke } from "@/utils/revoke"; +import { getToken } from "@/utils/auth"; import { mapMutations } from 'vuex'; -import process from "process"; import { debounce } from '@/utils/debounce'; // 引入防抖函数 - import loadingViewerVue from 'loading-view-vue' import Vue from "vue"; Vue.use(loadingViewerVue,{mode:"5"}); @@ -344,13 +367,13 @@ export default { widgetTools: widgetTools, // 左侧工具栏的组件图标，将js变量加入到当前作用域 widthLeftForTools: 200, // 左侧工具栏宽度 widthLeftForToolsHideButton: 15, // 左侧工具栏折叠按钮宽度 - widthRightForToolsHideButton: 15, // 右侧工具栏折叠按钮宽度 widthLeftForOptions: 300, // 右侧属性配置区 - widthPaddingTools: 18,//vueRuler + widthPaddingTools: 18, toolIsShow: true, // 左侧工具栏是否显示 - setupIsShow: true, // 右侧配置是否显示 bigscreenWidth: 1920, // 大屏设计的大小 bigscreenHeight: 1080, + widthRightForToolsHideButton: 15, // 右侧工具栏折叠按钮宽度 + setupIsShow: true, // 右侧配置是否显示 revoke: null, // 工作台大屏画布，保存到表gaea_report_dashboard中 @@ -371,25 +394,7 @@ export default { screenCode: "", dragWidgetCode: "", //从工具栏拖拽的组件code // 大屏画布中的组件 - widgets: [ - { - // type和value最终存到数据库中去，保存到gaea_report_dashboard_widget中 - type: "widget-text", - value: { - setup: {}, - data: {}, - position: { - width: 100, - height: 100, - left: 0, - top: 0, - zIndex: 0, - }, - }, - // options属性是从工具栏中拿到的tools中拿到 - options: [], - }, - ], // 工作区中拖放的组件 + widgets: [], // 工作区中拖放的组件 // 当前激活组件 widgetIndex: 0, // 当前激活组件右侧配置属性 @@ -408,6 +413,11 @@ export default { activeName: "first", selectMore:[],//按住shift多选的图层 shiftEnt:false,//shift键盘是否按住 + scaleNum: 0, // 当前缩放百分比的值 + sizeRange: [20, 40, 60, 80, 100, 150, 200, 300, 400], // 缩放百分比 + currentSizeRangeIndex: -1, // 当前是哪个缩放比分比, + currentWidgetTotal: 0, + widgetParamsConfig: [], // 各组件动态数据集的参数配置情况 }; }, computed: { @@ -421,10 +431,15 @@ export default { }, // 左侧、右侧折叠切换时，动态计算中间区的宽度 middleWidth() { - if(!this.setupIsShow && !this.toolIsShow){ - return document.documentElement.clientWidth - this.widthPaddingTools; + let widthLeftAndRight = 0; + if (this.toolIsShow) { + widthLeftAndRight += this.widthLeftForTools; // 左侧工具栏宽度 } - return this.bodyWidth - this.widthLeftAndRight(); + widthLeftAndRight += this.widthLeftForToolsHideButton; // 左侧工具栏折叠按钮宽度 + widthLeftAndRight += this.widthLeftForOptions; // 右侧配置栏宽度 + + let middleWidth = this.bodyWidth - widthLeftAndRight; + return middleWidth; }, middleHeight() { return this.bodyHeight; @@ -449,18 +464,41 @@ export default { this.getPXUnderScale(this.bigscreenHeight) + this.widthPaddingTools ); }, - // 尺子的宽度高度 - // bigscreenWidthRuler() { - // return this.middleWidth; - // }, - // bigscreenHeightRuler() { - // return this.middleHeight; - // }, + // 初始的缩放百分比 和 下标 + defaultSize() { + const obj = { + index: -1, + size: "50", + }; + this.sizeRange.some((item, index) => { + console.log(item,index); + if (item <= 100 * this.bigscreenScaleInWorkbench) { + obj.index = index; + obj.size = 100 * this.bigscreenScaleInWorkbench; + } + }); + if (obj.index === -1) { + obj.index = 0; + obj.size = this.sizeRange[0]; + } + return obj; + }, }, watch: { + defaultSize: { + handler(val) { + if (val !== -1 && this.isObjectFn(val)) { + this.currentSizeRangeIndex = val.index; + this.scaleNum = val.size; + } + }, + immediate: true, + }, widgets: { handler(val) { this.handlerLayerWidget(val); + // this.handlerdynamicDataParamsConfig(val); + // console.log("刷新") //以下部分是记录历史 this.$nextTick(() => { this.revoke.push(this.widgets); @@ -468,6 +506,12 @@ export default { }, deep: true, }, + bigscreenWidth() { + this.initVueRulerTool(); + }, + bigscreenHeight() { + this.initVueRulerTool(); + }, }, created() { /* 以下是记录历史的 */ @@ -475,14 +519,16 @@ export default { }, mounted() { // 如果是新的设计工作台 - this.initEchartData(); this.widgets = []; window.addEventListener("mouseup", () => { this.grade = false; }); + this.$nextTick(() => { + this.initVueRulerTool(); // 初始化 修正插件样式 + }); + this.initEchartData(); window.addEventListener('keydown', code => this.handleKeyDown(code)); // 监听键盘按下事件 window.addEventListener('keyup', code => this.handleKeyUp(code)); // 监听键盘松开事件 - }, // 在beforeDestroy中 beforeDestroy() { @@ -493,6 +539,71 @@ export default { methods: { ...mapMutations('dataSource', ['SET_STATIC_DATA']), /** + * @param num: 0缩小 1放大 2默认比例 + * sizeRange: [20, 40, 60, 72, 100, 150, 200, 300, 400] + */ + setSize(num) { + switch (num) { + case 0: this.currentSizeRangeIndex === 0 ? '' : this.currentSizeRangeIndex -= 1; + break; + case 1: this.currentSizeRangeIndex === 8 ? '' : this.currentSizeRangeIndex += 1; + break; + case 2: this.currentSizeRangeIndex = this.defaultSize.index; + } + // console.log(this.currentSizeRangeIndex,this.defaultSize.index,this.defaultSize.size,this.sizeRange[this.currentSizeRangeIndex]) + this.scaleNum = this.currentSizeRangeIndex === this.defaultSize.index ? this.defaultSize.size : this.sizeRange[this.currentSizeRangeIndex]; + }, + // 初始化 修正插件样式 + initVueRulerTool() { + const vueRulerToolDom = this.$refs["vue-ruler-tool"].$el; // 操作面板 第三方插件工具 + const contentDom = vueRulerToolDom.querySelector(".vue-ruler-content"); + const vueRulerX = vueRulerToolDom.querySelector(".vue-ruler-h"); // 横向标尺 + const vueRulerY = vueRulerToolDom.querySelector(".vue-ruler-v"); // 纵向标尺 + contentDom.style.width = "100%"; + contentDom.style.height = "100%"; + + let xHtmlContent = ""; + let yHtmlContent = ""; + let currentNum = 0; + while (currentNum < +this.bigscreenWidth) { + xHtmlContent += `${currentNum}`; + currentNum += 50; + } + currentNum = 0; + while (currentNum < +this.bigscreenHeight) { + yHtmlContent += `${currentNum}`; + currentNum += 50; + } + vueRulerX.innerHTML = xHtmlContent; + vueRulerY.innerHTML = yHtmlContent; + }, + // 重写默认数据 + setDefaultWidgetConfigValue(data, option) { + this.setConfigValue(data.setup, option.setup) + this.setConfigValue(data.position, option.position) + this.setConfigValue(data.data, option.data) + return option; + }, + setConfigValue(objValue, setup) { + Object.keys(objValue).forEach(key => { + setup.forEach(item => { + if (this.isObjectFn(item) && key == item.name) { + item.value = objValue[key] + } + if (this.isArrayFn(item)) { + item.forEach(itemChild => { + itemChild.list.forEach(el => { + if (key == el.name) { + el.value = objValue[key] + } + }) + }) + } + }) + }) + }, + + /** * @description: 恢复 * @param {*} * @return {*} @@ -515,8 +626,8 @@ export default { code.keyCode === 39 || code.keyCode === 40 ) { - //上下左右移动 - this.dragWidgetMoveByKey(code,this.widgetIndex); + //上下左右移动 + this.dragWidgetMoveByKey(code,this.widgetIndex); } }, 10, true), handleKeyUp: debounce(function(code) { @@ -573,6 +684,12 @@ export default { this.setWidgetOptionsData(screenData.data); } }, + // 返回每个组件的动态数据集参数配置情况 + handlerdynamicDataParamsConfig(val) { + this.widgetParamsConfig = val.map((item) => { + return item.value.data; + }); + }, // 数据处理 setMasterData(screenData){ // 数据类型 静态 or 动态 @@ -605,17 +722,23 @@ export default { }); }, renderingFn(val) { + let masterDataVal={}; if(this.isNotBlankArray(val)){ for (let i = 0; i < val.length; i++) { const one = val[i]; const sValue = (this.isBlankObject(one)|| this.isBlank(one['sValue']))?"":one['sValue']; if(this.isNotBlankObj(one) && this.isNotBlank(one['sName'])){ const sName = one['sName']; - this.masterData[sName]=sValue; + masterDataVal[sName]=sValue; } } + }else{ + masterDataVal={}; } - this.SET_STATIC_DATA(this.masterData); + this.masterData = masterDataVal; + // console.log("masterData",masterDataVal); + this.SET_STATIC_DATA(masterDataVal); + // this.$forceUpdate(); }, handleBigScreen(data) { @@ -630,7 +753,7 @@ export default { } this.setOptionsOnClickScreen(); return { - backgroundColor: (data && data.backgroundColor) || "", + backgroundColor: (data && data.backgroundColor) || (!data ? "rgba(52, 80, 106, 1)" : ""), backgroundImage: (data && data.backgroundImage) || "", height: (data && data.height) || 1080, title: (data && data.title) || "", @@ -718,7 +841,7 @@ export default { // console.log(screenData); //loading this.$showLoading(); - const { code, data } = await insertDashboard(screenData); + const { code } = await insertDashboard(screenData); this.$hideLoading(); if (code == "200") { this.$message.success("保存成功！"); @@ -796,29 +919,36 @@ export default { type: "error", }); }, - //中间区域减去的宽度 - widthLeftAndRight(){ - let widthLeftAndRight = 0; - if (this.toolIsShow) { - widthLeftAndRight += this.widthLeftForTools; // 左侧工具栏宽度 - widthLeftAndRight += this.widthLeftForToolsHideButton; // 左侧工具栏折叠按钮宽度 - } - if (this.setupIsShow) { - widthLeftAndRight += this.widthLeftForOptions; // 右侧配置栏宽度 - widthLeftAndRight += this.widthRightForToolsHideButton; // 右侧工具栏折叠按钮宽度 - } - // console.log("中间区域增加的宽度",widthLeftAndRight,this.setupIsShow,this.toolIsShow) - return widthLeftAndRight; - }, - // 在缩放模式下的大小 +// 在缩放模式下的大小 getPXUnderScale(px) { return this.bigscreenScaleInWorkbench * px; }, dragStart(widgetCode) { this.dragWidgetCode = widgetCode; + this.currentWidgetTotal = this.widgets.length; // 当前操作面板上有多少各组件 }, dragEnd() { - this.dragWidgetCode = ""; + /** + * 40@remarks 新增组件到操作面板后，右边的配置有更新，但是当前选中的组件没更新，导致配置错乱的bug; + * 由于拖动组件拖到非操作面板上是不会添加组件，还需判断是否添加组件到操作面板上; + */ + this.$nextTick(() => { + if (this.widgets.length === this.currentWidgetTotal + 1) { + // 确实新增了一个组件到操作面板上 + // console.log( + // `新添加 '${ + // this.widgets[this.currentWidgetTotal].value.setup.layerName + // }' 组件到操作面板` + // ); + const uuid = Number(Math.random().toString().substr(2)).toString(36); + this.widgets[this.currentWidgetTotal].value.widgetId = uuid; + this.layerWidget[this.currentWidgetTotal].widgetId = uuid; + this.widgets[this.currentWidgetTotal].value.widgetCode = this.dragWidgetCode; + const index = this.widgets.length - 1; + this.layerClick(index); // 选中当前新增的组件 + this.grade = false; // 去除网格线 + } + }); }, dragOver(evt) { evt.preventDefault(); @@ -837,9 +967,12 @@ export default { let widgetTopInWorkbench = eventY - workbenchPosition.top; let widgetLeftInWorkbench = eventX - workbenchPosition.left; - // 计算在缩放模式下的x y - let x = widgetLeftInWorkbench / this.bigscreenScaleInWorkbench; - let y = widgetTopInWorkbench / this.bigscreenScaleInWorkbench; + const targetScale = + this.currentSizeRangeIndex === this.defaultSize.index + ? this.bigscreenScaleInWorkbench + : this.sizeRange[this.currentSizeRangeIndex] / 100; + const x = widgetLeftInWorkbench / targetScale; + const y = widgetTopInWorkbench / targetScale; // 复制一个组件 let tool = getToolByCode(widgetType); @@ -859,7 +992,7 @@ export default { options: tool.options, }; // 处理默认值 - const widgetJsonValue = this.handleDefaultValue(widgetJson); + const widgetJsonValue = this.getWidgetConfigValue(widgetJson); //可以拖拽放到鼠标的位置 widgetJsonValue.value.position.left = @@ -872,7 +1005,32 @@ export default { // 激活新组件的配置属性 this.setOptionsOnClickWidget(this.widgets.length - 1); }, - + getWidgetConfigValue(widgetJson) { + this.setWidgetConfigValue( + widgetJson.options.setup, + widgetJson.value.setup + ); + this.setWidgetConfigValue( + widgetJson.options.position, + widgetJson.value.position + ); + this.setWidgetConfigValue(widgetJson.options.data, widgetJson.value.data); + return widgetJson; + }, + setWidgetConfigValue(config, configValue) { + config.forEach((item) => { + if (this.isObjectFn(item)) { + configValue[item.name] = item.value; + } + if (this.isArrayFn(item)) { + item.forEach((itemChild) => { + itemChild.list.forEach((ev) => { + configValue[ev.name] = ev.value; + }); + }); + } + }); + }, // 对组件默认值处理 handleDefaultValue(widgetJson) { for (const key in widgetJson) { @@ -1018,6 +1176,7 @@ export default { widgetValueChanged(key, val) { if (this.screenCode == "screen") { if (key === 'setup') { + // console.log("dddd",key,val,"this.screenCode",this.screenCode); // 全局配置更改 let newSetup = new Array(); this.dashboard = this.deepClone(val); @@ -1051,7 +1210,11 @@ export default { newData.push(el); }); this.widgetOptions.data = newData; - this.setMasterData(this.dashboard); + if(val + && this.isNotBlankObj(val.dynamicData) + && "master-data"===val.dynamicData.chartType){ + this.setMasterData(this.dashboard); + } } } else { for (let i = 0; i < this.widgets.length; i++) { @@ -1062,6 +1225,7 @@ export default { } } }, + // 右键 rightClick(event, index) { this.rightClickIndex = index; const left = event.clientX; @@ -1175,9 +1339,9 @@ export default { //输入删除键删除 entryDelete(index){ this.widgets.splice(index, 1); - //调用删除 - // this.selectMore.push(index); - // this.deletelayerOne(); + //调用删除 + // this.selectMore.push(index); + // this.deletelayerOne(); }, deletelayer() { this.widgets.splice(this.rightClickIndex, 1); @@ -1191,13 +1355,23 @@ export default { let widgetsCp = []; if(this.isNotBlankArray(this.selectMore)){ for(let i = 0; i< this.widgets.length;i++){ - if(this.selectMore.indexOf(i)<0){ - widgetsCp.push(this.widgets[i]); - } + if(this.selectMore.indexOf(i)<0){ + widgetsCp.push(this.widgets[i]); + } } } this.widgets = widgetsCp; }, + // 锁定 + 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); + }, //根据上下左右键移动(因为子组件直接切换焦点事件问题,这里弥补不点大屏直接切组件移动) dragWidgetMoveByKey(code,widgetIndex){ const position = this.widgets[widgetIndex].value.position; @@ -1226,509 +1400,5 @@ export default { diff --git a/src/views/bigscreenDesigner/designer/index.vue.宽高都自适应 b/src/views/bigscreenDesigner/designer/index.vue.bak index 53279f8..12c5727 100644 --- a/src/views/bigscreenDesigner/designer/index.vue.宽高都自适应 +++ b/src/views/bigscreenDesigner/designer/index.vue.bak @@ -131,6 +131,7 @@ :headers="headers" accept=".zip" :on-success="handleUpload" + :before-upload="beforeUpload" :on-error="handleError" :show-file-list="false" :limit="1" @@ -140,34 +141,42 @@ -
    -
  • - -
      -
    • - -
      导出(包含数据集)
      -       -
      • -
    • - -
      导出(不包含数据集)
      -       -
      • -
    -
    • -
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
@@ -223,14 +232,14 @@ :key="index" v-model="widget.value" :index="index" - :stepX="stepX" - :stepY="stepY" + :step="step" :type="widget.type" :bigscreen="{ bigscreenWidth, bigscreenHeight }" @onActivated="setOptionsOnClickWidget" @contextmenu.prevent.native="rightClick($event, index)" @mousedown.prevent.native="widgetsClick(index)" @mouseup.prevent.native="widgetsMouseup" + @keyup.delete.native="entryDelete(index)" />
@@ -301,7 +310,6 @@ import { insertDashboard, detailDashboard, - importDashboard, exportDashboard, } from "@/api/bigscreen"; import { widgetTools, getToolByCode } from "./tools/index"; @@ -314,7 +322,11 @@ import { getToken } from "@/utils/auth"; import { Revoke } from "@/utils/revoke"; import { mapMutations } from 'vuex'; import process from "process"; +import { debounce } from '@/utils/debounce'; // 引入防抖函数 +import loadingViewerVue from 'loading-view-vue' +import Vue from "vue"; +Vue.use(loadingViewerVue,{mode:"5"}); export default { name: "Login", components: { @@ -326,7 +338,7 @@ export default { }, data() { return { - uploadUrl:process.env.BASE_API +"/reportDashboard/import/" +this.$route.query.reportCode, + uploadUrl :"http://"+window.location.host+"/xlyReport/reportDashboard/import/" +this.$route.query.reportCode, grade: false, layerWidget: [], widgetTools: widgetTools, // 左侧工具栏的组件图标，将js变量加入到当前作用域 @@ -378,7 +390,6 @@ export default { options: [], }, ], // 工作区中拖放的组件 - // 当前激活组件 widgetIndex: 0, // 当前激活组件右侧配置属性 @@ -395,14 +406,13 @@ export default { visibleContentMenu: false, rightClickIndex: -1, activeName: "first", + selectMore:[],//按住shift多选的图层 + shiftEnt:false,//shift键盘是否按住 }; }, computed: { - stepX() { - return Number(100 / (this.bigscreenScaleInWorkbenchX * 100)); - }, - stepY() { - return Number(100 / (this.bigscreenScaleInWorkbenchY * 100)); + step() { + return Number(100 / (this.bigscreenScaleInWorkbench * 100)); }, headers() { return { @@ -427,26 +437,16 @@ export default { (this.middleHeight - this.widthPaddingTools) / this.bigscreenHeight; return Math.min(widthScale, heightScale); }, - bigscreenScaleInWorkbenchX() { - let widthScale = - (this.middleWidth - this.widthPaddingTools) / this.bigscreenWidth; - return widthScale; - }, - bigscreenScaleInWorkbenchY() { - let heightScale = - (this.middleHeight - this.widthPaddingTools) / this.bigscreenHeight; - return heightScale; - }, workbenchTransform() { - return `scale(${this.bigscreenScaleInWorkbenchX}, ${this.bigscreenScaleInWorkbenchY})`; + return `scale(${this.bigscreenScaleInWorkbench}, ${this.bigscreenScaleInWorkbench})`; }, // 大屏在设计模式的大小 bigscreenWidthInWorkbench() { - return this.getPXUnderScaleX(this.bigscreenWidth) + this.widthPaddingTools; + return this.getPXUnderScale(this.bigscreenWidth) + this.widthPaddingTools; }, bigscreenHeightInWorkbench() { return ( - this.getPXUnderScaleY(this.bigscreenHeight) + this.widthPaddingTools + this.getPXUnderScale(this.bigscreenHeight) + this.widthPaddingTools ); }, // 尺子的宽度高度 @@ -480,6 +480,15 @@ export default { window.addEventListener("mouseup", () => { this.grade = false; }); + window.addEventListener('keydown', code => this.handleKeyDown(code)); // 监听键盘按下事件 + window.addEventListener('keyup', code => this.handleKeyUp(code)); // 监听键盘松开事件 + + }, + // 在beforeDestroy中 + beforeDestroy() { + // 销毁监听键盘事件 + window.removeEventListener('keydown', code => this.handleKeyDown(code)); + window.removeEventListener('keyup', code => this.handleKeyUp(code)); }, methods: { ...mapMutations('dataSource', ['SET_STATIC_DATA']), @@ -495,6 +504,28 @@ export default { } this.widgets = record; }, + // 监听按下键盘事件 + handleKeyDown: debounce(function(code) { + // 判断是否按住shift键，是就把pin赋值为true + if (code.keyCode === 16 && code.shiftKey) { + this.shiftEnt = true; + }else if ( + code.keyCode === 37 || + code.keyCode === 38 || + code.keyCode === 39 || + code.keyCode === 40 + ) { + //上下左右移动 + this.dragWidgetMoveByKey(code,this.widgetIndex); + } + }, 10, true), + handleKeyUp: debounce(function(code) { + // 判断是否松开shift键，是就把pin赋值为false + if (code.keyCode === 16) { + this.shiftEnt = false; + this.selectMore=[]; + } + }, 500, true), /** * @description: 重做 * @param {*} @@ -523,8 +554,10 @@ export default { this.layerWidget = layerWidgetArr; }, async initEchartData() { - const reportCode = this.$route.query.reportCode; + const reportCode = this.$route.query; + this.$showLoading(); const { code, data } = await detailDashboard(reportCode); + this.$hideLoading(); if (code != 200) return; const processData = this.handleInitEchartsData(data); const screenData = this.handleBigScreen(data.dashboard); @@ -683,7 +716,10 @@ export default { widgets: this.widgets, }; // console.log(screenData); + //loading + this.$showLoading(); const { code, data } = await insertDashboard(screenData); + this.$hideLoading(); if (code == "200") { this.$message.success("保存成功！"); } @@ -699,14 +735,15 @@ export default { // 导出 async exportDashboard(val) { const fileName = this.$route.query.reportCode + ".zip"; - const param = { reportCode: this.$route.query.reportCode, showDataSet: val, }; + this.$showLoading(); exportDashboard(param).then((res) => { const that = this; const type = res.type; + this.$hideLoading(); if (type == "application/json") { let reader = new FileReader(); reader.readAsText(res, "utf-8"); @@ -716,7 +753,6 @@ export default { }; return; } - const blob = new Blob([res], { type: "application/octet-stream" }); if (window.navigator.msSaveOrOpenBlob) { //msSaveOrOpenBlob方法返回bool值 @@ -730,12 +766,17 @@ export default { } }); }, + //上传之前 + beforeUpload(){ + this.$showLoading(); + }, // 上传成功的回调 handleUpload(response, file, fileList) { //清除el-upload组件中的文件 this.$refs.upload.clearFiles(); //刷新大屏页面 this.initEchartData(); + this.$hideLoading(); if (response.code == "200") { this.$message({ message: "导入成功！", @@ -749,6 +790,7 @@ export default { } }, handleError(err) { + this.$hideLoading(); this.$message({ message: "上传失败！", type: "error", @@ -769,11 +811,8 @@ export default { return widthLeftAndRight; }, // 在缩放模式下的大小 - getPXUnderScaleX(px) { - return this.bigscreenScaleInWorkbenchX * px; - }, - getPXUnderScaleY(px) { - return this.bigscreenScaleInWorkbenchY * px; + getPXUnderScale(px) { + return this.bigscreenScaleInWorkbench * px; }, dragStart(widgetCode) { this.dragWidgetCode = widgetCode; @@ -873,6 +912,7 @@ export default { } } } + // console.log("widgetJson",widgetJson); return widgetJson; }, layerClick(index) { @@ -881,10 +921,12 @@ export default { }, // 如果是点击大屏设计器中的底层，加载大屏底层属性 setOptionsOnClickScreen() { - this.screenCode = "screen"; - // 选中不同的组件 右侧都显示第一栏 - this.activeName = "first"; - this.widgetOptions = getToolByCode("screen")["options"]; + if(!this.shiftEnt) { + this.screenCode = "screen"; + // 选中不同的组件 右侧都显示第一栏 + this.activeName = "first"; + this.widgetOptions = getToolByCode("screen")["options"]; + } }, getScreenData(data){ const screenData = {}; @@ -924,23 +966,41 @@ export default { }, widgetsClick(index) { const draggableArr = this.$refs.widgets; - for (let i = 0; i < draggableArr.length; i++) { - if (i == index) { - this.$refs.widgets[i].$refs.draggable.setActive(true); - } else { - this.$refs.widgets[i].$refs.draggable.setActive(false); + //判断是否按住了shift键盘 + if(this.shiftEnt){ + for (let i = 0; i < draggableArr.length; i++) { + if (i == index) { + this.$refs.widgets[i].$refs.draggable.setActive(true); + this.selectMore.push(index); + } + } + }else{ + //没有按住shift键标识编辑单个 + let selectMore = []; + for (let i = 0; i < draggableArr.length; i++) { + if (i == index) { + this.$refs.widgets[i].$refs.draggable.setActive(true); + selectMore.push(index); + this.selectMore = selectMore; + } else { + this.$refs.widgets[i].$refs.draggable.setActive(false); + } } } this.setOptionsOnClickWidget(index); this.grade = true; + this.widgetIndex = index; }, widgetsMouseup(e) { this.grade = false; }, handleMouseDown() { - const draggableArr = this.$refs.widgets; - for (let i = 0; i < draggableArr.length; i++) { - this.$refs.widgets[i].$refs.draggable.setActive(false); + if(!this.shiftEnt){ + const draggableArr = this.$refs.widgets; + for (let i = 0; i < draggableArr.length; i++) { + this.$refs.widgets[i].$refs.draggable.setActive(false); + } + this.selectMore = []; } }, setWidgetOptionsData(val){ @@ -1049,13 +1109,30 @@ export default { arr[oldIndex] = arr.splice(newIndex, 1, arr[oldIndex])[0]; return arr; }, - // 删除 - deletelayer() { - this.widgets.splice(this.rightClickIndex, 1); + //去重 + setUnique(arr) { + let newArr = []; + arr.forEach(item => { + return newArr.includes(item) ? '' : newArr.push(item); + }); + return newArr; }, - // 复制 + // 多选复制 copylayer() { - const obj = this.deepClone(this.widgets[this.rightClickIndex]); + //首先复制右选节点，再复制其他选择节点 + this.copylayerOne(this.rightClickIndex) + // if(this.isNotBlankArray(this.selectMore)){ + // for(let i = 0; i< this.selectMore.length;i++){ + // const copyIndex = this.selectMore[i]; + // if(this.rightClickIndex != copyIndex){ + // this.copylayerOne(copyIndex); + // } + // } + // } + }, + // 复制 + copylayerOne(index) { + const obj = this.deepClone(this.widgets[index]); this.widgets.splice(this.widgets.length, 0, obj); }, // 置顶 @@ -1095,6 +1172,55 @@ export default { this.widgets.unshift(this.widgets.splice(this.rightClickIndex, 1)[0]); } }, + //输入删除键删除 + entryDelete(index){ + this.widgets.splice(index, 1); + //调用删除 + // this.selectMore.push(index); + // this.deletelayerOne(); + }, + deletelayer() { + this.widgets.splice(this.rightClickIndex, 1); + // this.selectMore.push(this.rightClickIndex); + // this.deletelayerOne(); + }, + // 删除 + deletelayerOne() { + this.selectMore = this.setUnique(this.selectMore); + //首先复制右选节点，再复制其他选择节点 + let widgetsCp = []; + if(this.isNotBlankArray(this.selectMore)){ + for(let i = 0; i< this.widgets.length;i++){ + if(this.selectMore.indexOf(i)<0){ + widgetsCp.push(this.widgets[i]); + } + } + } + this.widgets = widgetsCp; + }, + //根据上下左右键移动(因为子组件直接切换焦点事件问题,这里弥补不点大屏直接切组件移动) + dragWidgetMoveByKey(code,widgetIndex){ + const position = this.widgets[widgetIndex].value.position; + const temp=3; + if(code.keyCode==40 || code.key=='ArrowDown'){ + position.top = position.top+temp; + this.$refs.widgets[widgetIndex].$refs.draggable.setTop(position); + }if(code.keyCode==38 || code.key=='ArrowUp'){ + position.top = position.top-temp; + this.$refs.widgets[widgetIndex].$refs.draggable.setTop(position); + }if(code.keyCode==37 || code.key=='ArrowLeft'){ + position.left = position.left-temp; + this.$refs.widgets[widgetIndex].$refs.draggable.setLeft(position); + }if(code.keyCode==39 || code.key=='ArrowRight'){ + position.left = position.left+temp; + this.$refs.widgets[widgetIndex].$refs.draggable.setLeft(position); + } + }, + //输入ctrl+c + entryCopy(index){ + const obj = this.deepClone(this.widgets[index]); + this.widgets.splice(this.widgets.length, 0, obj); + } }, }; diff --git a/src/views/bigscreenDesigner/designer/linkageLogic.js b/src/views/bigscreenDesigner/designer/linkageLogic.js new file mode 100644 index 0000000..4eee236 --- /dev/null +++ b/src/views/bigscreenDesigner/designer/linkageLogic.js @@ -0,0 +1,152 @@ +/* + * @Description: 各联动组件的参数配置 参数paramsKey的值具体封装时再改 + */ +import { eventBus as bus } from "@/utils/eventBus"; +export const lickageParamsConfig = [ + // { + // name: '按钮组', + // code: 'widgetButtonGroup', + // paramsKey: [] // 40@remarks 动态：[...row, index] + // }, + { + name: '下拉框', + code: 'widget-select', + paramsKey: ['label','value'] + }, + { + name: '时间筛选器', + code: 'widget-form-time', + paramsKey: ['startTime','endTime'] + }, + { + name: '柱图', + code: 'widget-barchart', + paramsKey: ['name', 'value'] + }, + { + name: '柱图-渐变色', + code: 'widget-gradient-color-barchart', + paramsKey: ['name', 'value'] + }, + // …… + { + name: '折线图', + code: 'widget-linechart', + paramsKey: ['name', 'value'] + }, + { + name: '百分比图', + code: 'widgetPiePercentageChart', + paramsKey: ['value'] + }, + { + name: '饼图', + code: 'widget-piechart', + paramsKey: ['name', 'value'] + }, + { + name: '南丁格尔玫瑰图', + code: 'WidgetPieNightingaleRoseArea', + paramsKey: ['name', 'value'] + }, +] + +export const getOneConfigByCode = function (code) { + return lickageParamsConfig.find(item => { return item.code === code }) +} + +export const getOneConfigByName = function (name) { + return lickageParamsConfig.find(item => { return item.name === name }) +} + +/** + * 源组件 - 初始化联动逻辑 + * @param self 组件实例对象 this + * @param isActiveClick 主动触发(非echart类click事件触发) + * @param buttonConfig 按钮组组件的配置 + * 40@remarks + * 1、v-chart 需添加 ref="myVChart" 以获取实例 + * 2、 发消息发过去的对象 待封装配置动态兼容 + */ +export const originWidgetLinkageLogic = function (self, isActiveClick = false, buttonConfig = {}) { + // if (self.allComponentLinkage && self.allComponentLinkage.length && self.allComponentLinkage[self.widgetIndex].index !== -1 && self.allComponentLinkage[self.widgetIndex].linkageArr.length) { + if (self.optionsSetup.componentLinkage && self.optionsSetup.componentLinkage.length) { + if (isActiveClick) { // 主动触发 + self.allComponentLinkage[self.widgetIndex].linkageArr.forEach(item => { + console.log(item) + console.log(`bus_${item.originId}_${item.targetId}`, ' -联动逻辑点击-发送消息', buttonConfig) + bus.$emit(`bus_${item.originId}_${item.targetId}`, buttonConfig.currentData) + }) + } else { // chart 组件 + self.$refs.myVChart.chart.on('click', function (params) { + self.allComponentLinkage[self.widgetIndex].linkageArr.forEach(item => { + console.log(`bus_${item.originId}_${item.targetId}`, ' -联动逻辑点击-发送消息', params) + console.log(self.value) + let message = {} + const widgetConfigTemp = getOneConfigByCode(self.value.widgetCode) + console.log('widgetConfigTemp', widgetConfigTemp) + if (widgetConfigTemp && widgetConfigTemp.paramsKey.length) { // 动态加载各组件的参数来封装 + widgetConfigTemp.paramsKey.forEach(key => { + message[key] = params[key] + }) + // 40@remarks 部分组件 传参需要特殊处理下 + // …… + // 40@remarks 专用于测试联动发消息 手动改造消息内容 + // if (self.value.widgetCode === 'widgetMap2d') { + // const nameTemp = ['苹果', '三星', '小米', '华为', 'OPPO', 'VIVO'] + // // message = { + // // name: nameTemp[(params.dataIndex % 6)], + // // value: params.value, + // // dataIndex: params.dataIndex + // // } + // // message.name = nameTemp[(+params.value % 6)] + // message.name = nameTemp[(parseInt(Math.random() * 6) % 6)] + // } + // if (self.value.widgetCode === 'widget-piechart') { + // message.name = (parseInt(Math.random() * 2) % 2) === 0 ? '深圳市' : '盐田区' + // } + } else { + message = { + name: params.name, + value: params.value + } + } + bus.$emit(`bus_${item.originId}_${item.targetId}`, message) + }) + }) + } + } +} + +/** + * 目标组件 - 初始化联动逻辑 + * @param self 组件实例对象 this + * @returns + */ +export const targetWidgetLinkageLogic = function (self) { + const busEvents = [] + // 有无有关联的组件 + if (!self.allComponentLinkage || !self.allComponentLinkage.length) return + self.allComponentLinkage.some(item => { + if (item.index !== -1 && item.linkageArr.length) { + item.linkageArr.some(obj => { + if (obj.targetId === self.value.setup.widgetId) { + self.hasLinkage = true + busEvents.push({ + eventName: `bus_${obj.originId}_${obj.targetId}`, + paramsConfig: obj.paramsConfig + }) + return true + } + }) + } + }) + if (self.hasLinkage) { + busEvents.forEach(item => { + bus.$on(item.eventName, e => { + console.log(item.eventName, ' 接收消息e', e) + self.setOptionsData(e, item.paramsConfig) + }) + }) + } +} diff --git a/src/views/bigscreenDesigner/designer/tools/configure/div/widget-html-slider.js b/src/views/bigscreenDesigner/designer/tools/configure/div/widget-html-slider.js new file mode 100644 index 0000000..3e1161e --- /dev/null +++ b/src/views/bigscreenDesigner/designer/tools/configure/div/widget-html-slider.js @@ -0,0 +1,105 @@ +/* + * @Descripttion: 轮播大屏 + */ +export const widgetHtmlSlider = { + code: 'widget-html-slider', + type: 'html', + tabName: '图层', + label: '轮播大屏', + icon: 'iconkuangjia', + options: { + // 配置 + setup: [ + { + type: 'el-input-text', + label: '图层名称', + name: 'layerName', + required: false, + placeholder: '', + value: '轮播大屏' + }, + { + type: 'el-select', + label: '轮播方向', + name: 'tabDirection', + required: false, + placeholder: '', + selectOptions: [ + {code: 'horizontal', name: '横向'}, + {code: 'vertical', name: '竖向'}, + ], + value: 'horizontal' + }, + { + type: 'el-select', + label: '类型', + name: 'tabType', + required: false, + placeholder: '', + selectOptions: [ + {code: '', name: '普通'}, + {code: 'card', name: '立体'}, + ], + value: '' + }, + { + type: 'el-input-number', + label: '轮播时间', + name: 'tabTime', + required: false, + placeholder: '', + value: 300000 + }, + [ + { + name: '地址设置', + list: [ + // { + // type: 'el-input-number', + // label: '', + // name: 'httpurl', + // required: false, + // value: '', + // }, + ], + }, + ], + ], + data:[], + // 坐标 + position: [ + { + type: 'el-input-number', + label: '左边距', + name: 'left', + required: false, + placeholder: '', + value: 0, + }, + { + type: 'el-input-number', + label: '上边距', + name: 'top', + required: false, + placeholder: '', + value: 0, + }, + { + type: 'el-input-number', + label: '宽度', + name: 'width', + required: false, + placeholder: '该容器在1920px大屏中的宽度', + value: 1920, + }, + { + type: 'el-input-number', + label: '高度', + name: 'height', + required: false, + placeholder: '该容器在1080px大屏中的高度', + value: 1080 + }, + ], + } +} diff --git a/src/views/bigscreenDesigner/designer/tools/main.js b/src/views/bigscreenDesigner/designer/tools/main.js index 2d7384e..0fb12aa 100644 --- a/src/views/bigscreenDesigner/designer/tools/main.js +++ b/src/views/bigscreenDesigner/designer/tools/main.js @@ -45,6 +45,7 @@ import {widgetBorderBoxFloat} from "./configure/div/widget-border-box-float"; import {widgetDigitalFlopSingle} from "./configure/texts/widget-digital-flop-single"; import {widgetSvg} from "./configure/div/widget-svg"; import {widgetRotateRanking} from "./configure/table/widget-rotate-ranking"; +import {widgetHtmlSlider} from "./configure/div/widget-html-slider"; export const widgetTool = [ @@ -97,5 +98,6 @@ export const widgetTool = [ widgetDigitalFlopSingle, widgetSvg, widgetRotateRanking, - widgetRadioPiechart + widgetRadioPiechart, + widgetHtmlSlider, ] diff --git a/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineStackChart.vue b/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineStackChart.vue index fd948bd..66ca643 100644 --- a/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineStackChart.vue +++ b/src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineStackChart.vue @@ -490,8 +490,10 @@ export default { //颜色 const customColor = optionsSetup.customColor; const arrColor = []; - for (let i = 0; i < customColor.length; i++) { - arrColor.push(customColor[i].color); + if(customColor){ + for (let i = 0; i < customColor.length; i++) { + arrColor.push(customColor[i].color); + } } this.options.xAxis.data = val.xAxis; this.options.yAxis.data = []; diff --git a/src/views/bigscreenDesigner/designer/widget/div/widgetHtmlSlider.vue b/src/views/bigscreenDesigner/designer/widget/div/widgetHtmlSlider.vue new file mode 100644 index 0000000..acff974 --- /dev/null +++ b/src/views/bigscreenDesigner/designer/widget/div/widgetHtmlSlider.vue @@ -0,0 +1,137 @@ +