From 5d7f1158d37b64d5fc6c34df962afc9486fb615b Mon Sep 17 00:00:00 2001
From: zhenghuang <236220500@qq.com>
Date: Sun, 28 Nov 2021 15:38:32 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BE=E5=88=86=E6=AF=94=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../provider/mysql/MysqlQueryProvider.java    |   6 +-
 .../src/components/widget/DeWidget/DeDate.vue | 107 +++---
 .../views/chart/components/ChartComponent.vue | 181 +++++++---
 .../chart/components/ChartComponentG2.vue     |  24 +-
 .../chart/components/table/TableNormal.vue    | 308 +++++++++--------
 .../src/views/panel/list/PanelViewShow.vue    | 324 ++++++++++--------
 6 files changed, 569 insertions(+), 381 deletions(-)

diff --git a/backend/src/main/java/com/ipsos/provider/mysql/MysqlQueryProvider.java b/backend/src/main/java/com/ipsos/provider/mysql/MysqlQueryProvider.java
index 01841ce..559fbf3 100644
--- a/backend/src/main/java/com/ipsos/provider/mysql/MysqlQueryProvider.java
+++ b/backend/src/main/java/com/ipsos/provider/mysql/MysqlQueryProvider.java
@@ -414,7 +414,7 @@ public class MysqlQueryProvider extends QueryProvider {
                 }
                 String fieldAlias = String.format(SQLConstants.FIELD_ALIAS_Y_PREFIX, i);
                 // 处理纵轴字段
-                yFields.add(getYFields(y, originField, fieldAlias));
+                yFields.add(getYFields(y, originField, fieldAlias, table));
                 // 处理纵轴过滤
                 yWheres.addAll(getYWheres(y, originField, fieldAlias));
                 // 处理纵轴排序
@@ -528,7 +528,7 @@ public class MysqlQueryProvider extends QueryProvider {
                 }
                 String fieldAlias = String.format(SQLConstants.FIELD_ALIAS_Y_PREFIX, i);
                 // 处理纵轴字段
-                yFields.add(getYFields(y, originField, fieldAlias));
+                yFields.add(getYFields(y, originField, fieldAlias, table));
                 // 处理纵轴过滤
                 yWheres.addAll(getYWheres(y, originField, fieldAlias));
                 // 处理纵轴排序
@@ -615,7 +615,7 @@ public class MysqlQueryProvider extends QueryProvider {
                 }
                 String fieldAlias = String.format(SQLConstants.FIELD_ALIAS_Y_PREFIX, i);
                 // 处理纵轴字段
-                yFields.add(getYFields(y, originField, fieldAlias));
+                yFields.add(getYFields(y, originField, fieldAlias, table));
                 // 处理纵轴过滤
                 yWheres.addAll(getYWheres(y, originField, fieldAlias));
                 // 处理纵轴排序
diff --git a/frontend/src/components/widget/DeWidget/DeDate.vue b/frontend/src/components/widget/DeWidget/DeDate.vue
index 4018dd5..14ac352 100644
--- a/frontend/src/components/widget/DeWidget/DeDate.vue
+++ b/frontend/src/components/widget/DeWidget/DeDate.vue
@@ -1,6 +1,6 @@
 <template>
   <el-date-picker
-    v-if="options!== null && options.attrs!==null"
+    v-if="options !== null && options.attrs !== null"
     ref="dateRef"
     v-model="options.value"
     :type="options.attrs.type"
@@ -9,89 +9,112 @@
     :end-placeholder="$t(options.attrs.endPlaceholder)"
     :placeholder="$t(options.attrs.placeholder)"
     :append-to-body="inScreen"
-    style="min-height: 36px;"
+    style="min-height: 36px"
     @change="dateChange"
   />
 </template>
 
 <script>
-import { timeSection } from '@/utils'
+import { timeSection } from "@/utils";
 export default {
-
   props: {
     element: {
       type: Object,
-      default: null
+      default: null,
     },
     inDraw: {
       type: Boolean,
-      default: true
+      default: true,
     },
     inScreen: {
       type: Boolean,
       required: false,
-      default: true
-    }
+      default: true,
+    },
   },
   data() {
     return {
       options: null,
-      operator: 'between',
-      values: null
-    }
+      operator: "between",
+      values: null,
+    };
   },
   created() {
-    this.options = this.element.options
-    if ((this.options.attrs.type === 'date' || this.options.attrs.type === 'daterange') && Array.isArray(this.options.value) && this.options.value.length === 0) {
-      this.options.value = null
+    this.options = this.element.options;
+    if (this.options.attrs.type === "date") {
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
+      this.options.value = start;
+      console.log("date", this.options, start);
+    } else if (this.options.attrs.type === "daterange") {
+      const end = new Date();
+      end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 8);
+      this.options.value = [start, end];
+      console.log("daterange", this.options);
+    } else {
+      this.options.value = null;
+    }
+
+    if (
+      (this.options.attrs.type === "date" || this.options.attrs.type === "daterange") &&
+      Array.isArray(this.options.value) &&
+      this.options.value.length === 0
+    ) {
+      this.options.value = null;
     }
-    if (!!this.options && !!this.options.value && Object.keys(this.options.value).length === 0) {
-      this.options.value = null
+    if (
+      !!this.options &&
+      !!this.options.value &&
+      Object.keys(this.options.value).length === 0
+    ) {
+      // this.options.value = null;
     }
   },
   methods: {
     search() {
-      this.setCondition()
+      this.setCondition();
     },
     setCondition() {
       const param = {
         component: this.element,
-        value: Array.isArray(this.options.value) ? this.options.value : [this.options.value],
-        operator: this.operator
-      }
-      param.value = this.formatValues(param.value)
-      this.inDraw && this.$store.commit('addViewFilter', param)
+        value: Array.isArray(this.options.value)
+          ? this.options.value
+          : [this.options.value],
+        operator: this.operator,
+      };
+      param.value = this.formatValues(param.value);
+      this.inDraw && this.$store.commit("addViewFilter", param);
     },
     dateChange(value) {
-      this.setCondition()
-      this.styleChange()
+      this.setCondition();
+      this.styleChange();
     },
     formatValues(values) {
       if (!values || values.length === 0) {
-        return []
+        return [];
       }
-      if (this.options.attrs.type === 'daterange') {
+      if (this.options.attrs.type === "daterange") {
         if (values.length !== 2) {
-          return null
+          return null;
         }
-        let start = values[0]
-        let end = values[1]
-        start = timeSection(start, 'date')[0]
-        end = timeSection(end, 'date')[1]
-        const results = [start, end]
-        return results
+        let start = values[0];
+        let end = values[1];
+        start = timeSection(start, "date")[0];
+        end = timeSection(end, "date")[1];
+        const results = [start, end];
+        return results;
       } else {
-        const value = values[0]
-        return timeSection(value, this.options.attrs.type)
+        const value = values[0];
+        return timeSection(value, this.options.attrs.type);
       }
     },
     styleChange() {
-      this.$store.commit('recordStyleChange')
-    }
-  }
-}
+      this.$store.commit("recordStyleChange");
+    },
+  },
+};
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue
index 5cf336e..0e78713 100644
--- a/frontend/src/views/chart/components/ChartComponent.vue
+++ b/frontend/src/views/chart/components/ChartComponent.vue
@@ -1,7 +1,17 @@
 <template>
