From c6c6d9accf57409dad9420c6027cbe573142a199 Mon Sep 17 00:00:00 2001
From: junjun <junjie.xia@fit2cloud.com>
Date: Wed, 21 Sep 2022 14:12:09 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE):=20=E9=98=88=E5=80=BC?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E4=BB=8B=E4=BA=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/chart/chart/table/table-info.js |   7 +
 .../chart/components/normal/LabelNormal.vue   |   7 +
 .../chart/components/senior/Threshold.vue     | 122 ++++++++++++------
 .../senior/dialog/TableThresholdEdit.vue      |  28 +++-
 .../senior/dialog/TextThresholdEdit.vue       |  30 ++++-
 5 files changed, 147 insertions(+), 47 deletions(-)

diff --git a/frontend/src/views/chart/chart/table/table-info.js b/frontend/src/views/chart/chart/table/table-info.js
index ffa5ac370b..1a5e06c06f 100644
--- a/frontend/src/views/chart/chart/table/table-info.js
+++ b/frontend/src/views/chart/chart/table/table-info.js
@@ -536,6 +536,13 @@ function mappingColor(value, defaultColor, field, type) {
           color = t[type]
           flag = true
         }
+      } else if (t.term === 'between') {
+        const min = parseFloat(t.min)
+        const max = parseFloat(t.max)
+        if (min <= value && value <= max) {
+          color = t[type]
+          flag = true
+        }
       }
       if (flag) {
         break
diff --git a/frontend/src/views/chart/components/normal/LabelNormal.vue b/frontend/src/views/chart/components/normal/LabelNormal.vue
index 707f6ca950..7daac33deb 100644
--- a/frontend/src/views/chart/components/normal/LabelNormal.vue
+++ b/frontend/src/views/chart/components/normal/LabelNormal.vue
@@ -243,6 +243,13 @@ export default {
                 this.label_content_class.color = t.color
                 flag = true
               }
+            } else if (t.term === 'between') {
+              const min = parseFloat(t.min)
+              const max = parseFloat(t.max)
+              if (min <= value && value <= max) {
+                this.label_content_class.color = t.color
+                flag = true
+              }
             }
             if (flag) {
               break
diff --git a/frontend/src/views/chart/components/senior/Threshold.vue b/frontend/src/views/chart/components/senior/Threshold.vue
index dae3a65bb4..c3e0950d11 100644
--- a/frontend/src/views/chart/components/senior/Threshold.vue
+++ b/frontend/src/views/chart/components/senior/Threshold.vue
@@ -32,18 +32,22 @@
         />
         <el-col style="padding: 0 18px;">
           <el-row v-for="(item,index) in thresholdForm.labelThreshold" :key="index" class="line-style">
-            <el-col :span="8">
+            <el-col :span="6">
               <span v-if="item.term === 'eq'" :title="$t('chart.filter_eq')">{{ $t('chart.filter_eq') }}</span>
               <span v-else-if="item.term === 'not_eq'" :title="$t('chart.filter_not_eq')">{{ $t('chart.filter_not_eq') }}</span>
               <span v-else-if="item.term === 'lt'" :title="$t('chart.filter_lt')">{{ $t('chart.filter_lt') }}</span>
               <span v-else-if="item.term === 'gt'" :title="$t('chart.filter_gt')">{{ $t('chart.filter_gt') }}</span>
               <span v-else-if="item.term === 'le'" :title="$t('chart.filter_le')">{{ $t('chart.filter_le') }}</span>
               <span v-else-if="item.term === 'ge'" :title="$t('chart.filter_ge')">{{ $t('chart.filter_ge') }}</span>
+              <span v-else-if="item.term === 'between'" :title="$t('chart.filter_between')">{{ $t('chart.filter_between') }}</span>
             </el-col>
-            <el-col :span="8">
-              <span :title="item.value">{{ item.value }}</span>
+            <el-col :span="12">
+              <span v-if="item.term !== 'between'" :title="item.value">{{ item.value }}</span>
+              <span v-if="item.term === 'between'">
+                {{ item.min }}&nbsp;≤{{ $t('chart.drag_block_label_value') }}≤&nbsp;{{ item.max }}
+              </span>
             </el-col>
-            <el-col :span="8">
+            <el-col :span="6">
               <span :style="{width:'14px', height:'14px', backgroundColor: item.color, border: 'solid 1px #e1e4e8'}" />
             </el-col>
           </el-row>
@@ -81,6 +85,7 @@
                 <span v-else-if="item.term === 'gt'" :title="$t('chart.filter_gt')">{{ $t('chart.filter_gt') }}</span>
                 <span v-else-if="item.term === 'le'" :title="$t('chart.filter_le')">{{ $t('chart.filter_le') }}</span>
                 <span v-else-if="item.term === 'ge'" :title="$t('chart.filter_ge')">{{ $t('chart.filter_ge') }}</span>
+                <span v-else-if="item.term === 'between'" :title="$t('chart.filter_between')">{{ $t('chart.filter_between') }}</span>
                 <span v-else-if="item.term === 'like'" :title="$t('chart.filter_like')">{{ $t('chart.filter_like') }}</span>
                 <span v-else-if="item.term === 'not like'" :title="$t('chart.filter_not_like')">{{ $t('chart.filter_not_like') }}</span>
                 <span v-else-if="item.term === 'null'" :title="$t('chart.filter_null')">{{ $t('chart.filter_null') }}</span>
@@ -88,14 +93,17 @@
                 <span v-else-if="item.term === 'empty'" :title="$t('chart.filter_empty')">{{ $t('chart.filter_empty') }}</span>
                 <span v-else-if="item.term === 'not_empty'" :title="$t('chart.filter_not_empty')">{{ $t('chart.filter_not_empty') }}</span>
               </el-col>
-              <el-col :span="6">
-                <span v-if="!item.term.includes('null') && !item.term.includes('empty')" :title="item.value">{{ item.value }}</span>
+              <el-col :span="10">
+                <span v-if="!item.term.includes('null') && !item.term.includes('empty') && item.term !== 'between'" :title="item.value">{{ item.value }}</span>
+                <span v-else-if="!item.term.includes('null') && !item.term.includes('empty') && item.term === 'between'">
+                  {{ item.min }}&nbsp;≤{{ $t('chart.drag_block_label_value') }}≤&nbsp;{{ item.max }}
+                </span>
                 <span v-else>&nbsp;</span>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="4">
                 <span :title="$t('chart.textColor')" :style="{width:'14px', height:'14px', backgroundColor: item.color, border: 'solid 1px #e1e4e8'}" />
               </el-col>
-              <el-col :span="6">
+              <el-col :span="4">
                 <span :title="$t('chart.backgroundColor')" :style="{width:'14px', height:'14px', backgroundColor: item.backgroundColor, border: 'solid 1px #e1e4e8'}" />
               </el-col>
             </el-row>
@@ -250,21 +258,40 @@ export default {
           })
           return
         }
