diff --git a/data-room-ui/packages/BasicComponents/Texts/index.vue b/data-room-ui/packages/BasicComponents/Texts/index.vue
index 45e547b4..d55e9ad9 100644
--- a/data-room-ui/packages/BasicComponents/Texts/index.vue
+++ b/data-room-ui/packages/BasicComponents/Texts/index.vue
@@ -38,16 +38,17 @@ export default {
},
methods: {
// 通过表达式计算得来的值
- // getDataByExpression (config) {
- // if (this.config.expression) {
- // // eslint-disable-next-line no-new-func
- // const result = new Function('dataset', this.config.expression)
- // config.customize.title = result(this.dataset)
- // // 同时将计算得来的值保存到公共的数据存储的地方
- // this.updateDataset({ code: config.code, title: config.title, data: [{ title: config.customize.title }] })
- // this.changeChartConfig(config)
- // }
- // },
+ getDataByExpression (config) {
+ // 如果表达式是由其他组件的值构成的
+ if (this.config.expressionCodes && this.config.expressionCodes.length) {
+ // 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, title: config.title, data: config.customize.title })
+ // this.changeChartConfig(config)
+ }
+ },
dataFormatting (config, data) {
// 文本数据配置原则:选择数据集则以后端返回的数据为主,否则以设置面板中标题设置为准
if (config.dataSource.businessKey) {
diff --git a/data-room-ui/packages/BasicComponents/Texts/setting.vue b/data-room-ui/packages/BasicComponents/Texts/setting.vue
index 3a533a0e..d442a514 100644
--- a/data-room-ui/packages/BasicComponents/Texts/setting.vue
+++ b/data-room-ui/packages/BasicComponents/Texts/setting.vue
@@ -21,7 +21,7 @@
prop="title"
>
diff --git a/data-room-ui/packages/BasicComponents/Texts/settingConfig.js b/data-room-ui/packages/BasicComponents/Texts/settingConfig.js
index 955e3e4d..492326c2 100644
--- a/data-room-ui/packages/BasicComponents/Texts/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/Texts/settingConfig.js
@@ -23,6 +23,14 @@ export const settingConfig = {
label: '维度', // 维度/查询字段
enable: false,
multiple: true // 是否多选
+ },
+ text: { // 文本占位符
+ label: '文本内容', // 维度/查询字段
+ enable: true
+ },
+ expression: { // 文本占位符
+ label: '表达式', // 维度/查询字段
+ enable: true
}
}
}
diff --git a/data-room-ui/packages/BigScreenDesign/RightSetting/DataSetting.vue b/data-room-ui/packages/BigScreenDesign/RightSetting/DataSetting.vue
index 50eb20da..58cae785 100644
--- a/data-room-ui/packages/BigScreenDesign/RightSetting/DataSetting.vue
+++ b/data-room-ui/packages/BigScreenDesign/RightSetting/DataSetting.vue
@@ -38,6 +38,25 @@
+
+
+
+
+
+
{
:config="config"
:source-field-list="sourceFieldList"
/>
+
@@ -589,13 +612,15 @@ import ComponentBinding from 'data-room-ui/BigScreenDesign/RightSetting/Componen
import dataSetSelect from 'data-room-ui/DataSetSetting/index.vue'
import { mapState } from 'vuex'
import { getDataSetDetails } from 'data-room-ui/js/api/bigScreenApi'
+import ExpressionDialog from 'data-room-ui/BigScreenDesign/RightSetting/ExpressionDialog.vue'
export default {
name: 'DataSetting',
components: {
ComponentRelation,
ComponentBinding,
dataSetSelect,
- ElDragSelect
+ ElDragSelect,
+ ExpressionDialog
},
data () {
return {
@@ -720,6 +745,10 @@ export default {
}
},
methods: {
+ // 打开表达式弹窗
+ openExpression () {
+ this.$refs.expressionDialog.init()
+ },
// 切换前后端分页
serverPaginationChange (val) {
this.config.customize.webPagination = !val
@@ -750,7 +779,7 @@ export default {
this.fieldsList = res.fields
// 初始化时以组件本来的参数设置为主
if (type === 'initial') {
- let deleteKeys = []
+ const deleteKeys = []
for (const key in this.config.dataSource.params) {
const param = res?.params?.find(field => field.name === key)
// 如果组件参数在数据集中找不到,说明参数已经被删除,不需要再显示
@@ -925,6 +954,12 @@ export default {
justify-content: center;
}
}
+ //表达式样式
+ .expression{
+ &:hover{
+ cursor: pointer;
+ }
+ }
// 修改设置面板样式
.data-setting-box{
.data-setting-data-box{
diff --git a/data-room-ui/packages/BigScreenDesign/RightSetting/ExpressionDialog.vue b/data-room-ui/packages/BigScreenDesign/RightSetting/ExpressionDialog.vue
new file mode 100644
index 00000000..f4062523
--- /dev/null
+++ b/data-room-ui/packages/BigScreenDesign/RightSetting/ExpressionDialog.vue
@@ -0,0 +1,221 @@
+
+
+
+
+
+
+
+
+
+
+ 运行脚本
+
+
+
+ {{ scriptContent }}
+
+
+
+
+
+
+
+
+
+
diff --git a/data-room-ui/packages/BigScreenDesign/index.vue b/data-room-ui/packages/BigScreenDesign/index.vue
index e75cc4f9..a87b7029 100644
--- a/data-room-ui/packages/BigScreenDesign/index.vue
+++ b/data-room-ui/packages/BigScreenDesign/index.vue
@@ -284,7 +284,9 @@ export default {
'saveTimeLine',
'changeIframeDialog',
'changePageInfo',
- 'changeActiveItemConfig'
+ 'changeActiveItemConfig',
+ 'emptyDataset',
+ 'emptyComputedDatas'
]),
// 判断页面权限
permission () {
@@ -426,6 +428,9 @@ export default {
})
.then(() => {
this.changeLayout([])
+ // 清空缓存的数据库的内容
+ this.emptyDataset()
+ this.emptyComputedDatas()
this.resetPresetLine()
this.saveTimeLine('清空画布')
})
diff --git a/data-room-ui/packages/js/mixins/commonMixins.js b/data-room-ui/packages/js/mixins/commonMixins.js
index a39abaf0..ef43ee6a 100644
--- a/data-room-ui/packages/js/mixins/commonMixins.js
+++ b/data-room-ui/packages/js/mixins/commonMixins.js
@@ -19,12 +19,70 @@ export default {
dataLoading: false
}
},
+ watch: {
+ 'config.expression': { // 表达式发生变化
+ handler (val) {
+ this.getDataByExpression(this.config)
+ }
+ },
+ currentDataset: { // 关联的数据发生变化
+ handler (val) {
+ if (val && Object.keys(val).length) {
+ this.getDataByExpression(this.config)
+ }
+ },
+ deep: true,
+ immediate: true
+ },
+ currentComputedDatas: { // 关联的数据发生变化
+ handler (val) {
+ if (val && Object.keys(val).length) {
+ this.getDataByExpression(this.config)
+ }
+ },
+ deep: true,
+ immediate: true
+ }
+ },
computed: {
...mapState({
pageCode: state => state.bigScreen.pageInfo.code,
customTheme: state => state.bigScreen.pageInfo.pageConfig.customTheme,
activeCode: state => state.bigScreen.activeCode
+ // dataset: state => state.bigScreen.dataset
}),
+ // 所有组件的数据集合
+ dataset () {
+ return this.$store.state.bigScreen.dataset
+ },
+ // 所有组件的数据集合
+ computedDatas () {
+ return this.$store.state.bigScreen.computedDatas
+ },
+ // 跟当前组件计算表达式关联的组件的数据集合
+ currentDataset () {
+ // ['RiTkJGDa','PEKwsHbf']this.config.expressionCodes
+ const newDataset = this.config.expressionCodes?.map(code => {
+ return this.dataset[code]
+ })
+ if (newDataset?.some(item => !item)) {
+ return null
+ } else {
+ return newDataset
+ }
+ },
+ // 跟当前组件计算表达式关联的组件的数据集合
+ currentComputedDatas () {
+ // ['RiTkJGDa','PEKwsHbf']this.config.expressionCodes
+ const newDataset = this.config.expressionCodes?.map(code => {
+ return this.computedDatas[code]
+ })
+ if (newDataset?.some(item => !item)) {
+ return null
+ } else {
+ return newDataset
+ }
+ },
// 组件数据加载时的背景颜色
loadingBackground () {
return this.customTheme === 'light' ? '#ffffff' : '#151A26'
@@ -33,6 +91,7 @@ export default {
return (this.$route.path === window?.BS_CONFIG?.routers?.previewUrl) || (this.$route.path === '/big-screen/preview')
}
},
+
mounted () {
if (!['tables', 'flyMap', 'map'].includes(this.config.type)) {
this.chartInit()
@@ -42,7 +101,9 @@ export default {
methods: {
...mapMutations({
changeChartConfig: 'bigScreen/changeChartConfig',
- changeActiveItemConfig: 'bigScreen/changeActiveItemConfig'
+ changeActiveItemConfig: 'bigScreen/changeActiveItemConfig',
+ updateDataset: 'bigScreen/updateDataset',
+ updateComputedDatas: 'bigScreen/updateComputedDatas'
}),
/**
* 初始化组件
@@ -110,6 +171,10 @@ export default {
}
}
}
+ // 将后端返回的数据保存
+ if (_res.success) {
+ this.updateDataset({ code: config.code, title: config.title, data: _res?.data })
+ }
config = this.dataFormatting(config, _res)
this.changeChartConfig(config)
}).catch((err) => {
@@ -173,6 +238,10 @@ export default {
}
}
}
+ // 将后端返回的数据保存
+ if (_res.success) {
+ this.updateDataset({ code: config.code, title: config.title, data: _res?.data })
+ }
config = this.dataFormatting(config, _res)
if (this.chart) {
// 单指标组件和多指标组件的changeData传参不同
@@ -209,6 +278,10 @@ export default {
newChart (option) {
// 覆盖
},
+ // 通过表达式计算获取组件的值
+ getDataByExpression (config) {
+ // 覆盖
+ },
changeStyle (config) {
config = { ...this.config, ...config }
// 样式改变时更新主题配置
diff --git a/data-room-ui/packages/js/store/mutations.js b/data-room-ui/packages/js/store/mutations.js
index a5e7f32c..74e375fd 100644
--- a/data-room-ui/packages/js/store/mutations.js
+++ b/data-room-ui/packages/js/store/mutations.js
@@ -163,16 +163,18 @@ export default {
EventBus.$emit('deleteComponent', codes)
}
state.pageInfo.chartList = state.pageInfo.chartList.filter(chart => codes !== chart.code)
+ // 删除组件时,将该组件的缓存数据库中的数据也删除
+ deldataset(state, 'dataset', codes)
+ deldataset(state, 'computedDatas', codes)
}
// 存储删除后的状态
saveTimeLineFunc(state, '删除组件')
- if (state.pageInfo.chartList.findIndex(item=>item.code===state.activeCode)==-1) {
+ if (state.pageInfo.chartList.findIndex(item => item.code === state.activeCode) == -1) {
state.activeItemConfig = null
state.activeCode = null
EventBus.$emit('closeRightPanel')
}
// 发送事件,关闭配置面板
-
},
changePageConfig (state, pageConfig) {
Vue.set(state.pageInfo, 'pageConfig', cloneDeep(pageConfig))
@@ -367,6 +369,33 @@ export default {
})
// 将复制的组件添加到chartList中
state.pageInfo.chartList = [...copyCharts, ...state.pageInfo.chartList]
+ },
+ // 更新数据集库中的内容
+ updateDataset (state, res) {
+ Vue.set(state.dataset, res.title + res.code, res.data)
+ },
+ // 更新数据集库中的内容
+ updateComputedDatas (state, res) {
+ Vue.set(state.computedDatas, res.title + res.code, res.data)
+ },
+ // 清空数据集库
+ emptyDataset (state) {
+ state.dataset = {}
+ },
+ // 清空数据集库
+ emptyComputedDatas (state) {
+ state.computedDatas = {}
+ }
+}
+function deldataset (state, type, codes) {
+ const datasets = state[type]
+ for (const code of codes) {
+ for (const key in datasets) {
+ if (key.endsWith(code)) {
+ delete state[type][key]
+ break // 找到匹配的属性后,退出内层循环
+ }
+ }
}
}
function changeZIndexFuc (state, list) {
diff --git a/data-room-ui/packages/js/store/state.js b/data-room-ui/packages/js/store/state.js
index 14197334..28b4a200 100644
--- a/data-room-ui/packages/js/store/state.js
+++ b/data-room-ui/packages/js/store/state.js
@@ -64,7 +64,11 @@ export const defaultData = {
zoom: 100,
// 自适应下的缩放比例
fitZoom: 100,
- iframeDialog: false
+ iframeDialog: false,
+ // 页面上所有组件的数据集的数据信息
+ dataset: {},
+ // 页面上所有组件的数据集的数据信息
+ computedDatas: {}
}
export default () => ({