-  <div style="display: flex;">
-    <view-track-bar ref="viewTrack" :track-menu="trackMenu" class="track-bar" :style="trackBarStyleTime" @trackClick="trackClick" />
-    <div :id="chartId" style="width: 100%;height: 100%;overflow: hidden;" :style="{ borderRadius: borderRadius}" />
+  <div style="display: flex">
+    <view-track-bar
+      ref="viewTrack"
+      :track-menu="trackMenu"
+      class="track-bar"
+      :style="trackBarStyleTime"
+      @trackClick="trackClick"
+    />
+    <div
+      :id="chartId"
+      style="width: 100%; height: 100%; overflow: hidden"
+      :style="{ borderRadius: borderRadius }"
+    />
   </div>
 </template>
 
@@ -19,7 +29,12 @@ import {
   BASE_TREEMAP,
   BASE_MIX
 } from '../chart/chart'
-import { baseBarOption, stackBarOption, horizontalBarOption, horizontalStackBarOption } from '../chart/bar/bar'
+import {
+  baseBarOption,
+  stackBarOption,
+  horizontalBarOption,
+  horizontalStackBarOption
+} from '../chart/bar/bar'
 import { baseLineOption, stackLineOption } from '../chart/line/line'
 import { basePieOption, rosePieOption } from '../chart/pie/pie'
 import { baseMapOption } from '../chart/map/map'
