From d7041ae46f2fa960660245261a1cf4c2fb6f23c6 Mon Sep 17 00:00:00 2001
From: "wu.jian2" <distantmtn@gmail.com>
Date: Thu, 16 Nov 2023 15:13:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8E=92=E5=90=8D=E8=A1=A8=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=B7=BB=E5=8A=A0=E7=9B=B8=E5=85=B3=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ScreenScrollRanking/index.vue             | 36 +++++++++++-
 .../ScreenScrollRanking/setting.vue           | 58 ++++++++++++++++++-
 .../ScreenScrollRanking/settingConfig.js      | 10 +++-
 3 files changed, 101 insertions(+), 3 deletions(-)

diff --git a/data-room-ui/packages/BasicComponents/ScreenScrollRanking/index.vue b/data-room-ui/packages/BasicComponents/ScreenScrollRanking/index.vue
index 538de0de..649a53c0 100644
--- a/data-room-ui/packages/BasicComponents/ScreenScrollRanking/index.vue
+++ b/data-room-ui/packages/BasicComponents/ScreenScrollRanking/index.vue
@@ -8,6 +8,16 @@
       class="ranking-box"
       :class="{'light-theme':customTheme === 'light','auto-theme':customTheme =='dark'}"
       :config="option"
+      :style="{
+        '--rank-font-size':customize.rankFontSize + 'px',
+        '--rank-color':customize.rankColor,
+        '--info-name-font-size':customize.infoNameFontSize + 'px',
+        '--info-name-color':customize.infoNameColor,
+        '--ranking-value-font-size':customize.rankingValueFontSize + 'px',
+        '--ranking-value-color':customize.rankingValueColor,
+        '--inside-column-color':customize.insideColumnColor,
+        '--ranking-column-border-bottom-color':customize.rankingColumnBorderBottomColor
+      }"
       @click="rowClick"
     />
   </div>
@@ -43,6 +53,9 @@ export default {
         return { ...this.config.customize, data: this.config.option.data }
       },
       set (value) {}
+    },
+    customize(){
+      return this.config.customize
     }
   },
   watch: {
@@ -133,5 +146,26 @@ export default {
     background: #dddddd !important;
     border-radius: 10px;
   }
-
+::v-deep .dv-scroll-ranking-board{
+  .ranking-info{
+    .rank{
+      font-size: var(--rank-font-size);
+      color: var(--rank-color);
+    }
+    .info-name{
+      font-size: var(--info-name-font-size);
+      color: var(--info-name-color);
+    }
+    .ranking-value{
+      font-size: var(--ranking-value-font-size);
+      color: var(--ranking-value-color);
+    }
+  }
+  .ranking-column{
+    border-bottom: 2px solid var(--ranking-column-border-bottom-color);
+    .inside-column{
+      background-color: var(--inside-column-color);
+    }
+  }
+}
 </style>
diff --git a/data-room-ui/packages/BasicComponents/ScreenScrollRanking/setting.vue b/data-room-ui/packages/BasicComponents/ScreenScrollRanking/setting.vue
index 259c05fc..b2591160 100644
--- a/data-room-ui/packages/BasicComponents/ScreenScrollRanking/setting.vue
+++ b/data-room-ui/packages/BasicComponents/ScreenScrollRanking/setting.vue
@@ -11,7 +11,7 @@
         :model="config.customize"
         label-position="left"
         class="setting-body bs-el-form"
-        label-width="100px"
+        label-width="120px"
       >
         <SettingTitle>标题</SettingTitle>
         <div class="lc-field-body">
@@ -78,12 +78,67 @@
               :inactive-value="false"
             />
           </el-form-item>
+          <el-form-item label="序号字体颜色">
+            <ColorPicker
+              v-model="config.customize.rankColor"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
+          <el-form-item label="序号字体大小">
+            <el-input-number
+              v-model="config.customize.rankFontSize"
+              :min="12"
+              class="bs-el-input-number"
+              label="请输入字体大小"
+            />
+          </el-form-item>
+          <el-form-item label="左侧数据字体颜色">
+            <ColorPicker
+              v-model="config.customize.infoNameColor"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
+          <el-form-item label="左侧数据字体大小">
+            <el-input-number
+              v-model="config.customize.infoNameFontSize"
+              :min="12"
+              class="bs-el-input-number"
+              label="请输入字体大小"
+            />
+          </el-form-item>
+          <el-form-item label="右侧数据字体颜色">
+            <ColorPicker
+              v-model="config.customize.rankingValueColor"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
+          <el-form-item label="右侧数据字体大小">
+            <el-input-number
+              v-model="config.customize.rankingValueFontSize"
+              :min="12"
+              class="bs-el-input-number"
+              label="请输入字体大小"
+            />
+          </el-form-item>
+          <el-form-item label="内部列颜色">
+            <ColorPicker
+              v-model="config.customize.insideColumnColor"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
+          <el-form-item label="底部边框颜色">
+            <ColorPicker
+              v-model="config.customize.rankingColumnBorderBottomColor"
+              :predefine="predefineThemeColors"
+            />
+          </el-form-item>
         </div>
       </el-form>
     </el-form>
   </div>
 </template>
 <script>
+import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
 import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
 import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
@@ -93,6 +148,7 @@ export default {
   name: 'BarSetting',
   components: {
     PosWhSetting,
+    ColorPicker,
     SettingTitle,
     BorderSetting,
     RotateSetting
diff --git a/data-room-ui/packages/BasicComponents/ScreenScrollRanking/settingConfig.js b/data-room-ui/packages/BasicComponents/ScreenScrollRanking/settingConfig.js
index 207cf0b8..2a7cc05d 100644
--- a/data-room-ui/packages/BasicComponents/ScreenScrollRanking/settingConfig.js
+++ b/data-room-ui/packages/BasicComponents/ScreenScrollRanking/settingConfig.js
@@ -44,7 +44,15 @@ const customConfig = {
     carousel: 'single',
     unit: '',
     sort: true,
-    valueFormatter: undefined
+    valueFormatter: undefined,
+    rankFontSize: 13,
+    rankColor: '#1370fb',
+    infoNameFontSize: 13,
+    infoNameColor: '#ffffff',
+    rankingValueFontSize: 13,
+    rankingValueColor: '#fff',
+    insideColumnColor: '#1370fb',
+    rankingColumnBorderBottomColor: '#1370fb',
   }
 }
 export const dataConfig = {