From 059c1ef9ed7b38f7aa8407599faf1d9b7f132975 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Mon, 30 Sep 2024 16:51:41 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E5=9B=BE=E8=A1=A8):=20=E5=9B=BE?=
 =?UTF-8?q?=E8=A1=A8=E6=9D=A1=E4=BB=B6=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../picture-group/PictureItem.vue             | 65 +++++++++++++++++++
 .../picture-group/PictureOptionPrefix.vue     | 31 +++++++++
 .../editor-senior/components/Threshold.vue    |  6 +-
 .../dialog/PictureGroupThresholdEdit.vue      | 45 ++++++++++++-
 4 files changed, 142 insertions(+), 5 deletions(-)
 create mode 100644 core/core-frontend/src/custom-component/picture-group/PictureItem.vue
 create mode 100644 core/core-frontend/src/custom-component/picture-group/PictureOptionPrefix.vue

diff --git a/core/core-frontend/src/custom-component/picture-group/PictureItem.vue b/core/core-frontend/src/custom-component/picture-group/PictureItem.vue
new file mode 100644
index 0000000000..d50f91cf19
--- /dev/null
+++ b/core/core-frontend/src/custom-component/picture-group/PictureItem.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="img-option">
+    <div class="img-area" :class="{ 'selected-active': active }">
+      <img draggable="false" :src="imgUrlTrans(urlInfo.url)" />
+    </div>
+    <span :title="urlInfo.name" class="name-area">{{ urlInfo.name }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { toRefs } from 'vue'
+import { imgUrlTrans } from '@/utils/imgUtils'
+
+const props = withDefaults(
+  defineProps<{
+    urlInfo: any
+    active: boolean
+  }>(),
+  {}
+)
+
+const { urlInfo, active } = toRefs(props)
+</script>
+
+<style scoped lang="less">
+.img-option {
+  margin: 0 5px !important;
+  width: 88px;
+  height: 88px;
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  .selected-active {
+    border: 1px solid var(--ed-color-primary-99, rgba(51, 112, 255, 0.6));
+  }
+  .img-area {
+    &:hover {
+      border: 1px dashed var(--ed-color-primary-99, rgba(51, 112, 255, 0.6));
+    }
+    border-radius: 4px;
+    background-color: #f5f6f7;
+    width: 80px;
+    height: 56px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .name-area {
+    margin: 6px 4px;
+    width: 80px;
+    line-height: 20px;
+    font-size: 12px !important;
+    font-weight: 400;
+    text-align: center;
+    white-space: nowrap; /* 不换行 */
+    overflow: hidden; /* 隐藏超出的内容 */
+    text-overflow: ellipsis; /* 用省略号表示被隐藏的部分 */
+    color: rgba(100, 106, 115, 1);
+  }
+}
+</style>
diff --git a/core/core-frontend/src/custom-component/picture-group/PictureOptionPrefix.vue b/core/core-frontend/src/custom-component/picture-group/PictureOptionPrefix.vue
new file mode 100644
index 0000000000..2dd329338e
--- /dev/null
+++ b/core/core-frontend/src/custom-component/picture-group/PictureOptionPrefix.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="img-option-prefix">
+    <img draggable="false" :src="imgUrlTrans(url)" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { imgUrlTrans } from '@/utils/imgUtils'
+
+withDefaults(
+  defineProps<{
+    url: any
+  }>(),
+  {}
+)
+</script>
+
+<style scoped lang="less">
+.img-option-prefix {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  img {
+    border-radius: 4px;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
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 d18e1befdf..f2992ad646 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
@@ -907,7 +907,7 @@ span {
   align-items: center;
   flex-wrap: nowrap;
   :nth-child(1) {
-    width: 48px !important;
+    width: 48px;
   }
   :nth-child(2) {
     width: 40px !important;
@@ -985,7 +985,7 @@ span {
   border-radius: 2px;
 }
 .pic-group-img {
-  width: 100%;
-  height: 100%;
+  width: 100% !important;
+  height: 100% !important;
 }
 </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
index a369b1d1df..8611974d78 100644
--- 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
@@ -7,6 +7,8 @@ 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'
+import PictureItem from '@/custom-component/picture-group/PictureItem.vue'
+import PictureOptionPrefix from '@/custom-component/picture-group/PictureOptionPrefix.vue'
 
 const { t } = useI18n()
 
@@ -429,13 +431,25 @@ init()
             >
               <div class="color-title">展示图片</div>
               <el-form-item class="form-item">
-                <el-select v-model="item.url" @change="changeThreshold">
+                <el-select
+                  v-model="item.url"
+                  @change="changeThreshold"
+                  popper-class="picture-group-select"
+                >
+                  <template v-if="item.url" #prefix>
+                    <picture-option-prefix :url="item.url"></picture-option-prefix>
+                  </template>
                   <el-option
                     v-for="urlInfo in element.propValue.urlList"
                     :key="urlInfo.url"
                     :label="urlInfo.name"
                     :value="urlInfo.url"
-                  />
+                  >
+                    <picture-item
+                      :active="item.url === urlInfo.url"
+                      :url-info="urlInfo"
+                    ></picture-item>
+                  </el-option>
                 </el-select>
               </el-form-item>
             </div>
@@ -597,3 +611,30 @@ span {
   padding: 0 11px;
 }
 </style>
+
+<style lang="less">
+.picture-group-select {
+  min-width: 50px !important;
+  width: 304px;
+  .ed-scrollbar__view {
+    display: grid !important;
+    grid-template-columns: repeat(3, 1fr) !important;
+  }
+  .ed-select-dropdown__item {
+    height: 100px !important;
+    text-align: center;
+    padding: 0px 5px;
+  }
+
+  .ed-select-dropdown__item.selected::after {
+    display: none;
+  }
+
+  .ed-select-dropdown__item.hover {
+    background-color: rgba(0, 0, 0, 0) !important;
+  }
+  .ed-select-dropdown__item.selected {
+    background-color: rgba(0, 0, 0, 0) !important;
+  }
+}
+</style>