perf: entity架子、优化前端体积

src/assets/css/common.scss

@@ -54,3 +54,9 @@ th *:first-letter,
 .header__operations *:first-letter {
   text-transform: capitalize;
 }
+
+.outer-box {
+  padding: 10px;
+  height: 100%;
+  width: 100%;
+}

src/components/entities/entities.scss

@@ -0,0 +1,10 @@
+.cn-entities {
+  display: grid;
+  grid-template-rows: 32px auto;
+  grid-template-columns: 250px auto;
+  grid-gap: 10px 20px;
+  padding: 20px;
+  height: 100%;
+  width: 100%;
+  background-color: #fff;
+}

src/utils/tools.js

@@ -433,7 +433,7 @@ export function getCapitalGeo (countryId) {
   return data[countryId]
 }
 
-export function JSONParse (data) {
+function JSONParse (data) {
   const firstParse = JSON.parse(data)
   if (typeof firstParse === 'string') {
     return JSON.parse(firstParse)

src/views/charts/Chart.vue

@@ -140,7 +140,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 { shallowRef } from 'vue'
 
 import {
@@ -166,9 +165,9 @@ import ChartMap from '@/components/charts/ChartMap'
 import PieTable from '@/components/charts/PieTable'
 import StatisticsLegend from '@/components/charts/StatisticsLegend'
 import ChartTablePagination from '@/components/charts/ChartTablePagination'
-import { chartTableDefaultPageSize, chartTableTopOptions } from '@/utils/constants'
+import { chartTableDefaultPageSize, chartTableTopOptions, storageKey } from '@/utils/constants'
 import { get } from '@/utils/http'
-import { replaceUrlPlaceholder, getCapitalGeo } from '@/utils/tools'
+import { replaceUrlPlaceholder, getCapitalGeo, getGeoData } from '@/utils/tools'
 
 export default {
   name: 'Chart',
@@ -430,7 +429,7 @@ export default {
     },
     initMap (id) {
       const chart = am4Core.create(id, am4Maps.MapChart)
-      chart.geodata = am4GeoDataWorldLow
+      chart.geodata = getGeoData(storageKey.iso36112WorldLow)
       chart.projection = new am4Maps.projections.Miller()
       const polygonSeries = chart.series.push(new am4Maps.MapPolygonSeries())
       polygonSeries.useGeodata = true

src/views/entities/EntityExplorer.vue

@@ -1,5 +1,12 @@
 <template>
-  <div></div>
+  <div class="outer-box">
+    <div class="cn-entities">
+      <div style="background-color: lightcyan"></div>
+      <div style="background-color: lightcyan"></div>
+      <div style="background-color: lightcyan"></div>
+      <div style="background-color: lightcyan"></div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -8,6 +15,6 @@ export default {
 }
 </script>
 
-<style>
-
+<style lang="scss">
+@import '~@/components/entities/entities.scss';
 </style>