@@ -101,22 +116,30 @@ export default {
       // 基于准备好的dom，初始化echarts实例
       // 渲染echart等待dom加载完毕,渲染之前先尝试销毁具有相同id的echart 放置多次切换仪表板有重复id情况
       const that = this
-      new Promise((resolve) => { resolve() }).then(() => {
+      new Promise((resolve) => {
+        resolve()
+      }).then(() => {
         //	此dom为echarts图标展示dom
-        this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId))
+        this.myChart = this.$echarts.getInstanceByDom(
+          document.getElementById(this.chartId)
+        )
         if (!this.myChart) {
-          this.myChart = this.$echarts.init(document.getElementById(this.chartId))
+          this.myChart = this.$echarts.init(
+            document.getElementById(this.chartId)
+          )
         }
         this.drawEcharts()
 
         this.myChart.off('click')
         this.myChart.on('click', function(param) {
           that.pointParam = param
-          if (that.trackMenu.length < 2) { // 只有一个事件直接调用
+          if (that.trackMenu.length < 2) {
+            // 只有一个事件直接调用
             that.trackClick(that.trackMenu[0])
-          } else { // 视图关联多个事件
+          } else {
+            // 视图关联多个事件
             that.trackBarStyle.left = param.event.offsetX + 'px'
-            that.trackBarStyle.top = (param.event.offsetY - 15) + 'px'
+            that.trackBarStyle.top = param.event.offsetY - 15 + 'px'
             that.$refs.viewTrack.trackButtonClick()
           }
         })
@@ -127,33 +150,75 @@ export default {
       let chart_option = {}
       // type
       if (chart.type === 'bar') {
-        chart_option = baseBarOption(JSON.parse(JSON.stringify(BASE_BAR)), chart)
+        chart_option = baseBarOption(
+          JSON.parse(JSON.stringify(BASE_BAR)),
+          chart
+        )
       } else if (chart.type === 'bar-stack') {
-        chart_option = stackBarOption(JSON.parse(JSON.stringify(BASE_BAR)), chart)
+        chart_option = stackBarOption(
+          JSON.parse(JSON.stringify(BASE_BAR)),
+          chart
+        )
       } else if (chart.type === 'bar-horizontal') {
-        chart_option = horizontalBarOption(JSON.parse(JSON.stringify(HORIZONTAL_BAR)), chart)
+        chart_option = horizontalBarOption(
+          JSON.parse(JSON.stringify(HORIZONTAL_BAR)),
+          chart
+        )
       } else if (chart.type === 'bar-stack-horizontal') {
-        chart_option = horizontalStackBarOption(JSON.parse(JSON.stringify(HORIZONTAL_BAR)), chart)
+        chart_option = horizontalStackBarOption(
+          JSON.parse(JSON.stringify(HORIZONTAL_BAR)),
+          chart
+        )
       } else if (chart.type === 'line') {
-        chart_option = baseLineOption(JSON.parse(JSON.stringify(BASE_LINE)), chart)
+        chart_option = baseLineOption(
+          JSON.parse(JSON.stringify(BASE_LINE)),
+          chart
+        )
       } else if (chart.type === 'line-stack') {
-        chart_option = stackLineOption(JSON.parse(JSON.stringify(BASE_LINE)), chart)
+        chart_option = stackLineOption(
+          JSON.parse(JSON.stringify(BASE_LINE)),
+          chart
+        )
       } else if (chart.type === 'pie') {
-        chart_option = basePieOption(JSON.parse(JSON.stringify(BASE_PIE)), chart)
+        chart_option = basePieOption(
+          JSON.parse(JSON.stringify(BASE_PIE)),
+          chart
+        )
       } else if (chart.type === 'pie-rose') {
-        chart_option = rosePieOption(JSON.parse(JSON.stringify(BASE_PIE)), chart)
+        chart_option = rosePieOption(
+          JSON.parse(JSON.stringify(BASE_PIE)),
+          chart
+        )
       } else if (chart.type === 'funnel') {
-        chart_option = baseFunnelOption(JSON.parse(JSON.stringify(BASE_FUNNEL)), chart)
+        chart_option = baseFunnelOption(
+          JSON.parse(JSON.stringify(BASE_FUNNEL)),
+          chart
+        )
       } else if (chart.type === 'radar') {
-        chart_option = baseRadarOption(JSON.parse(JSON.stringify(BASE_RADAR)), chart)
+        chart_option = baseRadarOption(
+          JSON.parse(JSON.stringify(BASE_RADAR)),
+          chart
+        )
       } else if (chart.type === 'gauge') {
-        chart_option = baseGaugeOption(JSON.parse(JSON.stringify(BASE_GAUGE)), chart)
+        chart_option = baseGaugeOption(
+          JSON.parse(JSON.stringify(BASE_GAUGE)),
+          chart
+        )
       } else if (chart.type === 'scatter') {
-        chart_option = baseScatterOption(JSON.parse(JSON.stringify(BASE_SCATTER)), chart)
+        chart_option = baseScatterOption(
+          JSON.parse(JSON.stringify(BASE_SCATTER)),
+          chart
+        )
       } else if (chart.type === 'treemap') {
-        chart_option = baseTreemapOption(JSON.parse(JSON.stringify(BASE_TREEMAP)), chart)
+        chart_option = baseTreemapOption(
+          JSON.parse(JSON.stringify(BASE_TREEMAP)),
+          chart
+        )
       } else if (chart.type === 'chart-mix') {
-        chart_option = baseMixOption(JSON.parse(JSON.stringify(BASE_MIX)), chart)
+        chart_option = baseMixOption(
+          JSON.parse(JSON.stringify(BASE_MIX)),
+          chart
+        )
       }
       // console.log(JSON.stringify(chart_option))
 
@@ -167,13 +232,15 @@ export default {
           return
         }
 
-        geoJson(cCode).then(res => {
-          this.$store.dispatch('map/setGeo', {
-            key: cCode,
-            value: res
-          }).then(() => {
-            this.initMapChart(res, chart)
-          })
+        geoJson(cCode).then((res) => {
+          this.$store
+            .dispatch('map/setGeo', {
+              key: cCode,
+              value: res
+            })
+            .then(() => {
+              this.initMapChart(res, chart)
+            })
         })
         return
       }
@@ -181,25 +248,25 @@ export default {
     },
     registerDynamicMap(areaCode) {
       this.dynamicAreaCode = areaCode
-    //   if (this.$store.getters.geoMap[areaCode]) {
-    //     const json = this.$store.getters.geoMap[areaCode]
-    //     this.myChart.dispose()
-    //     this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId))
-    //     this.$echarts.registerMap('MAP', json)
-    //     return
-    //   }
-    //   geoJson(areaCode).then(res => {
-    //     this.$store.dispatch('map/setGeo', {
-    //       key: areaCode,
-    //       value: res
-    //     }).then(() => {
-    //       this.myChart.dispose()
-    //       this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId))
-    //       this.$echarts.registerMap('MAP', res)
-    //     })
-    //   }).catch(() => {
-    //     this.downOrUp = true
-    //   })
+      //   if (this.$store.getters.geoMap[areaCode]) {
+      //     const json = this.$store.getters.geoMap[areaCode]
+      //     this.myChart.dispose()
+      //     this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId))
+      //     this.$echarts.registerMap('MAP', json)
+      //     return
+      //   }
+      //   geoJson(areaCode).then(res => {
+      //     this.$store.dispatch('map/setGeo', {
+      //       key: areaCode,
+      //       value: res
+      //     }).then(() => {
+      //       this.myChart.dispose()
+      //       this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId))
+      //       this.$echarts.registerMap('MAP', res)
+      //     })
+      //   }).catch(() => {
+      //     this.downOrUp = true
+      //   })
     },
 
     initMapChart(geoJson, chart) {
@@ -213,6 +280,16 @@ export default {
       // 指定图表的配置项和数据
       const chart = this.myChart
       this.setBackGroundBorder()
+      if (
+        option.series &&
+        option.series.length > 0 &&
+        option.series[0].type === 'gauge'
+      ) {
+        if (option.series[0].data && option.series[0].data.length > 0) {
+          option.series[0].max = option.series[0].data[0].value
+        }
+      }
+      console.log('哈哈哈', option)
       setTimeout(chart.setOption(option, true), 500)
       window.onresize = function() {
         chart.resize()
@@ -267,6 +344,4 @@ export default {
 }
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/frontend/src/views/chart/components/ChartComponentG2.vue b/frontend/src/views/chart/components/ChartComponentG2.vue
index 089b33a..24027f0 100644
--- a/frontend/src/views/chart/components/ChartComponentG2.vue
+++ b/frontend/src/views/chart/components/ChartComponentG2.vue
@@ -1,7 +1,17 @@
 <template>
-  <div style="display: flex;">
-    <view-track-bar ref="viewTrack" :track-menu="trackMenu" class="track-bar" :style="trackBarStyleTime" @trackClick="trackClick" />
-    <div :id="chartId" style="width: 100%;height: 100%;overflow: hidden;" :style="{ borderRadius: borderRadius}" />
+  <div style="display: flex">
+    <view-track-bar
+      ref="viewTrack"
+      :track-menu="trackMenu"
+      class="track-bar"
+      :style="trackBarStyleTime"
+      @trackClick="trackClick"
+    />
+    <div
+      :id="chartId"
+      style="width: 100%; height: 100%; overflow: hidden"
+      :style="{ borderRadius: borderRadius }"
+    />
   </div>
 </template>
 
@@ -74,7 +84,9 @@ export default {
     preDraw() {
       // 基于准备好的dom，初始化echarts实例
       // 渲染echart等待dom加载完毕,渲染之前先尝试销毁具有相同id的echart 放置多次切换仪表板有重复id情况
-      new Promise((resolve) => { resolve() }).then(() => {
+      new Promise((resolve) => {
+        resolve()
+      }).then(() => {
         //	此dom为echarts图标展示dom
         // this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId))
         // if (!this.myChart) {
@@ -157,6 +169,4 @@ export default {
 }
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/frontend/src/views/chart/components/table/TableNormal.vue b/frontend/src/views/chart/components/table/TableNormal.vue
index b721640..e7e4463 100644
--- a/frontend/src/views/chart/components/table/TableNormal.vue
+++ b/frontend/src/views/chart/components/table/TableNormal.vue
@@ -38,11 +38,11 @@
 
       <el-row v-show="chart.type === 'table-info'" class="table-page">
         <span class="total-style">
-          {{ $t("chart.total") }}
+          {{ $t('chart.total') }}
           <span>{{
             chart.data && chart.data.tableRow ? chart.data.tableRow.length : 0
           }}</span>
-          {{ $t("chart.items") }}
+          {{ $t('chart.items') }}
         </span>
         <el-pagination
           small
@@ -62,198 +62,212 @@
 </template>
 
 <script>
-import { hexColorToRGBA } from "../../chart/util";
-import eventBus from "@/components/canvas/utils/eventBus";
+import { hexColorToRGBA } from '../../chart/util'
+import eventBus from '@/components/canvas/utils/eventBus'
 
 export default {
-  name: "TableNormal",
+  name: 'TableNormal',
   props: {
     chart: {
       type: Object,
-      required: true,
+      required: true
     },
     filter: {
       type: Object,
       required: false,
-      default: function () {
-        return {};
-      },
+      default: function() {
+        return {}
+      }
     },
     showSummary: {
       type: Boolean,
       required: false,
-      default: true,
-    },
+      default: true
+    }
   },
   data() {
     return {
       fields: [],
-      height: "auto",
+      height: 'auto',
       title_class: {
-        margin: "0 0",
-        width: "100%",
-        fontSize: "18px",
-        color: "#303133",
-        textAlign: "left",
-        fontStyle: "normal",
-        fontWeight: "normal",
+        margin: '0 0',
+        width: '100%',
+        fontSize: '18px',
+        color: '#303133',
+        textAlign: 'left',
+        fontStyle: 'normal',
+        fontWeight: 'normal'
       },
       //   bg_class: {
       //     background: hexColorToRGBA('#ffffff', 0),
       //     borderRadius: this.borderRadius
       //   },
       table_header_class: {
-        fontSize: "12px",
-        color: "#606266",
-        background: "#e8eaec",
-        height: "36px",
+        fontSize: '12px',
+        color: '#606266',
+        background: '#e8eaec',
+        height: '36px'
       },
       table_item_class: {
-        fontSize: "12px",
-        color: "#606266",
-        background: "#ffffff",
-        height: "36px",
+        fontSize: '12px',
+        color: '#606266',
+        background: '#ffffff',
+        height: '36px'
       },
       table_item_class_stripe: {
-        fontSize: "12px",
-        color: "#606266",
-        background: "#ffffff",
-        height: "36px",
+        fontSize: '12px',
+        color: '#606266',
+        background: '#ffffff',
+        height: '36px'
       },
       title_show: true,
-      borderRadius: "0px",
+      borderRadius: '0px',
       currentPage: {
         page: 1,
         pageSize: 10,
-        show: 0,
-      },
-    };
+        show: 0
+      }
+    }
   },
   computed: {
     bg_class() {
       return {
-        background: hexColorToRGBA("#ffffff", 0),
-        borderRadius: this.borderRadius,
-      };
-    },
+        background: hexColorToRGBA('#ffffff', 0),
+        borderRadius: this.borderRadius
+      }
+    }
   },
   watch: {
-    chart: function () {
-      this.init();
-    },
+    chart: function() {
+      this.init()
+    }
   },
   mounted() {
-    this.init();
+    this.init()
     // 监听元素变动事件
-    eventBus.$on("resizing", (componentId) => {
-      this.chartResize();
-    });
+    eventBus.$on('resizing', (componentId) => {
+      this.chartResize()
+    })
   },
   methods: {
     init() {
-      this.resetHeight();
+      this.resetHeight()
       this.$nextTick(() => {
-        this.initData();
-        this.calcHeightDelay();
-      });
-      this.setBackGroundBorder();
+        this.initData()
+        this.calcHeightDelay()
+      })
+      this.setBackGroundBorder()
     },
     setBackGroundBorder() {
       if (this.chart.customStyle) {
-        const customStyle = JSON.parse(this.chart.customStyle);
+        const customStyle = JSON.parse(this.chart.customStyle)
         if (customStyle.background) {
-          this.borderRadius = (customStyle.background.borderRadius || 0) + "px";
+          this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
         }
       }
     },
     initData() {
-      const that = this;
-      let datas = [];
+      const that = this
+      let datas = []
       if (this.chart.data) {
-        this.fields = JSON.parse(JSON.stringify(this.chart.data.fields));
-        datas = JSON.parse(JSON.stringify(this.chart.data.tableRow));
-        if (this.chart.type === "table-info") {
+        this.fields = JSON.parse(JSON.stringify(this.chart.data.fields))
+        const yAxis = JSON.parse(this.chart.yaxis)
+        if (yAxis && yAxis.length > 0) {
+          yAxis.forEach((item) => {
+            console.log(11, item)
+            if (item.summary == 'ratio') {
+              this.chart.data.tableRow.forEach((tableRow) => {
+                console.log(33, tableRow)
+                tableRow[item.dataeaseName] += '%'
+              })
+            }
+          })
+        }
+        console.log(321123, yAxis)
+        console.log(123123, this.chart)
+        datas = JSON.parse(JSON.stringify(this.chart.data.tableRow))
+        if (this.chart.type === 'table-info') {
           // 计算分页
-          this.currentPage.show = datas.length;
+          this.currentPage.show = datas.length
           const pageStart =
-            (this.currentPage.page - 1) * this.currentPage.pageSize;
-          const pageEnd = pageStart + this.currentPage.pageSize;
-          datas = datas.slice(pageStart, pageEnd);
+            (this.currentPage.page - 1) * this.currentPage.pageSize
+          const pageEnd = pageStart + this.currentPage.pageSize
+          datas = datas.slice(pageStart, pageEnd)
         }
       } else {
-        this.fields = [];
-        datas = [];
-        this.resetPage();
+        this.fields = []
+        datas = []
+        this.resetPage()
       }
-      this.$refs.plxTable.reloadData(datas);
+      this.$refs.plxTable.reloadData(datas)
       this.$nextTick(() => {
-        this.initStyle();
-      });
-      window.onresize = function () {
-        that.calcHeightDelay();
-      };
+        this.initStyle()
+      })
+      window.onresize = function() {
+        that.calcHeightDelay()
+      }
     },
     calcHeightRightNow() {
       this.$nextTick(() => {
         if (this.$refs.tableContainer) {
-          let pageHeight = 0;
-          if (this.chart.type === "table-info") {
-            pageHeight = 36;
+          let pageHeight = 0
+          if (this.chart.type === 'table-info') {
+            pageHeight = 36
           }
-          const currentHeight = this.$refs.tableContainer.offsetHeight;
+          const currentHeight = this.$refs.tableContainer.offsetHeight
           const tableMaxHeight =
-            currentHeight - this.$refs.title.offsetHeight - 16 - pageHeight;
-          let tableHeight;
+            currentHeight - this.$refs.title.offsetHeight - 16 - pageHeight
+          let tableHeight
           if (this.chart.data) {
-            if (this.chart.type === "table-info") {
-              tableHeight = (this.currentPage.pageSize + 2) * 36 - pageHeight;
+            if (this.chart.type === 'table-info') {
+              tableHeight = (this.currentPage.pageSize + 2) * 36 - pageHeight
             } else {
               tableHeight =
-                (this.chart.data.tableRow.length + 2) * 36 - pageHeight;
+                (this.chart.data.tableRow.length + 2) * 36 - pageHeight
             }
           } else {
-            tableHeight = 0;
+            tableHeight = 0
           }
           if (tableHeight > tableMaxHeight) {
-            this.height = tableMaxHeight + "px";
+            this.height = tableMaxHeight + 'px'
           } else {
-            this.height = "auto";
+            this.height = 'auto'
           }
         }
-      });
+      })
     },
     calcHeightDelay() {
       setTimeout(() => {
-        this.calcHeightRightNow();
-      }, 100);
+        this.calcHeightRightNow()
+      }, 100)
     },
     initStyle() {
       if (this.chart.customAttr) {
-        const customAttr = JSON.parse(this.chart.customAttr);
+        const customAttr = JSON.parse(this.chart.customAttr)
         if (customAttr.color) {
-          this.table_header_class.color = customAttr.color.tableFontColor;
+          this.table_header_class.color = customAttr.color.tableFontColor
           this.table_header_class.background = hexColorToRGBA(
             customAttr.color.tableHeaderBgColor,
             customAttr.color.alpha
-          );
-          this.table_item_class.color = customAttr.color.tableFontColor;
+          )
+          this.table_item_class.color = customAttr.color.tableFontColor
           this.table_item_class.background = hexColorToRGBA(
             customAttr.color.tableItemBgColor,
             customAttr.color.alpha
-          );
+          )
         }
         if (customAttr.size) {
           this.table_header_class.fontSize =
-            customAttr.size.tableTitleFontSize + "px";
+            customAttr.size.tableTitleFontSize + 'px'
           this.table_item_class.fontSize =
-            customAttr.size.tableItemFontSize + "px";
+            customAttr.size.tableItemFontSize + 'px'
           this.table_header_class.height =
-            customAttr.size.tableTitleHeight + "px";
-          this.table_item_class.height = customAttr.size.tableItemHeight + "px";
+            customAttr.size.tableTitleHeight + 'px'
+          this.table_item_class.height = customAttr.size.tableItemHeight + 'px'
         }
         this.table_item_class_stripe = JSON.parse(
           JSON.stringify(this.table_item_class)
-        );
+        )
         // 暂不支持斑马纹
         // if (customAttr.color.tableStripe) {
         //   // this.table_item_class_stripe.background = hexColorToRGBA(customAttr.color.tableItemBgColor, customAttr.color.alpha - 40)
@@ -266,121 +280,133 @@ export default {
         // }
       }
       if (this.chart.customStyle) {
-        const customStyle = JSON.parse(this.chart.customStyle);
+        const customStyle = JSON.parse(this.chart.customStyle)
         if (customStyle.text) {
-          this.title_show = customStyle.text.show;
-          this.title_class.fontSize = customStyle.text.fontSize + "px";
-          this.title_class.color = customStyle.text.color;
-          this.title_class.textAlign = customStyle.text.hPosition;
+          this.title_show = customStyle.text.show
+          this.title_class.fontSize = customStyle.text.fontSize + 'px'
+          this.title_class.color = customStyle.text.color
+          this.title_class.textAlign = customStyle.text.hPosition
           this.title_class.fontStyle = customStyle.text.isItalic
-            ? "italic"
-            : "normal";
+            ? 'italic'
+            : 'normal'
           this.title_class.fontWeight = customStyle.text.isBolder
-            ? "bold"
-            : "normal";
+            ? 'bold'
+            : 'normal'
         }
         if (customStyle.background) {
           this.bg_class.background = hexColorToRGBA(
             customStyle.background.color,
             customStyle.background.alpha
-          );
+          )
         }
       }
       // 修改footer合计样式
-      const table = document.getElementsByClassName(this.chart.id);
+      const table = document.getElementsByClassName(this.chart.id)
       for (let i = 0; i < table.length; i++) {
-        const s_table = table[i].getElementsByClassName("elx-table--footer");
+        const s_table = table[i].getElementsByClassName('elx-table--footer')
         // console.log(s_table)
-        let s = "";
+        let s = ''
         for (const i in this.table_header_class) {
           s +=
-            (i === "fontSize" ? "font-size" : i) +
-            ":" +
+            (i === 'fontSize' ? 'font-size' : i) +
+            ':' +
             this.table_header_class[i] +
-            ";";
+            ';'
         }
         // console.log(s_table)
         for (let i = 0; i < s_table.length; i++) {
-          s_table[i].setAttribute("style", s);
+          s_table[i].setAttribute('style', s)
         }
       }
     },
     getRowStyle({ row, rowIndex }) {
       if (rowIndex % 2 !== 0) {
-        return this.table_item_class_stripe;
+        return this.table_item_class_stripe
       } else {
-        return this.table_item_class;
+        return this.table_item_class
       }
     },
     summaryMethod({ columns, data }) {
-      const that = this;
-      const means = []; // 合计
+      const that = this
+      const means = [] // 合计
       columns.forEach((column, columnIndex) => {
         if (columnIndex === 0) {
-          means.push("合计");
+          means.push('合计')
         } else {
+          let isRatio = false
           if (
             columnIndex >=
             that.chart.data.fields.length - that.chart.data.series.length
           ) {
-            const values = data.map((item) => Number(item[column.property]));
+            const values = data.map((item) => {
+              let a = item[column.property]
+              if (a.indexOf('%') >= 0) {
+                a = a.replace('%', '')
+                isRatio = true
+              }
+              return Number(a)
+            })
+
             // 合计
             if (!values.every((value) => isNaN(value))) {
               means[columnIndex] = values.reduce((prev, curr) => {
-                const value = Number(curr);
+                const value = Number(curr)
                 if (!isNaN(value)) {
-                  return prev + curr;
+                  return prev + curr
                 } else {
-                  return prev;
+                  return prev
                 }
-              }, 0);
-              means[columnIndex] = (means[columnIndex] + "").includes(".")
+              }, 0)
+              means[columnIndex] = (means[columnIndex] + '').includes('.')
                 ? means[columnIndex].toFixed(2)
-                : means[columnIndex];
+                : means[columnIndex]
+              if (isRatio) {
+                means[columnIndex] += '%'
+              }
             } else {
-              means[columnIndex] = "";
+              means[columnIndex] = ''
             }
           } else {
-            means[columnIndex] = "";
+            means[columnIndex] = ''
           }
         }
-      });
+      })
       // 返回一个二维数组的表尾合计(不要平均值，就不要在数组中添加)
-      return [means];
+      return [means]
     },
 
     chartResize() {
       // 指定图表的配置项和数据
-      this.calcHeightDelay();
+      this.calcHeightDelay()
     },
 
     initClass() {
-      return this.chart.id;
+      return this.chart.id
     },
 
     resetHeight() {
-      this.height = 100;
+      this.height = 100
     },
 
     pageChange(val) {
-      this.currentPage.pageSize = val;
-      this.init();
+      this.currentPage.pageSize = val
+      this.init()
     },
 
     pageClick(val) {
-      this.currentPage.page = val;
-      this.init();
+      this.currentPage.page = val
+      this.init()
     },
 
     resetPage() {
       this.currentPage = {
         page: 1,
         pageSize: 10,
-        show: 0,
-      };
-    },
-  },
-};
+        show: 0
+      }
+    }
+  }
+}
 </script>
 
 <style scoped>
