From d570c17ef710ae29f1eefdd3367d50ae3a79b98b Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Wed, 18 Sep 2024 17:20:38 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E5=9B=BE=E8=A1=A8):=20=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E5=9B=BE=E7=89=87=E7=BB=84=E5=9B=BE=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../server/StaticResourceServer.java          |   5 -
 .../src/assets/svg/picture-group-dark.svg     |   1 +
 .../src/assets/svg/picture-group-origin.svg   |   1 +
 .../src/assets/svg/picture-group.svg          |   1 +
 .../src/components/icon-group/chart-list.ts   |   4 +-
 .../src/custom-component/component-list.ts    |   2 +-
 .../custom-component/picture-group/Attr.vue   | 180 +++---
 .../picture-group/Component.vue               | 179 +++++-
 .../src/models/chart/chart-senior.d.ts        |   4 +
 .../editor/dataset-select/DatasetSelect.vue   |   2 +-
 .../editor-senior/components/Threshold.vue    |  72 ++-
 .../dialog/PictureGroupThresholdEdit.vue      | 598 ++++++++++++++++++
 .../editor/editor-style/ChartStyle.vue        |  12 +-
 .../views/chart/components/editor/index.vue   |   2 +-
 .../chart/components/editor/util/chart.ts     |  21 +-
 .../js/panel/common/common_table.ts           |   9 +
 .../chart/components/js/panel/types/index.ts  |   2 +-
 .../views/chart/components/views/index.vue    |   5 +-
 18 files changed, 940 insertions(+), 160 deletions(-)
 create mode 100644 core/core-frontend/src/assets/svg/picture-group-dark.svg
 create mode 100644 core/core-frontend/src/assets/svg/picture-group-origin.svg
 create mode 100644 core/core-frontend/src/assets/svg/picture-group.svg
 create mode 100644 core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/PictureGroupThresholdEdit.vue

diff --git a/core/core-backend/src/main/java/io/dataease/visualization/server/StaticResourceServer.java b/core/core-backend/src/main/java/io/dataease/visualization/server/StaticResourceServer.java
index 20ed12e4f7..fa583af1cc 100644
--- a/core/core-backend/src/main/java/io/dataease/visualization/server/StaticResourceServer.java
+++ b/core/core-backend/src/main/java/io/dataease/visualization/server/StaticResourceServer.java
@@ -1,6 +1,5 @@
 package io.dataease.visualization.server;
 
-
 import io.dataease.api.visualization.StaticResourceApi;
 import io.dataease.api.visualization.request.StaticResourceRequest;
 import io.dataease.exception.DEException;
@@ -17,13 +16,9 @@ import org.springframework.web.bind.annotation.RestController;
 import org.springframework.web.multipart.MultipartFile;
 import org.w3c.dom.Document;
 import org.xml.sax.SAXException;
-
-import javax.imageio.ImageIO;
 import javax.xml.parsers.DocumentBuilder;
 import javax.xml.parsers.DocumentBuilderFactory;
 import javax.xml.parsers.ParserConfigurationException;
-import java.awt.image.BufferedImage;
-import java.io.File;
 import java.io.IOException;
 import java.io.InputStream;
 import java.nio.file.Files;