-        if (!ele.value) {
-          this.$message({
-            message: this.$t('chart.value_can_not_empty'),
-            type: 'error',
-            showClose: true
-          })
-          return
-        }
-        if (parseFloat(ele.value).toString() === 'NaN') {
-          this.$message({
-            message: this.$t('chart.value_error'),
-            type: 'error',
-            showClose: true
-          })
-          return
+        if (ele.term === 'between') {
+          if (!ele.min || !ele.max) {
+            this.$message({
+              message: this.$t('chart.value_can_not_empty'),
+              type: 'error',
+              showClose: true
+            })
+            return
+          }
+          if (parseFloat(ele.min).toString() === 'NaN' || parseFloat(ele.max).toString() === 'NaN') {
+            this.$message({
+              message: this.$t('chart.value_error'),
+              type: 'error',
+              showClose: true
+            })
+            return
+          }
+        } else {
+          if (!ele.value) {
+            this.$message({
+              message: this.$t('chart.value_can_not_empty'),
+              type: 'error',
+              showClose: true
+            })
+            return
+          }
+          if (parseFloat(ele.value).toString() === 'NaN') {
+            this.$message({
+              message: this.$t('chart.value_error'),
+              type: 'error',
+              showClose: true
+            })
+            return
+          }
         }
       }
       this.thresholdForm.labelThreshold = JSON.parse(JSON.stringify(this.thresholdArr))
