CN-35 perf: 动态chart单位高度

src/assets/css/main.scss

@@ -1,5 +1,4 @@
 @import './font/iconfont';
-@import './theme';
 @import './common';
 @import './rightBoxCommon';
 @import './tableCommon';

src/assets/css/theme.scss

@@ -25,6 +25,15 @@ $--menu-item-hover-fill: $--color-primary; // menu鼠标悬浮、激活时背景
   --theme-color-light-90: #FFF5E8; // 默认主题色 浅90%
   --theme-color-light-96: #FFFBF6; // 默认主题色 浅90%
   --theme-color-light-98: #FFFCF8; // 默认主题色 浅98%
+  @media only screen  and (min-width : 1224px) {
+    --chart-height-unit: 30px;
+  }
+  @media only screen  and (min-width : 1824px) {
+    --chart-height-unit: 40px;
+  }
+  @media only screen  and (min-width : 2424px) {
+    --chart-height-unit: 55px;
+  }
 }
 
 $--border-color-primary: #DEDEDE;
@@ -60,11 +69,9 @@ $--chart-single-value-icon-background-color: #E8F6FF;
 
 $--content-right-background-color: #EFF2F5; //右侧背景色
 
-$--chart-height-unit: 40;
 /** 改变 icon 字体路径变量，并引入element-ui变量文件 **/
 $--font-path: '~element-plus/lib/theme-chalk/fonts';
 @import "~element-plus/packages/theme-chalk/src/index";
 :export {
   themeColor: $--color-primary;
-  chartHeightUnit: $--chart-height-unit;
 }

src/components/charts/ChartSingleValue.vue

@@ -2,8 +2,12 @@
   <div class="cn-chart cn-chart__single-value" :class="singleValueClass(type)">
     <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__data">
-      <div class="content__title">{{$t('common.save')}}</div>
+        <slot name="data"></slot>
+      </div>
+      <div class="content__title">
+        <slot name="title"></slot>
+      </div>
     </div>
     <div class="single-value__content" v-if="type === 53">
       <div class="content__title">嘻嘻</div>

src/components/charts/ChartTabs.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'ChartTabs'
+}
+</script>
+
+<style>
+
+</style>

src/components/charts/chart-options.js

