系统设置-图表配置

src/lang/modules/systemManage/ChartSet.js

@@ -22,6 +22,21 @@ export const ChartSetEn = {
     opt_label08:'Plot Area Setting',
     opt_label09:'Bar Setting',
     opt_label10:'Lines, Bar Setting',
+
+    config_opt01:'Color',
+    config_opt02:'Sequence',
+    config_opt03:'Line Style',
+    config_opt04:'Thickness',
+    config_opt05:'Smooth Line',
+    config_opt06:'Size',
+    config_opt07:'Position',
+    config_opt08:'Font Size',
+    config_opt09:'Alignment Method',
+    config_opt10:'Background Color',
+
+    unit01:'st Line',
+    unit02:'st Bar',
+    unit03:'st Series',
 };
   
 /* 中文 */
@@ -45,6 +60,20 @@ export const ChartSetZh = {
     opt_label09:'柱形设置',
     opt_label10:'线条、柱形设置',
 
+    config_opt01:'颜色',
+    config_opt02:'顺序',
+    config_opt03:'线型',
+    config_opt04:'粗细',
+    config_opt05:'平滑线',
+    config_opt06:'大小',
+    config_opt07:'位置',
+    config_opt08:'字号',
+    config_opt09:'对齐方式',
+    config_opt10:'背景色',
+
+    unit01:'条',
+    unit02:'根',
+    unit03:'系列',
 };
   
 /**

src/views/system_manage/chartTheme/components/optionsSection.vue

@@ -8,7 +8,7 @@
              <!-- 线条设置 -->
             <template v-if="key==='lineOptions'">
                 <li class="option-item">
-                  <label class="el-form-item__label">颜色</label>
+                  <label class="el-form-item__label">{{$t('SystemManage.ChartSet.config_opt01')}}</label>
                   <el-color-picker
                     v-model="themeOptions[key].colors[themeOptions[key].colorIndex]"
                     show-alpha
@@ -18,7 +18,7 @@
                   />
                 </li>
                 <li class="option-item">
-                  <label class="el-form-item__label">顺序</label>
+                  <label class="el-form-item__label">{{$t('SystemManage.ChartSet.config_opt02')}}</label>
                   <el-select 
                     v-model="themeOptions[key].colorIndex"
                     style="width: 90px"
@@ -26,7 +26,7 @@
                     <el-option 
                       v-for="(item,index) in themeOptions[key].colors" 
                       :key="index"
-                      :label="`第${index+1}${typeLabelMap[chartType].lineLabel}`"
+                      :label="`${$i18n.locale == 'zh'?'第':''}${index+1}${typeLabelMap[chartType].lineLabel}`"
                       :value="index"
                     />
                   </el-select>
@@ -35,7 +35,7 @@
                 <!-- 曲线额外配置 雷达 -->
                 <template v-if="[1,2,11].includes(chartType)">
                   <li class="option-item">
-                    <label class="el-form-item__label">线型</label>
+                    <label class="el-form-item__label">{{$t('SystemManage.ChartSet.config_opt03')}}</label>
                     <el-select 
                       v-model="themeOptions[key].dashStyle"
                       style="width: 90px"
@@ -52,7 +52,7 @@
                     </el-select>
                   </li>
                   <li class="option-item">
-                    <label class="el-form-item__label">粗细</label>
+                    <label class="el-form-item__label">{{$t('SystemManage.ChartSet.config_opt04')}}</label>
                     <el-input
                       v-model="themeOptions[key].lineWidth"
                       style="width: 90px"
@@ -62,7 +62,7 @@
                     />
                   </li>
                   <li class="option-item">
-                    <label class="el-form-item__label">平滑线</label>
+                    <label class="el-form-item__label">{{$t('SystemManage.ChartSet.config_opt05')}}</label>
                     <el-select 
                       v-model="themeOptions[key].lineType"
                       style="width: 90px"
@@ -76,7 +76,7 @@
                 <!-- 散点额外配置 -->
                 <template v-else-if="[5,10].includes(chartType)">
                   <li class="option-item">
-                    <label class="el-form-item__label">大小</label>
+                    <label class="el-form-item__label">{{$t('SystemManage.ChartSet.config_opt06')}}</label>
                     <el-input
                       v-model="themeOptions[key].radius"
                       style="width: 90px"
@@ -91,7 +91,7 @@
              <!-- 图例设置 -->
             <template v-else-if="key==='legendOptions'">
                 <li class="option-item">
-                  <label class="el-form-item__label">颜色</label>
+                  <label class="el-form-item__label">{{$t('SystemManage.ChartSet.config_opt01')}}</label>
                   <el-color-picker
                     v-model="themeOptions[key].itemStyle.color"
                     show-alpha
@@ -100,7 +100,7 @@
                   />
                 </li>
                 <li class="option-item">
-                  <label class="el-form-item__label">位置</label>
+                  <label class="el-form-item__label">{{$t('SystemManage.ChartSet.config_opt07')}}</label>
                   <el-select 
                     v-model="themeOptions[key].verticalAlign"
                     style="width: 90px"
@@ -114,7 +114,7 @@
                   </el-select>
                 </li>
                 <li class="option-item">
-                  <label class="el-form-item__label">字号</label>
+                  <label class="el-form-item__label">{{$t('SystemManage.ChartSet.config_opt08')}}</label>
                   <el-input
                     v-model="themeOptions[key].itemStyle.fontSize"
                     style="width: 90px"
@@ -128,7 +128,7 @@
             <!-- 标题设置 -->
             <template v-else-if="key==='titleOptions'">
                 <li class="option-item">
-                  <label class="el-form-item__label">颜色</label>
+                  <label class="el-form-item__label">{{$t('SystemManage.ChartSet.config_opt01')}}</label>
                   <el-color-picker
                     v-model="themeOptions[key].style.color"
                     show-alpha
@@ -137,7 +137,7 @@
                   />
                 </li>
                 <li class="option-item">
-                  <label class="el-form-item__label">字号</label>
+                  <label class="el-form-item__label">{{$t('SystemManage.ChartSet.config_opt08')}}</label>
                   <el-input
                     v-model="themeOptions[key].style.fontSize"
                     style="width: 90px"
@@ -147,7 +147,7 @@
                   />
                 </li>
                 <li class="option-item">
-                  <label class="el-form-item__label">对齐方式</label>
+                  <label class="el-form-item__label">{{$t('SystemManage.ChartSet.config_opt09')}}</label>
                   <el-radio-group v-model="themeOptions[key].align" size="small">
                     <el-radio-button 
                       v-for="item in alignPositions" 
@@ -164,7 +164,7 @@
             <!-- 标记文字 横轴 纵轴设置 -->
             <template v-else-if="['markerOptions','xAxisOptions','yAxisOptions'].includes(key)">
                 <li class="option-item">
-                  <label class="el-form-item__label">颜色</label>
+                  <label class="el-form-item__label">{{$t('SystemManage.ChartSet.config_opt01')}}</label>
                   <el-color-picker
                     v-model="themeOptions[key].style.color"
                     show-alpha
@@ -173,7 +173,7 @@
                   />
                 </li>
                 <li class="option-item">
-                  <label class="el-form-item__label">字号</label>
+                  <label class="el-form-item__label">{{$t('SystemManage.ChartSet.config_opt08')}}</label>
                   <el-input
                     v-model="themeOptions[key].style.fontSize"
                     style="width: 90px"
@@ -187,7 +187,7 @@
             <!-- 绘图区设置 -->
             <template v-else-if="key==='drawOption'">
                 <li class="option-item">
-                  <label class="el-form-item__label">背景色</label>
+                  <label class="el-form-item__label">{{$t('SystemManage.ChartSet.config_opt10')}}</label>
                   <el-color-picker
                     v-model="themeOptions[key].plotBackgroundColor"
                     show-alpha
@@ -229,14 +229,14 @@ export default {
     },
     typeLabelMap(){
       return {
-        1: {label:this.$t('SystemManage.ChartSet.opt_label01'),lineLabel: '条'},
-        2: {label:this.$t('SystemManage.ChartSet.opt_label01'),lineLabel: '条'},
-        4: {label:this.$t('SystemManage.ChartSet.opt_label09'),lineLabel: '根'},
-        5: {label:this.$t('SystemManage.ChartSet.opt_label02'),lineLabel: '系列'},
-        6: {label:this.$t('SystemManage.ChartSet.opt_label10'),lineLabel: '系列'},
-        7: {label:this.$t('SystemManage.ChartSet.opt_label09'),lineLabel: '根'},
-        10: {label:this.$t('SystemManage.ChartSet.opt_label02'),lineLabel: '系列'},
-        11: {label:this.$t('SystemManage.ChartSet.opt_label01'),lineLabel: '条'},
+        1: {label:this.$t('SystemManage.ChartSet.opt_label01'),lineLabel: this.$t('SystemManage.ChartSet.unit01')},
+        2: {label:this.$t('SystemManage.ChartSet.opt_label01'),lineLabel: this.$t('SystemManage.ChartSet.unit01')},
+        4: {label:this.$t('SystemManage.ChartSet.opt_label09'),lineLabel: this.$t('SystemManage.ChartSet.unit02')},
+        5: {label:this.$t('SystemManage.ChartSet.opt_label02'),lineLabel: this.$t('SystemManage.ChartSet.unit03')},
+        6: {label:this.$t('SystemManage.ChartSet.opt_label10'),lineLabel: this.$t('SystemManage.ChartSet.unit03')},
+        7: {label:this.$t('SystemManage.ChartSet.opt_label09'),lineLabel: this.$t('SystemManage.ChartSet.unit02')},
+        10: {label:this.$t('SystemManage.ChartSet.opt_label02'),lineLabel: this.$t('SystemManage.ChartSet.unit03')},
+        11: {label:this.$t('SystemManage.ChartSet.opt_label01'),lineLabel: this.$t('SystemManage.ChartSet.unit01')},
       }
     }
   },
@@ -333,6 +333,8 @@ export default {
     margin-top: 20px;
     .option-item {
       margin: 10px 0;
+      display: flex;
+      align-items: center;
     }
   }
   .option-title{
@@ -347,8 +349,9 @@ export default {
     }
   }
   .el-form-item__label {
-    width: 70px;
+    width: 90px;
     text-align: left;
+    line-height: 1.5;
   }
 }
 </style>

src/views/system_manage/chartTheme/themeSetting.vue

@@ -160,7 +160,7 @@ export default {
 
       if(res.Ret !==200) return
       this.getThemeList()
-      this.$message.success('保存成功')
+      this.$message.success(this.$t('MsgPrompt.saved_msg'))
     },
 
     /* 设置封面图片 */