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 () => ({