fix:图表组件，表格组件添加数据加载状态

data-room-ui/packages/BasicComponents/ScreenScrollBoard/index.vue

@@ -1,5 +1,7 @@
 <template>
   <div
+    v-loading="config.loading"
+    element-loading-text="数据加载中"
     style="width: 100%;height: 100%"
     class="bs-design-wrap"
   >

data-room-ui/packages/BasicComponents/ScreenScrollBoard/settingConfig.js

@@ -32,7 +32,8 @@ const customConfig = {
   type: 'screenScrollBoard',
   root: {
     version: '2023071001',
-    contribution: false
+    contribution: false,
+    loading: false
   },
   customize: {
     rowNum: 5,

data-room-ui/packages/BasicComponents/ScreenScrollRanking/index.vue

@@ -1,5 +1,7 @@
 <template>
   <div
+    v-loading="config.loading"
+    element-loading-text="数据加载中"
     style="width: 100%;height: 100%"
     class="bs-design-wrap"
   >

data-room-ui/packages/BasicComponents/ScreenScrollRanking/settingConfig.js

@@ -26,7 +26,8 @@ const customConfig = {
   type: 'screenScrollRanking',
   root: {
     version: '2023071001',
-    contribution: false
+    contribution: false,
+    loading: false
   },
   customize: {
     rowNum: 5,

data-room-ui/packages/BasicComponents/Tables/index.vue

@@ -1,5 +1,7 @@
 <template>
   <div
+    v-loading="config.loading"
+    element-loading-text="数据加载中"
     style="width: 100%;height: 100%"
     class="bs-design-wrap "
   >

data-room-ui/packages/BasicComponents/Tables/settingConfig.js

@@ -34,8 +34,10 @@ const customConfig = {
   type: 'tables',
   root: {
     version: '2023071001',
-    contribution: false
+    contribution: false,
+    loading: false
   },
+
   customize: {
     theme: 'dark', // 'light'、'dark'
     // 表格头部背景颜色

data-room-ui/packages/BigScreenDesign/RightSetting/index.vue

@@ -99,7 +99,8 @@ export default {
         dataSource: cloneDeep(this.config.dataSource),
         linkage: cloneDeep(this.config?.linkage),
         dataHandler: this.config?.dataHandler,
-        dataSourceSetting: cloneDeep(this.config?.setting?.filter(item => item.tabName === 'data')) || []
+        dataSourceSetting: cloneDeep(this.config?.setting?.filter(item => item.tabName === 'data')) || [],
+        code: this.config?.code
       }
     },
     configStyle () {
@@ -131,6 +132,7 @@ export default {
     // 更新数据源部分，需要调用接口
     configDataSource: {
       handler (val, oldValue) {
+        console.log('oldValue', oldValue)
         this.handleConfigChange(val, oldValue, 'configDataSource')
       },
       deep: true
@@ -150,17 +152,19 @@ export default {
       }, delay)
     },
     handleConfigChange (val, oldValue, type) {
-      if (!isEqual(val, oldValue)) {
+      if (val.code === oldValue.code) {
-        if (type === 'configStyle') {
+        if (!isEqual(val, oldValue)) {
-          if (this.config.type === 'iframeChart') {
+          if (type === 'configStyle') {
-            this.debounce(500, { ...val, type: this.config.type, code: this.config.code, parentCode: this.config?.parentCode })
+            if (this.config.type === 'iframeChart') {
+              this.debounce(500, { ...val, type: this.config.type, code: this.config.code, parentCode: this.config?.parentCode })
+            } else {
+              this.$emit('updateSetting', { ...val, type: this.config.type, code: this.config.code, theme: this.config.theme, parentCode: this.config?.parentCode })
+            }
           } else {
-            this.$emit('updateSetting', { ...val, type: this.config.type, code: this.config.code, theme: this.config.theme, parentCode: this.config?.parentCode })
+            this.$emit('updateDataSetting', this.config)
           }
-        } else {
+          this.saveTimeLine(`更新${val?.title ?? this.config.title}组件属性`)
-          this.$emit('updateDataSetting', this.config)
         }
-        this.saveTimeLine(`更新${val?.title ?? this.config.title}组件属性`)
       }
     },
     close () {

data-room-ui/packages/G2Plots/plotList.js

@@ -43,6 +43,7 @@ function getPlotList (files) {
       y: 0,
       type: 'customComponent',
       chartType: config.chartType,
+      loading: false,
       option: {
         ...config.option,
         ...cloneDeep(settingConfig)

data-room-ui/packages/PlotRender/index.vue

@@ -1,5 +1,7 @@
 <template>
   <div
+    v-loading="config.loading"
+    element-loading-text="图表加载中"
     style="width: 100%;height: 100%"
     class="bs-design-wrap bs-custom-component"
     :class="{'light-theme':customTheme === 'light','auto-theme':customTheme !=='light'}"
@@ -8,6 +10,7 @@
       :id="chatId"
       style="width: 100%;height: 100%"
     />
+    <!--    <span style="color:#ffffff">{{config.option.data}}</span>-->
   </div>
 </template>
 <script>
@@ -80,7 +83,7 @@ export default {
     }
   },
   methods: {
-    ...mapMutations('bigScreen', ['changeChartConfig', 'changeActiveItemConfig']),
+    ...mapMutations('bigScreen', ['changeChartConfig', 'changeActiveItemConfig', 'changeChartLoading']),
     chartInit () {
       let config = this.config
       // key和code相等，说明是一进来刷新，调用list接口
@@ -88,14 +91,22 @@ export default {
         // 改变样式
         config = this.changeStyle(config)
         // 改变数据
+        config.loading = true
+        this.changeChartLoading(config)
         this.changeDataByCode(config).then((res) => {
           // 初始化图表
+          config.loading = false
+          this.changeChartLoading(config)
           this.newChart(res)
         }).catch(() => {
         })
       } else {
+        config.loading = true
+        this.changeChartLoading(config)
         // 否则说明是更新，这里的更新只指更新数据（改变样式时是直接调取changeStyle方法），因为更新数据会改变key,调用chart接口
         this.changeData(config).then((res) => {
+          config.loading = false
+          this.changeChartLoading(config)
           // 初始化图表
           this.newChart(res)
         })

data-room-ui/packages/Render/RenderCard.vue

@@ -7,15 +7,18 @@
 <template>
   <div class="content">
     <component
-      v-if="config.border&&config.border.type"
       :is="resolveComponentType(config.border.type)"
+      v-if="config.border&&config.border.type"
       :id="`border${config.code}`"
       :ref="`border${config.code}`"
       :key="`border${config.key}`"
       :config="config"
     />
-    <div class="render-item-wrap" :style="`height:calc(100% - ${(config.border&&config.border.type)?config.border.titleHeight:0}px)`">
+    <div
-       <component
+      class="render-item-wrap"
+      :style="`height:calc(100% - ${(config.border&&config.border.type)?config.border.titleHeight:0}px)`"
+    >
+      <component
         :is="resolveComponentType(config.type)"
         :id="`${config.code}`"
         :ref="config.code"
@@ -25,7 +28,6 @@
       />
     </div>
   </div>
-
 </template>
 <script>
 // import commonMixins from 'data-room-ui/js/mixins/commonMixins'
@@ -65,7 +67,7 @@ export default {
   },
   data () {
     return {
-      height:0
+      height: 0
     }
   },
   computed: {

data-room-ui/packages/js/mixins/commonMixins.js

@@ -70,6 +70,7 @@ export default {
         size = config.option.pagination.pageSize
       }
       return new Promise((resolve, reject) => {
+        config.loading = true
         getChatInfo({
           // innerChartCode: this.pageCode ? config.code : undefined,
           chartCode: config.code,
@@ -78,6 +79,7 @@ export default {
           size: size,
           type: config.type
         }).then(async (res) => {
+          config.loading = false
           let _res = cloneDeep(res)
           // 如果是http数据集的前端代理，则需要调封装的axios请求
           if (res.executionByFrontend) {
@@ -139,7 +141,9 @@ export default {
         filterList: filterList || this.filterList
       }
       return new Promise((resolve, reject) => {
+        config.loading = true
         getUpdateChartInfo(params).then(async (res) => {
+          config.loading = false
           let _res = cloneDeep(res)
           // 如果是http数据集的前端代理，则需要调封装的axios请求
           if (res.executionByFrontend) {
@@ -177,6 +181,7 @@ export default {
         }).catch(err => {
           console.info(err)
         }).finally(() => {
+          config.loading = false
           resolve(config)
         })
       })

data-room-ui/packages/js/store/mutations.js

@@ -84,6 +84,15 @@ export default {
     // 改变loading状态
     state.pageLoading = booleanValue
   },
+  // 改变当前组件的加载状态
+  changeChartLoading (state, itemConfig) {
+    // 改变loading状态
+    state.pageInfo.chartList.forEach((chart, index) => {
+      if (chart.code === itemConfig.code) {
+        chart.loading = itemConfig.loading
+      }
+    })
+  },
   // 改变当前组件配置
   changeChartConfig (state, itemConfig) {
     // 如果存在parentCode的组件，则是tab中的组件