@@ -145,17 +145,15 @@ const pieWithTable = {
 const typeOptionMappings = [
   { value: 11, option: line }, // 常规折线图
   { value: 13, option: lineStack }, // 常规折线图
-  { value: 31, option: pieWithTable }, // 常规折线图
+  { value: 31, option: pieWithTable } // 常规折线图
-  { value: 91, option: line }, // tab容器
-  { value: 92, option: line }, // tab页
-  { value: 93, option: line } // 大标题
 ]
 const typeCategory = {
   MAP: 'map',
   TABLE: 'table',
   ECHARTS: 'echarts',
   TITLE: 'title',
-  SINGLE: 'singleValue'
+  SINGLE: 'singleValue',
+  TABS: 'tabs'
 }
 export function getTypeCategory (type) {
   if (isMap(type)) {
@@ -168,6 +166,8 @@ export function getTypeCategory (type) {
     return typeCategory.SINGLE
   } else if (isTitle(type)) {
     return typeCategory.TITLE
+  } else if (isTabs(type)) {
+    return typeCategory.TABS
   }
 }
 /* 饼图柱状图等 */
@@ -202,9 +202,13 @@ export function isEchartsWithTable (type) {
 export function isTable (type) {
   return type >= 61 && type <= 70
 }
-/* title、tab等 */
+/* title */
 export function isTitle (type) {
-  return type >= 91
+  return type === 93
+}
+/* tabs */
+export function isTabs (type) {
+  return type === 91
 }
 export function getOption (type) {
   const mapping = typeOptionMappings.find(m => m.value === type)

src/components/charts/panel.scss

@@ -2,7 +2,7 @@
   display: grid;
   grid-template-columns: repeat(30, 1fr);
   grid-auto-flow: row;
-  grid-auto-rows: #{$--chart-height-unit}px;
+  grid-auto-rows: var(--chart-height-unit);
   grid-gap: 10px;
   height: 100%;
   width: 100%;
@@ -17,7 +17,7 @@
     display: flex;
   }
 
-  .cn-chart {
+  &>.cn-chart {
     background-color: #FFFFFF;
     border: 1px solid #E7EAED;
     box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
@@ -25,7 +25,7 @@
     height: 100%;
     width: 100%;
   }
-  .cn-chart__echarts, .cn-chart__table, .cn-chart__map {
+  &>.cn-chart__echarts, &>.cn-chart__table, &>.cn-chart__map {
     display: flex;
     flex-direction: column;
     .cn-chart__header {
@@ -53,14 +53,13 @@
       }
     }
   }
-  .cn-chart__single-value.cn-chart__single-value--icon-left {
+  &>.cn-chart__single-value.cn-chart__single-value--icon-left {
     display: flex;
-    justify-content: center;
+    justify-content: space-evenly;
     align-items: center;
 
     .single-value__icon {
       position: relative;
-      margin-right: 7.5%;
       width: 72px;
       height: 72px;
       background-color: $--chart-single-value-icon-background-color;
@@ -92,7 +91,7 @@
       }
     }
   }
-  .cn-chart__single-value.cn-chart__single-value--icon-right {
+  &>.cn-chart__single-value.cn-chart__single-value--icon-right {
     display: flex;
     flex-direction: row-reverse;
     justify-content: space-around;
@@ -140,7 +139,7 @@
       }
     }
   }
-  .cn-chart__title {
+  &>.cn-chart__title {
     display: flex;
     align-items: center;
     font-size: 20px;
@@ -150,7 +149,10 @@
     box-shadow: none;
     border: none;
   }
-  .cn-chart__table {
+  &>.cn-chart__tabs {
+
+  }
+  &>.cn-chart__table {
     .cn-chart__header {
       border-bottom: 1px solid $--content-right-background-color;
       .header__operations {

src/views/charts/Chart.vue

@@ -1,8 +1,14 @@
 <template>
+  <!-- 标题 -->
   <div
       v-if="isTitle"
       class="cn-chart cn-chart__title"
       :style="computePosition">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</div>
+  <!-- Tabs -->
+  <chart-tabs
+      v-else-if="isTabs"
+      class="cn-chart cn-chart__tabs"
+  ></chart-tabs>
   <!-- 地图 -->
   <chart-map
       v-else-if="isMap"
@@ -33,9 +39,7 @@
     <template #footer v-if="layout.indexOf(layoutConstant.FOOTER) > -1" :class="{}">
       <!-- 带Table的饼图，展示Table -->
       <template v-if="isEchartsWithTable">
-        <div style="height: 100%">
         <PieTable :tableData="pieTableData" ref="pieTable"/>
-        </div>
       </template>
     </template>
   </echarts-frame>
@@ -45,6 +49,8 @@
       :type="chartInfo.type"
       :style="computePosition"
   >
+    <template #title>{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</template>
+    <template #data>{{singleValue}}</template>
   </single-value>
   <!-- 表格 -->
   <chart-table
@@ -104,7 +110,6 @@ import * as echarts from 'echarts'
 import * as am4Core from '@amcharts/amcharts4/core'
 import * as am4Maps from '@amcharts/amcharts4/maps'
 import am4GeoDataWorldLow from '@amcharts/amcharts4-geodata/worldChinaLow'
-import countries2 from '@amcharts/amcharts4-geodata/data/countries2'
 
 import {
   isEcharts,
@@ -117,13 +122,15 @@ import {
   getLayout,
   layoutConstant,
   isEchartsWithTable,
-  isMapLine
+  isMapLine,
+  isTabs
 } from '@/components/charts/chart-options'
 import EchartsFrame from '@/components/charts/EchartsFrame'
 import SingleValue from '@/components/charts/ChartSingleValue'
 import ChartTable from '@/components/charts/ChartTable'
 import ChartMap from '@/components/charts/ChartMap'
 import PieTable from '@/components/charts/PieTable'
+import ChartTabs from '@/components/charts/ChartTabs'
 import ChartTablePagination from '@/components/charts/ChartTablePagination'
 import { chartTableDefaultPageSize, chartTableTopOptions } from '@/utils/constants'
 import { get } from '@/utils/http'
@@ -146,7 +153,8 @@ export default {
     ChartTablePagination,
     ChartTable,
     PieTable,
-    ChartMap
+    ChartMap,
+    ChartTabs
   },
   data () {
     return {
@@ -159,6 +167,7 @@ export default {
         currentPageData: [] // table当前页的数据
       },
       pieTableData: [],
+      singleValue: '-',
       myChart: null
     }
   },
@@ -310,6 +319,15 @@ export default {
             }
           })
         }
+      } else if (this.isSingleValue) {
+        if (chartParams) {
+          const queryParams = { startTime: 1593070343, endTime: this.endTime }
+          get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
+            if (response.code === 200) {
+              this.singleValue = response.data.result
+            }
+          })
+        }
       }
     },
     getTitle (data) {
@@ -340,184 +358,6 @@ export default {
         max: am4Core.color(this.theme.themeColor)
       })
       return chart
-
-      // Add expectancy data
-      /*polygonSeries.data = [
-        { id: "AF", value: 60.524 },
-        { id: "AL", value: 77.185 },
-        { id: "DZ", value: 70.874 },
-        { id: "AO", value: 51.498 },
-        { id: "AR", value: 76.128 },
-        { id: "AM", value: 74.469 },
-        { id: "AU", value: 82.364 },
-        { id: "AT", value: 80.965 },
-        { id: "AZ", value: 70.686 },
-        { id: "BH", value: 76.474 },
-        { id: "BD", value: 70.258 },
-        { id: "BY", value: 69.829 },
-        { id: "BE", value: 80.373 },
-        { id: "BJ", value: 59.165 },
-        { id: "BT", value: 67.888 },
-        { id: "BO", value: 66.969 },
-        { id: "BA", value: 76.211 },
-        { id: "BW", value: 47.152 },
-        { id: "BR", value: 73.667 },
-        { id: "BN", value: 78.35 },
-        { id: "BG", value: 73.448 },
-        { id: "BF", value: 55.932 },
-        { id: "BI", value: 53.637 },
-        { id: "KH", value: 71.577 },
-        { id: "CM", value: 54.61 },
-        { id: "CA", value: 81.323 },
-        { id: "CV", value: 74.771 },
-        { id: "CF", value: 49.517 },
-        { id: "TD", value: 50.724 },
-        { id: "CL", value: 79.691 },
-        { id: "CN", value: 75.178 },
-        { id: "CO", value: 73.835 },
-        { id: "KM", value: 60.661 },
-        { id: "CD", value: 49.643 },
-        { id: "CG", value: 58.32 },
-        { id: "CR", value: 79.712 },
-        { id: "CI", value: 50.367 },
-        { id: "HR", value: 76.881 },
-        { id: "CU", value: 79.088 },
-        { id: "CY", value: 79.674 },
-        { id: "CZ", value: 77.552 },
-        { id: "DK", value: 79.251 },
-        { id: "GL", value: 79.251 },
-        { id: "DJ", value: 61.319 },
-        { id: "DO", value: 73.181 },
-        { id: "EC", value: 76.195 },
-        { id: "EG", value: 70.933 },
-        { id: "SV", value: 72.361 },
-        { id: "GQ", value: 52.562 },
-        { id: "ER", value: 62.329 },
-        { id: "EE", value: 74.335 },
-        { id: "ET", value: 62.983 },
-        { id: "FJ", value: 69.626 },
-        { id: "FI", value: 80.362 },
-        { id: "FR", value: 81.663 },
-        { id: "GA", value: 63.115 },
-        { id: "GF", value: 79.9 },
-        { id: "GM", value: 58.59 },
-        { id: "GE", value: 74.162 },
-        { id: "DE", value: 80.578 },
-        { id: "GH", value: 60.979 },
-        { id: "GR", value: 80.593 },
-        { id: "GT", value: 71.77 },
-        { id: "GN", value: 55.865 },
-        { id: "GW", value: 54.054 },
-        { id: "GY", value: 66.134 },
-        { id: "HT", value: 62.746 },
-        { id: "HN", value: 73.503 },
-        { id: "HK", value: 83.199 },
-        { id: "HU", value: 74.491 },
-        { id: "IS", value: 81.96 },
-        { id: "IN", value: 66.168 },
-        { id: "ID", value: 70.624 },
-        { id: "IR", value: 73.736 },
-        { id: "IQ", value: 69.181 },
-        { id: "IE", value: 80.531 },
-        { id: "IL", value: 81.641 },
-        { id: "IT", value: 82.235 },
-        { id: "JM", value: 73.338 },
-        { id: "JP", value: 83.418 },
-        { id: "JO", value: 73.7 },
-        { id: "KZ", value: 66.394 },
-        { id: "KE", value: 61.115 },
-        { id: "KP", value: 69.701 },
-        { id: "KR", value: 81.294 },
-        { id: "KW", value: 74.186 },
-        { id: "KG", value: 67.37 },
-        { id: "LA", value: 67.865 },
-        { id: "LV", value: 72.045 },
-        { id: "LB", value: 79.716 },
-        { id: "LS", value: 48.947 },
-        { id: "LR", value: 60.23 },
-        { id: "LY", value: 75.13 },
-        { id: "LT", value: 71.942 },
-        { id: "LU", value: 80.371 },
-        { id: "MK", value: 75.041 },
-        { id: "MG", value: 64.28 },
-        { id: "MW", value: 54.798 },
-        { id: "MY", value: 74.836 },
-        { id: "ML", value: 54.622 },
-        { id: "MR", value: 61.39 },
-        { id: "MU", value: 73.453 },
-        { id: "MX", value: 77.281 },
-        { id: "MD", value: 68.779 },
-        { id: "MN", value: 67.286 },
-        { id: "ME", value: 74.715 },
-        { id: "MA", value: 70.714 },
-        { id: "EH", value: 70.714 },
-        { id: "MZ", value: 49.91 },
-        { id: "MM", value: 65.009 },
-        { id: "NA", value: 64.014 },
-        { id: "NP", value: 67.989 },
-        { id: "NL", value: 80.906 },
-        { id: "NZ", value: 80.982 },
-        { id: "NI", value: 74.515 },
-        { id: "NE", value: 57.934 },
-        { id: "NG", value: 52.116 },
-        { id: "NO", value: 81.367 },
-        { id: "SJ", value: 81.367 },
-        { id: "OM", value: 76.287 },
-        { id: "PK", value: 66.42 },
-        { id: "PA", value: 77.342 },
-        { id: "PG", value: 62.288 },
-        { id: "PY", value: 72.181 },
-        { id: "PE", value: 74.525 },
-        { id: "PH", value: 68.538 },
-        { id: "PL", value: 76.239 },
-        { id: "PT", value: 79.732 },
-        { id: "QA", value: 78.231 },
-        { id: "RO", value: 73.718 },
-        { id: "RU", value: 67.874 },
-        { id: "RW", value: 63.563 },
-        { id: "SA", value: 75.264 },
-        { id: "SN", value: 63.3 },
-        { id: "RS", value: 73.934 },
-        { id: "SL", value: 45.338 },
-        { id: "SG", value: 82.155 },
-        { id: "SK", value: 75.272 },
-        { id: "SI", value: 79.444 },
-        { id: "SB", value: 67.465 },
-        { id: "SO", value: 54 },
-        { id: "ZA", value: 56.271 },
-        { id: "SS", value: 54.666 },
-        { id: "ES", value: 81.958 },
-        { id: "LK", value: 74.116 },
-        { id: "SD", value: 61.875 },
-        { id: "SR", value: 70.794 },
-        { id: "SZ", value: 48.91 },
-        { id: "SE", value: 81.69 },
-        { id: "CH", value: 82.471 },
-        { id: "SY", value: 71 },
-        { id: "TW", value: 79.45 },
-        { id: "TJ", value: 67.118 },
-        { id: "TZ", value: 60.885 },
-        { id: "TH", value: 74.225 },
-        { id: "TL", value: 67.033 },
-        { id: "TG", value: 56.198 },
-        { id: "TT", value: 69.761 },
-        { id: "TN", value: 75.632 },
-        { id: "TR", value: 74.938 },
-        { id: "TM", value: 65.299 },
-        { id: "UG", value: 58.668 },
-        { id: "UA", value: 68.414 },
-        { id: "AE", value: 76.671 },
-        { id: "GB", value: 80.396 },
-        { id: "US", value: 78.797 },
-        { id: "UY", value: 77.084 },
-        { id: "UZ", value: 68.117 },
-        { id: "VE", value: 74.477 },
-        { id: "PS", value: 73.018 },
-        { id: "VN", value: 75.793 },
-        { id: "YE", value: 62.923 },
-        { id: "ZM", value: 57.037 },
-        { id: "ZW", value: 58.142 }
-      ] */
     },
     pageJump (val) {
       this.table.currentPageData = this.getTargetPageData(val, this.table.pageSize, this.table.tableData)
@@ -554,6 +394,7 @@ export default {
       isMap: isMap(props.chart.type),
       isTitle: isTitle(props.chart.type),
       isMapLine: isMapLine(props.chart.type),
+      isTabs: isTabs(props.chart.type),
       layout: getLayout(props.chart.type)
     }
   }