commit

src/views/system_manage/chartTheme/common/config.js

@@ -31,10 +31,16 @@ export const verticalPositions = [
   { label: '居中',value: 'middle' },
   { label: '底部',value: 'bottom' },
 ]
+//水平位置
+export const alignPositions = [
+  { value: 'left',svg:`<path d="M96 128h832v96H96zM96 576h832v96H96zM96 352h576v96H96zM96 800h576v96H96z" p-id="4976"></path>` },
+  { value: 'center',svg:`<path d="M96 128h832v96H96zM96 576h832v96H96zM224 352h576v96H224zM224 800h576v96H224z" p-id="6951"></path>` },
+  { value: 'right',svg:`<path d="M96 128h832v96H96zM96 576h832v96H96zM352 352h576v96H352zM352 800h576v96H352z" p-id="5963"></path>` },
+]
 
 /* 当做标准化结构  eta默认值 几种类型图样式还区分开...*/
 export const defaultETAOptions = {
-  colorsOptions: defaultOpts.colors,
+  colorsOptions: defaultOpts.colors.slice(0,11),
   lineOptions: { 
     dashStyle: 'Solid',
     lineWidth: 2,

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

@@ -9,26 +9,26 @@
             <template v-if="key==='lineOptions'">
                 <li class="option-item">
                   <label class="el-form-item__label">颜色</label>
-                  <el-color-picker
-                    v-model="themeOptions[key].color"
+                  <!-- <el-color-picker
+                    v-model="themeOptions[key].colors[themeOptions[key].colorIndex]"
                     show-alpha
                     :predefine="predefineColors"
                     style="width: 90px"
-                  />
+                  /> -->
                 </li>
                 <li class="option-item">
                   <label class="el-form-item__label">顺序</label>
-                  <el-select 
-                    v-model="themeOptions[key].verticalAlign"
+                  <!-- <el-select 
+                    v-model="themeOptions[key].colorIndex"
                     style="width: 90px"
                   >
                     <el-option 
-                      v-for="item in lengendPositions" 
-                      :key="item.value"
-                      :label="item.label"
-                      :value="item.value"
+                      v-for="(item,index) in themeOptions[key].colors" 
+                      :key="index"
+                      :label="`第${index+1}根`"
+                      :value="index"
                     />
-                  </el-select>
+                  </el-select> -->
                 </li>
                 <li class="option-item">
                   <label class="el-form-item__label">线型</label>
@@ -123,12 +123,16 @@
                 </li>
                 <li class="option-item">
                   <label class="el-form-item__label">对齐方式</label>
-                  <!-- <el-input
-                    v-model="themeOptions[key].itemStyle.fontSize"
-                    style="width: 90px"
-                    type="number"
-                    :min="1"
-                  /> -->
+                  <el-radio-group v-model="themeOptions[key].align" size="small">
+                    <el-radio-button 
+                      v-for="item in alignPositions" 
+                      :key="item.value" 
+                      :label="item.value"
+                    >
+                      <svg t="1701940027445" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4975" width="14" height="14" v-html="item.svg" :fill="`${themeOptions[key].align===item.value?'#fff':'#333'}`">
+                      </svg>
+                    </el-radio-button>
+                  </el-radio-group>
                 </li>
             </template>
 
@@ -172,18 +176,21 @@
   </div>
 </template>
 <script>
-import { defaultETAOptions,verticalPositions,predefineColors,lineStylesOpts } from '../common/config'
+import { defaultETAOptions,verticalPositions,predefineColors,lineStylesOpts,alignPositions } from '../common/config'
+console.log(defaultETAOptions)
 export default {
   data() {
     return {
       predefineColors,
       lineStylesOpts,
+      alignPositions,
      /* 可配置options*/
       themeOptions: {
           lineOptions: {
             colors: defaultETAOptions.colorsOptions,
             dashStyle: defaultETAOptions.lineOptions.dashStyle,
-            color: '',
+            color: defaultETAOptions.colorsOptions[0],
+            colorIndex:0,
             lineWidth: defaultETAOptions.lineOptions.lineWidth,
             isSpline: defaultETAOptions.lineOptions.isSpline
           },
@@ -222,7 +229,7 @@ export default {
     }
   }
   .el-form-item__label {
-    width: 80px;
+    width: 70px;
     text-align: left;
   }
 }

src/views/system_manage/chartTheme/themeSetting.vue

@@ -28,7 +28,10 @@
 
     <div class="main">
       <!-- 配置区 -->
-      <optionsSection ref="optionsSectionRef"/>
+      <optionsSection 
+        ref="optionsSectionRef" 
+        :chartType="formData.chartType"
+      />
 
       <!-- 预览区 -->
       <!-- <chartRenderSection/> -->
@@ -48,7 +51,7 @@ export default {
         theme: Number(this.$route.query.id)
       },
       chartTypeOpts,
-       themeOpts: [
+      themeOpts: [
         { label: 'ETA主题',id: 0,ChartImage:'' },
         { label: 'ETA主题1',id: 1,ChartImage:'' },
         { label: 'ETA主题2',id: 2,ChartImage:'' },