From eab217362cef1a758643e59c67ccfdd4bc03a37d Mon Sep 17 00:00:00 2001
From: wisonic-s <shaochuan.wu@fit2cloud.com>
Date: Mon, 30 Oct 2023 20:55:17 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B0=B4=E6=B3=A2=E5=9B=BE=E9=98=88?=
 =?UTF-8?q?=E5=80=BC#5603?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/frontend/src/views/chart/chart/chart.js  |  1 +
 .../src/views/chart/chart/liquid/liquid.js    | 25 ++++++++++-
 .../chart/components/senior/Threshold.vue     | 45 +++++++++++++++++--
 .../src/views/chart/view/ChartEdit.vue        |  6 +--
 4 files changed, 69 insertions(+), 8 deletions(-)

diff --git a/core/frontend/src/views/chart/chart/chart.js b/core/frontend/src/views/chart/chart/chart.js
index 9028a31522..35005b24cf 100644
--- a/core/frontend/src/views/chart/chart/chart.js
+++ b/core/frontend/src/views/chart/chart/chart.js
@@ -481,6 +481,7 @@ export const DEFAULT_FUNCTION_CFG = {
 }
 export const DEFAULT_THRESHOLD = {
   gaugeThreshold: '',
+  liquidThreshold: '',
   labelThreshold: [],
   tableThreshold: [],
   textLabelThreshold: []
diff --git a/core/frontend/src/views/chart/chart/liquid/liquid.js b/core/frontend/src/views/chart/chart/liquid/liquid.js
index 09b9dfe645..cecd718161 100644
--- a/core/frontend/src/views/chart/chart/liquid/liquid.js
+++ b/core/frontend/src/views/chart/chart/liquid/liquid.js
@@ -8,7 +8,7 @@ let labelFormatter = null
 export function baseLiquid(plot, container, chart) {
   let value = 0
   const colors = []
-  let max, radius, bgColor, shape, labelContent
+  let max, radius, bgColor, shape, labelContent, liquidStyle
   if (chart.data?.series.length > 0) {
     value = chart.data.series[0].data[0]
   }
@@ -53,6 +53,26 @@ export function baseLiquid(plot, container, chart) {
       }
     }
   }
+  // senior
+  const senior = JSON.parse(chart.senior)
+  if (senior?.threshold) {
+    const { liquidThreshold } = senior?.threshold
+    if (liquidThreshold) {
+      liquidStyle = ({ percent }) => {
+        const thresholdArr = liquidThreshold.split(',')
+        let index = 0
+        thresholdArr.forEach((v, i) => {
+          if (percent > v / 100) {
+            index = i + 1
+          }
+        })
+        return {
+          fill: colors[index % colors.length],
+          stroke: colors[index % colors.length]
+        }
+      }
+    }
+  }
   let customStyle
   if (chart.customStyle) {
     customStyle = JSON.parse(chart.customStyle)
@@ -78,7 +98,8 @@ export function baseLiquid(plot, container, chart) {
     shape: shape,
     statistic: {
       content: labelContent
-    }
+    },
+    liquidStyle
   })
   return plot
 }
diff --git a/core/frontend/src/views/chart/components/senior/Threshold.vue b/core/frontend/src/views/chart/components/senior/Threshold.vue
index 3d7e0a5bf3..476b0fe20b 100644
--- a/core/frontend/src/views/chart/components/senior/Threshold.vue
+++ b/core/frontend/src/views/chart/components/senior/Threshold.vue
@@ -40,6 +40,45 @@
         </el-form-item>
       </el-form>
     </el-col>
+    <el-col v-if="chart.type && chart.type === 'liquid'">
+      <el-form
+        ref="thresholdForm"
+        :model="thresholdForm"
+        label-width="80px"
+        size="mini"
+      >
+        <el-form-item
+          :label="$t('chart.threshold_range')+'(%)'"
+          class="form-item"
+        >
+          <span>0,</span>
+          <el-input
+            v-model="thresholdForm.liquidThreshold"
+            style="width: 100px;margin: 0 10px;"
+            :placeholder="$t('chart.threshold_range')"
+            size="mini"
+            clearable
+            @change="gaugeThresholdChange"
+          />
+          <span>,100</span>
+          <el-tooltip
+            class="item"
+            effect="dark"
+            placement="bottom"
+          >
+            <div slot="content">
+              阈值设置，决定水波图颜色，为空则不开启阈值，范围(0-100)，逐级递增
+              <br>
+              例如：输入 30,70；表示：分为3段，分别为[0,30],(30,70],(70,100]
+            </div>
+            <i
+              class="el-icon-info"
+              style="cursor: pointer;margin-left: 10px;font-size: 12px;"
+            />
+          </el-tooltip>
+        </el-form-item>
+      </el-form>
+    </el-col>
 
     <!--文本卡-->
     <el-col v-if="chart.type && chart.type === 'label'">
@@ -459,10 +498,10 @@ export default {
     changeThreshold() {
       this.$emit('onThresholdChange', this.thresholdForm)
     },
-    gaugeThresholdChange() {
+    gaugeThresholdChange(val) {
       // check input
-      if (this.thresholdForm.gaugeThreshold) {
-        const arr = this.thresholdForm.gaugeThreshold.split(',')
+      if (val) {
+        const arr = val.split(',')
         for (let i = 0; i < arr.length; i++) {
           const ele = arr[i]
           if (parseFloat(ele).toString() === 'NaN' || parseFloat(ele) <= 0 || parseFloat(ele) >= 100) {
diff --git a/core/frontend/src/views/chart/view/ChartEdit.vue b/core/frontend/src/views/chart/view/ChartEdit.vue
index 2ea98a2432..f0b7df4e7f 100644
--- a/core/frontend/src/views/chart/view/ChartEdit.vue
+++ b/core/frontend/src/views/chart/view/ChartEdit.vue
@@ -1956,7 +1956,7 @@ export default {
       return this.$store.state.panel.panelInfo
     },
     showCfg() {
-      return includesAny(this.view.type, 'bar', 'line', 'area', 'gauge', 'table') && this.view.type !== 'race-bar' ||
+      return includesAny(this.view.type, 'bar', 'line', 'area', 'gauge', 'table', 'liquid') && this.view.type !== 'race-bar' ||
         equalsAny(this.view.type, 'text', 'label', 'map', 'buddle-map')
     },
     showSeniorCfg() {
@@ -1974,7 +1974,7 @@ export default {
       if (this.view.type === 'bidirectional-bar') {
         return false
       }
-      return includesAny(this.view.type, 'bar', 'line', 'area', 'gauge') ||
+      return includesAny(this.view.type, 'bar', 'line', 'area', 'gauge', 'liquid') ||
         equalsAny(this.view.type, 'text', 'label') ||
         (this.view.render === 'antv' && this.view.type.includes('table'))
     },
@@ -1985,7 +1985,7 @@ export default {
       if (this.view.type === 'bidirectional-bar') {
         return false
       }
-      return includesAny(this.view.type, 'gauge') ||
+      return includesAny(this.view.type, 'gauge', 'liquid') ||
         equalsAny(this.view.type, 'text', 'label') ||
         (this.view.render === 'antv' && this.view.type.includes('table'))
     },