feat: 后端国际化、pie图表准备

src/components/charts/ChartSingleValue.vue

@@ -3,7 +3,7 @@
     <div class="single-value__icon"><i class="el-icon-apple"></i></div>
     <div class="single-value__content" v-if="type === 51">
       <div class="content__data">11112</div>
-      <div class="content__title">嘻嘻</div>
+      <div class="content__title">{{$t('common.save')}}</div>
     </div>
     <div class="single-value__content" v-if="type === 53">
       <div class="content__title">嘻嘻</div>
@@ -46,4 +46,4 @@ export default {
 
 <style>
 
-</style>
+</style>

src/components/charts/ChartTitle.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="cn-chart cn-chart__title"></div>
+</template>
+
+<script>
+export default {
+  name: 'ChartTitle'
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/charts/chart-options.js

@@ -117,9 +117,11 @@ const lineStack = {
     }
   ]
 }
+const pieWithTable = {}
 const typeOptionMappings = [
   { value: 11, option: line }, // 常规折线图
   { value: 13, option: lineStack }, // 常规折线图
+  { value: 31, option: pieWithTable }, // 常规折线图
   { value: 91, option: line }, // tab容器
   { value: 92, option: line }, // tab页
   { value: 93, option: line } // 大标题
@@ -157,6 +159,10 @@ export function isSingleValue (type) {
 export function isSingleValueWithEcharts (type) {
   return type === 52
 }
+/* 带Table的饼图 */
+export function isEchartsWithTable (type) {
+  return type === 31
+}
 /* table */
 export function isTable (type) {
   return type >= 61 && type <= 70
@@ -183,4 +189,4 @@ export function getLayout (type) {
   }
   return layout
 }
-export const heightUnit = 150
+export const heightUnit = 50

src/components/charts/panel.scss

@@ -1,11 +1,20 @@
 .cn-panel {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
-  grid-template-rows: repeat(auto-fill, 50px);
+  grid-auto-flow: row;
+  grid-auto-rows: 50px;
   grid-gap: 10px;
-  padding: 20px;
   height: 100%;
   width: 100%;
+  overflow: auto;
+  padding-right: 20px;
+  position: relative;
+
+  .panel__time {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+  }
 
   .cn-chart {
     background-color: #FFFFFF;
@@ -169,8 +178,8 @@
           }
           .option__select {
             .el-input__inner {
+              width: 80px;
               padding-right: 20px;
-              width: 120px;
               border: none;
               height: 100%;
               line-height: 20px;
@@ -193,9 +202,10 @@
               }
             }
           }
-          .option__select.select__topn {
+          .option__select.select-column {
             .el-input__inner {
-              width: 80px;
+              width: 86px;
+              padding-left: 8px;
             }
           }
           .icon-group-divide {
@@ -236,7 +246,7 @@
     }
   }
 }
-.option__topn-popper {
+.option-popper {
   .el-select-dropdown__item {
     height: 24px;
     line-height: 24px;