refactor(数据大屏、仪表板): 图片组显示优化

core/core-frontend/src/custom-component/common/CommonAttr.vue

@@ -143,9 +143,6 @@ const stopEvent = e => {
       <el-collapse-item :effect="themes" title="位置" name="position" v-if="positionComponentShow">
         <component-position :themes="themes" />
       </el-collapse-item>
-      <slot name="dataset" />
-      <slot name="carousel" />
-      <slot name="threshold" />
       <el-collapse-item
         :effect="themes"
         title="背景"
@@ -199,6 +196,8 @@ const stopEvent = e => {
           @onStyleAttrChange="onStyleAttrChange"
         ></common-border-setting>
       </collapse-switch-item>
+      <slot name="threshold" />
+      <slot name="carousel" />
       <CarouselSetting v-if="carouselShow" :element="element" :themes="themes"></CarouselSetting>
     </el-collapse>
   </div>

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

@@ -29,13 +29,6 @@ const { curComponent, canvasViewInfo } = storeToRefs(dvMainStore)
       :background-color-picker-width="197"
       :background-border-select-width="197"
     >
-      <template v-slot:dataset>
-        <picture-group-dataset-select
-          :themes="themes"
-          :view="canvasViewInfo[curComponent ? curComponent.id : 'default']"
-        >
-        </picture-group-dataset-select>
-      </template>
       <picture-group-upload-attr
         :themes="themes"
         :element="curComponent"
@@ -51,7 +44,15 @@ const { curComponent, canvasViewInfo } = storeToRefs(dvMainStore)
         <picture-group-threshold
           :themes="themes"
           :view="canvasViewInfo[curComponent ? curComponent.id : 'default']"
-        ></picture-group-threshold>
+        >
+          <template v-slot:dataset>
+            <picture-group-dataset-select
+              :themes="themes"
+              :view="canvasViewInfo[curComponent ? curComponent.id : 'default']"
+            >
+            </picture-group-dataset-select>
+          </template>
+        </picture-group-threshold>
       </template>
     </CommonAttr>
   </div>

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

@@ -46,17 +46,15 @@ const onDatasetUpdate = () => {
 </script>
 
 <template>
-  <el-collapse-item :effect="themes" title="数据集" name="dataset">
-    <dataset-select
-      ref="datasetSelector"
-      v-model="view.tableId"
-      style="flex: 1"
-      :view-id="view.id"
-      :themes="themes"
-      @on-dataset-change="onDatasetUpdate"
-      :state-obj="state"
-    />
-  </el-collapse-item>
+  <dataset-select
+    ref="datasetSelector"
+    v-model="view.tableId"
+    style="flex: 1"
+    :view-id="view.id"
+    :themes="themes"
+    @on-dataset-change="onDatasetUpdate"
+    :state-obj="state"
+  />
 </template>
 
 <style lang="less" scoped>

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

@@ -39,6 +39,7 @@ const onThresholdChange = val => {
     name="threshold"
     @modelChange="onThresholdChange"
   >
+    <slot name="dataset" />
     <threshold
       :themes="themes"
       :chart="view"

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

@@ -11,6 +11,7 @@ import eventBus from '@/utils/eventBus'
 import ImgViewDialog from '@/custom-component/ImgViewDialog.vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { toRefs } from 'vue'
+import { useEmitt } from '@/hooks/web/useEmitt'
 const { t } = useI18n()
 
 const props = defineProps({
@@ -58,6 +59,7 @@ async function upload(file) {
   uploadFileResult(file.file, fileUrl => {
     snapshotStore.recordSnapshotCache()
     element.value.propValue.urlList.push({ name: file.file.name, url: fileUrl })
+    useEmitt().emitter.emit('calcData-' + element.value.id)
   })
 }
 
@@ -69,19 +71,6 @@ const goFile = () => {
   files.value.click()
 }
 
-const reUpload = e => {
-  const file = e.target.files[0]
-  if (file.size > maxImageSize) {
-    sizeMessage()
-    return
-  }
-  uploadFileResult(file, fileUrl => {
-    snapshotStore.recordSnapshotCache()
-    element.value.propValue.url = fileUrl
-    fileList.value = [{ name: file.name, url: imgUrlTrans(element.value.propValue.url) }]
-  })
-}
-
 const sizeMessage = () => {
   ElMessage.success('图片大小不符合')
 }
@@ -103,7 +92,7 @@ const toolTip = computed(() => {
 })
 
 watch(
-  () => element.value.propValue.url,
+  () => element.value.propValue['urlList'],
   () => {
     init()
   }
@@ -120,24 +109,11 @@ onBeforeUnmount(() => {
 
 <template>
   <el-collapse-item :effect="themes" title="图片组" name="picture">
-    <input
-      id="input"
-      ref="files"
-      type="file"
-      accept=".jpeg,.jpg,.png,.gif,.svg"
-      hidden
-      @click="
-        e => {
-          e.target.value = ''
-        }
-      "
-      @change="reUpload"
-    />
     <el-row class="img-area" :class="`img-area_${themes}`">
       <el-col style="width: 130px !important">
         <el-upload
           :themes="themes"
-          limit="10"
+          :limit="10"
           action=""
           accept=".jpeg,.jpg,.png,.gif,.svg"
           class="avatar-uploader"
@@ -163,16 +139,6 @@ onBeforeUnmount(() => {
       >
         支持JPG、PNG、GIF、SVG
       </span>
-
-      <el-button
-        size="small"
-        style="margin: 8px 0 0 -4px"
-        v-if="curComponent.propValue.url"
-        text
-        @click="goFile"
-      >
-        重新上传
-      </el-button>
     </el-row>
     <el-row class="pic-adaptor">
       <el-form-item

core/core-frontend/src/custom-component/user-view/Component.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { CSSProperties, computed, toRefs, PropType } from 'vue'
+import { computed, toRefs, PropType } from 'vue'
 import Chart from '@/views/chart/components/views/index.vue'
 
 const props = defineProps({

core/core-frontend/src/views/chart/components/views/index.vue

@@ -688,7 +688,8 @@ onMounted(() => {
       initTitle()
       nextTick(() => {
         view.value.chartExtRequest = filter(false)
-        calcData(val)
+        const targetVal = val || view.value
+        calcData(targetVal)
       })
     }
   })