diff --git a/core/core-frontend/src/assets/svg/picture-group-dark.svg b/core/core-frontend/src/assets/svg/picture-group-dark.svg
new file mode 100644
index 0000000000..087a800c6e
--- /dev/null
+++ b/core/core-frontend/src/assets/svg/picture-group-dark.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1726302584557" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6066" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M0 0h938.666667v938.666667H0V0z m64 64v810.666667h810.666667v-810.666667h-810.666667z" fill="#2C82FC" p-id="6067"></path><path d="M170.666667 170.666667h853.333333v853.333333H170.666667z" fill="#2C82FC" p-id="6068"></path><path d="M967.082667 334.208v362.965333l-151.850667-162.986666s-17.962667-21.461333-32.64-21.461334a35.072 35.072 0 0 0-30.506667 17.706667c-4.053333 7.04-73.344 76.330667-207.872 207.872-6.016 4.309333-6.016 4.309333-12.586666 0L413.653333 641.706667s-16.768-14.293333-28.373333-14.293334c-5.930667 0-11.477333 1.621333-16.426667 4.224s-8.917333 6.528-10.496 8.192l-130.816 125.312V284.458667 227.541333h739.541334v106.666667z m-55.68 632.917333H227.541333v-55.68-68.650666l151.381334-144.896c5.077333-4.266667 8.362667-4.565333 13.482666-0.085334l116.224 95.061334c10.026667 7.082667 20.949333 15.786667 29.525334 15.786666 8.576 0 18.773333-2.944 29.781333-13.952l211.242667-211.242666c1.109333 0.128 2.218667 0.384 3.370666 0.384l1.066667-0.085334 183.424 196.906667v79.744h0.042667v106.666667h-55.68z" fill="#FFFFFF" p-id="6069"></path><path d="M758.698667 672.64a35.584 35.584 0 0 1 45.013333 4.437333c1.536 1.578667 4.352 4.736 4.352 4.736l15.104 15.061334a21.461333 21.461333 0 0 1 0 30.208 21.077333 21.077333 0 0 1-24.064 4.010666c-0.469333 0.256-21.162667-19.157333-21.162667-19.157333l-30.08 30.208-63.701333 63.701333c-0.512 0.554667-0.682667 1.322667-1.28 1.834667a21.418667 21.418667 0 0 1-30.165333 0 21.418667 21.418667 0 0 1 0-30.165333l0.341333-0.298667 105.642667-104.576z m84.949333 104.917333c-0.170667-0.042667-0.256-0.213333-0.469333-0.298666a21.418667 21.418667 0 0 1 0-30.165334 21.461333 21.461333 0 0 1 30.208 0l0.256 0.384 0.085333-0.128 9.728 9.770667a21.333333 21.333333 0 0 1-30.165333 30.165333l-9.642667-9.728zM426.666667 312.874667a85.333333 85.333333 0 1 1-0.042667 170.709333A85.333333 85.333333 0 0 1 426.666667 312.874667zM426.666667 426.666667a28.458667 28.458667 0 1 0-0.042667-56.96A28.458667 28.458667 0 0 0 426.666667 426.666667z" fill="#2C82FC" p-id="6070"></path></svg>
\ No newline at end of file
diff --git a/core/core-frontend/src/assets/svg/picture-group-origin.svg b/core/core-frontend/src/assets/svg/picture-group-origin.svg
new file mode 100644
index 0000000000..007ed92b1e
--- /dev/null
+++ b/core/core-frontend/src/assets/svg/picture-group-origin.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1726300744320" class="icon" viewBox="0 0 1448 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4293" xmlns:xlink="http://www.w3.org/1999/xlink" width="282.8125" height="200"><path d="M1081.624727 143.803796H302.916849c-49.712078 0-89.96338 40.251302-89.96338 89.96338V892.753234c0 49.712078 40.251302 89.96338 89.96338 89.963379h778.879892c49.712078 0 89.96338-40.251302 89.96338-89.963379V233.767176c-0.172014-49.712078-40.423316-89.96338-90.135394-89.96338M302.744835 203.836721h778.879892c16.513355 0 29.930455 13.417101 29.930455 29.930455V586.568117c-48.335965-39.563245-131.934823-93.059634-232.391063-93.059634-92.543591 0-183.883084 71.729884-272.126323 141.051571-67.601545 53.15236-137.611288 108.196876-186.63531 108.196875-68.805644 0-127.806484-50.572148-147.760121-69.837729V233.767176c0.172014-16.513355 13.589115-29.930455 30.10247-29.930455m778.879892 718.846968H302.744835c-16.513355 0-29.930455-13.417101-29.930456-29.930455v-142.25567c35.950949 25.458088 87.89921 52.120275 147.760121 52.120276 69.837729 0 144.491853-58.656812 223.618344-120.92592 80.33059-63.129179 163.241391-128.322526 235.143289-128.322526 128.838569 0 230.842936 113.357299 231.875021 114.561397l0.516042-0.344028V892.753234c0 16.513355-13.417101 29.930455-30.102469 29.930455m-569.366706-359.165463c66.225433 0 120.065849-53.668402 120.065849-120.065849 0-66.225433-53.668402-120.065849-120.065849-120.065849-66.225433 0-120.065849 53.668402-120.065849 120.065849 0 66.397447 53.668402 120.065849 120.065849 120.065849M512.602049 383.591466c33.026709 0 59.688896 26.662187 59.688897 59.688897 0 33.026709-26.662187 59.688896-59.688897 59.688896-33.026709 0-59.688896-26.662187-59.688896-59.688896 0-33.026709 26.662187-59.688896 59.688896-59.688897m0 0" p-id="4294"></path><path d="M1217.687888 833.236351h-96.843944v-51.08819h96.843944c24.770032 0 45.067697-20.125651 45.067697-44.895683V134.34302c0-24.770032-20.125651-44.895683-45.067697-44.895683h-844.589282c-24.770032 0-44.895683 20.125651-44.895683 44.895683v59.688897H276.942718V134.34302c0-52.980346 43.003528-95.983874 95.983874-95.983873h844.589282c52.980346 0 95.983874 43.003528 95.983874 95.983873v602.909458c0.172014 52.980346-42.831514 95.983874-95.81186 95.983873z" p-id="4295"></path></svg>
\ No newline at end of file
diff --git a/core/core-frontend/src/assets/svg/picture-group.svg b/core/core-frontend/src/assets/svg/picture-group.svg
new file mode 100644
index 0000000000..087a800c6e
--- /dev/null
+++ b/core/core-frontend/src/assets/svg/picture-group.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1726302584557" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6066" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M0 0h938.666667v938.666667H0V0z m64 64v810.666667h810.666667v-810.666667h-810.666667z" fill="#2C82FC" p-id="6067"></path><path d="M170.666667 170.666667h853.333333v853.333333H170.666667z" fill="#2C82FC" p-id="6068"></path><path d="M967.082667 334.208v362.965333l-151.850667-162.986666s-17.962667-21.461333-32.64-21.461334a35.072 35.072 0 0 0-30.506667 17.706667c-4.053333 7.04-73.344 76.330667-207.872 207.872-6.016 4.309333-6.016 4.309333-12.586666 0L413.653333 641.706667s-16.768-14.293333-28.373333-14.293334c-5.930667 0-11.477333 1.621333-16.426667 4.224s-8.917333 6.528-10.496 8.192l-130.816 125.312V284.458667 227.541333h739.541334v106.666667z m-55.68 632.917333H227.541333v-55.68-68.650666l151.381334-144.896c5.077333-4.266667 8.362667-4.565333 13.482666-0.085334l116.224 95.061334c10.026667 7.082667 20.949333 15.786667 29.525334 15.786666 8.576 0 18.773333-2.944 29.781333-13.952l211.242667-211.242666c1.109333 0.128 2.218667 0.384 3.370666 0.384l1.066667-0.085334 183.424 196.906667v79.744h0.042667v106.666667h-55.68z" fill="#FFFFFF" p-id="6069"></path><path d="M758.698667 672.64a35.584 35.584 0 0 1 45.013333 4.437333c1.536 1.578667 4.352 4.736 4.352 4.736l15.104 15.061334a21.461333 21.461333 0 0 1 0 30.208 21.077333 21.077333 0 0 1-24.064 4.010666c-0.469333 0.256-21.162667-19.157333-21.162667-19.157333l-30.08 30.208-63.701333 63.701333c-0.512 0.554667-0.682667 1.322667-1.28 1.834667a21.418667 21.418667 0 0 1-30.165333 0 21.418667 21.418667 0 0 1 0-30.165333l0.341333-0.298667 105.642667-104.576z m84.949333 104.917333c-0.170667-0.042667-0.256-0.213333-0.469333-0.298666a21.418667 21.418667 0 0 1 0-30.165334 21.461333 21.461333 0 0 1 30.208 0l0.256 0.384 0.085333-0.128 9.728 9.770667a21.333333 21.333333 0 0 1-30.165333 30.165333l-9.642667-9.728zM426.666667 312.874667a85.333333 85.333333 0 1 1-0.042667 170.709333A85.333333 85.333333 0 0 1 426.666667 312.874667zM426.666667 426.666667a28.458667 28.458667 0 1 0-0.042667-56.96A28.458667 28.458667 0 0 0 426.666667 426.666667z" fill="#2C82FC" p-id="6070"></path></svg>
\ No newline at end of file
diff --git a/core/core-frontend/src/components/icon-group/chart-list.ts b/core/core-frontend/src/components/icon-group/chart-list.ts
index 259e70e714..7ac375750f 100644
--- a/core/core-frontend/src/components/icon-group/chart-list.ts
+++ b/core/core-frontend/src/components/icon-group/chart-list.ts
@@ -41,6 +41,7 @@ import treemap from '@/assets/svg/treemap.svg'
 import waterfall from '@/assets/svg/waterfall.svg'
 import wordCloud from '@/assets/svg/word-cloud.svg'
 import tHeatmap from '@/assets/svg/t-heatmap.svg'