diff --git a/frontend/src/views/panel/list/PanelViewShow.vue b/frontend/src/views/panel/list/PanelViewShow.vue
index 006a4ee..d7cd820 100644
--- a/frontend/src/views/panel/list/PanelViewShow.vue
+++ b/frontend/src/views/panel/list/PanelViewShow.vue
@@ -1,68 +1,100 @@
 <template>
-  <el-row style="height: 100%;width: 100%;">
-    <el-col v-if="panelInfo.name.length>0" class="panel-design">
+  <el-row style="height: 100%; width: 100%">
+    <el-col v-if="panelInfo.name.length > 0" class="panel-design">
       <el-row class="panel-design-head">
         <!--仪表板头部区域-->
-        <div style="border-bottom: 1px solid #dfe4ed;height: 100%;">
-          <el-col :span="12" style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;font-size: 14px">
+        <div style="border-bottom: 1px solid #dfe4ed; height: 100%">
+          <el-col
+            :span="12"
+            style="
+              text-overflow: ellipsis;
+              overflow: hidden;
+              white-space: nowrap;
+              font-size: 14px;
+            "
+          >
             <span>{{ panelInfo.name || '测试仪表板' }}</span>
             &nbsp;
-            <span v-if="panelInfo.isDefault" style="color: green;font-size: 12px">({{ $t('panel.default_panel_name') }}:{{ panelInfo.defaultPanelName }})</span>
-            <span v-if="panelInfo.sourcePanelName" style="color: green;font-size: 12px">({{ $t('panel.source_panel_name') }}:{{ panelInfo.sourcePanelName }})</span>
+            <span
+              v-if="panelInfo.isDefault"
+              style="color: green; font-size: 12px"
+            >({{ $t('panel.default_panel_name') }}:{{
+              panelInfo.defaultPanelName
+            }})</span>
+            <span
+              v-if="panelInfo.sourcePanelName"
+              style="color: green; font-size: 12px"
+            >({{ $t('panel.source_panel_name') }}:{{
+              panelInfo.sourcePanelName
+            }})</span>
           </el-col>
