commit

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

@@ -1,5 +1,8 @@
 // 一些常量
-// import { defaultOpts,seasonOptions,scatterColorsOptions } from '@/utils/defaultOptions';
+import { defaultOpts,seasonOptions,scatterColorsOptions } from '@/utils/defaultOptions';
+
+export const predefineColors = defaultOpts.colors.slice(0, 2); //定义颜色蓝，红 默认颜色
+
 //可选图表类型
 export const chartTypeOpts = [
   { label: '曲线图', value: 1 },
@@ -29,54 +32,58 @@ export const verticalPositions = [
   { label: '底部',value: 'bottom' },
 ]
 
-
-/* 尽可能options字段和图表字段直接对应但又不可能完全对应 */
-/* 可配置options
- */
-export const chartCanSetOptions = {
-    lineOptionsSet: {
-      colors: [],
-      dashStyle: 'line',
-      color: '',
-      lineWidth: 2,
-      isSpline: 1
-    },
-    legendOptionsSet: {
-      verticalAlign: 'top',
-      itemStyle: {
+/* 当做标准化结构  eta默认值 几种类型图样式还区分开...*/
+export const defaultETAOptions = {
+  colorsOptions: defaultOpts.colors,
+  lineOptions: { 
+    dashStyle: 'Solid',
+    lineWidth: 2,
+    isSpline: 1
+  },
+  scatterOptions: {
+    radius: 5
+  },
+  legendOptions: {
+    verticalAlign: 'top',
+    itemStyle: {
+      color: '#333',
+      fontSize: 12,
+      // cursor: "pointer",
+      // fontWeight: "bold"
+    }
+  },
+  titleOptions: {
+    align: 'center',
+    style: {
+      color: '#333',
+      fontSize: 16
+    }
+  },
+  markerOptions: {
+    labels: {
+      style: {
         color: '#333',
-        fontSize: '12px',
-        cursor: "pointer",
-        fontWeight: "bold"
+        fontSize: 14
       }
-    },
-    titleOptionsSet: {
-      align: 'center',
+    }
+  },
+  xAxisOptions: {
+    labels: {
       style: {
-        fontSize: '16px'
-      }
-    },
-    markerOptionsSet: {
-      color: '',
-      fontSize: 12
-    },
-    xAxisOptionsSet: {
-      labels: {
-        style: {
-          color: '#666',
-          fontSize: '11px'
-        }
+        color: '#666',
+        fontSize: 11
       }
-    },
-    yAxisOptionsSet: {
-      labels: {
-        style: {
-          color: '#666',
-          fontSize: '11px'
-        }
+    }
+  },
+  yAxisOptions: {
+    labels: {
+      style: {
+        color: '#666',
+        fontSize: 11
       }
-    },
-    drawOptionSet: {
-      backgroundColor: 'transparent'
     }
+  },
+  drawOption: {
+    backgroundColor: 'transparent'
+  }
 }

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

@@ -1,44 +1,203 @@
 <template>
-  <div>
-    <ul class="list in configOptions">
-      <li v-for="key in Object.keys(chartCanSetOptions)" :key="key">
+  <div class="charTheme-setting-option">
+    <ul class="options-wrapper">
+      <li v-for="key in Object.keys(themeOptions)" :key="key">
         <label>{{labelMap.get(key)}}</label>
         
-        <!-- 图例设置 -->
-        <template v-if="key==='legendOptionsSet'">
           <ul class="option-list">
-            <li class="option-item">
-              <label>位置</label>
-              <el-select v-model="chartCanSetOptions[key].verticalAlign">
-                <el-option 
-                  v-for="item in lengendPositions" 
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                />
-              </el-select>
-            </li>
+             <!-- 线条设置 -->
+            <template v-if="key==='lineOptions'">
+                <li class="option-item">
+                  <label class="el-form-item__label">颜色</label>
+                  <el-color-picker
+                    v-model="themeOptions[key].color"
+                    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"
+                    style="width: 90px"
+                  >
+                    <el-option 
+                      v-for="item in lengendPositions" 
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </li>
+                <li class="option-item">
+                  <label class="el-form-item__label">线型</label>
+                  <el-select 
+                    v-model="themeOptions[key].dashStyle"
+                    style="width: 90px"
+                  >
+                    <el-option 
+                      v-for="item in lineStylesOpts" 
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </li>
+                <li class="option-item">
+                  <label class="el-form-item__label">粗细</label>
+                  <el-input
+                    v-model="themeOptions[key].lineWidth"
+                    style="width: 90px"
+                    type="number"
+                    :min="1"
+                  />
+                </li>
+                <li class="option-item">
+                  <label class="el-form-item__label">平滑线</label>
+                  <el-select 
+                    v-model="themeOptions[key].isSpline"
+                    style="width: 90px"
+                  >
+                    <el-option label="是" :value="1"/>
+                    <el-option label="否" :value="0"/>
+                  </el-select>
+                </li>
+            </template>
+
+             <!-- 图例设置 -->
+            <template v-if="key==='legendOptions'">
+                <li class="option-item">
+                  <label class="el-form-item__label">颜色</label>
+                  <el-color-picker
+                    v-model="themeOptions[key].itemStyle.color"
+                    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"
+                    style="width: 90px"
+                  >
+                    <el-option 
+                      v-for="item in lengendPositions" 
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </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"
+                  />
+                </li>
+            </template>
+            
+            <!-- 标题设置 -->
+            <template v-if="key==='titleOptions'">
+                <li class="option-item">
+                  <label class="el-form-item__label">颜色</label>
+                  <el-color-picker
+                    v-model="themeOptions[key].style.color"
+                    show-alpha
+                    :predefine="predefineColors"
+                    style="width: 90px"
+                  />
+                </li>
+                <li class="option-item">
+                  <label class="el-form-item__label">字号</label>
+                  <el-input
+                    v-model="themeOptions[key].style.fontSize"
+                    style="width: 90px"
+                    type="number"
+                    :min="1"
+                  />
+                </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"
+                  /> -->
+                </li>
+            </template>
+
+            <!-- 标记文字 横轴 纵轴设置 -->
+            <template v-if="['markerOptions','xAxisOptions','yAxisOptions'].includes(key)">
+                <li class="option-item">
+                  <label class="el-form-item__label">颜色</label>
+                  <el-color-picker
+                    v-model="themeOptions[key].labels.style.color"
+                    show-alpha
+                    :predefine="predefineColors"
+                    style="width: 90px"
+                  />
+                </li>
+                <li class="option-item">
+                  <label class="el-form-item__label">字号</label>
+                  <el-input
+                    v-model="themeOptions[key].labels.style.fontSize"
+                    style="width: 90px"
+                    type="number"
+                    :min="1"
+                  />
+                </li>
+            </template>  
+
+            <!-- 绘图区设置 -->
+            <template v-if="key==='drawOption'">
+                <li class="option-item">
+                  <label class="el-form-item__label">背景色</label>
+                  <el-color-picker
+                    v-model="themeOptions[key].backgroundColor"
+                    show-alpha
+                    :predefine="predefineColors"
+                    style="width: 90px"
+                  />
+                </li>
+            </template>  
           </ul>
-        </template>
       </li>
     </ul>
   </div>
 </template>
 <script>
-import { chartCanSetOptions,verticalPositions } from '../common/config'
+import { defaultETAOptions,verticalPositions,predefineColors,lineStylesOpts } from '../common/config'
 export default {
   data() {
     return {
-      chartCanSetOptions,
+      predefineColors,
+      lineStylesOpts,
+     /* 可配置options*/
+      themeOptions: {
+          lineOptions: {
+            colors: defaultETAOptions.colorsOptions,
+            dashStyle: defaultETAOptions.lineOptions.dashStyle,
+            color: '',
+            lineWidth: defaultETAOptions.lineOptions.lineWidth,
+            isSpline: defaultETAOptions.lineOptions.isSpline
+          },
+          ...defaultETAOptions
+      },
       lengendPositions: verticalPositions.filter(_ => _.value!=='middle'),
       labelMap: new Map([
-        ['lineOptionsSet','线条设置'],
-        ['legendOptionsSet','图例设置'],
-        ['titleOptionsSet','标题设置'],
-        ['markerOptionsSet','标记文字设置(来源，标识)'],
-        ['xAxisOptionsSet','横轴设置'],
-        ['yAxisOptionsSet','纵轴设置'],
-        ['drawOptionSet','绘图区设置'],
+        ['lineOptions','线条设置'],
+        ['legendOptions','图例设置'],
+        ['titleOptions','标题设置'],
+        ['markerOptions','标记文字设置(来源，标识)'],
+        ['xAxisOptions','横轴设置'],
+        ['yAxisOptions','纵轴设置'],
+        ['drawOption','绘图区设置'],
       ]),
       configOptions: []
     }
@@ -52,5 +211,26 @@ export default {
 }
 </script>
 <style scoped lang='scss'>
+.options-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 40px;
+  .option-list {
+    margin-top: 20px;
+    .option-item {
+      margin: 10px 0;
+    }
+  }
+  .el-form-item__label {
+    width: 80px;
+    text-align: left;
+  }
+}
+</style>
 
+<style lang="scss">
+  .charTheme-setting-option {
+    .el-color-picker__trigger { width: 100%;padding: 0;border-radius: 4px; }
+    
+  }
 </style>

src/views/system_manage/chartTheme/index.vue

@@ -40,7 +40,7 @@
             <label>{{item.label}}</label>
             <div>
               <el-button type="text" @click="editThemeHandle(item)">编辑</el-button>
-              <el-button type="text" class="deletesty" @click="delThemeHandle(index)" v-if="item.id!==0">删除</el-button>
+              <span class="deletesty" @click="delThemeHandle(index)" v-if="item.id!==0">删除</span>
             </div>
           </header>
           <el-card>
@@ -55,7 +55,10 @@
           </el-card>
         </li>
         <li class="add-item" @click="addThemeHandle">
-            <el-button type="text" icon="el-icon-plus">添加自定义主题</el-button>
+          <div>
+            <i class="el-icon-plus"/>
+            <el-button type="text" style="font-size:16px;">添加自定义主题</el-button>
+          </div>
         </li>
       </ul>
 
@@ -196,7 +199,7 @@ export default {
     margin-bottom: 30px;
     gap: 15px 30px;
     .theme-item {
-      min-width: 260px;
+      min-width: 280px;
       position: relative;
       .item-top {
         display: flex;
@@ -206,22 +209,27 @@ export default {
       }
       .chart-img {
         width: 100%;
-        height: 230px;
+        height: 220px;
         object-fit: contain !important;
         cursor: pointer;
       }
     }
     .add-item {
-      background: #F5F7F9;
+      background: #F8F8F8;
       display: flex;
       justify-content: center;
       align-items: center;
-      width: 260px;
-      height: 310px;
+      width: 280px;
+      height: 302px;
       margin-top: 40px;
+      border: 1px dashed #DCDFE6;
       cursor: pointer;
       .el-icon-plus {
-        font-size: 20px;
+        font-size: 30px;
+        display:block;
+        text-align: center;
+        font-weight: bold;
+        color: #0052D9;
       }
     }
   }

src/views/system_manage/chartTheme/themeSetting.vue

@@ -20,10 +20,20 @@
           />
         </el-select>
       </div>
+      <div>
+        <el-button type="primary" plain>取消</el-button>
+        <el-button type="primary" @click="setThemeOptions">保存</el-button>
+      </div>
     </div> 
+
+    <div class="main">
+      <!-- 配置区 -->
+      <optionsSection ref="optionsSectionRef"/>
+
+      <!-- 预览区 -->
+      <!-- <chartRenderSection/> -->
+    </div>
     
-    <!-- 配置区 -->
-    <optionsSection/>
   </div>
 </template>
 <script>
@@ -51,7 +61,11 @@ export default {
 
   },
   methods:{
-
+    /* 保存配置 处理成标准化结构 */
+    setThemeOptions() {
+      console.log(this.$refs.optionsSectionRef.chartCanSetOptions)
+      //
+    }
   },
 }
 </script>
@@ -60,15 +74,21 @@ export default {
   box-sizing: border-box;
 }
 .themeSet-page {
-  min-height: calc(100vh - 120px);
-  padding: 20px 30px;
-  background: #fff;
-  position: relative;
-  border: 1px solid #ececec;
-  border-radius: 4px;
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
   .header,.main {
-    
+    padding: 20px 30px;
+    background: #fff;
+    position: relative;
+    border: 1px solid #ececec;
+    border-radius: 4px;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
+  }
+  .header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 30px;
+  }
+  .main {
+    min-height: calc(100vh - 230px);
   }
 }
 </style>