diff --git a/data-room-ui/package.json b/data-room-ui/package.json index 15c4a87f..dd708752 100644 --- a/data-room-ui/package.json +++ b/data-room-ui/package.json @@ -1,6 +1,6 @@ { "name": "@gcpaas/data-room-ui", - "version": "2.0.1-2023102702-Alpha", + "version": "2.0.1-2023110701-Alpha", "description": "自定义大屏", "author": "gcpaas", "license": "MIT", diff --git a/data-room-ui/packages/BasicComponents/Numbers/index.vue b/data-room-ui/packages/BasicComponents/Numbers/index.vue index f28e5bdb..454e9c73 100644 --- a/data-room-ui/packages/BasicComponents/Numbers/index.vue +++ b/data-room-ui/packages/BasicComponents/Numbers/index.vue @@ -39,18 +39,10 @@ export default { methods: { // 通过表达式计算得来的值 getDataByExpression (config) { - // 如果表达式是由其他组件的值构成的 - // const len = this.config.expressionCodes ? this.config.expressionCodes.length : 0 - // const len1 = this.currentComputedDatas ? Object.keys(this.currentComputedDatas).length : 0 - // const len2 = this.currentDataset ? Object.keys(this.currentDataset).length : 0 - // if (len && len === len1 + len2) { - // eslint-disable-next-line no-new-func const result = new Function('dataset', 'computedDatas', this.config.expression) config.customize.title = result(this.dataset, this.computedDatas) // 同时将计算得来的值保存到公共的数据存储的地方 - this.updateComputedDatas({ code: config.code, name: config.name, data: config.customize.title }) - // this.changeChartConfig(config) - // } + this.updateComputedDatas({ code: config.code, title: config.title, data: config.customize.title, isExpression: true }) }, dataFormatting (config, data) { // 文本数据配置原则:选择数据集则以后端返回的数据为主,否则以设置面板中标题设置为准 diff --git a/data-room-ui/packages/BasicComponents/Numbers/setting.vue b/data-room-ui/packages/BasicComponents/Numbers/setting.vue index 60f5f1f2..35777728 100644 --- a/data-room-ui/packages/BasicComponents/Numbers/setting.vue +++ b/data-room-ui/packages/BasicComponents/Numbers/setting.vue @@ -43,11 +43,11 @@ /> 旋转 -
- -
+
+ +
基础
diff --git a/data-room-ui/packages/BasicComponents/Texts/index.vue b/data-room-ui/packages/BasicComponents/Texts/index.vue index 1cc6c5ec..430f184b 100644 --- a/data-room-ui/packages/BasicComponents/Texts/index.vue +++ b/data-room-ui/packages/BasicComponents/Texts/index.vue @@ -40,17 +40,15 @@ export default { // 通过表达式计算得来的值 getDataByExpression (config) { // 如果表达式是由其他组件的值构成的 - // const len = this.config.expressionCodes ? this.config.expressionCodes.length : 0 - // const len1 = this.currentComputedDatas ? Object.keys(this.currentComputedDatas).length : 0 - // const len2 = this.currentDataset ? Object.keys(this.currentDataset).length : 0 - // console.log('len', len, len1, len2) - // if (len && len === len1 + len2) { // eslint-disable-next-line no-new-func - const result = new Function('dataset', 'computedDatas', this.config.expression) - config.customize.title = result(this.dataset, this.computedDatas) - console.log(result(this.dataset, this.computedDatas)) + try { + const result = new Function('dataset', 'computedDatas', this.config.expression) + config.customize.title = result(this.dataset, this.computedDatas) + } catch (e) { + + } // 同时将计算得来的值保存到公共的数据存储的地方 - this.updateComputedDatas({ code: config.code, name: config.name, data: config.customize.title }) + this.updateComputedDatas({ code: config.code, title: config.title, data: config.customize.title }) // this.changeChartConfig(config) // } }, diff --git a/data-room-ui/packages/BasicComponents/Texts/setting.vue b/data-room-ui/packages/BasicComponents/Texts/setting.vue index b7b62147..00acf058 100644 --- a/data-room-ui/packages/BasicComponents/Texts/setting.vue +++ b/data-room-ui/packages/BasicComponents/Texts/setting.vue @@ -43,11 +43,11 @@ />
旋转 -
- -
+
+ +
基础
diff --git a/data-room-ui/packages/BigScreenDesign/MouseSelect/index.vue b/data-room-ui/packages/BigScreenDesign/MouseSelect/index.vue index 9c1fa69a..935bdabd 100644 --- a/data-room-ui/packages/BigScreenDesign/MouseSelect/index.vue +++ b/data-room-ui/packages/BigScreenDesign/MouseSelect/index.vue @@ -51,8 +51,10 @@ export default { }), getSelectionBoxStyle () { // 计算虚线框的样式 - const left = Math.min(this.startX, this.endX) + 'px' - const top = Math.min(this.startY, this.endY) + 'px' + let left = Math.min(this.startX, this.endX) + 'px' + let top = Math.min(this.startY, this.endY) + 'px' + const left1 = Math.min(this.startX, this.endX) + 50 * this.scale + 'px' + const top1 = Math.min(this.startY, this.endY) + 50 * this.scale + 'px' const width = Math.abs(this.endX - this.startX) + 'px' const height = Math.abs(this.endY - this.startY) + 'px' if (!this.isSelecting) { @@ -79,6 +81,7 @@ export default { ] ), handleMouseDown (event) { + // 点击在底部背景上 if (event.button === 0) { time = new Date() // 避免和shift + 点击多选组件冲突 @@ -86,11 +89,22 @@ export default { return } this.isSelectDown = true - - this.startX = (event.x - this.offsetX) / this.scale - this.startY = (event.y - this.offsetY) / this.scale - this.endX = (event.x - this.offsetX) / this.scale - this.endY = (event.y - this.offsetY) / this.scale + // 点击在底部背景上 + if (event.target.className.indexOf('mouse-select-wrap') !== -1) { + this.startX = event.offsetX + this.endX = event.offsetX + this.startY = event.offsetY + this.endY = event.offsetY + } else if (event.target.className.indexOf('design-drag-wrap') !== -1) { + this.startX = event.offsetX + 50 + this.endX = event.offsetX + 50 + this.startY = event.offsetY + 50 + this.endY = event.offsetY + 50 + } + // this.startX = (event.x - this.offsetX + 50) / this.scale + // this.startY = (event.y - this.offsetY + 50) / this.scale + // this.endX = (event.x - this.offsetX + 50) / this.scale + // this.endY = (event.y - this.offsetY + 50) / this.scale } }, handleMouseMove (event) { @@ -102,8 +116,13 @@ export default { this.isSelecting = true } if (this.isSelecting) { - this.endX = (event.x - this.offsetX) / this.scale - this.endY = (event.y - this.offsetY) / this.scale + if (event.target.className.indexOf('mouse-select-wrap') !== -1) { + this.endX = event.offsetX + this.endY = event.offsetY + } else if (event.target.className.indexOf('design-drag-wrap') !== -1) { + this.startX = event.offsetX + 50 + this.endY = event.offsetY + 50 + } } }, handleMouseUp (event) { diff --git a/data-room-ui/packages/BigScreenDesign/OverallSetting/BgImgDialog.vue b/data-room-ui/packages/BigScreenDesign/OverallSetting/BgImgDialog.vue index 8c52919f..4f69a5b7 100644 --- a/data-room-ui/packages/BigScreenDesign/OverallSetting/BgImgDialog.vue +++ b/data-room-ui/packages/BigScreenDesign/OverallSetting/BgImgDialog.vue @@ -82,6 +82,8 @@ @@ -75,6 +92,23 @@ export default { .el-icon-right{ width: 40px; text-align: center; + cursor: pointer; + + } + .el-icon-bottom{ + width: 40px; + text-align: center; + cursor: pointer; + } + .el-icon-back{ + width: 40px; + text-align: center; + cursor: pointer; + } + .el-icon-top { + width: 40px; + text-align: center; + cursor: pointer; } } diff --git a/data-room-ui/packages/BigScreenDesign/RightSetting/MoveDialog/index.vue b/data-room-ui/packages/BigScreenDesign/RightSetting/MoveDialog/index.vue index d8832872..c0f7bd6c 100644 --- a/data-room-ui/packages/BigScreenDesign/RightSetting/MoveDialog/index.vue +++ b/data-room-ui/packages/BigScreenDesign/RightSetting/MoveDialog/index.vue @@ -10,55 +10,57 @@ @closed="close" @opened="getDom" > -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
方向描述
左上角不能拉伸
右上角不能拉伸
左下角不能拉伸
右下角不能拉伸
左侧宽度不变,高度自动拉伸
右侧宽度不变,高度自动拉伸
顶部高度不变,宽度自动拉伸
底部高度不变,宽度自动拉伸
中部宽度,高度自动拉伸
-
-
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
方向描述
左上角不能拉伸
右上角不能拉伸
左下角不能拉伸
右下角不能拉伸
左侧宽度不变,高度自动拉伸
右侧宽度不变,高度自动拉伸
顶部高度不变,宽度自动拉伸
底部高度不变,宽度自动拉伸
中部宽度,高度自动拉伸
+
+
+
@@ -76,7 +78,7 @@ class="bs-el-input-number" :step=" 1" :min="0" - :max="100000" + :max="49" @change="changeRight" /> @@ -86,7 +88,7 @@ class="bs-el-input-number" :step=" 1" :min="0" - :max="100000" + :max="49" @change="changeBottom" /> @@ -96,14 +98,14 @@ class="bs-el-input-number" :step=" 1" :min="0" - :max="100000" + :max="49" @change="changeLeft" />
+ diff --git a/data-room-ui/packages/BigScreenDesign/RulerTool/SketchRuler.vue b/data-room-ui/packages/BigScreenDesign/RulerTool/SketchRuler.vue index d5856302..6544fee0 100644 --- a/data-room-ui/packages/BigScreenDesign/RulerTool/SketchRuler.vue +++ b/data-room-ui/packages/BigScreenDesign/RulerTool/SketchRuler.vue @@ -214,6 +214,10 @@ export default { scrollLeft = screenElement.scrollLeft scrollTop = screenElement.scrollTop maxContainer.addEventListener('mousemove', function (event) { + // 在鼠标移动过程中判断出鼠标左键未点击,则停止拖拽 + if (event.buttons !== 1) { + that.isDrag = false + } if (that.isDrag) { event.preventDefault() // 鼠标移动距离 @@ -427,52 +431,11 @@ export default { .screen-container { position: absolute; + overflow:hidden; width: 6000px; height: 6000px; } -.minimap{ - position: fixed; - bottom: 15px; - right: 15px; - border: 1px solid #f6f7fb; - z-index:10000; - /*cursor: move;*/ -} -.minimap .mapHeader{ - background-color:#303640; - padding: 0 10px; - display: flex; - justify-content: space-between; - height: 20px; - width: 150px; - font-size: 12px; - border-bottom: 1px solid #fff; - color: #ffffff; - cursor: pointer; - span { - user-select: none; - } -} - -.minimap .selectWin{ - background-color: #232832; - height: 150px; - width: 150px; - position: relative; -} - -.minimap .selectionWin{ - position: absolute; - left: 0px; - top: 0px; - width: 30px; - height: 30px; - background-color: white; - opacity: 0.5; - cursor: move; -} - .scale-value { position: absolute; left: 0; diff --git a/data-room-ui/packages/BigScreenDesign/index.vue b/data-room-ui/packages/BigScreenDesign/index.vue index 1533beef..2b46c39d 100644 --- a/data-room-ui/packages/BigScreenDesign/index.vue +++ b/data-room-ui/packages/BigScreenDesign/index.vue @@ -55,7 +55,6 @@ class="selectionWin" />
-
@@ -32,18 +32,26 @@ export default { }, data () { return { + borderWidth: 0, + borderHeight: 0 } }, computed: { - url(){ + url () { return require('data-room-ui/BorderComponents/GcBorder16/component.png') }, opacity () { return this.config.border.opacity || 100 }, - borderArray(){ - return this.config.border.borderArray ? this.config.border.borderArray - : [50,50,50,50] + borderImageArray () { + const borderArr = this.config.border.borderArray ? this.config.border.borderArray + : [10, 10, 10, 10] + const arr = [] + arr[0] = borderArr[0] * this.borderHeight / 100 + arr[1] = borderArr[1] * this.borderWidth / 100 + arr[2] = borderArr[2] * this.borderHeight / 100 + arr[3] = borderArr[3] * this.borderWidth / 100 + return arr } }, watch: { @@ -64,6 +72,10 @@ export default { } }, mounted () { + // 获取边框大小 + const element = document.querySelector('.bs-design-wrap') + this.borderWidth = element.offsetWidth + this.borderHeight = element.offsetHeight if(this.config.border.imgUrl){ let ur=this.config.border.imgUrl if(!this.config.border.imgUrl.startsWith('http')){ diff --git a/data-room-ui/packages/BorderComponents/GcBorder16/setting.js b/data-room-ui/packages/BorderComponents/GcBorder16/setting.js index 68792fa1..b96bc9c2 100644 --- a/data-room-ui/packages/BorderComponents/GcBorder16/setting.js +++ b/data-room-ui/packages/BorderComponents/GcBorder16/setting.js @@ -54,8 +54,8 @@ const setting = [ // 是否多选 multiple: false, // 绑定的值 - value: [50,50,50,50], - }, + value: [10, 10, 10, 10] + } ] diff --git a/data-room-ui/packages/G2Plots/柱状图/基础柱状图.js b/data-room-ui/packages/G2Plots/柱状图/基础柱状图.js index c94676a9..8db16f1d 100644 --- a/data-room-ui/packages/G2Plots/柱状图/基础柱状图.js +++ b/data-room-ui/packages/G2Plots/柱状图/基础柱状图.js @@ -389,7 +389,7 @@ const setting = [ value: '#d0d0d0', tabName: 'custom', groupName: 'yAxis' - }, + } // 边距 padding ] diff --git a/data-room-ui/packages/G2Plots/进度图/仪表盘.js b/data-room-ui/packages/G2Plots/进度图/仪表盘.js index de84471b..eeae9572 100644 --- a/data-room-ui/packages/G2Plots/进度图/仪表盘.js +++ b/data-room-ui/packages/G2Plots/进度图/仪表盘.js @@ -99,6 +99,18 @@ const setting = [ tabName: 'custom', groupName: 'graph' }, + { + label: '指标小数位', + // 设置组件类型 + type: 'inputNumber', + // 字段 + field: 'statistic_fixed', + // 对应options中的字段 + optionField: 'statisticFixed', + value: 0, + tabName: 'custom', + groupName: 'graph' + }, { label: '指标字体类型', // 设置组件类型 @@ -185,7 +197,11 @@ const data = [ } ] // 配置处理脚本 -const optionHandler ='option.range.color = [option.color1, option.color2]' +const optionHandler ='option.range.color = [option.color1, option.color2]\n' + + ' let fix = option.statisticFixed\n' + + ' option.statistic.title.formatter = ({ percent }) => `${(percent * 100).toFixed(fix)}%`' + + // 数据处理脚本 const dataHandler = '// 取返回数据列表的第一项指标值\noption.percent = data[0][setting.filter(settingItem=>settingItem.field === \'percent\')[0].value]' @@ -226,6 +242,7 @@ const option = { // shapeStyle: { // fill: 'rgba(208,208,208,0)' // }, + statisticFixed: 0, statistic: { title: { offsetY: 0, diff --git a/data-room-ui/packages/G2Plots/进度图/进度仪表盘.js b/data-room-ui/packages/G2Plots/进度图/进度仪表盘.js index 15ad569b..0fb9c1b5 100644 --- a/data-room-ui/packages/G2Plots/进度图/进度仪表盘.js +++ b/data-room-ui/packages/G2Plots/进度图/进度仪表盘.js @@ -75,6 +75,18 @@ const setting = [ tabName: 'custom', groupName: 'graph' }, + { + label: '指标小数位', + // 设置组件类型 + type: 'inputNumber', + // 字段 + field: 'statistic_fixed', + // 对应options中的字段 + optionField: 'statisticFixed', + value: 0, + tabName: 'custom', + groupName: 'graph' + }, { label: '指标字体类型', // 设置组件类型 @@ -160,7 +172,9 @@ const data = [ } ] // 配置处理脚本 -const optionHandler ='option.range.color = [option.color1, option.color2]' +const optionHandler ='option.range.color = [option.color1, option.color2]\n' + + ' let fix = option.statisticFixed\n' + + ' option.statistic.title.formatter = ({ percent }) => `${(percent * 100).toFixed(fix)}%`' // 数据处理脚本 const dataHandler = '// 取返回数据列表的第一项指标值\noption.percent = data[0][setting.filter(settingItem=>settingItem.field === \'percent\')[0].value]' @@ -175,6 +189,7 @@ const option = { range: { color: ['l(0) 0:#6b74e4 1:#4391f4','#d0d0d0'] }, + statisticFixed: 0, startAngle: Math.PI, endAngle: 2 * Math.PI, indicator: null, diff --git a/data-room-ui/packages/G2Plots/饼图/基础环图.js b/data-room-ui/packages/G2Plots/饼图/基础环图.js index 8db1cbab..8a6993e2 100644 --- a/data-room-ui/packages/G2Plots/饼图/基础环图.js +++ b/data-room-ui/packages/G2Plots/饼图/基础环图.js @@ -41,6 +41,37 @@ const setting = [ }, /** 样式配置 **/ // 图表 graph + { + label: '标签文本来源', + // 设置组件类型 + type: 'select', + // 字段 + field: 'label_contentList', + // 对应options中的字段 + optionField: 'label.contentList', + value: ['{value}'], + tabName: 'custom', + multiple: true, + options: [ + { label: '维度', value: '{name}' }, + { label: '指标', value: '{value}' }, + { label: '百分比', value: '{percentage}' }, + ], + step: 0.1, + max: 1, + groupName: 'graph' + }, + { + label: '旋转内部标签', + type: 'switch', // 设置组件类型 + field: 'labelAutoRotate', // 字段 + optionField: 'label.autoRotate', // 对应options中的字段 + value: false, + active: true, + inactive: false, + tabName: 'custom', + groupName: 'graph' + }, { label: '标签位置', // 设置组件类型 @@ -347,7 +378,25 @@ const data = [ const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;' + '\n if (option.legendEnable) {\n' + ' option.legend.itemName = option.legendItemName\n' + - ' }' + ' }' + + `if (option.label.contentList && option.label.contentList.length > 0) { + let content = '' + if (option.label.contentList.length === 1) { + content = option.label.contentList[0] + } else { + // 多行文本,加换行符,但是最后一行不加 + option.label.contentList.forEach((item, index) => { + if (index === option.label.contentList.length - 1) { + content += item + } else { + content += item + '\\n' + } + }) + } + option.label.content = content +}` + + // 数据处理脚本 const dataHandler = '' @@ -376,6 +425,7 @@ const option = { color: ['#6b74e4', '#4391f4', '#38bbe5', '#69d6fd', '#36c6a0'], label: { type: 'inner', + autoRotate: false, labelLine: { style: { stroke: '#5B8FF9', @@ -383,6 +433,7 @@ const option = { lineWidth: 1 } }, + contentList: [], content: '{value}', style: { fill: '#ffffff', diff --git a/data-room-ui/packages/G2Plots/饼图/基础饼图.js b/data-room-ui/packages/G2Plots/饼图/基础饼图.js index 5102eff7..6c995819 100644 --- a/data-room-ui/packages/G2Plots/饼图/基础饼图.js +++ b/data-room-ui/packages/G2Plots/饼图/基础饼图.js @@ -41,6 +41,25 @@ const setting = [ }, /** 样式配置 **/ // 图表 graph + { + label: '标签文本来源', + // 设置组件类型 + type: 'select', + // 字段 + field: 'label_content', + // 对应options中的字段 + optionField: 'label.content', + value: '{value}', + tabName: 'custom', + options: [ + { label: '维度', value: '{name}' }, + { label: '指标', value: '{value}' }, + { label: '百分比', value: '{percentage}' } + ], + step: 0.1, + max: 1, + groupName: 'graph' + }, { label: '标签位置', // 设置组件类型 @@ -58,6 +77,17 @@ const setting = [ ], groupName: 'graph' }, + { + label: '旋转内部标签', + type: 'switch', // 设置组件类型 + field: 'labelAutoRotate', // 字段 + optionField: 'label.autoRotate', // 对应options中的字段 + value: true, + active: true, + inactive: false, + tabName: 'custom', + groupName: 'graph' + }, { label: '标签颜色', // 设置组件类型 @@ -239,6 +269,7 @@ const option = { }, color: ['#6b74e4', '#4391f4', '#38bbe5', '#69d6fd', '#36c6a0'], label: { + autoRotate: true, type: 'inner', labelHeight: 50, labelLine: { diff --git a/data-room-ui/packages/PlotRender/index.vue b/data-room-ui/packages/PlotRender/index.vue index b67a2f38..dc798981 100644 --- a/data-room-ui/packages/PlotRender/index.vue +++ b/data-room-ui/packages/PlotRender/index.vue @@ -147,7 +147,9 @@ export default { let option = null config.setting.forEach(set => { if (set.optionField) { + // 例 point.style.fill const optionField = set.optionField.split('.') + // 例 [point,style,fill] option = config.option optionField.forEach((field, index) => { if (index === optionField.length - 1) { @@ -156,6 +158,10 @@ export default { option[field] = set.value } } else { + // 如果没有这个属性,则创建该属性,并赋值为空对值 + if (!option[field]) { + option[field] = {} + } option = option[field] } }) @@ -180,7 +186,7 @@ export default { console.error(e) } } - if(config.chartType=='Treemap'){ + if (config.chartType == 'Treemap') { const xAxis = config.setting.find(item => item.field === 'xField')?.value const listData = data.children.map(item => { if (xAxis && typeof item[xAxis] === 'number') { @@ -188,14 +194,26 @@ export default { } return item }) - config.option.data={name:'root',children:[...listData]} + config.option.data = { name: 'root', children: [...listData] } // console.log(config.option.data) - }else{ - // 如果维度为数字类型则转化为字符串,否则在不增加其他配置的情况下会导致图标最后一项不显示(g2plot官网已说明) + } else { + // 如果维度为数字类型则转化为字符串,否则在不增加其他配置的情况下会导致图标最后一项不显示(g2plot官网已说明) const xAxis = config.setting.find(item => item.field === 'xField')?.value + const yAxis = config.setting.find(item => item.field === 'yField')?.value config.option.data = data?.map(item => { - if (xAxis && typeof item[xAxis] === 'number') { + // 此处函数处理data + if (config.dataHandler) { + try { + // 此处函数处理data + eval(config.dataHandler) + } catch (e) { + console.error(e) + } + } + if (config.chartType !== 'Bar' && xAxis && typeof item[xAxis] === 'number') { item[xAxis] = (item[xAxis]).toString() + } else if (config.chartType === 'Bar' && yAxis && typeof item[yAxis] === 'number') { + item[yAxis] = (item[yAxis]).toString() } return item }) diff --git a/data-room-ui/packages/Render/index.vue b/data-room-ui/packages/Render/index.vue index 997360bc..9eced1aa 100644 --- a/data-room-ui/packages/Render/index.vue +++ b/data-room-ui/packages/Render/index.vue @@ -7,7 +7,7 @@ width: pageInfo.pageConfig.w + 'px', height: pageInfo.pageConfig.h + 'px', backgroundColor:pageInfo.pageConfig.customTheme ==='light' ? pageInfo.pageConfig.lightBgColor:pageInfo.pageConfig.bgColor , - backgroundImage:pageInfo.pageConfig.customTheme ==='light' ? `url(${pageInfo.pageConfig.lightBg})`:`url(${pageInfo.pageConfig.bg})` + backgroundImage:pageInfo.pageConfig.customTheme ==='light' ? `url(${this.getCoverPicture(pageInfo.pageConfig.lightBg)})`:`url(${this.getCoverPicture(pageInfo.pageConfig.bg)})` }" @drop="drop($event)" @dragover.prevent @@ -34,7 +34,7 @@ :debug="false" :is-conflict-check="false" :snap="true" - :snap-tolerance="2" + :snap-tolerance="snapTolerance" :style="{ zIndex: chart.z || 0, }" @@ -92,6 +92,7 @@ import { randomString } from '../js/utils' import { compile } from 'tiny-sass-compiler/dist/tiny-sass-compiler.esm-browser.prod.js' import plotList, { getCustomPlots } from '../G2Plots/plotList' import { settingToTheme } from 'data-room-ui/js/utils/themeFormatting' +import { getFileUrl } from 'data-room-ui/js/utils/file' export default { name: 'BigScreenRender', @@ -128,7 +129,8 @@ export default { hoverCode: (state) => state.bigScreen.hoverCode, themeJson: (state) => state.bigScreen.pageInfo.pageConfig.themeJson, isInit: (state) => !state.bigScreen.pageLoading, - scale: (state) => state.bigScreen.zoom / 100 + scale: (state) => state.bigScreen.zoom / 100, + snapTolerance: (state) => state.bigScreen.snapTolerance }) }, watch: { @@ -370,7 +372,7 @@ export default { code: !chart.code ? randomString(8) : chart.code, option } - config.key = config.code + config.key = isComponent ? randomString(8) : config.code // isComponent = false 从左侧新增时需要初始化theme的内容 // isComponent = true从组件库添加自定义组件时不用初始化 if (!isComponent) { @@ -454,6 +456,14 @@ export default { }) }) } + }, + /** + * 获取图片访问地址,如果是相对路径则拼接上文件访问前缀地址 + * @param url + * @returns {*} + */ + getCoverPicture (url) { + return getFileUrl(url) } } } diff --git a/data-room-ui/packages/js/mixins/commonMixins.js b/data-room-ui/packages/js/mixins/commonMixins.js index 3aa2b62c..0fe0f85e 100644 --- a/data-room-ui/packages/js/mixins/commonMixins.js +++ b/data-room-ui/packages/js/mixins/commonMixins.js @@ -26,8 +26,8 @@ export default { } }, currentDataset: { // 关联的数据发生变化 - handler (val) { - if (val && Object.keys(val).length) { + handler (val, old) { + if (val && Object.keys(val).length && JSON.stringify(val) !== JSON.stringify(old)) { this.getDataByExpression(this.config) } }, @@ -35,8 +35,8 @@ export default { immediate: true }, currentComputedDatas: { // 关联的数据发生变化 - handler (val) { - if (val && Object.keys(val).length) { + handler (val, old) { + if (val && Object.keys(val).length && JSON.stringify(val) !== JSON.stringify(old)) { this.getDataByExpression(this.config) } }, @@ -62,9 +62,13 @@ export default { // 跟当前组件计算表达式关联的组件的数据集合 currentDataset () { const newDataset = {} - this.config.expressionCodes?.forEach(code => { - if (this.dataset[code]) { - newDataset[code] = this.dataset[code] + this.config.expressionCodes?.forEach(item => { + const code = item.split('_')[1] + for (const key in this.dataset) { + const objCode = key.split('_')[1] + if (objCode === code) { + newDataset[code] = this.dataset[key] + } } }) return newDataset @@ -72,9 +76,13 @@ export default { // 跟当前组件计算表达式关联的组件的数据集合 currentComputedDatas () { const newDataset = {} - this.config.expressionCodes?.forEach(code => { - if (this.computedDatas[code]) { - newDataset[code] = this.computedDatas[code] + this.config.expressionCodes?.forEach(item => { + const code = item.split('_')[1] + for (const key in this.computedDatas) { + const objCode = key.split('_')[1] + if (objCode === code) { + newDataset[code] = this.computedDatas[key] + } } }) return newDataset @@ -170,7 +178,7 @@ export default { } // 将后端返回的数据保存 if (_res.success) { - this.updateDataset({ code: config.code, name: config.name, data: _res?.data }) + this.updateDataset({ code: config.code, title: config.title, data: _res?.data }) } config = this.dataFormatting(config, _res) this.changeChartConfig(config) @@ -242,7 +250,7 @@ export default { } // 将后端返回的数据保存 if (_res.success) { - this.updateDataset({ code: config.code, name: config.name, data: _res?.data }) + this.updateDataset({ code: config.code, title: config.title, data: _res?.data }) } config = this.dataFormatting(config, _res) if (this.chart) { diff --git a/data-room-ui/packages/js/store/actions.js b/data-room-ui/packages/js/store/actions.js index f2df60f8..b3b5e70e 100644 --- a/data-room-ui/packages/js/store/actions.js +++ b/data-room-ui/packages/js/store/actions.js @@ -17,32 +17,41 @@ export default { // 配置兼容 const pageInfo = handleResData(data) // 兼容边框配置 - pageInfo.chartList.forEach((item) => { - if (item.dataSource) { - item.dataSource.source = item.dataSource?.source || 'dataset' + pageInfo.chartList.forEach((chart) => { + if (chart.dataSource) { + chart.dataSource.source = chart.dataSource?.source || 'dataset' } - if (!item.border) { - item.border = { type: '', titleHeight: 60, fontSize: 16, isTitle: true, padding: [0, 0, 0, 0] } + if (!chart.border) { + chart.border = { type: '', titleHeight: 60, fontSize: 16, isTitle: true, padding: [0, 0, 0, 0] } } - if (!item.border.padding) { - item.border.padding = [0, 0, 0, 0] + if (!chart.border.padding) { + chart.border.padding = [0, 0, 0, 0] } - if (item.type == 'customComponent') { - plotSettings[Symbol.iterator] = function * () { - const keys = Object.keys(plotSettings) - for (const k of keys) { - yield [k, plotSettings[k]] + let plotSettingsIterator = false + if (chart.type == 'customComponent') { + // 为本地G2组件配置添加迭代器 + if (!plotSettingsIterator) { + plotSettings[Symbol.iterator] = function * () { + const keys = Object.keys(plotSettings) + for (const k of keys) { + yield [k, plotSettings[k]] + } } } - for (const [key, value] of plotSettings) { - if (item.name == value.name) { - const settings = JSON.parse(JSON.stringify(value.setting)) - item.setting = settings.map((x) => { - const index = item.setting.findIndex(y => y.field == x.field) - x.field = item.setting[index].field - x.value = item.setting[index].value - return x + for (const [key, localPlotSetting] of plotSettings) { + if (chart.name == localPlotSetting.name) { + // 本地配置项 + const localSettings = JSON.parse(JSON.stringify(localPlotSetting.setting)) + chart.setting = localSettings.map((localSet) => { + // 在远程组件配置中找到 与 本地组件的配置项 相同的项索引 + const index = chart.setting.findIndex(remoteSet => remoteSet.field == localSet.field) + if (index !== -1) { + // 使用远程的值替换本地值 + localSet.field = chart.setting[index].field + localSet.value = chart.setting[index].value + } + return localSet }) } } diff --git a/data-room-ui/packages/js/store/mutations.js b/data-room-ui/packages/js/store/mutations.js index b8070e49..17f8fa02 100644 --- a/data-room-ui/packages/js/store/mutations.js +++ b/data-room-ui/packages/js/store/mutations.js @@ -14,6 +14,7 @@ import { defaultData } from './state' import moment from 'moment' import { randomString } from 'data-room-ui/js/utils' import { EventBus } from 'data-room-ui/js/utils/eventBus' +import CloneDeep from 'lodash-es/cloneDeep' export default { // 改变页面基本信息,后端请求的页面信息存储到此处 changePageInfo (state, pageInfo) { @@ -372,11 +373,27 @@ export default { }, // 更新数据集库中的内容 updateDataset (state, res) { - Vue.set(state.dataset, res.name + res.code, res.data) + // 如果只是更新了组件的标题 + if (res.oldTitle && state.dataset.hasOwnProperty(res.oldTitle + '_' + res.code)) { + const _dataset = CloneDeep(state.dataset) + _dataset[res.title + '_' + res.code] = _dataset[res.oldTitle + '_' + res.code] + delete _dataset[res.oldTitle + '_' + res.code] + state.dataset = CloneDeep(_dataset) + } else { + Vue.set(state.dataset, res.title + '_' + res.code, res.data) + } }, // 更新数据集库中的内容 updateComputedDatas (state, res) { - Vue.set(state.computedDatas, res.name + res.code, res.data) + // 如果只是更新了组件的标题 + if (res.oldTitle && state.computedDatas.hasOwnProperty(res.oldTitle + '_' + res.code)) { + const _computedDatas = CloneDeep(state.computedDatas) + _computedDatas[res.title + '_' + res.code] = _computedDatas[res.oldTitle + '_' + res.code] + delete _computedDatas[res.oldTitle + '_' + res.code] + state.computedDatas = CloneDeep(_computedDatas) + } else if (res.isExpression) { + Vue.set(state.computedDatas, res.title + '_' + res.code, res.data) + } }, // 清空数据集库 emptyDataset (state) { @@ -385,6 +402,10 @@ export default { // 清空数据集库 emptyComputedDatas (state) { state.computedDatas = {} + }, + // 修改磁吸状态 + snapChange (state, snap) { + state.snapTolerance = snap } } function deldataset (state, type, codes) { diff --git a/data-room-ui/packages/js/store/state.js b/data-room-ui/packages/js/store/state.js index 28b4a200..59c0f2e8 100644 --- a/data-room-ui/packages/js/store/state.js +++ b/data-room-ui/packages/js/store/state.js @@ -68,7 +68,9 @@ export const defaultData = { // 页面上所有组件的数据集的数据信息 dataset: {}, // 页面上所有组件的数据集的数据信息 - computedDatas: {} + computedDatas: {}, + // 是否开启磁吸 + snapTolerance: 3 } export default () => ({