@@ -314,21 +341,40 @@ export default {
             })
             return
           }
-          if (!ele.term.includes('null') && !ele.term.includes('empty') && !ele.value) {
-            this.$message({
-              message: this.$t('chart.value_can_not_empty'),
-              type: 'error',
-              showClose: true
-            })
-            return
-          }
-          if ((field.field.deType === 2 || field.field.deType === 3 || field.field.deType === 4) && parseFloat(ele.value).toString() === 'NaN') {
-            this.$message({
-              message: this.$t('chart.value_error'),
-              type: 'error',
-              showClose: true
-            })
-            return
+          if (ele.term === 'between') {
+            if (!ele.term.includes('null') && !ele.term.includes('empty') && (!ele.min || !ele.max)) {
+              this.$message({
+                message: this.$t('chart.value_can_not_empty'),
+                type: 'error',
+                showClose: true
+              })
+              return
+            }
+            if ((field.field.deType === 2 || field.field.deType === 3 || field.field.deType === 4) && (parseFloat(ele.min).toString() === 'NaN' || parseFloat(ele.max).toString() === 'NaN')) {
+              this.$message({
+                message: this.$t('chart.value_error'),
+                type: 'error',
+                showClose: true
+              })
+              return
+            }
+          } else {
+            if (!ele.term.includes('null') && !ele.term.includes('empty') && !ele.value) {
+              this.$message({
+                message: this.$t('chart.value_can_not_empty'),
+                type: 'error',
+                showClose: true
+              })
+              return
+            }
+            if ((field.field.deType === 2 || field.field.deType === 3 || field.field.deType === 4) && parseFloat(ele.value).toString() === 'NaN') {
+              this.$message({
+                message: this.$t('chart.value_error'),
+                type: 'error',
+                showClose: true
+              })
+              return
+            }
           }
         }
       }
diff --git a/frontend/src/views/chart/components/senior/dialog/TableThresholdEdit.vue b/frontend/src/views/chart/components/senior/dialog/TableThresholdEdit.vue
index 82df8aa7f8..84ff33682a 100644
--- a/frontend/src/views/chart/components/senior/dialog/TableThresholdEdit.vue
+++ b/frontend/src/views/chart/components/senior/dialog/TableThresholdEdit.vue
@@ -58,9 +58,9 @@
               </el-option-group>
             </el-select>
           </el-col>
-          <el-col :span="8" style="text-align: center;">
+          <el-col :span="10" style="text-align: center;">
             <el-input
-              v-show="!item.term.includes('null') && !item.term.includes('empty')"
+              v-show="!item.term.includes('null') && !item.term.includes('empty') && item.term !== 'between'"
               v-model="item.value"
               class="value-item"
               :placeholder="$t('chart.drag_block_label_value')"
@@ -68,6 +68,11 @@
               clearable
               @change="changeThreshold"
             />
+            <span v-if="item.term === 'between'">
+              <el-input v-model="item.min" class="between-item" :placeholder="$t('chart.axis_value_min')" size="mini" clearable @change="changeThreshold" />
+              <span style="margin: 0 4px;">≤{{ $t('chart.drag_block_label_value') }}≤</span>
+              <el-input v-model="item.max" class="between-item" :placeholder="$t('chart.axis_value_max')" size="mini" clearable @change="changeThreshold" />
+            </span>
           </el-col>
           <el-col :span="4" style="display: flex;align-items: center;justify-content: center;">
             <span class="color-title">{{ $t('chart.textColor') }}</span>
