From e42a4d07dac177e3b619e38132ba2bdba23d04ba Mon Sep 17 00:00:00 2001
From: "liu.shiyi" <liu.shiyi@ustcinfo.com>
Date: Thu, 14 Sep 2023 11:50:34 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E5=9B=BE=E8=A1=A8=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=EF=BC=8C=E8=A1=A8=E6=A0=BC=E7=BB=84=E4=BB=B6=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=8A=A0=E8=BD=BD=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ScreenScrollBoard/index.vue               |  2 ++
 .../ScreenScrollBoard/settingConfig.js        |  3 ++-
 .../ScreenScrollRanking/index.vue             |  2 ++
 .../ScreenScrollRanking/settingConfig.js      |  3 ++-
 .../packages/BasicComponents/Tables/index.vue |  2 ++
 .../BasicComponents/Tables/settingConfig.js   |  4 +++-
 .../BigScreenDesign/RightSetting/index.vue    | 22 +++++++++++--------
 data-room-ui/packages/G2Plots/plotList.js     |  1 +
 data-room-ui/packages/PlotRender/index.vue    | 13 ++++++++++-
 data-room-ui/packages/Render/RenderCard.vue   | 12 +++++-----
 .../packages/js/mixins/commonMixins.js        |  5 +++++
 data-room-ui/packages/js/store/mutations.js   |  9 ++++++++
 12 files changed, 60 insertions(+), 18 deletions(-)

diff --git a/data-room-ui/packages/BasicComponents/ScreenScrollBoard/index.vue b/data-room-ui/packages/BasicComponents/ScreenScrollBoard/index.vue
index aca66e5b..96356c3e 100644
--- 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"
   >
diff --git a/data-room-ui/packages/BasicComponents/ScreenScrollBoard/settingConfig.js b/data-room-ui/packages/BasicComponents/ScreenScrollBoard/settingConfig.js
index b43dd970..1b3ae4e1 100644
--- 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,
diff --git a/data-room-ui/packages/BasicComponents/ScreenScrollRanking/index.vue b/data-room-ui/packages/BasicComponents/ScreenScrollRanking/index.vue
index 033ab3ac..47c7f323 100644
--- 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"
   >
diff --git a/data-room-ui/packages/BasicComponents/ScreenScrollRanking/settingConfig.js b/data-room-ui/packages/BasicComponents/ScreenScrollRanking/settingConfig.js
index ae9dd90e..f2e62813 100644
--- 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,
diff --git a/data-room-ui/packages/BasicComponents/Tables/index.vue b/data-room-ui/packages/BasicComponents/Tables/index.vue
index 1b5a56d1..3e0b443a 100644
--- 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 "
   >
diff --git a/data-room-ui/packages/BasicComponents/Tables/settingConfig.js b/data-room-ui/packages/BasicComponents/Tables/settingConfig.js
index eef6938a..7742288c 100644
--- 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'
     // 表格头部背景颜色
diff --git a/data-room-ui/packages/BigScreenDesign/RightSetting/index.vue b/data-room-ui/packages/BigScreenDesign/RightSetting/index.vue
index db34ab75..97783a57 100644
--- 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 () {
diff --git a/data-room-ui/packages/G2Plots/plotList.js b/data-room-ui/packages/G2Plots/plotList.js
index c12125e5..50cf4b91 100644
--- 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)
diff --git a/data-room-ui/packages/PlotRender/index.vue b/data-room-ui/packages/PlotRender/index.vue
index 787d4d1a..40b0ae21 100644
--- 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)
         })
diff --git a/data-room-ui/packages/Render/RenderCard.vue b/data-room-ui/packages/Render/RenderCard.vue
index de639e7c..cda294a3 100644
--- 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: {
diff --git a/data-room-ui/packages/js/mixins/commonMixins.js b/data-room-ui/packages/js/mixins/commonMixins.js
index 1bb745ca..bddde174 100644
--- 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)
         })
       })
diff --git a/data-room-ui/packages/js/store/mutations.js b/data-room-ui/packages/js/store/mutations.js
index b0a564cc..56447b75 100644
--- 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中的组件