-<!--          <el-col :span="12">-->
-<!--            <span v-if="hasDataPermission('export',panelInfo.privileges)" style="float: right;margin-right: 10px">-->
-<!--              <el-tooltip :content="$t('panel.save_to_panel')">-->
-<!--                <el-button class="el-icon-folder-checked" size="mini" circle @click="saveToTemplate" />-->
-<!--              </el-tooltip>-->
-<!--            </span>-->
-<!--            <span v-if="hasDataPermission('export',panelInfo.privileges)" style="float: right;margin-right: 10px">-->
-<!--              <el-tooltip :content="$t('panel.export_to_panel')">-->
-<!--                <el-button class="el-icon-download" size="mini" circle @click="downloadToTemplate" />-->
-<!--              </el-tooltip>-->
-<!--            </span>-->
-<!--            <span v-if="hasDataPermission('export',panelInfo.privileges)" style="float: right;margin-right: 10px">-->
-<!--              <el-tooltip :content="$t('panel.export_to_pdf')">-->
-<!--                <el-button class="el-icon-notebook-2" size="mini" circle @click="downloadAsPDF" />-->
-<!--              </el-tooltip>-->
-<!--            </span>-->
-<!--            <span style="float: right;margin-right: 10px">-->
-<!--              <el-tooltip :content="$t('panel.fullscreen_preview')">-->
-<!--                <el-button class="el-icon-view" size="mini" circle @click="clickFullscreen" />-->
-<!--              </el-tooltip>-->
-<!--            </span>-->
+          <!--          <el-col :span="12">-->
+          <!--            <span v-if="hasDataPermission('export',panelInfo.privileges)" style="float: right;margin-right: 10px">-->
+          <!--              <el-tooltip :content="$t('panel.save_to_panel')">-->
+          <!--                <el-button class="el-icon-folder-checked" size="mini" circle @click="saveToTemplate" />-->
+          <!--              </el-tooltip>-->
+          <!--            </span>-->
+          <!--            <span v-if="hasDataPermission('export',panelInfo.privileges)" style="float: right;margin-right: 10px">-->
+          <!--              <el-tooltip :content="$t('panel.export_to_panel')">-->
+          <!--                <el-button class="el-icon-download" size="mini" circle @click="downloadToTemplate" />-->
+          <!--              </el-tooltip>-->
+          <!--            </span>-->
+          <!--            <span v-if="hasDataPermission('export',panelInfo.privileges)" style="float: right;margin-right: 10px">-->
+          <!--              <el-tooltip :content="$t('panel.export_to_pdf')">-->
+          <!--                <el-button class="el-icon-notebook-2" size="mini" circle @click="downloadAsPDF" />-->
+          <!--              </el-tooltip>-->
+          <!--            </span>-->
+          <!--            <span style="float: right;margin-right: 10px">-->
+          <!--              <el-tooltip :content="$t('panel.fullscreen_preview')">-->
+          <!--                <el-button class="el-icon-view" size="mini" circle @click="clickFullscreen" />-->
+          <!--              </el-tooltip>-->
+          <!--            </span>-->
 