@@ -89,7 +94,7 @@
               @change="changeThreshold"
             />
           </el-col>
-          <el-col :span="4">
+          <el-col :span="2">
             <el-button
               type="text"
               icon="el-icon-delete"
@@ -134,7 +139,9 @@ export default {
         field: '0',
         value: '',
         color: '#ff0000ff',
-        backgroundColor: '#ffffffff'
+        backgroundColor: '#ffffffff',
+        min: '0',
+        max: '1'
       },
       textOptions: [
         {
@@ -230,6 +237,13 @@ export default {
             value: 'ge',
             label: this.$t('chart.filter_ge')
           }]
+        },
+        {
+          label: '',
+          options: [{
+            value: 'between',
+            label: this.$t('chart.filter_between')
+          }]
         }
       ],
       predefineColors: COLOR_PANEL
@@ -352,6 +366,12 @@ span {
   display: inline-block;
 }
 
+.between-item {
+  position: relative;
+  display: inline-block;
+  width: 80px !important;
+}
+
 .select-item {
   position: relative;
   display: inline-block;
diff --git a/frontend/src/views/chart/components/senior/dialog/TextThresholdEdit.vue b/frontend/src/views/chart/components/senior/dialog/TextThresholdEdit.vue
index 725d2182d2..ca6ca5f715 100644
--- a/frontend/src/views/chart/components/senior/dialog/TextThresholdEdit.vue
+++ b/frontend/src/views/chart/components/senior/dialog/TextThresholdEdit.vue
@@ -19,13 +19,18 @@
             </el-option-group>
           </el-select>
         </el-col>
-        <el-col :span="10" style="text-align: center;">
-          <el-input v-model="item.value" class="value-item" :placeholder="$t('chart.drag_block_label_value')" size="mini" clearable @change="changeThreshold" />
+        <el-col :span="14" style="text-align: center;">
+          <el-input v-if="item.term !== 'between'" v-model="item.value" class="value-item" :placeholder="$t('chart.drag_block_label_value')" size="mini" clearable @change="changeThreshold" />
+          <span v-if="item.term === 'between'">
+            <el-input v-model="item.min" class="between-item" :placeholder="$t('chart.axis_value_min')" size="mini" clearable @change="changeThreshold" />
+            <span style="margin: 0 4px;">≤{{ $t('chart.drag_block_label_value') }}≤</span>
+            <el-input v-model="item.max" class="between-item" :placeholder="$t('chart.axis_value_max')" size="mini" clearable @change="changeThreshold" />
+          </span>
         </el-col>
-        <el-col :span="4" style="text-align: center;">
+        <el-col :span="2" style="text-align: center;">
           <el-color-picker v-model="item.color" show-alpha class="color-picker-style" :predefine="predefineColors" @change="changeThreshold" />
         </el-col>
-        <el-col :span="4">
+        <el-col :span="2">
           <el-button type="text" icon="el-icon-delete" circle style="float: right" @click="removeThreshold(index)" />
         </el-col>
       </el-row>
@@ -51,7 +56,9 @@ export default {
         term: 'eq',
         field: '0',
         value: '0',
-        color: '#ff0000ff'
+        color: '#ff0000ff',
+        min: '0',
+        max: '1'
       },
       valueOptions: [
         {
@@ -83,6 +90,13 @@ export default {
             value: 'ge',
             label: this.$t('chart.filter_ge')
           }]
+        },
+        {
+          label: '',
+          options: [{
+            value: 'between',
+            label: this.$t('chart.filter_between')
+          }]
         }
       ],
       predefineColors: COLOR_PANEL
@@ -137,6 +151,12 @@ span {
   width: 200px !important;
 }
 
+.between-item {
+  position: relative;
+  display: inline-block;
+  width: 100px !important;
+}
+
 .select-item {
   position: relative;
   display: inline-block;