+import pictureGroup from '@/assets/svg/picture-group.svg'
 
 const iconChartMap = {
   'area-stack': areaStack,
@@ -85,7 +86,8 @@ const iconChartMap = {
   treemap: treemap,
   waterfall: waterfall,
   'word-cloud': wordCloud,
-  't-heatmap': tHeatmap
+  't-heatmap': tHeatmap,
+  'picture-group': pictureGroup
 }
 
 export { iconChartMap }
diff --git a/core/core-frontend/src/custom-component/component-list.ts b/core/core-frontend/src/custom-component/component-list.ts
index a845956877..fe1f45713e 100644
--- a/core/core-frontend/src/custom-component/component-list.ts
+++ b/core/core-frontend/src/custom-component/component-list.ts
@@ -306,7 +306,7 @@ const list = [
     component: 'UserView',
     name: '图表',
     label: '图表',
-    propValue: { textValue: '' },
+    propValue: { textValue: '', urlList: [] },
     icon: 'bar',
     innerType: 'bar',
     editing: false,
diff --git a/core/core-frontend/src/custom-component/picture-group/Attr.vue b/core/core-frontend/src/custom-component/picture-group/Attr.vue
index 57855165be..156bae32ff 100644
--- a/core/core-frontend/src/custom-component/picture-group/Attr.vue
+++ b/core/core-frontend/src/custom-component/picture-group/Attr.vue
@@ -1,31 +1,38 @@
 <script setup lang="ts">
-import CommonAttr from '@/custom-component/common/CommonAttr.vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 
 import { storeToRefs } from 'pinia'
 import { ElIcon, ElMessage } from 'element-plus-secondary'
-import { ref, onMounted, onBeforeUnmount, watch, PropType, reactive, toRefs, computed } from 'vue'
+import { ref, onMounted, onBeforeUnmount, watch, PropType, computed } from 'vue'
 import { beforeUploadCheck, uploadFileResult } from '@/api/staticResource'
 import { imgUrlTrans } from '@/utils/imgUtils'
 import eventBus from '@/utils/eventBus'
 import ImgViewDialog from '@/custom-component/ImgViewDialog.vue'
-import DatasetSelect from '@/views/chart/components/editor/dataset-select/DatasetSelect.vue'
-import Icon from '../../components/icon-custom/src/Icon.vue'
 import { useI18n } from '@/hooks/web/useI18n'
-import { cloneDeep } from 'lodash-es'
-import FilterTree from '@/views/chart/components/editor/filter/FilterTree.vue'
+import { toRefs } from 'vue'
 const { t } = useI18n()
 
 const props = defineProps({
   themes: {
     type: String as PropType<EditorTheme>,
     default: 'dark'
+  },
+  element: {
+    type: Object,
+    default() {
+      return {
+        propValue: {
+          urlList: []
+        }
+      }
+    }
   }
 })
 
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
+const { element } = toRefs(props)
 
 const { curComponent } = storeToRefs(dvMainStore)
 
@@ -43,14 +50,14 @@ const handlePictureCardPreview = file => {
 
 const handleRemove = (_, fileList) => {
   uploadDisabled.value = false
-  curComponent.value.propValue.url = null
+  element.value.propValue['urlList'] = []
   fileList.value = []
   snapshotStore.recordSnapshotCache()
 }
 async function upload(file) {
   uploadFileResult(file.file, fileUrl => {
     snapshotStore.recordSnapshotCache()
-    curComponent.value.propValue.url = fileUrl
+    element.value.propValue.urlList.push({ name: file.file.name, url: fileUrl })
   })
 }
 
@@ -70,28 +77,33 @@ const reUpload = e => {
   }
   uploadFileResult(file, fileUrl => {
     snapshotStore.recordSnapshotCache()
-    curComponent.value.propValue.url = fileUrl
-    fileList.value = [{ url: imgUrlTrans(curComponent.value.propValue.url) }]
+    element.value.propValue.url = fileUrl
+    fileList.value = [{ name: file.name, url: imgUrlTrans(element.value.propValue.url) }]
   })
 }
 
 const sizeMessage = () => {
   ElMessage.success('图片大小不符合')
 }
-const init = () => {
-  if (curComponent.value.propValue.url) {
-    fileList.value = [{ url: imgUrlTrans(curComponent.value.propValue.url) }]
-  } else {
-    fileList.value = []
+
+const fileListInit = () => {
+  fileList.value = []
+  if (element.value.propValue.urlList && element.value.propValue.urlList.length > 0) {
+    element.value.propValue.urlList.forEach(urlInfo => {
+      fileList.value.push({ name: urlInfo.name, url: imgUrlTrans(urlInfo.url) })
+    })
   }
 }
+const init = () => {
+  fileListInit()
+}
 
 const toolTip = computed(() => {
   return props.themes === 'dark' ? 'ndark' : 'dark'
 })
 
 watch(
-  () => curComponent.value.propValue.url,
+  () => element.value.propValue.url,
   () => {
     init()
   }
@@ -107,7 +119,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="attr-list de-collapse-style">
+  <el-collapse-item :effect="themes" title="图片组" name="picture">
     <input
       id="input"
       ref="files"
@@ -121,77 +133,69 @@ onBeforeUnmount(() => {
       "
       @change="reUpload"
     />
-    <CommonAttr
-      :themes="themes"
-      :element="curComponent"
-      :background-color-picker-width="197"
-      :background-border-select-width="197"
-    >
-      <el-collapse-item :effect="themes" title="图片组" name="picture">
-        <el-row class="img-area" :class="`img-area_${themes}`">
-          <el-col style="width: 130px !important">
-            <el-upload
-              :themes="themes"
-              action=""
-              accept=".jpeg,.jpg,.png,.gif,.svg"
-              class="avatar-uploader"
-              list-type="picture-card"
-              :class="{ disabled: uploadDisabled }"
-              :on-preview="handlePictureCardPreview"
-              :on-remove="handleRemove"
-              :before-upload="beforeUploadCheck"
-              :http-request="upload"
-              :file-list="fileList"
-            >
-              <el-icon><Plus /></el-icon>
-            </el-upload>
-            <img-view-dialog v-model="dialogVisible" :image-url="dialogImageUrl"></img-view-dialog>
-          </el-col>
-        </el-row>
-        <el-row>
-          <span
-            style="margin-top: 2px"
-            v-if="!curComponent.propValue.url"
-            class="image-hint"
-            :class="`image-hint_${themes}`"
-          >
-            支持JPG、PNG、GIF、SVG
-          </span>
+    <el-row class="img-area" :class="`img-area_${themes}`">
+      <el-col style="width: 130px !important">
+        <el-upload
+          :themes="themes"
+          limit="10"
+          action=""
+          accept=".jpeg,.jpg,.png,.gif,.svg"
+          class="avatar-uploader"
+          list-type="picture-card"
+          :class="{ disabled: uploadDisabled }"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove"
+          :before-upload="beforeUploadCheck"
+          :http-request="upload"
+          :file-list="fileList"
+        >
+          <el-icon><Plus /></el-icon>
+        </el-upload>
+        <img-view-dialog v-model="dialogVisible" :image-url="dialogImageUrl"></img-view-dialog>
+      </el-col>
+    </el-row>
+    <el-row>
+      <span
+        style="margin-top: 2px"
+        v-if="!curComponent.propValue.url"
+        class="image-hint"
+        :class="`image-hint_${themes}`"
+      >
+        支持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
-            v-if="curComponent.style.adaptation"
-            class="form-item"
-            label="图片适应方式"
-            size="small"
-            :effect="themes"
-            :class="'form-item-' + themes"
-          >
-            <el-radio-group
-              size="small"
-              v-model="curComponent.style.adaptation"
-              @change="onStyleChange"
-              :effect="themes"
-            >
-              <el-radio label="adaptation" :effect="themes">适应组件</el-radio>
-              <el-radio label="original" :effect="themes">原始尺寸</el-radio>
-              <el-radio label="equiratio" :effect="themes">等比适应</el-radio>
-            </el-radio-group>
-          </el-form-item>
-        </el-row>
-      </el-collapse-item>
-    </CommonAttr>
-  </div>
+      <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
+        v-if="curComponent.style.adaptation"
+        class="form-item"
+        label="图片适应方式"
+        size="small"
+        :effect="themes"
+        :class="'form-item-' + themes"
+      >
+        <el-radio-group
+          size="small"
+          v-model="curComponent.style.adaptation"
+          @change="onStyleChange"
+          :effect="themes"
+        >
+          <el-radio label="adaptation" :effect="themes">适应组件</el-radio>
+          <el-radio label="original" :effect="themes">原始尺寸</el-radio>
+          <el-radio label="equiratio" :effect="themes">等比适应</el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-row>
+  </el-collapse-item>
 </template>
 
 <style lang="less" scoped>
@@ -251,8 +255,6 @@ onBeforeUnmount(() => {
   }
 }
 .img-area {
-  height: 80px;
-  width: 80px;
   margin-top: 10px;
   overflow: hidden;
 
diff --git a/core/core-frontend/src/custom-component/picture-group/Component.vue b/core/core-frontend/src/custom-component/picture-group/Component.vue
index 2ca938e064..e298305ce0 100644
--- a/core/core-frontend/src/custom-component/picture-group/Component.vue
+++ b/core/core-frontend/src/custom-component/picture-group/Component.vue
@@ -2,35 +2,44 @@
   <div class="pic-main" @click="onPictureClick">
     <img
       draggable="false"
-      v-if="propValue['url']"
+      v-if="state.showUrl"
       :style="imageAdapter"
-      :src="imgUrlTrans(propValue['url'])"
+      :src="imgUrlTrans(state.showUrl)"
     />
-    <div v-else class="pic-upload">
-      <span
-        ><el-button @click="uploadImg" text style="color: #646a73" icon="Plus"
-          >请上传图片...</el-button
-        ></span
-      >
-    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { CSSProperties, computed, nextTick, toRefs } from 'vue'
+import { CSSProperties, computed, nextTick, toRefs, reactive, ref, PropType } from 'vue'
 import { imgUrlTrans } from '@/utils/imgUtils'
 import eventBus from '@/utils/eventBus'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { getData } from '@/api/chart'
+import { parseJson } from '@/views/chart/components/js/util'
+import { mappingColor } from '@/views/chart/components/js/panel/common/common_table'
+import { storeToRefs } from 'pinia'
 const dvMainStore = dvMainStoreWithOut()
-
+const { canvasViewInfo } = storeToRefs(dvMainStore)
+const state = reactive({
+  emptyValue: '-',
+  data: null,
+  viewDataInfo: null,
+  showUrl: null,
+  firstRender: true,
+  previewFirstRender: true
+})
+const initReady = ref(true)
 const props = defineProps({
-  propValue: {
-    type: String,
-    required: true,
-    default: ''
-  },
   element: {
     type: Object,
+    default() {
+      return {
+        propValue: { urlList: [] }
+      }
+    }
+  },
+  view: {
+    type: Object as PropType<ChartObj>,
     default() {
       return {
         propValue: null
@@ -38,8 +47,13 @@ const props = defineProps({
     }
   }
 })
+const isError = ref(false)
+const errMsg = ref('')
+const dataRowSelect = ref({})
+const dataRowNameSelect = ref({})
+const dataRowFiledName = ref([])
 
-const { propValue, element } = toRefs(props)
+const { element, view } = toRefs(props)
 
 const imageAdapter = computed(() => {
   const style = {
@@ -55,21 +69,132 @@ const imageAdapter = computed(() => {
   }
   return style as CSSProperties
 })
-const onPictureClick = e => {
-  if (element.value.events && element.value.events.checked) {
-    if (element.value.events.type === 'displayChange') {
-      // 打开弹框区域
-      nextTick(() => {
-        dvMainStore.popAreaActiveSwitch()
-      })
-    }
-  }
-}
+
 const uploadImg = () => {
   nextTick(() => {
     eventBus.emit('uploadImg')
   })
 }
+
+const initCurFields = chartDetails => {
+  dataRowFiledName.value = []
+  dataRowSelect.value = {}
+  dataRowNameSelect.value = {}
+  if (chartDetails.data && chartDetails.data.sourceFields) {
+    const checkAllAxisStr =
+      JSON.stringify(chartDetails.xAxis) +
+      JSON.stringify(chartDetails.xAxisExt) +
+      JSON.stringify(chartDetails.yAxis) +
+      JSON.stringify(chartDetails.yAxisExt)
+    chartDetails.data.sourceFields.forEach(field => {
+      if (checkAllAxisStr.indexOf(field.id) > -1) {
+        dataRowFiledName.value.push(`[${field.name}]`)
+      }
+    })
+    if (checkAllAxisStr.indexOf('"记录数*"') > -1) {
+      dataRowFiledName.value.push(`[记录数*]`)
+    }
+    const sourceFieldNameIdMap = chartDetails.data.fields.reduce((pre, next) => {
+      pre[next['dataeaseName']] = next['name']
+      return pre
+    }, {})
+    const rowData = chartDetails.data.tableRow[0]
+    for (const key in rowData) {
+      dataRowNameSelect.value[sourceFieldNameIdMap[key]] = rowData[key]
+    }
+  }
+  conditionAdaptor(view.value)
+}
+
+const conditionAdaptor = (chart: Chart) => {
+  if (!chart || !chart.senior) {
+    return
+  }
+  const { threshold } = parseJson(chart.senior)
+  if (!threshold.enable) {
+    return
+  }
+  const conditions = threshold.tableThreshold ?? []
+  if (conditions?.length > 0) {
+    for (let i = 0; i < conditions.length; i++) {
+      const field = conditions[i]
+      let defaultValueColor = 'none'
+      const checkResult = mappingColor(
+        dataRowNameSelect.value[field.field.name],
+        defaultValueColor,
+        field,
+        'url'
+      )
+      if (checkResult) {
+        state.showUrl = checkResult
+      }
+    }
+  }
+}
+
+const withInit = () => {
+  if (element.value.propValue['urlList'] && element.value.propValue['urlList'].length > 0) {
+    state.showUrl = element.value.propValue['urlList'][0].url
+  }
+}
+
+const calcData = (view: Chart, callback) => {
+  console.log('===calcData1')
+  isError.value = false
+  if (view.tableId || view['dataFrom'] === 'template') {
+    const v = JSON.parse(JSON.stringify(view))
+    getData(v)
+      .then(res => {
+        if (res.code && res.code !== 0) {
+          isError.value = true
+          errMsg.value = res.msg
+        } else {
+          state.data = res?.data
+          state.viewDataInfo = res
+          state.totalItems = res?.totalItems
+          const curViewInfo = canvasViewInfo.value[element.value.id]
+          curViewInfo['curFields'] = res.data.fields
+          dvMainStore.setViewDataDetails(element.value.id, res)
+          initReady.value = true
+          initCurFields(res)
+        }
+        callback?.()
+        nextTick(() => {
+          initReady.value = true
+        })
+      })
+      .catch(e => {
+        console.error(e)
+        nextTick(() => {
+          initReady.value = true
+        })
+        callback?.()
+      })
+  } else if (!view.tableId) {
+    initReady.value = true
+    withInit()
+    callback?.()
+    nextTick(() => {
+      initReady.value = true
+    })
+  } else {
+    withInit()
+    nextTick(() => {
+      initReady.value = true
+    })
+    callback?.()
+  }
+}
+
+// 初始化此处不必刷新
+const renderChart = viewInfo => {
+  //do renderView
+}
+
+defineExpose({
+  calcData,
+  renderChart
+})
 </script>
 
 <style lang="less" scoped>
diff --git a/core/core-frontend/src/models/chart/chart-senior.d.ts b/core/core-frontend/src/models/chart/chart-senior.d.ts
index a86f4f6138..8aad7c14fe 100644
--- a/core/core-frontend/src/models/chart/chart-senior.d.ts
+++ b/core/core-frontend/src/models/chart/chart-senior.d.ts
@@ -194,6 +194,10 @@ declare interface Threshold {
    * 背景颜色
    */
   backgroundColor: string
+  /**
+   * url
+   */
+  url: string
 }
 
 /**
diff --git a/core/core-frontend/src/views/chart/components/editor/dataset-select/DatasetSelect.vue b/core/core-frontend/src/views/chart/components/editor/dataset-select/DatasetSelect.vue
index 4e989b2ec1..b2784153e1 100644
--- a/core/core-frontend/src/views/chart/components/editor/dataset-select/DatasetSelect.vue
+++ b/core/core-frontend/src/views/chart/components/editor/dataset-select/DatasetSelect.vue
@@ -210,7 +210,7 @@ const clearShow = computed(
   () =>
     props.sourceType === 'dataset' &&
     dvMainStore.curComponent &&
-    dvMainStore.curComponent.innerType === 'rich-text'
+    ['rich-text', 'picture-group'].includes(dvMainStore.curComponent.innerType)
 )
 
 const handleClear = e => {
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue
index 628aaca881..bf498d50c7 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue
@@ -10,7 +10,12 @@ import TextThresholdEdit from '@/views/chart/components/editor/editor-senior/com
 import { fieldType } from '@/utils/attr'
 import { defaultsDeep } from 'lodash-es'
 import { iconFieldMap } from '@/components/icon-group/field-list'
-
+import PictureGroupThresholdEdit from '@/views/chart/components/editor/editor-senior/components/dialog/PictureGroupThresholdEdit.vue'
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { storeToRefs } from 'pinia'
+import { imgUrlTrans } from '@/utils/imgUtils'
+const dvMainStore = dvMainStoreWithOut()
+const { curComponent } = storeToRefs(dvMainStore)
 const { t } = useI18n()
 
 const props = defineProps({
@@ -592,22 +597,35 @@ init()
                 </span>
                 <span v-else>&nbsp;</span>
               </div>
-              <div
-                :title="t('chart.textColor')"
-                :style="{
-                  backgroundColor: item.color
-                }"
-                class="color-div"
-                :class="{ 'color-div-dark': themes === 'dark' }"
-              ></div>
-              <div
-                :title="t('chart.backgroundColor')"
-                :style="{
-                  backgroundColor: item.backgroundColor
-                }"
-                class="color-div"
-                :class="{ 'color-div-dark': themes === 'dark' }"
-              ></div>
+              <template v-if="chart.type === 'picture-group'">
+                <div title="显示图片" class="pic-group-main">
+                  <img
+                    draggable="false"
+                    v-if="item.url"
+                    class="pic-group-img"
+                    :src="imgUrlTrans(item.url)"
+                  />
+                </div>
+              </template>
+
+              <template v-if="chart.type !== 'picture-group'">
+                <div
+                  :title="t('chart.textColor')"
+                  :style="{
+                    backgroundColor: item.color
+                  }"
+                  class="color-div"
+                  :class="{ 'color-div-dark': themes === 'dark' }"
+                ></div>
+                <div
+                  :title="t('chart.backgroundColor')"
+                  :style="{
+                    backgroundColor: item.backgroundColor
+                  }"
+                  class="color-div"
+                  :class="{ 'color-div-dark': themes === 'dark' }"
+                ></div>
+              </template>
             </div>
           </el-row>
         </div>
@@ -672,7 +690,15 @@ init()
       class="dialog-css"
       append-to-body
     >
+      <picture-group-threshold-edit
+        v-if="chart.type === 'picture-group' && curComponent"
+        :threshold="state.thresholdForm.tableThreshold"
+        :chart="chart"
+        :element="curComponent"
+        @onTableThresholdChange="tableThresholdChange"
+      ></picture-group-threshold-edit>
       <table-threshold-edit
+        v-else
         :threshold="state.thresholdForm.tableThreshold"
         :chart="chart"
         @onTableThresholdChange="tableThresholdChange"
@@ -861,4 +887,16 @@ span {
     color: #5f5f5f !important;
   }
 }
+
+.pic-group-main {
+  margin-right: 8px;
+  width: 24px;
+  height: 24px;
+  border: solid 1px #e1e4e8;
+  border-radius: 2px;
+}
+.pic-group-img {
+  width: 100%;
+  height: 100%;
+}
 </style>
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/PictureGroupThresholdEdit.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/PictureGroupThresholdEdit.vue
new file mode 100644
index 0000000000..95079d2d06
--- /dev/null
+++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/PictureGroupThresholdEdit.vue
@@ -0,0 +1,598 @@
+<script lang="tsx" setup>
+import icon_info_filled from '@/assets/svg/icon_info_filled.svg'
+import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
+import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
+import { PropType, reactive } from 'vue'
+import { useI18n } from '@/hooks/web/useI18n'
+import { COLOR_PANEL } from '../../../util/chart'
+import { fieldType } from '@/utils/attr'
+import { iconFieldMap } from '@/components/icon-group/field-list'
+
+const { t } = useI18n()
+
+const props = defineProps({
+  chart: {
+    type: Object as PropType<ChartObj>,
+    required: true
+  },
+  element: {
+    type: Object,
+    default() {
+      return {
+        propValue: { urlList: [] }
+      }
+    }
+  },
+  threshold: {
+    type: Array,
+    required: true
+  }
+})
+
+const emit = defineEmits(['onTableThresholdChange'])
+
+const thresholdCondition = {
+  term: 'eq',
+  field: '0',
+  value: '0',
+  color: '#ff0000ff',
+  backgroundColor: '#ffffff00',
+  min: '0',
+  max: '1'
+}
+const textOptions = [
+  {
+    label: '',
+    options: [
+      {
+        value: 'eq',
+        label: t('chart.filter_eq')
+      },
+      {
+        value: 'not_eq',
+        label: t('chart.filter_not_eq')
+      }
+    ]
+  },
+  {
+    label: '',
+    options: [
+      {
+        value: 'like',
+        label: t('chart.filter_like')
+      },
+      {
+        value: 'not like',
+        label: t('chart.filter_not_like')
+      }
+    ]
+  },
+  {
+    label: '',
+    options: [
+      {
+        value: 'null',
+        label: t('chart.filter_null')
+      },
+      {
+        value: 'not_null',
+        label: t('chart.filter_not_null')
+      }
+    ]
+  },
+  {
+    label: '',
+    options: [
+      {
+        value: 'default',
+        label: '默认'
+      }
+    ]
+  }
+]
+const dateOptions = [
+  {
+    label: '',
+    options: [
+      {
+        value: 'eq',
+        label: t('chart.filter_eq')
+      },
+      {
+        value: 'not_eq',
+        label: t('chart.filter_not_eq')
+      }
+    ]
+  },
+  {
+    label: '',
+    options: [
+      {
+        value: 'lt',
+        label: t('chart.filter_lt')
+      },
+      {
+        value: 'gt',
+        label: t('chart.filter_gt')
+      }
+    ]
+  },
+  {
+    label: '',
+    options: [
+      {
+        value: 'le',
+        label: t('chart.filter_le')
+      },
+      {
+        value: 'ge',
+        label: t('chart.filter_ge')
+      }
+    ]
+  },
+  {
+    label: '',
+    options: [
+      {
+        value: 'default',
+        label: '默认'
+      }
+    ]
+  }
+]
+const valueOptions = [
+  {
+    label: '',
+    options: [
+      {
+        value: 'eq',
+        label: t('chart.filter_eq')
+      },
+      {
+        value: 'not_eq',
+        label: t('chart.filter_not_eq')
+      }
+    ]
+  },
+  {
+    label: '',
+    options: [
+      {
+        value: 'lt',
+        label: t('chart.filter_lt')
+      },
+      {
+        value: 'gt',
+        label: t('chart.filter_gt')
+      }
+    ]
+  },
+  {
+    label: '',
+    options: [
+      {
+        value: 'le',
+        label: t('chart.filter_le')
+      },
+      {
+        value: 'ge',
+        label: t('chart.filter_ge')
+      }
+    ]
+  },
+  {
+    label: '',
+    options: [
+      {
+        value: 'between',
+        label: t('chart.filter_between')
+      }
+    ]
+  },
+  {
+    label: '',
+    options: [
+      {
+        value: 'default',
+        label: '默认'
+      }
+    ]
+  }
+]
+const predefineColors = COLOR_PANEL
+
+const state = reactive({
+  thresholdArr: [] as TableThreshold[],
+  fields: [],
+  thresholdObj: {
+    fieldId: '',
+    field: {},
+    conditions: []
+  } as TableThreshold
+})
+
+const init = () => {
+  state.thresholdArr = JSON.parse(JSON.stringify(props.threshold)) as TableThreshold[]
+  initFields()
+}
+const initOptions = item => {
+  if (item.field) {
+    if ([0, 5, 7].includes(item.field.deType)) {
+      item.options = JSON.parse(JSON.stringify(textOptions))
+    } else if (item.field.deType === 1) {
+      item.options = JSON.parse(JSON.stringify(dateOptions))
+    } else {
+      item.options = JSON.parse(JSON.stringify(valueOptions))
+    }
+    item.conditions &&
+      item.conditions.forEach(ele => {
+        ele.term = ''
+      })
+  }
+}
+const initFields = () => {
+  let fields = []
+  if (props.chart.type === 'table-info') {
+    fields = JSON.parse(JSON.stringify(props.chart.xAxis))
+  } else if (props.chart.type === 'table-pivot') {
+    const xAxis = JSON.parse(JSON.stringify(props.chart.xAxis))
+    const xAxisExt = JSON.parse(JSON.stringify(props.chart.xAxisExt))
+    const yAxis = JSON.parse(JSON.stringify(props.chart.yAxis))
+    fields = [...xAxis, ...xAxisExt, ...yAxis]
+  } else {
+    const xAxis = JSON.parse(JSON.stringify(props.chart.xAxis))
+    const yAxis = JSON.parse(JSON.stringify(props.chart.yAxis))
+    fields = [...xAxis, ...yAxis]
+  }
+  state.fields.splice(0, state.fields.length, ...fields)
+}
+const addThreshold = () => {
+  state.thresholdArr.push(JSON.parse(JSON.stringify(state.thresholdObj)))
+  changeThreshold()
+}
+const removeThreshold = index => {
+  state.thresholdArr.splice(index, 1)
+  changeThreshold()
+}
+
+const changeThreshold = () => {
+  emit('onTableThresholdChange', state.thresholdArr)
+}
+
+const addConditions = item => {
+  item.conditions.push(JSON.parse(JSON.stringify(thresholdCondition)))
+  changeThreshold()
+}
+const removeCondition = (item, index) => {
+  item.conditions.splice(index, 1)
+  changeThreshold()
+}
+
+const addField = item => {
+  // get field
+  if (state.fields && state.fields.length > 0) {
+    state.fields.forEach(ele => {
+      if (item.fieldId === ele.id) {
+        item.field = JSON.parse(JSON.stringify(ele))
+        initOptions(item)
+      }
+    })
+  }
+  changeThreshold()
+}
+
+init()
+</script>
+
+<template>
+  <el-col>
+    <div class="tip">
+      <Icon name="icon_info_filled" class="icon-style"
+        ><icon_info_filled class="svg-icon icon-style"
+      /></Icon>
+      <span style="padding-left: 10px">{{ t('chart.table_threshold_tip') }}</span>
+    </div>
+
+    <div @keydown.stop @keyup.stop style="max-height: 50vh; overflow-y: auto">
+      <div
+        v-for="(fieldItem, fieldIndex) in state.thresholdArr"
+        :key="fieldIndex"
+        class="field-item"
+      >
+        <el-row style="margin-top: 6px; align-items: center; justify-content: space-between">
+          <el-form-item class="form-item">
+            <el-select v-model="fieldItem.fieldId" @change="addField(fieldItem)">
+              <el-option
+                class="series-select-option"
+                v-for="fieldOption in state.fields"
+                :key="fieldOption.id"
+                :label="fieldOption.name"
+                :value="fieldOption.id"
+                :disabled="chart.type === 'table-info' && fieldOption.deType === 7"
+              >
+                <el-icon style="margin-right: 8px">
+                  <Icon
+                    :className="`field-icon-${
+                      fieldType[[2, 3].includes(fieldOption.deType) ? 2 : 0]
+                    }`"
+                    ><component :is="iconFieldMap[fieldType[fieldOption.deType]]"></component
+                  ></Icon>
+                </el-icon>
+                {{ fieldOption.name }}
+              </el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-button
+            class="circle-button m-icon-btn"
+            text
+            :style="{ float: 'right' }"
+            @click="removeThreshold(fieldIndex)"
+          >
+            <el-icon size="20px" style="color: #646a73">
+              <Icon name="icon_delete-trash_outlined"
+                ><icon_deleteTrash_outlined class="svg-icon"
+              /></Icon>
+            </el-icon>
+          </el-button>
+        </el-row>
+
+        <el-row :style="{ marginTop: '16px', borderTop: '1px solid #d5d6d8' }">
+          <el-row
+            v-for="(item, index) in fieldItem.conditions"
+            :key="index"
+            class="line-item"
+            :gutter="10"
+          >
+            <el-col :span="4">
+              <el-form-item class="form-item">
+                <el-select v-model="item.term" @change="changeThreshold">
+                  <el-option-group
+                    v-for="(group, idx) in fieldItem.options"
+                    :key="idx"
+                    :label="group.label"
+                  >
+                    <el-option
+                      v-for="opt in group.options"
+                      :key="opt.value"
+                      :label="opt.label"
+                      :value="opt.value"
+                    />
+                  </el-option-group>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col
+              v-if="
+                !item.term.includes('null') &&
+                !item.term.includes('empty') &&
+                item.term !== 'between'
+              "
+              :span="10"
+              style="text-align: center"
+            >
+              <el-form-item class="form-item">
+                <el-input-number
+                  v-model="item.value"
+                  v-if="[2, 3].includes(fieldItem.field.deType)"
+                  :placeholder="t('chart.drag_block_label_value')"
+                  controls-position="right"
+                  class="value-item"
+                  clearable
+                  @change="changeThreshold"
+                />
+                <el-input
+                  v-model="item.value"
+                  v-else
+                  :placeholder="t('chart.drag_block_label_value')"
+                  controls-position="right"
+                  clearable
+                  @change="changeThreshold"
+                />
+              </el-form-item>
+            </el-col>
+
+            <el-col v-if="item.term === 'between'" :span="4" style="text-align: center">
+              <el-form-item class="form-item">
+                <el-input-number
+                  v-model="item.min"
+                  controls-position="right"
+                  class="between-item"
+                  :placeholder="t('chart.axis_value_min')"
+                  clearable
+                  @change="changeThreshold"
+                />
+              </el-form-item>
+            </el-col>
+
+            <el-col v-if="item.term === 'between'" :span="2" style="text-align: center">
+              <span style="margin: 0 4px">
+                ≤&nbsp;&nbsp;{{ t('chart.drag_block_label_value') }}&nbsp;&nbsp;≤
+              </span>
+            </el-col>
+
+            <el-col v-if="item.term === 'between'" :span="4" style="text-align: center">
+              <el-form-item class="form-item">
+                <el-input-number
+                  v-model="item.max"
+                  controls-position="right"
+                  class="between-item"
+                  :placeholder="t('chart.axis_value_max')"
+                  clearable
+                  @change="changeThreshold"
+                />
+              </el-form-item>
+            </el-col>
+            <div
+              style="display: flex; align-items: center; justify-content: center; margin-left: 8px"
+            >
+              <div class="color-title">展示图片</div>
+              <el-form-item class="form-item">
+                <el-select v-model="item.url" @change="changeThreshold">
+                  <el-option
+                    v-for="urlInfo in element.propValue.urlList"
+                    :key="urlInfo.url"
+                    :label="urlInfo.name"
+                    :value="urlInfo.url"
+                  />
+                </el-select>
+              </el-form-item>
+            </div>
+            <div
+              style="display: flex; align-items: center; justify-content: center; margin-left: 8px"
+            >
+              <el-button
+                class="circle-button m-icon-btn"
+                text
+                @click="removeCondition(fieldItem, index)"
+              >
+                <el-icon size="20px" style="color: #646a73">
+                  <Icon name="icon_delete-trash_outlined"
+                    ><icon_deleteTrash_outlined class="svg-icon"
+                  /></Icon>
+                </el-icon>
+              </el-button>
+            </div>
+          </el-row>
+        </el-row>
+
+        <el-button
+          style="margin-top: 10px"
+          class="circle-button"
+          type="primary"
+          text
+          @click="addConditions(fieldItem)"
+        >
+          <template #icon>
+            <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
+          </template>
+          {{ t('chart.add_style') }}
+        </el-button>
+      </div>
+    </div>
+
+    <el-button
+      class="circle-button"
+      text
+      type="primary"
+      style="margin-top: 10px"
+      @click="addThreshold"
+    >
+      <template #icon>
+        <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
+      </template>
+      {{ t('chart.add_condition') }}
+    </el-button>
+  </el-col>
+</template>
+
+<style lang="less" scoped>
+.field-item {
+  width: 100%;
+  border-radius: 4px;
+  padding: 10px 16px;
+  margin-top: 10px;
+  background: #f5f6f7;
+}
+
+.line-item {
+  width: 100%;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  margin-top: 16px;
+}
+
+.form-item {
+  height: 28px !important;
+  :deep(.el-form-item__label) {
+    font-size: 12px;
+  }
+}
+
+span {
+  font-size: 12px;
+}
+
+.value-item {
+  position: relative;
+  display: inline-block;
+  width: 100% !important;
+}
+
+.between-item {
+  position: relative;
+  display: inline-block;
+  width: 100% !important;
+}
+
+.select-item {
+  position: relative;
+  display: inline-block;
+  width: 100% !important;
+}
+
+.el-select-dropdown__item {
+  padding: 0 20px;
+  font-size: 12px;
+}
+
+.color-picker-style {
+  cursor: pointer;
+  z-index: 1003;
+  width: 28px;
+  height: 28px;
+}
+
+.color-picker-style :deep(.el-color-picker__trigger) {
+  width: 28px;
+  height: 28px;
+}
+
+.color-title {
+  color: #646a73;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  padding: 0 8px;
+}
+
+.tip {
+  font-size: 12px;
+  background: #d6e2ff;
+  border-radius: 4px;
+  padding: 10px 20px;
+  display: flex;
+  align-items: center;
+}
+
+:deep(.ed-form-item) {
+  margin-bottom: 0 !important;
+}
+
+.icon-style {
+  width: 14px;
+  height: 14px;
+  color: var(--ed-color-primary);
+}
+
+.m-icon-btn {
+  &:hover {
+    background: rgba(31, 35, 41, 0.1) !important;
+  }
+  &:focus {
+    background: rgba(31, 35, 41, 0.1) !important;
+  }
+  &:active {
+    background: rgba(31, 35, 41, 0.2) !important;
+  }
+}
+
+.series-select-option {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 11px;
+}
+</style>
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
index d1174bd15b..1a1e729725 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
@@ -28,9 +28,10 @@ import FlowMapLineSelector from '@/views/chart/components/editor/editor-style/co
 import FlowMapPointSelector from '@/views/chart/components/editor/editor-style/components/FlowMapPointSelector.vue'
 import CommonEvent from '@/custom-component/common/CommonEvent.vue'
 import CommonBorderSetting from '@/custom-component/common/CommonBorderSetting.vue'
+import PictureGroupAttr from '@/custom-component/picture-group/Attr.vue'
 
 const dvMainStore = dvMainStoreWithOut()
-const { dvInfo, batchOptStatus } = storeToRefs(dvMainStore)
+const { dvInfo, batchOptStatus, curComponent } = storeToRefs(dvMainStore)
 const { t } = useI18n()
 
 const state = {
@@ -144,6 +145,10 @@ const eventsShow = computed(() => {
   )
 })
 
+const pictureGroupShow = computed(() => {
+  return curComponent.value?.innerType === 'picture-group'
+})
+
 const showProperties = (property: EditorProperty) => properties.value?.includes(property)
 
 const onMiscChange = (val, prop) => {
@@ -607,6 +612,11 @@ watch(
               @onChangeYAxisExtForm="onChangeYAxisExtForm"
             />
           </collapse-switch-item>
+          <PictureGroupAttr
+            v-if="pictureGroupShow"
+            :themes="themes"
+            :element="curComponent"
+          ></PictureGroupAttr>
         </el-collapse>
       </el-row>
     </div>
diff --git a/core/core-frontend/src/views/chart/components/editor/index.vue b/core/core-frontend/src/views/chart/components/editor/index.vue
index 295cc04abd..346dc3b41e 100644
--- a/core/core-frontend/src/views/chart/components/editor/index.vue
+++ b/core/core-frontend/src/views/chart/components/editor/index.vue
@@ -1784,7 +1784,7 @@ const deleteChartFieldItem = id => {
                 <el-container direction="vertical">
                   <el-scrollbar class="has-footer drag_main_area attr-style theme-border-class">
                     <el-row
-                      v-if="!['rich-text', 'Picture'].includes(view.type)"
+                      v-if="!['rich-text', 'Picture', 'picture-group'].includes(view.type)"
                       class="drag-data padding-lr"
                     >
                       <span class="data-area-label">{{ t('chart.switch_chart') }}</span>
diff --git a/core/core-frontend/src/views/chart/components/editor/util/chart.ts b/core/core-frontend/src/views/chart/components/editor/util/chart.ts
index 4cd09393a7..d76473c7d8 100644
--- a/core/core-frontend/src/views/chart/components/editor/util/chart.ts
+++ b/core/core-frontend/src/views/chart/components/editor/util/chart.ts
@@ -1160,6 +1160,13 @@ export const CHART_TYPE_CONFIGS = [
         value: 'indicator',
         title: t('chart.chart_indicator'),
         icon: 'indicator'
+      },
+      {
+        render: 'custom',
+        category: 'quota',
+        value: 'picture-group',
+        title: '图片组',
+        icon: 'picture-group'
       }
     ]
   },
@@ -1505,20 +1512,6 @@ export const CHART_TYPE_CONFIGS = [
         icon: 'rich-text'
       }
     ]
-  },
-  {
-    category: 'other',
-    title: '图片组',
-    display: 'hidden',
-    details: [
-      {
-        render: 'custom',
-        category: 'quota',
-        value: 'picture-group',
-        title: '图片图',
-        icon: 'picture'
-      }
-    ]
   }
 ]
 
diff --git a/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts b/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts
index b7bfc48158..e6d9a334c5 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts
@@ -610,6 +610,9 @@ export function mappingColor(value, defaultColor, field, type) {
           color = t[type]
           flag = true
         }
+      } else if (t.term === 'default') {
+        color = t[type]
+        flag = true
       }
       if (flag) {
         break
@@ -648,6 +651,9 @@ export function mappingColor(value, defaultColor, field, type) {
           color = t[type]
           flag = true
         }
+      } else if (t.term === 'default') {
+        color = t[type]
+        flag = true
       }
       if (flag) {
         break
@@ -688,6 +694,9 @@ export function mappingColor(value, defaultColor, field, type) {
           color = t[type]
           flag = true
         }
+      } else if (t.term === 'default') {
+        color = t[type]
+        flag = true
       }
       if (flag) {
         break
diff --git a/core/core-frontend/src/views/chart/components/js/panel/types/index.ts b/core/core-frontend/src/views/chart/components/js/panel/types/index.ts
index 89b29f4d11..b9e55b2430 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/types/index.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/types/index.ts
@@ -15,7 +15,7 @@ export enum ChartLibraryType {
   ECHARTS = 'echarts',
   S2 = 's2',
   RICH_TEXT = 'rich-text',
-  PICTURE_GROUP = 'picture_group',
+  PICTURE_GROUP = 'picture-group',
   INDICATOR = 'indicator'
 }
 export abstract class ChartWrapper<O> {
diff --git a/core/core-frontend/src/views/chart/components/views/index.vue b/core/core-frontend/src/views/chart/components/views/index.vue
index f38404b21d..3bac39d426 100644
--- a/core/core-frontend/src/views/chart/components/views/index.vue
+++ b/core/core-frontend/src/views/chart/components/views/index.vue
@@ -125,7 +125,7 @@ const { view, showPosition, element, active, searchCount, scale } = toRefs(props
 
 const titleShow = computed(() => {
   return (
-    !['rich-text', 'Picture'].includes(element.value.innerType) &&
+    !['rich-text', 'picture-group'].includes(element.value.innerType) &&
     state.title_show &&
     showPosition.value !== 'viewDialog'
   )
@@ -678,7 +678,7 @@ const chartAreaShow = computed(() => {
       return true
     }
   }
-  if (['rich-text', 'Picture'].includes(view.value.type)) {
+  if (['rich-text', 'picture-group'].includes(view.value.type)) {
     return true
   }
   if (view.value?.isPlugin) {
@@ -911,6 +911,7 @@ const loadPluginCategory = data => {
         ref="chartComponent"
         :element="element"
         :active="active"
+        :view="view"
         :show-position="showPosition"
       >
       </de-picture-group>