feat(仪表板、数据大屏): 图片组支持设置刷新频率 #16584 (#16605)

core/core-frontend/src/custom-component/picture-group/Attr.vue

@@ -31,6 +31,7 @@ const { curComponent, canvasViewInfo, mobileInPc, batchOptStatus } = storeToRefs
       <picture-group-upload-attr
         :themes="themes"
         :element="curComponent"
+        :view="canvasViewInfo[curComponent ? curComponent.id : 'default']"
         v-if="!mobileInPc && !batchOptStatus"
       ></picture-group-upload-attr>
       <template v-slot:carousel v-if="!mobileInPc">
@@ -80,4 +81,13 @@ const { curComponent, canvasViewInfo, mobileInPc, batchOptStatus } = storeToRefs
     justify-content: flex-start;
   }
 }
+
+.refresh-area {
+  width: 100%;
+  padding: 0 8px;
+
+  .no-margin-bottom {
+    margin-bottom: 8px;
+  }
+}
 </style>

core/core-frontend/src/custom-component/picture-group/Component.vue

@@ -59,6 +59,12 @@ const props = defineProps({
     type: String,
     default: 'preview'
   },
+  // 仪表板刷新计时器
+  searchCount: {
+    type: Number,
+    required: false,
+    default: 0
+  },
   view: {
     type: Object as PropType<ChartObj>,
     default() {
@@ -75,11 +81,39 @@ const dataRowNameSelect = ref({})
 const dataRowFiledName = ref([])
 let carouselTimer = null
 const { element, view, showPosition } = toRefs(props)
-
+let innerRefreshTimer = null
+let innerSearchCount = 0
 const isEditMode = computed(
   () => showPosition.value.includes('canvas') && !mobileInPc.value && !fullscreenFlag.value
 )
 
+watch([() => props.searchCount], () => {
+  // 内部计时器启动 忽略外部计时器
+  if (!innerRefreshTimer) {
+    calcData(view.value, () => {
+      // do searchCount
+    })
+  }
+})
+
+// 编辑状态下 不启动刷新
+const buildInnerRefreshTimer = (
+  refreshViewEnable = false,
+  refreshUnit = 'minute',
+  refreshTime = 5
+) => {
+  if (showPosition.value === 'preview' && !innerRefreshTimer && refreshViewEnable) {
+    innerRefreshTimer && clearInterval(innerRefreshTimer)
+    const timerRefreshTime = refreshUnit === 'second' ? refreshTime * 1000 : refreshTime * 60000
+    innerRefreshTimer = setInterval(() => {
+      calcData(view.value, () => {
+        // do innerRefreshTimer
+      })
+      innerSearchCount++
+    }, timerRefreshTime)
+  }
+}
+
 watch(
   () => isEditMode.value,
   () => {
@@ -255,6 +289,7 @@ onBeforeMount(() => {
     clearInterval(carouselTimer)
     carouselTimer = null
   }
+  buildInnerRefreshTimer()
 })
 
 defineExpose({

core/core-frontend/src/custom-component/picture-group/PictureGroupUploadAttr.vue

@@ -3,7 +3,7 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 
 import { storeToRefs } from 'pinia'
-import { ElIcon } from 'element-plus-secondary'
+import { ElIcon, ElMessage } from 'element-plus-secondary'
 import { ref, onMounted, onBeforeUnmount, watch, PropType } from 'vue'
 import { beforeUploadCheck, uploadFileResult } from '@/api/staticResource'
 import { imgUrlTrans } from '@/utils/imgUtils'
@@ -28,12 +28,16 @@ const props = defineProps({
         }
       }
     }
+  },
+  view: {
+    type: Object,
+    required: true
   }
 })
 
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
-const { element } = toRefs(props)
+const { element, view } = toRefs(props)
 
 const { curComponent } = storeToRefs(dvMainStore)
 
@@ -97,6 +101,14 @@ watch(
   }
 )
 
+const onRefreshChange = val => {
+  onStyleChange()
+  if (val === '' || parseFloat(val).toString() === 'NaN' || parseFloat(val) < 1) {
+    ElMessage.error(t('chart.only_input_number'))
+    return
+  }
+}
+
 onMounted(() => {
   init()
   eventBus.on('uploadImg', goFile)
@@ -162,6 +174,49 @@ onBeforeUnmount(() => {
         </el-radio-group>
       </el-form-item>
     </el-row>
+    <el-row v-if="view" class="refresh-area">
+      <el-form-item class="form-item no-margin-bottom" :class="'form-item-' + themes">
+        <el-checkbox
+          v-model="view.refreshViewEnable"
+          :effect="themes"
+          size="small"
+          @change="onStyleChange()"
+        >
+          {{ t('visualization.refresh_frequency') }}
+        </el-checkbox>
+      </el-form-item>
+      <el-row v-if="view.refreshViewEnable">
+        <el-form-item
+          class="form-item no-margin-bottom select-append"
+          :class="'form-item-' + themes"
+        >
+          <el-input
+            v-model.number="view.refreshTime"
+            :effect="themes"
+            :class="[themes === 'dark' && 'dv-dark']"
+            size="small"
+            :min="1"
+            :max="3600"
+            :disabled="!view.refreshViewEnable"
+            @change="onRefreshChange"
+          >
+            <template #append>
+              <el-select
+                v-model="view.refreshUnit"
+                :effect="themes"
+                size="small"
+                placeholder="Select"
+                style="width: 80px"
+                @change="onStyleChange()"
+              >
+                <el-option :effect="themes" :label="t('visualization.minute')" :value="'minute'" />
+                <el-option :effect="themes" :label="t('visualization.second')" :value="'second'" />
+              </el-select>
+            </template>
+          </el-input>
+        </el-form-item>
+      </el-row>
+    </el-row>
   </el-collapse-item>
 </template>
 
@@ -322,4 +377,8 @@ onBeforeUnmount(() => {
     border-top: none !important;
   }
 }
+
+.refresh-area {
+  width: 100%;
+}
 </style>