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

2 years ago · e42a4d07da
parent af3e00e163
commit e42a4d07da
12 changed files with 60 additions and 18 deletions
--- a/data-room-ui/packages/BasicComponents/ScreenScrollBoard/index.vue
+++ b/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"
  >
--- a/data-room-ui/packages/BasicComponents/ScreenScrollBoard/settingConfig.js
+++ b/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,
--- a/data-room-ui/packages/BasicComponents/ScreenScrollRanking/index.vue
+++ b/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"
  >
--- a/data-room-ui/packages/BasicComponents/ScreenScrollRanking/settingConfig.js
+++ b/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,
--- a/data-room-ui/packages/BasicComponents/Tables/index.vue
+++ b/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 "
  >
--- a/data-room-ui/packages/BasicComponents/Tables/settingConfig.js
+++ b/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'
    // 表格头部背景颜色
--- a/data-room-ui/packages/BigScreenDesign/RightSetting/index.vue
+++ b/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 (type === 'configStyle') {
-          if (this.config.type === 'iframeChart') {
-            this.debounce(500, { ...val, type: this.config.type, code: this.config.code, parentCode: this.config?.parentCode })
+      if (val.code === oldValue.code) {
+        if (!isEqual(val, oldValue)) {
+          if (type === 'configStyle') {
+            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.$emit('updateDataSetting', this.config)
+          this.saveTimeLine(`更新${val?.title ?? this.config.title}组件属性`)
        }
-        this.saveTimeLine(`更新${val?.title ?? this.config.title}组件属性`)
      }
    },
    close () {
--- a/data-room-ui/packages/G2Plots/plotList.js
+++ b/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)
--- a/data-room-ui/packages/PlotRender/index.vue
+++ b/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)
        })
--- a/data-room-ui/packages/Render/RenderCard.vue
+++ b/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)`">
-       <component
+    <div
+      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: {
--- a/data-room-ui/packages/js/mixins/commonMixins.js
+++ b/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)
        })
      })
--- a/data-room-ui/packages/js/store/mutations.js
+++ b/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中的组件