feat: 视图图表类型增加地图

backend/src/main/java/io/dataease/map/dto/entity/AreaEntity.java

@@ -1,5 +1,6 @@
 package io.dataease.map.dto.entity;
 
+import com.fasterxml.jackson.annotation.JsonInclude;
 import lombok.Builder;
 import lombok.Data;
 
@@ -10,6 +11,7 @@ import java.util.Optional;
 
 @Data
 @Builder
+@JsonInclude(JsonInclude.Include.NON_NULL)
 public class AreaEntity implements Serializable {
 
     private static final long serialVersionUID = -1326667005437020282L;

backend/src/main/java/io/dataease/map/server/MapServer.java

@@ -5,6 +5,7 @@ import io.dataease.map.api.MapApi;
 import io.dataease.map.dto.entity.AreaEntity;
 import io.dataease.map.service.MapService;
 import io.dataease.map.utils.MapUtils;
+import org.apache.commons.lang3.StringUtils;
 import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.RestController;
 import javax.annotation.Resource;
@@ -40,7 +41,9 @@ public class MapServer implements MapApi {
     @Override
     public List<AreaEntity> areaEntitys(@PathVariable String pcode) {
         List<AreaEntity> areaEntities = mapService.areaEntities();
-
+        if (StringUtils.equals(pcode, "0")) {
+            return areaEntities;
+        }
         return mapService.entitysByPid(areaEntities, pcode);
     }
 

frontend/src/api/map/map.js

@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+
+export const areaMapping = () => {
+  return request({
+    url: '/api/map/areaEntitys/0',
+    method: 'get',
+    loading: true
+  })
+}
+
+export function geoJson(areaCode) {
+  return request({
+    url: '/api/map/resourceFull/' + areaCode,
+    method: 'get',
+    loading: true
+  })
+}

frontend/src/icons/svg/chart-map.svg

@@ -0,0 +1 @@
+<svg t="1626836013296" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2202" width="200" height="200"><path d="M38.801408 862.342144" p-id="2203"></path><path d="M651.604992 706.515968c18.5856-40.500224 40.05888-64.77824 56.708096-79.576064 9.088-8.075264 18.583552-14.7712 28.597248-19.060736-5.246976-7.146496-9.31328-13.48096-13.34784-19.542016-7.402496-11.1104-15.249408-23.81824-19.060736-30.015488-25.250816 13.81376-49.152 42.346496-68.145152 67.661824-11.029504 14.722048-20.962304 30.496768-30.497792 47.1808L651.604992 706.515968z" p-id="2204"></path><path d="M457.66144 768.47104c5.24288 12.84608 8.100864 25.755648 11.91424 35.719168 1.434624 6.20544 2.853888 11.897856 4.764672 17.180672 17.150976-5.282816 34.260992-10.568704 50.994176-17.686528 28.547072-11.998208 62.420992-29.024256 83.859456-51.421184l-39.54688-42.411008c-7.1424 7.14752-15.694848 12.920832-26.68544 20.0192C524.41088 741.834752 497.695744 756.5568 457.66144 768.47104z" p-id="2205"></path><path d="M390.47168 241.432576c0-45.746176 38.122496-83.869696 83.868672-83.869696 47.181824 0 83.392512 38.12352 83.392512 83.869696 0 47.17056-36.209664 83.868672-83.392512 83.868672C428.593152 325.301248 390.47168 288.603136 390.47168 241.432576z" p-id="2206"></path><path d="M297.558016 241.432576c0 17.632256 2.377728 34.782208 7.62368 51.460096l-1.910784 0c14.767104 34.310144 31.461376 70.268928 45.7472 97.688576l23.825408 45.7472c41.741312 80.156672 92.918784 168.214528 100.543488 179.651584 0.477184 0.477184 0.477184 0.477184 0.477184 0.954368 0 0.48128 0 0.948224 0.47616 0.948224 28.587008-48.123904 53.262336-91.554816 71.95648-126.271488l30.021632-55.764992 23.350272-45.746176c13.858816-27.132928 30.497792-62.414848 45.27104-97.20832l-1.435648 0c5.246976-16.677888 7.624704-33.82784 7.624704-51.460096 0-97.216512-79.581184-176.316416-176.78848-176.316416C376.656896 65.11616 297.558016 144.21504 297.558016 241.432576z" p-id="2207"></path><path d="M263.713792 765.600768c13.348864 10.016768 27.52 18.768896 42.411008 26.694656 26.576896 14.03392 60.519424 29.99296 99.119104 35.785728 1.434624-11.487232 2.173952-26.330112 3.812352-37.210112l2.859008-19.064832c-10.484736-1.911808-22.510592-4.934656-35.258368-9.536512-21.563392-7.779328-49.083392-20.962304-79.581184-42.405888-8.100864 11.90912-16.385024 22.600704-22.873088 31.44704L263.713792 765.600768z" p-id="2208"></path><path d="M76.923904 897.108992c0 36.191232 29.540352 65.26464 65.284096 65.26464l739.566592 0c36.211712 0 65.27488-29.074432 65.27488-65.26464L947.049472 358.181888c0-36.220928-29.063168-65.29024-65.27488-65.29024L702.121984 292.891648l-31.455232 88.164352 177.74592 0c8.100864 0 13.824 5.231616 13.824 13.336576l0 117.2224c-25.261056-0.466944-64.330752 1.910784-102.454272 20.49536l4.760576 12.870656 15.248384 39.54176c22.402048-7.143424 41.924608-12.459008 57.184256-14.76608l25.261056-3.813376 0 297.821184c0 8.13056-5.723136 13.319168-13.824 13.319168L178.895872 877.083648c-8.100864 0-13.814784-5.187584-13.814784-13.319168L165.081088 681.742336c3.803136 3.813376 8.195072 7.98208 13.338624 12.38528 8.204288 7.033856 20.496384 18.583552 36.211712 31.93344 9.058304-8.108032 17.547264-18.680832 24.783872-26.210304 4.199424-4.381696 8.100864-8.582144 11.437056-12.87168-37.646336-31.440896-75.768832-75.767808-85.771264-88.158208L165.081088 394.3936c0-7.62368 5.71392-13.336576 13.814784-13.336576l96.254976 0-29.063168-88.164352L142.208 292.892672c-35.744768 0-65.284096 29.069312-65.284096 65.29024L76.923904 897.108992z" p-id="2209"></path><path d="M985.171968 862.342144" p-id="2210"></path></svg>

frontend/src/lang/en.js

@@ -750,6 +750,7 @@ export default {
     chart_funnel: 'Funnel',
     chart_radar: 'Radar',
     chart_gauge: 'Gauge',
+    chart_map: 'Map',
     dateStyle: 'Date Style',
     datePattern: 'Date Format',
     y: 'Year',
@@ -817,7 +818,10 @@ export default {
     drag_block_funnel_width: 'Funnel Width',
     drag_block_funnel_split: 'Funnel Split',
     drag_block_radar_length: 'Branch Length',
-    drag_block_radar_label: 'Branch Label'
+    drag_block_radar_label: 'Branch Label',
+    map_range: 'Map range',
+    select_map_range: 'Please select map range',
+    area: 'Area'
   },
   dataset: {
     sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',

frontend/src/lang/tw.js

@@ -750,6 +750,7 @@ export default {
     chart_funnel: '漏鬥圖',
     chart_radar: '雷達圖',
     chart_gauge: '儀表盤',
+    chart_map: '地圖',
     dateStyle: '日期顯示',
     datePattern: '日期格式',
     y: '年',
@@ -817,7 +818,10 @@ export default {
     drag_block_funnel_width: '漏鬥層寬',
     drag_block_funnel_split: '漏鬥分層',
     drag_block_radar_length: '分支長度',
-    drag_block_radar_label: '分支標簽'
+    drag_block_radar_label: '分支標簽',
+    map_range: '地圖範圍',
+    select_map_range: '請選擇地圖範圍',
+    area: '地區'
   },
   dataset: {
     sheet_warn: '有多個sheet頁面，默認抽取第一個',

frontend/src/lang/zh.js

@@ -750,6 +750,7 @@ export default {
     chart_funnel: '漏斗图',
     chart_radar: '雷达图',
     chart_gauge: '仪表盘',
+    chart_map: '地图',
     dateStyle: '日期显示',
     datePattern: '日期格式',
     y: '年',
@@ -817,7 +818,10 @@ export default {
     drag_block_funnel_width: '漏斗层宽',
     drag_block_funnel_split: '漏斗分层',
     drag_block_radar_length: '分支长度',
-    drag_block_radar_label: '分支标签'
+    drag_block_radar_label: '分支标签',
+    map_range: '地图范围',
+    select_map_range: '请选择地图范围',
+    area: '地区'
   },
   dataset: {
     sheet_warn: '有多个 Sheet 页，默认抽取第一个',

frontend/src/views/chart/chart/chart.js

@@ -528,3 +528,37 @@ export const BASE_CHART = {
   },
   customFilter: []
 }
+
+export const BASE_MAP = {
+  title: {
+    text: '',
+    textStyle: {
+      fontWeight: 'normal'
+    }
+  },
+
+  tooltip: {},
+  visualMap: {
+    min: 50,
+    max: 52,
+    text: ['High', 'Low'],
+    realtime: false,
+    calculable: true,
+    inRange: {
+      color: ['lightskyblue', 'yellow', 'orangered']
+    }
+  },
+  //   legend: {},
+  series: [
+    {
+      name: '',
+      type: 'map',
+      map: 'HK',
+      roam: true,
+      //   label: {
+      //     show: true
+      //   },
+      data: []
+    }
+  ]
+}

frontend/src/views/chart/chart/common/common.js

@@ -29,7 +29,7 @@ export function componentStyle(chart_option, chart) {
       customStyle.text.isBolder ? style.fontWeight = 'bold' : style.fontWeight = 'normal'
       chart_option.title.textStyle = style
     }
-    if (customStyle.legend) {
+    if (customStyle.legend && chart_option.legend) {
       chart_option.legend.show = customStyle.legend.show
       // 水平方向
       if (customStyle.legend.hPosition === 'left') {

frontend/src/views/chart/chart/map/map.js

@@ -0,0 +1,59 @@
+import { hexColorToRGBA } from '@/views/chart/chart/util'
+import { componentStyle } from '../common/common'
+
+export function baseMapOption(chart_option, chart) {
+  // 处理shape attr
+  let customAttr = {}
+  if (chart.customAttr) {
+    customAttr = JSON.parse(chart.customAttr)
+    if (customAttr.color) {
+      chart_option.color = customAttr.color.colors
+    }
+    // tooltip
+    if (customAttr.tooltip) {
+      const tooltip = JSON.parse(JSON.stringify(customAttr.tooltip))
+      const reg = new RegExp('\n', 'g')
+      tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
+      chart_option.tooltip = tooltip
+    }
+  }
+  // 处理data
+  if (chart.data) {
+    chart_option.title.text = chart.title
+    if (chart.data.series.length > 0) {
+      chart_option.series[0].name = chart.data.series[0].name
+      // size
+      if (customAttr.size) {
+        chart_option.series[0].radius = [customAttr.size.pieInnerRadius + '%', customAttr.size.pieOuterRadius + '%']
+      }
+      // label
+      if (customAttr.label) {
+        chart_option.series[0].label = customAttr.label
+        chart_option.series[0].labelLine = customAttr.label.labelLine
+      }
+      // visualMap
+      const valueArr = chart.data.series[0].data
+      chart_option.visualMap.min = Math.min(...valueArr)
+      chart_option.visualMap.max = Math.max(...valueArr)
+      if (customAttr.color && customAttr.color.colors) {
+        chart_option.visualMap.inRange.color = customAttr.color.colors
+      }
+      for (let i = 0; i < valueArr.length; i++) {
+        const y = {
+          name: chart.data.x[i],
+          value: valueArr[i]
+        }
+        // color
+        y.itemStyle = {
+          color: hexColorToRGBA(customAttr.color.colors[i % 9], customAttr.color.alpha),
+          borderRadius: 0
+        }
+        chart_option.series[0].data.push(y)
+      }
+    }
+  }
+  // console.log(chart_option);
+  componentStyle(chart_option, chart)
+  return chart_option
+}
+

frontend/src/views/chart/components/ChartComponent.vue

@@ -5,15 +5,17 @@
 </template>
 
 <script>
-import { BASE_BAR, BASE_LINE, HORIZONTAL_BAR, BASE_PIE, BASE_FUNNEL, BASE_RADAR, BASE_GAUGE } from '../chart/chart'
+import { BASE_BAR, BASE_LINE, HORIZONTAL_BAR, BASE_PIE, BASE_FUNNEL, BASE_RADAR, BASE_GAUGE, BASE_MAP } from '../chart/chart'
 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'
 import { baseFunnelOption } from '../chart/funnel/funnel'
 import { baseRadarOption } from '../chart/radar/radar'
 import { baseGaugeOption } from '../chart/gauge/gauge'
-import eventBus from '@/components/canvas/utils/eventBus'
+// import eventBus from '@/components/canvas/utils/eventBus'
 import { uuid } from 'vue-uuid'
+import { geoJson } from '@/api/map/map'
 
 export default {
   name: 'ChartComponent',
@@ -93,6 +95,29 @@ export default {
       } else if (chart.type === 'gauge') {
         chart_option = baseGaugeOption(JSON.parse(JSON.stringify(BASE_GAUGE)), chart)
       }
+
+      if (chart.type === 'map') {
+        const customAttr = JSON.parse(chart.customAttr)
+        if (!customAttr.areaCode) return
+
+        let areaJson
+        if ((areaJson = localStorage.getItem('areaJson' + customAttr.areaCode)) !== null) {
+          this.initMapChart(areaJson, chart)
+          return
+        }
+        geoJson(customAttr.areaCode).then(res => {
+          this.initMapChart(res.data, chart)
+          // localStorage最大容量只有5M，先取消缓存
+          // localStorage.setItem('areaJson' + customAttr.areaCode, res.data)
+        })
+        return
+      }
+      this.myEcharts(chart_option)
+    },
+    initMapChart(geoJson, chart) {
+      this.$echarts.registerMap('HK', geoJson)
+      const base_json = JSON.parse(JSON.stringify(BASE_MAP))
+      const chart_option = baseMapOption(base_json, chart)
       this.myEcharts(chart_option)
     },
     myEcharts(option) {

frontend/src/views/chart/view/ChartEdit.vue

@@ -190,6 +190,11 @@
                             <svg-icon icon-class="gauge" class="chart-icon" />
                           </span>
                         </el-radio>
+                        <el-radio value="map" label="map">
+                          <span :title="$t('chart.chart_map')">
+                            <svg-icon icon-class="chart-map" class="chart-map" />
+                          </span>
+                        </el-radio>
                         <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
                         <el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
                       </div>
@@ -212,13 +217,31 @@
               </div>
               <div style="overflow:auto;border-top: 1px solid #e6e6e6" class="attr-style">
                 <el-row style="height: 100%;">
+                  <el-row v-if="chart.type ==='map'" class="padding-lr">
+                    <span style="width: 80px;text-align: right;">
+
+                      <span>{{ $t('chart.map_range') }}</span>
+                    </span>
+                    <span class="tree-select-span">
+                      <treeselect
+                        ref="mapSelector"
+                        v-model="view.customAttr.areaCode"
+                        :options="places"
+                        :placeholder="$t('chart.select_map_range')"
+                        :normalizer="normalizer"
+                        @input="save"
+                        @deselect="save"
+                      />
+                    </span>
+                  </el-row>
                   <el-row v-if="chart.type !=='text' && chart.type !== 'gauge'" class="padding-lr">
                     <span style="width: 80px;text-align: right;">
-                      <span v-if="chart.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
+                      <span v-if="chart.type && chart.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
-                      <span v-else-if="chart.type.includes('bar') || chart.type.includes('line')">{{ $t('chart.drag_block_type_axis') }}</span>
+                      <span v-else-if="chart.type && (chart.type.includes('bar') || chart.type.includes('line'))">{{ $t('chart.drag_block_type_axis') }}</span>
-                      <span v-else-if="chart.type.includes('pie')">{{ $t('chart.drag_block_pie_label') }}</span>
+                      <span v-else-if="chart.type && chart.type.includes('pie')">{{ $t('chart.drag_block_pie_label') }}</span>
-                      <span v-else-if="chart.type.includes('funnel')">{{ $t('chart.drag_block_funnel_split') }}</span>
+                      <span v-else-if="chart.type && chart.type.includes('funnel')">{{ $t('chart.drag_block_funnel_split') }}</span>
-                      <span v-else-if="chart.type.includes('radar')">{{ $t('chart.drag_block_radar_label') }}</span>
+                      <span v-else-if="chart.type && chart.type.includes('radar')">{{ $t('chart.drag_block_radar_label') }}</span>
+                      <span v-else-if="chart.type && chart.type.includes('map')">{{ $t('chart.area') }}</span>
                       /
                       <span>{{ $t('chart.dimension') }}</span>
                     </span>
@@ -238,13 +261,14 @@
                   </el-row>
                   <el-row class="padding-lr" style="margin-top: 6px;">
                     <span style="width: 80px;text-align: right;">
-                      <span v-if="chart.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
+                      <span v-if="chart.type && chart.type.includes('table')">{{ $t('chart.drag_block_table_data_column') }}</span>
-                      <span v-else-if="chart.type.includes('bar') || chart.type.includes('line')">{{ $t('chart.drag_block_value_axis') }}</span>
+                      <span v-else-if="chart.type && (chart.type.includes('bar') || chart.type.includes('line'))">{{ $t('chart.drag_block_value_axis') }}</span>
-                      <span v-else-if="chart.type.includes('pie')">{{ $t('chart.drag_block_pie_angel') }}</span>
+                      <span v-else-if="chart.type && chart.type.includes('pie')">{{ $t('chart.drag_block_pie_angel') }}</span>
-                      <span v-else-if="chart.type.includes('funnel')">{{ $t('chart.drag_block_funnel_width') }}</span>
+                      <span v-else-if="chart.type && chart.type.includes('funnel')">{{ $t('chart.drag_block_funnel_width') }}</span>
-                      <span v-else-if="chart.type.includes('radar')">{{ $t('chart.drag_block_radar_length') }}</span>
+                      <span v-else-if="chart.type && chart.type.includes('radar')">{{ $t('chart.drag_block_radar_length') }}</span>
-                      <span v-else-if="chart.type.includes('gauge')">{{ $t('chart.drag_block_gauge_angel') }}</span>
+                      <span v-else-if="chart.type && chart.type.includes('gauge')">{{ $t('chart.drag_block_gauge_angel') }}</span>
-                      <span v-else-if="chart.type.includes('text')">{{ $t('chart.drag_block_label_value') }}</span>
+                      <span v-else-if="chart.type && chart.type.includes('text')">{{ $t('chart.drag_block_label_value') }}</span>
+                      <span v-else-if="chart.type && chart.type.includes('map')">{{ $t('chart.chart_data') }}</span>
                       /
                       <span>{{ $t('chart.quota') }}</span>
                     </span>
@@ -301,7 +325,7 @@
               <span>{{ $t('chart.shape_attr') }}</span>
               <el-row>
                 <color-selector :param="param" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
-                <size-selector :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
+                <size-selector v-show="chart.type !== 'map'" :param="param" class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
                 <label-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
                 <tooltip-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
               </el-row>
@@ -309,11 +333,11 @@
             <el-row class="padding-lr">
               <span>{{ $t('chart.module_style') }}</span>
               <el-row>
-                <x-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" :param="param" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
+                <x-axis-selector v-show="view.type && (view.type.includes('bar') || view.type.includes('line'))" :param="param" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
-                <y-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" :param="param" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
+                <y-axis-selector v-show="view.type && (view.type.includes('bar') || view.type.includes('line'))" :param="param" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
-                <split-selector v-show="view.type.includes('radar')" :param="param" class="attr-selector" :chart="chart" @onChangeSplitForm="onChangeSplitForm" />
+                <split-selector v-show="view.type && view.type.includes('radar')" :param="param" class="attr-selector" :chart="chart" @onChangeSplitForm="onChangeSplitForm" />
                 <title-selector :param="param" class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
-                <legend-selector v-show="!view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
+                <legend-selector v-show="view.type && !view.type.includes('map') && !view.type.includes('table') && !view.type.includes('text')" :param="param" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
                 <background-color-selector :param="param" class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
               </el-row>
             </el-row>
@@ -468,7 +492,7 @@ import LabelNormal from '../components/normal/LabelNormal'
 import html2canvas from 'html2canvasde'
 import TableSelector from './TableSelector'
 import FieldEdit from '../../dataset/data/FieldEdit'
-
+import { areaMapping } from '@/api/map/map'
 export default {
   name: 'ChartEdit',
   components: {
@@ -563,7 +587,8 @@ export default {
       searchField: '',
       editDsField: false,
       changeDsTitle: '',
-      filterItem: {}
+      filterItem: {},
+      places: []
     }
   },
   computed: {
@@ -587,6 +612,7 @@ export default {
   },
   created() {
     // this.get(this.$store.state.chart.viewId);
+    this.initAreas()
   },
   mounted() {
     // this.get(this.$store.state.chart.viewId);
@@ -1201,12 +1227,39 @@ export default {
       }
       this.dragMoveDuplicate(this.view.customFilter, e)
       this.save(true)
+    },
+
+    initAreas() {
+      let mapping
+      if ((mapping = localStorage.getItem('areaMapping')) !== null) {
+        this.places = JSON.parse(mapping)
+        return
+      }
+      Object.keys(this.places).length === 0 && areaMapping().then(res => {
+        this.places = res.data
+        localStorage.setItem('areaMapping', JSON.stringify(res.data))
+      })
+    },
+
+    normalizer(node) {
+      const resultNode = {
+        id: node.code,
+        label: node.name
+      }
+      if (node.children && node.children.length > 0) {
+        resultNode.children = node.children
+      }
+
+      if (resultNode.children && (!node.children || node.children.length === 0)) {
+        delete resultNode.children
+      }
+      return resultNode
     }
   }
 }
 </script>
 
-<style scoped>
+<style lang='scss' scoped>
   .padding-lr {
     padding: 0 6px;
   }
@@ -1413,4 +1466,10 @@ export default {
     line-height: 40px;
     padding: 0 0 0 10px;
   }
+  .tree-select-span {
+      >>>div.vue-treeselect__control {
+          height: 32px !important;
+          font-weight: normal !important;
+      }
+  }
 </style>