-<!--            <span style="float: right;margin-right: 10px">-->
-<!--              <el-tooltip :content="$t('panel.new_tab_preview')">-->
-<!--                <el-button class="el-icon-data-analysis" size="mini" circle @click="newTab" />-->
-<!--              </el-tooltip>-->
-<!--            </span>-->
+          <!--            <span style="float: right;margin-right: 10px">-->
+          <!--              <el-tooltip :content="$t('panel.new_tab_preview')">-->
+          <!--                <el-button class="el-icon-data-analysis" size="mini" circle @click="newTab" />-->
+          <!--              </el-tooltip>-->
+          <!--            </span>-->
 
-<!--            <span v-if="!hasStar && panelInfo && !isShare" style="float: right;margin-right: 10px">-->
-<!--              <el-tooltip :content="$t('panel.store')">-->
-<!--                <el-button class="el-icon-star-off" size="mini" circle @click="star" />-->
-<!--              </el-tooltip>-->
-<!--            </span>-->
+          <!--            <span v-if="!hasStar && panelInfo && !isShare" style="float: right;margin-right: 10px">-->
+          <!--              <el-tooltip :content="$t('panel.store')">-->
+          <!--                <el-button class="el-icon-star-off" size="mini" circle @click="star" />-->
+          <!--              </el-tooltip>-->
+          <!--            </span>-->
 
-<!--            <span v-if="hasStar && panelInfo && !isShare" style="float: right;margin-right: 10px">-->
-<!--              <el-tooltip :content="$t('commons.cancel')">-->
-<!--                <el-button class="el-icon-star-on" size="mini" circle @click="unstar" />-->
-<!--              </el-tooltip>-->
-<!--            </span>-->
-<!--          </el-col>-->
+          <!--            <span v-if="hasStar && panelInfo && !isShare" style="float: right;margin-right: 10px">-->
+          <!--              <el-tooltip :content="$t('commons.cancel')">-->
+          <!--                <el-button class="el-icon-star-on" size="mini" circle @click="unstar" />-->
+          <!--              </el-tooltip>-->
+          <!--            </span>-->
+          <!--          </el-col>-->
         </div>
       </el-row>
       <!-- 仪表板预览区域-->
       <el-row class="panel-design-preview">
-        <div id="imageWrapper" ref="imageWrapper" style="width: 100%;height: 100%">
-          <fullscreen style="height: 100%;background: #f7f8fa;overflow-y: auto" :fullscreen.sync="fullscreen">
-            <Preview v-if="showMain" :in-screen="!fullscreen" :show-type="'width'" />
+        <div
+          id="imageWrapper"
+          ref="imageWrapper"
+          style="width: 100%; height: 100%"
+        >
+          <fullscreen
+            style="height: 100%; background: #f7f8fa; overflow-y: auto"
+            :fullscreen.sync="fullscreen"
+          >
+            <Preview
+              v-if="showMain"
+              :in-screen="!fullscreen"
+              :show-type="'width'"
+            />
           </fullscreen>
         </div>
       </el-row>
     </el-col>
-    <el-col v-if="panelInfo.name.length===0" style="height: 100%;">
-      <el-row style="height: 100%; background-color: var(--MainContentBG);" class="custom-position">
+    <el-col v-if="panelInfo.name.length === 0" style="height: 100%">
+      <el-row
+        style="height: 100%; background-color: var(--MainContentBG)"
+        class="custom-position"
+      >
         {{ $t('panel.select_panel_from_left') }}
       </el-row>
     </el-col>
@@ -73,20 +105,27 @@
       :visible.sync="templateSaveShow"
       width="500px"
     >
-      <save-to-template :template-info="templateInfo" @closeSaveDialog="closeSaveDialog" />
+      <save-to-template
+        :template-info="templateInfo"
+        @closeSaveDialog="closeSaveDialog"
+      />
     </el-dialog>
     <el-dialog
       v-if="pdfExportShow"
-      :title="'['+panelInfo.name+']'+'PDF导出'"
+      :title="'[' + panelInfo.name + ']' + 'PDF导出'"
       :visible.sync="pdfExportShow"
       width="80%"
       :top="'8vh'"
       :destroy-on-close="true"
       class="dialog-css2"
     >
-      <span style="position: absolute;right: 70px;top:15px">
+      <span style="position: absolute; right: 70px; top: 15px">
         <svg-icon icon-class="PDF" class="ds-icon-pdf" />
-        <el-select v-model="pdfTemplateSelectedIndex" :placeholder="'切换PDF模板'" @change="changePdfTemplate()">
+        <el-select
+          v-model="pdfTemplateSelectedIndex"
+          :placeholder="'切换PDF模板'"
+          @change="changePdfTemplate()"
+        >
           <el-option
             v-for="(item, index) in pdfTemplateAll"
             :key="index"
@@ -95,7 +134,12 @@
           />
         </el-select>
       </span>
-      <PDFPreExport :snapshot="snapshotInfo" :panel-name="panelInfo.name" :template-content="pdfTemplateContent" @closePreExport="closePreExport" />
+      <PDFPreExport
+        :snapshot="snapshotInfo"
+        :panel-name="panelInfo.name"
+        :template-content="pdfTemplateContent"
+        @closePreExport="closePreExport"
+      />
     </el-dialog>
   </el-row>
 </template>
@@ -106,7 +150,11 @@ import SaveToTemplate from '@/views/panel/list/SaveToTemplate'
 import { mapState } from 'vuex'
 import html2canvas from 'html2canvasde'
 import FileSaver from 'file-saver'
-import { enshrineList, saveEnshrine, deleteEnshrine } from '@/api/panel/enshrine'
+import {
+  enshrineList,
+  saveEnshrine,
+  deleteEnshrine
+} from '@/api/panel/enshrine'
 import bus from '@/utils/bus'
 import { queryAll } from '@/api/panel/pdfTemplate'
 
@@ -139,10 +187,7 @@ export default {
     panelInfo() {
       return this.$store.state.panel.panelInfo
     },
-    ...mapState([
-      'componentData',
-      'canvasStyleData'
-    ])
+    ...mapState(['componentData', 'canvasStyleData'])
   },
   watch: {
     panelInfo(newVal, oldVla) {
@@ -170,7 +215,7 @@ export default {
   },
   methods: {
     initPdfTemplate() {
-      queryAll().then(res => {
+      queryAll().then((res) => {
         this.pdfTemplateAll = res.data
         this.changePdfTemplate()
       })
@@ -184,7 +229,7 @@ export default {
     },
     saveToTemplate() {
       this.templateSaveShow = true
-      html2canvas(document.getElementById('canvasInfoTemp')).then(canvas => {
+      html2canvas(document.getElementById('canvasInfoTemp')).then((canvas) => {
         const snapshot = canvas.toDataURL('image/jpeg', 0.1) // 0.2是图片质量
         if (snapshot !== '') {
           this.templateInfo = {
@@ -202,7 +247,7 @@ export default {
       })
     },
     downloadToTemplate() {
-      html2canvas(document.getElementById('canvasInfoTemp')).then(canvas => {
+      html2canvas(document.getElementById('canvasInfoTemp')).then((canvas) => {
         const snapshot = canvas.toDataURL('image/jpeg', 0.1) // 0.2是图片质量
         if (snapshot !== '') {
           this.templateInfo = {
@@ -213,14 +258,19 @@ export default {
             panelData: JSON.stringify(this.componentData),
             dynamicData: ''
           }
-          const blob = new Blob([JSON.stringify(this.templateInfo)], { type: '' })
-          FileSaver.saveAs(blob, this.$store.state.panel.panelInfo.name + '-TEMPLATE.DE')
+          const blob = new Blob([JSON.stringify(this.templateInfo)], {
+            type: ''
+          })
+          FileSaver.saveAs(
+            blob,
+            this.$store.state.panel.panelInfo.name + '-TEMPLATE.DE'
+          )
         }
       })
     },
 
     downloadAsPDF() {
-      html2canvas(document.getElementById('canvasInfoTemp')).then(canvas => {
+      html2canvas(document.getElementById('canvasInfoTemp')).then((canvas) => {
         const snapshot = canvas.toDataURL('image/jpeg', 1) // 0.2是图片质量
         if (snapshot !== '') {
           this.snapshotInfo = snapshot
@@ -230,7 +280,7 @@ export default {
     },
     refreshTemplateInfo() {
       this.templateInfo = {}
-      html2canvas(document.getElementById('canvasInfoTemp')).then(canvas => {
+      html2canvas(document.getElementById('canvasInfoTemp')).then((canvas) => {
         const snapshot = canvas.toDataURL('image/jpeg', 0.1) // 0.2是图片质量
         if (snapshot !== '') {
           this.templateInfo = {
@@ -246,21 +296,25 @@ export default {
       this.templateSaveShow = false
     },
     star() {
-      this.panelInfo && saveEnshrine(this.panelInfo.id).then(res => {
-        this.hasStar = true
-        this.refreshStarList(true)
-      })
+      this.panelInfo &&
+        saveEnshrine(this.panelInfo.id).then((res) => {
+          this.hasStar = true
+          this.refreshStarList(true)
+        })
     },
     unstar() {
-      this.panelInfo && deleteEnshrine(this.panelInfo.id).then(res => {
-        this.hasStar = false
-        this.refreshStarList(false)
-      })
+      this.panelInfo &&
+        deleteEnshrine(this.panelInfo.id).then((res) => {
+          this.hasStar = false
+          this.refreshStarList(false)
+        })
     },
     initHasStar() {
       const param = {}
-      enshrineList(param).then(res => {
-        this.hasStar = res.data && res.data.some(item => item.panelGroupId === this.panelInfo.id)
+      enshrineList(param).then((res) => {
+        this.hasStar =
+          res.data &&
+          res.data.some((item) => item.panelGroupId === this.panelInfo.id)
       })
     },
     refreshStarList(isStar) {
@@ -269,80 +323,80 @@ export default {
       }
     },
     changePdfTemplate() {
-      this.pdfTemplateContent = this.pdfTemplateAll[this.pdfTemplateSelectedIndex].templateContent
+      this.pdfTemplateContent =
+        this.pdfTemplateAll[this.pdfTemplateSelectedIndex].templateContent
     },
     closePreExport() {
       this.pdfExportShow = false
     }
-
   }
 }
 </script>
 
 <style>
-  .view-list {
-    height: 100%;
-    width: 20%;
-    min-width: 180px;
-    max-width: 220px;
-    border: 1px solid #E6E6E6;
-    border-left: 0 solid;
-    overflow-y: auto;
-  }
+.view-list {
+  height: 100%;
+  width: 20%;
+  min-width: 180px;
+  max-width: 220px;
+  border: 1px solid #e6e6e6;
+  border-left: 0 solid;
+  overflow-y: auto;
+}
 
-  .view-list-thumbnails-outline {
-    height: 100%;
-    overflow-y: auto;
-  }
+.view-list-thumbnails-outline {
+  height: 100%;
+  overflow-y: auto;
+}
 
-  .view-list-thumbnails {
-    width: 100%;
-    padding: 0px 15px 15px 0px;
-  }
+.view-list-thumbnails {
+  width: 100%;
+  padding: 0px 15px 15px 0px;
+}
 
-  .panel-design {
-    min-height: 400px;
-    height: 100%;
-    min-width: 500px;
-    overflow-y: auto;
-    border-top: 1px solid #E6E6E6;
-  }
+.panel-design {
+  min-height: 400px;
+  height: 100%;
+  min-width: 500px;
+  overflow-y: auto;
+  border-top: 1px solid #e6e6e6;
+}
 
-  .panel-design-head {
-    height: 40px;
-    background-color: var(--SiderBG, white);
-    padding: 0 10px;
-    line-height: 40px;
-  }
-  .blackTheme .panel-design-head  {
-      color: var(--TextActive);
-  }
+.panel-design-head {
+  height: 40px;
+  background-color: var(--SiderBG, white);
+  padding: 0 10px;
+  line-height: 40px;
+}
+.blackTheme .panel-design-head {
+  color: var(--TextActive);
+}
 
-  .panel-design-preview {
-    width: 100%;
-    height: calc(100% - 40px);
-    overflow-x: hidden;
-    overflow-y: auto;
-    /*padding: 5px;*/
-  }
+.panel-design-preview {
+  width: 100%;
+  height: calc(100% - 40px);
+  overflow-x: hidden;
+  overflow-y: auto;
+  /*padding: 5px;*/
+}
 
-  .custom-position {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 14px;
-    flex-flow: row nowrap;
-    color: #9ea6b2;
-  }
+.custom-position {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  flex-flow: row nowrap;
+  color: #9ea6b2;
+}
 
-  .dialog-css2 ::v-deep .el-dialog__title {
-    font-size: 14px!important;
-  }
-  .dialog-css2 ::v-deep .el-dialog__header {
-    padding: 20px 20px 0!important;
-  }
-  .dialog-css2 ::v-deep .el-dialog__body {
-    padding: 0px 20px!important;
-  }
+.dialog-css2 ::v-deep .el-dialog__title {
+  font-size: 14px !important;
+}
+.dialog-css2 ::v-deep .el-dialog__header {
+  padding: 20px 20px 0 !important;
+}
+.dialog-css2 ::v-deep .el-dialog__body {
+  padding: 0px 20px !important;
+}
 </style>