From 1775a808d595786d8c001f1fa7bbf04edb8d4107 Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Mon, 19 Dec 2022 15:41:09 +0800
Subject: [PATCH] =?UTF-8?q?perf(=E5=9C=B0=E5=9B=BE):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87=E9=80=89=E6=8B=A9=E5=99=A8=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../deIconPicker/deIconGroupPicker/index.vue  | 570 ++++++++++++++++++
 .../src/components/deIconPicker/iconList.js   |  13 +
 .../svg/{ai37.svg => 1-trend-01-topright.svg} |   0
 ...-copy-2.svg => 1-trend-02-bottomright.svg} |   0
 ...y-copy-copy.svg => 1-trend-03-topleft.svg} |   0
 ...opy-copy.svg => 1-trend-04-bottomleft.svg} |   0
 .../{xiangshang.svg => 1-trend-05-top.svg}    |   0
 .../{xiangyou.svg => 1-trend-06-right.svg}    |   0
 .../svg/{xiangzuo.svg => 1-trend-07-left.svg} |   0
 .../svg/{paixu.svg => 1-trend-08-bottom.svg}  |   0
 .../{shangjiantou.svg => 1-trend-09-top1.svg} |   0
 ...{xiajiantou.svg => 1-trend-10-bottom1.svg} |   0
 .../{zuojiantou.svg => 1-trend-11-left1.svg}  |   0
 .../{youjiantou.svg => 1-trend-12-right1.svg} |   0
 .../{lingxing.svg => 2-state-01-diamond.svg}  |   0
 ...g-triangle.svg => 2-state-02-triangle.svg} |   0
 .../svg/{circle.svg => 2-state-03-circle.svg} |   0
 ...{five-star.svg => 2-state-04-pentagon.svg} |   0
 .../svg/{rect.svg => 2-state-05-square.svg}   |   0
 .../svg/{qizi.svg => 2-state-06-flag.svg}     |   0
 ...iao-yuankuang.svg => 2-state-07-error.svg} |   0
 ...nhao-yuankuang.svg => 2-state-08-warn.svg} |   0
 ...-yuankuang.svg => 2-state-09-question.svg} |   0
 ...ncheng-yuankuang.svg => 2-state-10-ok.svg} |   0
 .../svg/{ai65.svg => 3-rank-01-half.svg}      |   0
 .../{wujiaoxing.svg => 3-rank-02-full.svg}    |   0
 .../svg/{manyi.svg => 3-rank-03-nice.svg}     |   0
 .../svg/{yiban.svg => 3-rank-04-commonly.svg} |   0
 .../svg/{bumanyi.svg => 3-rank-05-bad.svg}    |   0
 ...haoping.svg => 3-rank-06-goodevaluate.svg} |   0
 ...{chaping.svg => 3-rank-07-badevaluate.svg} |   0
 ...ng.svg => 3-rank-08-badevaluatecircle.svg} |   0
 ...g.svg => 3-rank-08-goodevaluatecircle.svg} |   0
 .../{weizhi.svg => 4-location-01-mark.svg}    |   0
 .../src/deicons/svg/4-location-02-mark1.svg   |   1 +
 .../src/deicons/svg/4-location-03-mark2.svg   |   1 +
 .../deicons/svg/4-location-04-location.svg    |   1 +
 .../deicons/svg/4-location-05-location1.svg   |   1 +
 .../deicons/svg/4-location-06-location2.svg   |   1 +
 .../src/deicons/svg/4-location-07-map.svg     |   1 +
 .../src/deicons/svg/4-location-08-map1.svg    |   1 +
 .../src/deicons/svg/5-weather-01-bigsnow.svg  |   1 +
 .../deicons/svg/5-weather-02-littlesnow.svg   |   1 +
 .../src/deicons/svg/5-weather-03-bigrain.svg  |   1 +
 .../deicons/svg/5-weather-04-littlerain.svg   |   1 +
 .../src/deicons/svg/5-weather-05-icerain.svg  |   1 +
 .../src/deicons/svg/5-weather-06-snowrain.svg |   1 +
 .../src/deicons/svg/5-weather-07-sunny.svg    |   1 +
 .../src/deicons/svg/5-weather-08-cloudy.svg   |   1 +
 .../src/deicons/svg/5-weather-09-smog.svg     |   1 +
 .../src/deicons/svg/5-weather-10-typhoon.svg  |   1 +
 .../src/deicons/svg/5-weather-11-wind.svg     |   1 +
 .../src/deicons/svg/5-weather-12-thunder.svg  |   1 +
 frontend/src/lang/en.js                       |   5 +
 frontend/src/lang/tw.js                       |   5 +
 frontend/src/lang/zh.js                       |   5 +
 frontend/src/views/chart/chart/map/map.js     | 117 ++--
 .../functionStyle/MapMarkSelector.vue         |  19 +-
 frontend/src/views/chart/view/ChartStyle.vue  | 105 ++--
 59 files changed, 758 insertions(+), 100 deletions(-)
 create mode 100644 frontend/src/components/deIconPicker/deIconGroupPicker/index.vue
 rename frontend/src/deicons/svg/{ai37.svg => 1-trend-01-topright.svg} (100%)
 rename frontend/src/deicons/svg/{jiantou-copy-copy-2.svg => 1-trend-02-bottomright.svg} (100%)
 rename frontend/src/deicons/svg/{jiantou-copy-copy-copy.svg => 1-trend-03-topleft.svg} (100%)
 rename frontend/src/deicons/svg/{jiantou-copy-copy.svg => 1-trend-04-bottomleft.svg} (100%)
 rename frontend/src/deicons/svg/{xiangshang.svg => 1-trend-05-top.svg} (100%)
 rename frontend/src/deicons/svg/{xiangyou.svg => 1-trend-06-right.svg} (100%)
 rename frontend/src/deicons/svg/{xiangzuo.svg => 1-trend-07-left.svg} (100%)
 rename frontend/src/deicons/svg/{paixu.svg => 1-trend-08-bottom.svg} (100%)
 rename frontend/src/deicons/svg/{shangjiantou.svg => 1-trend-09-top1.svg} (100%)
 rename frontend/src/deicons/svg/{xiajiantou.svg => 1-trend-10-bottom1.svg} (100%)
 rename frontend/src/deicons/svg/{zuojiantou.svg => 1-trend-11-left1.svg} (100%)
 rename frontend/src/deicons/svg/{youjiantou.svg => 1-trend-12-right1.svg} (100%)
 rename frontend/src/deicons/svg/{lingxing.svg => 2-state-01-diamond.svg} (100%)
 rename frontend/src/deicons/svg/{zheng-triangle.svg => 2-state-02-triangle.svg} (100%)
 rename frontend/src/deicons/svg/{circle.svg => 2-state-03-circle.svg} (100%)
 rename frontend/src/deicons/svg/{five-star.svg => 2-state-04-pentagon.svg} (100%)
 rename frontend/src/deicons/svg/{rect.svg => 2-state-05-square.svg} (100%)
 rename frontend/src/deicons/svg/{qizi.svg => 2-state-06-flag.svg} (100%)
 rename frontend/src/deicons/svg/{cuowuguanbiquxiao-yuankuang.svg => 2-state-07-error.svg} (100%)
 rename frontend/src/deicons/svg/{gantanhao-yuankuang.svg => 2-state-08-warn.svg} (100%)
 rename frontend/src/deicons/svg/{wenhao-yuankuang.svg => 2-state-09-question.svg} (100%)
 rename frontend/src/deicons/svg/{zhengquewancheng-yuankuang.svg => 2-state-10-ok.svg} (100%)
 rename frontend/src/deicons/svg/{ai65.svg => 3-rank-01-half.svg} (100%)
 rename frontend/src/deicons/svg/{wujiaoxing.svg => 3-rank-02-full.svg} (100%)
 rename frontend/src/deicons/svg/{manyi.svg => 3-rank-03-nice.svg} (100%)
 rename frontend/src/deicons/svg/{yiban.svg => 3-rank-04-commonly.svg} (100%)
 rename frontend/src/deicons/svg/{bumanyi.svg => 3-rank-05-bad.svg} (100%)
 rename frontend/src/deicons/svg/{haoping.svg => 3-rank-06-goodevaluate.svg} (100%)
 rename frontend/src/deicons/svg/{chaping.svg => 3-rank-07-badevaluate.svg} (100%)
 rename frontend/src/deicons/svg/{chaping-yuankuang.svg => 3-rank-08-badevaluatecircle.svg} (100%)
 rename frontend/src/deicons/svg/{haoping-yuankuang.svg => 3-rank-08-goodevaluatecircle.svg} (100%)
 rename frontend/src/deicons/svg/{weizhi.svg => 4-location-01-mark.svg} (100%)
 create mode 100644 frontend/src/deicons/svg/4-location-02-mark1.svg
 create mode 100644 frontend/src/deicons/svg/4-location-03-mark2.svg
 create mode 100644 frontend/src/deicons/svg/4-location-04-location.svg
 create mode 100644 frontend/src/deicons/svg/4-location-05-location1.svg
 create mode 100644 frontend/src/deicons/svg/4-location-06-location2.svg
 create mode 100644 frontend/src/deicons/svg/4-location-07-map.svg
 create mode 100644 frontend/src/deicons/svg/4-location-08-map1.svg
 create mode 100644 frontend/src/deicons/svg/5-weather-01-bigsnow.svg
 create mode 100644 frontend/src/deicons/svg/5-weather-02-littlesnow.svg
 create mode 100644 frontend/src/deicons/svg/5-weather-03-bigrain.svg
 create mode 100644 frontend/src/deicons/svg/5-weather-04-littlerain.svg
 create mode 100644 frontend/src/deicons/svg/5-weather-05-icerain.svg
 create mode 100644 frontend/src/deicons/svg/5-weather-06-snowrain.svg
 create mode 100644 frontend/src/deicons/svg/5-weather-07-sunny.svg
 create mode 100644 frontend/src/deicons/svg/5-weather-08-cloudy.svg
 create mode 100644 frontend/src/deicons/svg/5-weather-09-smog.svg
 create mode 100644 frontend/src/deicons/svg/5-weather-10-typhoon.svg
 create mode 100644 frontend/src/deicons/svg/5-weather-11-wind.svg
 create mode 100644 frontend/src/deicons/svg/5-weather-12-thunder.svg

diff --git a/frontend/src/components/deIconPicker/deIconGroupPicker/index.vue b/frontend/src/components/deIconPicker/deIconGroupPicker/index.vue
new file mode 100644
index 0000000000..0de188ea20
--- /dev/null
+++ b/frontend/src/components/deIconPicker/deIconGroupPicker/index.vue
@@ -0,0 +1,570 @@
+<template>
+  <div
+    class="ui-fas"
+    :class="'ui-fas-' + id"
+  >
+    <div
+      v-if="!!name"
+      class="selected-icon-container"
+    >
+      <span
+        title="icon"
+        :style="{ color: color }"
+      >
+        <e-icon
+          :icon-name="name"
+          :title="name"
+          class="e-icon"
+        />
+      </span>
+    </div>
+    <el-popover
+      ref="popover"
+      v-model="visible"
+      :disabled="disabled"
+      :placement="myPlacement"
+      popper-class="el-icon-popper"
+      :width="popoverWidth"
+      show-arrow
+      trigger="manual"
+      @show="setTempSelected"
+    >
+      <template slot="reference">
+        <slot
+          name="default"
+          :data="{ prefixIcon, visible, placeholder, disabled, clearable, readonly, size }"
+        >
+
+          <el-input
+            ref="input"
+            v-model="proxyValue"
+            class="de-icon-picker-input"
+            :placeholder="dynamicPlaceholder"
+            :style="styles"
+            :clearable="clearable"
+            :disabled="disabled"
+            :readonly="true"
+            :size="size"
+            @input="_change"
+            @clear="_initIcon(false)"
+            @focus="_popoverShowFun(false)"
+          >
+            <template
+              v-if="showPrefix"
+              slot="prepend"
+            >
+              <slot
+                name="prepend"
+                :icon="prefixIcon"
+              >
+                <e-icon
+                  :icon-name="prefixIcon"
+                  class="e-icon"
+                />
+              </slot>
+            </template>
+          </el-input>
+        </slot>
+      </template>
+      <div :class="'de-icon-picker-container-' + id">
+        <div class="top-container">
+          <el-color-picker
+            v-model="curColor"
+            :popper-class="'icon-picker-inner-color-' + id"
+            show-alpha
+            @change="colorChange"
+          />
+
+          <div class="top-sure-button-div">
+            <el-button
+              type="primary"
+              size="mini"
+              icon="el-icon-check"
+              @click.stop="sure"
+            />
+          </div>
+
+        </div>
+        <el-divider class="top-divider" />
+
+        <el-scrollbar
+          v-if="!destroy"
+          ref="eScrollbar"
+          tag="div"
+          wrap-class="el-select-dropdown__wrap"
+          view-class="el-select-dropdown__list"
+          :class="'is-empty-' + id"
+        >
+          <div
+            v-for="(group, gname, i) in dataGroup"
+            :key="i"
+          >
+            <el-divider
+              class="icon-type-line"
+              content-position="left"
+            >{{ $t('chart.' + gname.substr(1)) }}</el-divider>
+            <ul
+              v-if="group && group.length > 0"
+              ref="fasIconList"
+              class="fas-icon-list"
+            >
+              <li
+                v-for="(item, index) in group"
+                :key="index"
+                class="picker-li"
+                :style="tempSelected === item && (highLightColor !== '' || !!curColor) ? { color: highLightColor || curColor, border: '1px solid ' + curColor } : ''"
+                @click="_selectedIcon(item)"
+              >
+                <slot
+                  name="icon"
+                  :icon="item"
+                >
+                  <e-icon
+                    :icon-name="item"
+                    :title="item"
+                    class="e-icon"
+                  />
+                </slot>
+              </li>
+            </ul>
+          </div>
+          <ul
+            v-if="dataList && dataList.length > 0"
+            ref="fasIconList"
+            class="fas-icon-list"
+          >
+            <li
+              v-for="(item, index) in dataList"
+              :key="index"
+              class="picker-li"
+              :style="tempSelected === item && (highLightColor !== '' || !!curColor) ? { color: highLightColor || curColor, border: '1px solid ' + curColor } : ''"
+              @click="_selectedIcon(item)"
+            >
+              <slot
+                name="icon"
+                :icon="item"
+              >
+                <e-icon
+                  :icon-name="item"
+                  :title="item"
+                  class="e-icon"
+                />
+              </slot>
+            </li>
+          </ul>
+          <span
+            v-if="!dataGroup && (!dataList || !dataList.length)"
+            class="fas-no-data"
+            v-text="emptyText"
+          />
+        </el-scrollbar>
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+import iconList from '../iconList'
+import { off, on } from '../utils/index'
+import EIcon from '../eIcon/e-icon'
+import ElInput from 'element-ui/lib/input'
+import ElPopover from 'element-ui/lib/popover'
+import ElScrollbar from 'element-ui/lib/scrollbar'
+import { PopupManager } from 'element-ui/lib/utils/popup'
+
+export default {
+  name: 'DeIconGroupPicker',
+  components: {
+    EIcon,
+    ElInput,
+    ElPopover,
+    ElScrollbar
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default() {
+        return false
+      }
+    },
+    readonly: {
+      type: Boolean,
+      default() {
+        return false
+      }
+    },
+    clearable: {
+      type: Boolean,
+      default() {
+        return false
+      }
+    },
+    styles: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    placement: {
+      type: String,
+      default() {
+        return 'bottom'
+      }
+    },
+    value: {
+      type: String,
+      default() {
+        return ''
+      }
+    },
+    options: {},
+    width: {
+      type: Number,
+      default() {
+        return -1
+      }
+    },
+    size: {
+      type: String,
+      default() {
+        return 'medium'
+      }
+    },
+    placeholder: {
+      type: String,
+      default() {
+        return '请选择图标'
+      }
+    },
+    defaultIcon: {
+      type: String,
+      default() {
+        return 'eiconfont e-icon-bi'
+      }
+    },
+    emptyText: {
+      type: String,
+      default() {
+        return '暂无可选图标'
+      }
+    },
+    highLightColor: {
+      type: String,
+      default() {
+        return ''
+      }
+    },
+    zIndex: {
+      type: Number,
+      default() {
+        return null
+      }
+    },
+    showPrefix: {
+      type: Boolean,
+      default() {
+        return false
+      }
+    },
+    color: {
+      type: String,
+      default() {
+        return 'rgba(255, 0, 0, 1.0)'
+      }
+    }
+  },
+  data() {
+    return {
+      iconList: [],
+      visible: false,
+      prefixIcon: 'eiconfont e-icon-bi',
+      name: '',
+      icon: {},
+      myPlacement: 'bottom',
+      popoverWidth: 200,
+      destroy: false,
+      id: new Date().getTime(),
+      proxyValue: '',
+      curColor: '',
+      tempSelected: '',
+      iconGroup: {}
+    }
+  },
+  computed: {
+    dataList: function() {
+      const arr1 = []
+      for (let i = 0, len = this.iconList.length; i < len; i++) {
+        if (arr1.indexOf(this.iconList[i]) === -1) {
+          arr1.push(this.iconList[i])
+        }
+      }
+      return arr1
+    },
+    dataGroup: function() {
+      return JSON.parse(JSON.stringify(this.iconGroup))
+    },
+    dynamicPlaceholder() {
+      return this.name ? '' : this.placeholder
+    }
+
+  },
+  watch: {
+    value: function(val) {
+      setTimeout(() => {
+        this.name = val
+        this.prefixIcon = this.name ? this.name : this.defaultIcon
+      }, 50)
+    },
+    visible: function(val) {
+      if (val === false) {
+        this.$nextTick(() => {
+          off(document, 'mouseup', this._popoverHideFun)
+        })
+      } else {
+        this.$nextTick(() => {
+          this.createIconList()
+          on(document, 'mouseup', this._popoverHideFun)
+        })
+      }
+    },
+
+    options: {
+      handler(newV, oldV) {
+        const self = this
+        setTimeout(() => {
+          self._initIcon(true)
+        }, 50)
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this._updateW()
+  },
+  beforeDestroy() {
+    off(document, 'mouseup', this._popoverHideFun)
+    this.destroyIconList()
+  },
+  created() {
+    this.createIconList()
+    this._initIcon(true)
+    this.curColor = this.color
+  },
+  methods: {
+    colorChange(c) {
+      this.color = c
+      this.$emit('set-color', c)
+    },
+    setTempSelected() {
+      this.tempSelected = this.name
+    },
+    sure() {
+      this.visible = false
+      this.name = this.tempSelected
+      this.prefixIcon = this.name
+      this.color = this.curColor
+      this._emitFun(this.name)
+      this.$emit('set-color', this.curColor)
+    },
+    _change(val) {
+      this.iconList = this.icon.list.filter(function(i) {
+        return i.indexOf(val) !== -1
+      })
+    },
+    _initIcon(type) {
+      this.prefixIcon = this.value && type && type === true ? this.value : this.defaultIcon
+      this.name = type === true ? this.value : ''
+      this.icon = Object.assign({}, iconList)
+      if (this.options) {
+        this.icon.list = []
+        if (this.options.addIconList !== undefined &&
+          this.options.addIconList &&
+          this.options.addIconList.length > 0) {
+          this.icon.addIcon(this.options.addIconList)
+        }
+        if (this.options.removeIconList !== undefined &&
+          this.options.removeIconList &&
+          this.options.removeIconList.length > 0) {
+          this.icon.removeIcon(this.options.removeIconList)
+        }
+        if (this.options?.addIconGroup) {
+          this.icon.initGroup(this.options.addIconGroup)
+        }
+      }
+      this.iconList = this.icon.list
+      this.iconGroup = this.icon.group
+
+      if (this.placement && (this.placement === 'bottom' || this.placement === 'top')) {
+        this.myPlacement = this.placement
+      }
+      if (type === false) {
+        this._emitFun('')
+      }
+    },
+
+    addIcon(item = []) {
+      if (item !== undefined && item && item.length > 0) {
+        this.icon.addIcon(item)
+        this.iconList = this.icon.list
+      }
+    },
+    removeIcon(item = []) {
+      if (item !== undefined && item && item.length > 0) {
+        this.icon.removeIcon(item)
+        this.iconList = this.icon.list
+      }
+    },
+    updatePopper(zIndex) {
+      if (zIndex) {
+        PopupManager.zIndex = zIndex
+      }
+      this._popoverShowFun(true)
+      setTimeout(() => {
+        this.$refs.popover.updatePopper()
+      }, 100)
+    },
+    _selectedIcon(item) {
+      this.tempSelected = item
+    },
+    _updateW() {
+      this.$nextTick(() => {
+        if (this.width === -1 && this.$refs.input && this.$refs.input.$el) {
+          this.popoverWidth = this.$refs.input.$el.getBoundingClientRect().width - 36
+        } else {
+          this.popoverWidth = this.width
+        }
+        if (this.$refs.eScrollbar && this.$refs.eScrollbar.wrap) {
+          this.$refs.eScrollbar.wrap.scrollTop = 0
+          this.$refs.eScrollbar.handleScroll()
+          this.$refs.eScrollbar.update()
+        }
+      })
+    },
+    _popoverShowFun(flag) {
+      const _this = this
+      if (_this.readonly !== true && _this.disabled !== true) {
+        if (!flag && _this.zIndex) {
+          PopupManager.zIndex = this.zIndex
+        }
+        _this.visible = true
+        _this._updateW()
+      }
+    },
+    _popoverHideFun(e) {
+      const path = e.path || (e.composedPath && e.composedPath())
+      const insideClassNameList = ['ui-fas-', 'de-icon-picker-container-', 'icon-picker-inner-color-']
+      const isInside = path.some(list => {
+        return list.className && typeof list.className === 'string' && insideClassNameList.some(cName => list.className.includes(cName + this.id))
+      })
+
+      if (!isInside) {
+        this.visible = false
+      }
+    },
+    _emitFun(val) {
+      this.$emit('input', val)
+      this.$emit('change', val)
+    },
+
+    destroyIconList() {
+      this.destroy = true
+    },
+
+    createIconList() {
+      this.destroy = false
+    },
+    show() {
+      this._popoverShowFun(false)
+    },
+    hide() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~element-ui/lib/theme-chalk/input.css';
+@import '~element-ui/lib/theme-chalk/popover.css';
+@import '~element-ui/lib/theme-chalk/scrollbar.css';
+@import '~element-ui/lib/theme-chalk/select-dropdown.css';
+
+.fas-icon-list {
+  list-style-type: none;
+  margin: 0 0 0 -4px;
+  padding: 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.ui-fas .el-input__inner {
+  cursor: pointer;
+}
+
+.fas-icon-list li {
+  width: 30px;
+  height: 30px;
+  margin: 5px;
+}
+
+.fas-icon-list li i,
+.fas-icon-list li svg {
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.el-icon-popper {
+  max-height: 400px;
+  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: hidden;
+}
+
+.el-icon-popper[x-placement^="bottom"] {
+  margin-top: 5px;
+}
+
+.fas-no-data {
+  display: block;
+}
+
+.e-icon {
+  font-size: 16px;
+}
+
+.top-divider {
+  margin: 5px 0 0 0 !important;
+}
+
+.top-container {
+  display: flex;
+}
+
+.top-sure-button-div {
+  margin: 4px 15px 0 auto;
+
+  ::v-deep button {
+    width: 25px;
+    height: 20px;
+    padding: 4px 5px;
+  }
+}
+
+.selected-icon-container {
+  position: absolute;
+  z-index: 9;
+  width: 21%;
+  text-align: center;
+  margin-top: 2px;
+  pointer-events: none;
+}
+
+.picker-li {
+  text-align: center;
+  line-height: 30px;
+}
+.icon-type-line {
+  margin: 13px 0;
+}
+</style>
diff --git a/frontend/src/components/deIconPicker/iconList.js b/frontend/src/components/deIconPicker/iconList.js
index aadb561162..8bd7fbf8a3 100644
--- a/frontend/src/components/deIconPicker/iconList.js
+++ b/frontend/src/components/deIconPicker/iconList.js
@@ -34,10 +34,23 @@ const remove = function(list, item) {
 
 const iconList = {
   list: [],
+  group: {},
 
   addIcon: function(item) {
     this.list = add(this.list, item)
   },
+  addGroup: function(item) {
+    const { value, type } = item
+    this.group[type] = this.group[type] ? this.group[type] : []
+    if (TypeUtil.isArray(value)) {
+      this.group[type] = this.group[type].concat(value)
+    } else {
+      this.group[type].push(value)
+    }
+  },
+  initGroup: function(data) {
+    this.group = JSON.parse(JSON.stringify(data))
+  },
 
   removeIcon: function(item) {
     this.list = remove(this.list, item)
diff --git a/frontend/src/deicons/svg/ai37.svg b/frontend/src/deicons/svg/1-trend-01-topright.svg
similarity index 100%
rename from frontend/src/deicons/svg/ai37.svg
rename to frontend/src/deicons/svg/1-trend-01-topright.svg
diff --git a/frontend/src/deicons/svg/jiantou-copy-copy-2.svg b/frontend/src/deicons/svg/1-trend-02-bottomright.svg
similarity index 100%
rename from frontend/src/deicons/svg/jiantou-copy-copy-2.svg
rename to frontend/src/deicons/svg/1-trend-02-bottomright.svg
diff --git a/frontend/src/deicons/svg/jiantou-copy-copy-copy.svg b/frontend/src/deicons/svg/1-trend-03-topleft.svg
similarity index 100%
rename from frontend/src/deicons/svg/jiantou-copy-copy-copy.svg
rename to frontend/src/deicons/svg/1-trend-03-topleft.svg
diff --git a/frontend/src/deicons/svg/jiantou-copy-copy.svg b/frontend/src/deicons/svg/1-trend-04-bottomleft.svg
similarity index 100%
rename from frontend/src/deicons/svg/jiantou-copy-copy.svg
rename to frontend/src/deicons/svg/1-trend-04-bottomleft.svg
diff --git a/frontend/src/deicons/svg/xiangshang.svg b/frontend/src/deicons/svg/1-trend-05-top.svg
similarity index 100%
rename from frontend/src/deicons/svg/xiangshang.svg
rename to frontend/src/deicons/svg/1-trend-05-top.svg
diff --git a/frontend/src/deicons/svg/xiangyou.svg b/frontend/src/deicons/svg/1-trend-06-right.svg
similarity index 100%
rename from frontend/src/deicons/svg/xiangyou.svg
rename to frontend/src/deicons/svg/1-trend-06-right.svg
diff --git a/frontend/src/deicons/svg/xiangzuo.svg b/frontend/src/deicons/svg/1-trend-07-left.svg
similarity index 100%
rename from frontend/src/deicons/svg/xiangzuo.svg
rename to frontend/src/deicons/svg/1-trend-07-left.svg
diff --git a/frontend/src/deicons/svg/paixu.svg b/frontend/src/deicons/svg/1-trend-08-bottom.svg
similarity index 100%
rename from frontend/src/deicons/svg/paixu.svg
rename to frontend/src/deicons/svg/1-trend-08-bottom.svg
diff --git a/frontend/src/deicons/svg/shangjiantou.svg b/frontend/src/deicons/svg/1-trend-09-top1.svg
similarity index 100%
rename from frontend/src/deicons/svg/shangjiantou.svg
rename to frontend/src/deicons/svg/1-trend-09-top1.svg
diff --git a/frontend/src/deicons/svg/xiajiantou.svg b/frontend/src/deicons/svg/1-trend-10-bottom1.svg
similarity index 100%
rename from frontend/src/deicons/svg/xiajiantou.svg
rename to frontend/src/deicons/svg/1-trend-10-bottom1.svg
diff --git a/frontend/src/deicons/svg/zuojiantou.svg b/frontend/src/deicons/svg/1-trend-11-left1.svg
similarity index 100%
rename from frontend/src/deicons/svg/zuojiantou.svg
rename to frontend/src/deicons/svg/1-trend-11-left1.svg
diff --git a/frontend/src/deicons/svg/youjiantou.svg b/frontend/src/deicons/svg/1-trend-12-right1.svg
similarity index 100%
rename from frontend/src/deicons/svg/youjiantou.svg
rename to frontend/src/deicons/svg/1-trend-12-right1.svg
diff --git a/frontend/src/deicons/svg/lingxing.svg b/frontend/src/deicons/svg/2-state-01-diamond.svg
similarity index 100%
rename from frontend/src/deicons/svg/lingxing.svg
rename to frontend/src/deicons/svg/2-state-01-diamond.svg
diff --git a/frontend/src/deicons/svg/zheng-triangle.svg b/frontend/src/deicons/svg/2-state-02-triangle.svg
similarity index 100%
rename from frontend/src/deicons/svg/zheng-triangle.svg
rename to frontend/src/deicons/svg/2-state-02-triangle.svg
diff --git a/frontend/src/deicons/svg/circle.svg b/frontend/src/deicons/svg/2-state-03-circle.svg
similarity index 100%
rename from frontend/src/deicons/svg/circle.svg
rename to frontend/src/deicons/svg/2-state-03-circle.svg
diff --git a/frontend/src/deicons/svg/five-star.svg b/frontend/src/deicons/svg/2-state-04-pentagon.svg
similarity index 100%
rename from frontend/src/deicons/svg/five-star.svg
rename to frontend/src/deicons/svg/2-state-04-pentagon.svg
diff --git a/frontend/src/deicons/svg/rect.svg b/frontend/src/deicons/svg/2-state-05-square.svg
similarity index 100%
rename from frontend/src/deicons/svg/rect.svg
rename to frontend/src/deicons/svg/2-state-05-square.svg
diff --git a/frontend/src/deicons/svg/qizi.svg b/frontend/src/deicons/svg/2-state-06-flag.svg
similarity index 100%
rename from frontend/src/deicons/svg/qizi.svg
rename to frontend/src/deicons/svg/2-state-06-flag.svg
diff --git a/frontend/src/deicons/svg/cuowuguanbiquxiao-yuankuang.svg b/frontend/src/deicons/svg/2-state-07-error.svg
similarity index 100%
rename from frontend/src/deicons/svg/cuowuguanbiquxiao-yuankuang.svg
rename to frontend/src/deicons/svg/2-state-07-error.svg
diff --git a/frontend/src/deicons/svg/gantanhao-yuankuang.svg b/frontend/src/deicons/svg/2-state-08-warn.svg
similarity index 100%
rename from frontend/src/deicons/svg/gantanhao-yuankuang.svg
rename to frontend/src/deicons/svg/2-state-08-warn.svg
diff --git a/frontend/src/deicons/svg/wenhao-yuankuang.svg b/frontend/src/deicons/svg/2-state-09-question.svg
similarity index 100%
rename from frontend/src/deicons/svg/wenhao-yuankuang.svg
rename to frontend/src/deicons/svg/2-state-09-question.svg
diff --git a/frontend/src/deicons/svg/zhengquewancheng-yuankuang.svg b/frontend/src/deicons/svg/2-state-10-ok.svg
similarity index 100%
rename from frontend/src/deicons/svg/zhengquewancheng-yuankuang.svg
rename to frontend/src/deicons/svg/2-state-10-ok.svg
diff --git a/frontend/src/deicons/svg/ai65.svg b/frontend/src/deicons/svg/3-rank-01-half.svg
similarity index 100%
rename from frontend/src/deicons/svg/ai65.svg
rename to frontend/src/deicons/svg/3-rank-01-half.svg
diff --git a/frontend/src/deicons/svg/wujiaoxing.svg b/frontend/src/deicons/svg/3-rank-02-full.svg
similarity index 100%
rename from frontend/src/deicons/svg/wujiaoxing.svg
rename to frontend/src/deicons/svg/3-rank-02-full.svg
diff --git a/frontend/src/deicons/svg/manyi.svg b/frontend/src/deicons/svg/3-rank-03-nice.svg
similarity index 100%
rename from frontend/src/deicons/svg/manyi.svg
rename to frontend/src/deicons/svg/3-rank-03-nice.svg
diff --git a/frontend/src/deicons/svg/yiban.svg b/frontend/src/deicons/svg/3-rank-04-commonly.svg
similarity index 100%
rename from frontend/src/deicons/svg/yiban.svg
rename to frontend/src/deicons/svg/3-rank-04-commonly.svg
diff --git a/frontend/src/deicons/svg/bumanyi.svg b/frontend/src/deicons/svg/3-rank-05-bad.svg
similarity index 100%
rename from frontend/src/deicons/svg/bumanyi.svg
rename to frontend/src/deicons/svg/3-rank-05-bad.svg
diff --git a/frontend/src/deicons/svg/haoping.svg b/frontend/src/deicons/svg/3-rank-06-goodevaluate.svg
similarity index 100%
rename from frontend/src/deicons/svg/haoping.svg
rename to frontend/src/deicons/svg/3-rank-06-goodevaluate.svg
diff --git a/frontend/src/deicons/svg/chaping.svg b/frontend/src/deicons/svg/3-rank-07-badevaluate.svg
similarity index 100%
rename from frontend/src/deicons/svg/chaping.svg
rename to frontend/src/deicons/svg/3-rank-07-badevaluate.svg
diff --git a/frontend/src/deicons/svg/chaping-yuankuang.svg b/frontend/src/deicons/svg/3-rank-08-badevaluatecircle.svg
similarity index 100%
rename from frontend/src/deicons/svg/chaping-yuankuang.svg
rename to frontend/src/deicons/svg/3-rank-08-badevaluatecircle.svg
diff --git a/frontend/src/deicons/svg/haoping-yuankuang.svg b/frontend/src/deicons/svg/3-rank-08-goodevaluatecircle.svg
similarity index 100%
rename from frontend/src/deicons/svg/haoping-yuankuang.svg
rename to frontend/src/deicons/svg/3-rank-08-goodevaluatecircle.svg
diff --git a/frontend/src/deicons/svg/weizhi.svg b/frontend/src/deicons/svg/4-location-01-mark.svg
similarity index 100%
rename from frontend/src/deicons/svg/weizhi.svg
rename to frontend/src/deicons/svg/4-location-01-mark.svg
diff --git a/frontend/src/deicons/svg/4-location-02-mark1.svg b/frontend/src/deicons/svg/4-location-02-mark1.svg
new file mode 100644
index 0000000000..1c4398c270
--- /dev/null
+++ b/frontend/src/deicons/svg/4-location-02-mark1.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M24 908l196-412.4 292 68 306.4-68 179.2 412-276.4-106-209.2 92-206-92.4L24 908z m283.2-149.6l204.8 91.6 208.4-91.6 204 78-128.4-295.2-284 63.2-270.4-63.2-140 294.8 205.6-77.6z"  /><path d="M420 440c0 66.4-53.6 120-120 120-44.4 0-83.2-24.4-104-60-10-17.6-16-38-16-60 0-66.4 53.6-120 120-120s120 53.6 120 120z"  /><path d="M396 512l-96 144-96-144"  /><path d="M360 440c0 33.2-26.8 60-60 60-22.4 0-41.6-12-52-30-5.2-8.8-8-19.2-8-30 0-33.2 26.8-60 60-60s60 26.8 60 60z" fill="#FFFFFF" /><path d="M916 326.4c0 117.2-94.8 212-212 212-78.4 0-147.2-42.8-184-106.4-18-31.2-28-67.2-28-105.6 0-117.2 94.8-212 212-212s212 94.8 212 212z"  /><path d="M873.6 453.6L704 708l-169.6-254.4"  /><path d="M810 326.4c0 58.4-47.6 106-106 106-39.2 0-73.6-21.2-92-53.2-8.8-15.6-14-33.6-14-52.8 0-58.4 47.6-106 106-106s106 47.6 106 106z" fill="#FFFFFF" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/4-location-03-mark2.svg b/frontend/src/deicons/svg/4-location-03-mark2.svg
new file mode 100644
index 0000000000..e4a866f47a
--- /dev/null
+++ b/frontend/src/deicons/svg/4-location-03-mark2.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M38.801408 862.342144"  /><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"  /><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"  /><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"  /><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"  /><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"  /><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"  /><path d="M985.171968 862.342144"  /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/4-location-04-location.svg b/frontend/src/deicons/svg/4-location-04-location.svg
new file mode 100644
index 0000000000..aacdc591ba
--- /dev/null
+++ b/frontend/src/deicons/svg/4-location-04-location.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M874.048 533.333333C863.424 716.629333 716.629333 863.424 533.333333 874.048V917.333333a21.333333 21.333333 0 0 1-42.666666 0v-43.285333C307.370667 863.424 160.576 716.629333 149.952 533.333333H106.666667a21.333333 21.333333 0 0 1 0-42.666666h43.285333C160.576 307.370667 307.370667 160.576 490.666667 149.952V106.666667a21.333333 21.333333 0 0 1 42.666666 0v43.285333c183.296 10.624 330.090667 157.418667 340.714667 340.714667h42.816a21.333333 21.333333 0 1 1 0 42.666666H874.026667z m-42.752 0h-127.786667a21.333333 21.333333 0 0 1 0-42.666666h127.786667C820.778667 330.922667 693.056 203.221333 533.333333 192.704V320a21.333333 21.333333 0 0 1-42.666666 0V192.704C330.922667 203.221333 203.221333 330.944 192.704 490.666667H320a21.333333 21.333333 0 0 1 0 42.666666H192.704c10.517333 159.744 138.24 287.445333 297.962667 297.962667V704a21.333333 21.333333 0 0 1 42.666666 0v127.296c159.744-10.517333 287.445333-138.24 297.962667-297.962667zM512 554.666667a42.666667 42.666667 0 1 1 0-85.333334 42.666667 42.666667 0 0 1 0 85.333334z" fill="#3D3D3D" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/4-location-05-location1.svg b/frontend/src/deicons/svg/4-location-05-location1.svg
new file mode 100644
index 0000000000..4e896ecc43
--- /dev/null
+++ b/frontend/src/deicons/svg/4-location-05-location1.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M557.728 688v288.384H466.24V688H227.52c-9.6 0-18.048-3.712-24.96-11.264A37.824 37.824 0 0 1 192 649.984c0-48.768 14.432-92.704 43.584-131.84 29.12-38.976 61.92-58.56 98.56-58.56V200.512c-19.296 0-35.84-7.552-50.048-22.656a76.16 76.16 0 0 1-21.12-53.6c0-20.672 7.04-38.4 21.12-53.6 13.984-14.976 30.72-22.656 50.048-22.656h355.584c19.296 0 35.84 7.552 50.048 22.656 13.984 15.104 21.152 32.928 21.152 53.6 0 20.672-7.04 38.4-21.12 53.6-14.112 15.232-30.784 22.656-50.08 22.656v258.944c36.64 0 69.568 19.584 98.56 58.56A215.424 215.424 0 0 1 832 649.984c0 10.272-3.456 19.328-10.528 26.752-7.04 7.424-15.36 11.264-24.96 11.264H557.76z" fill="#9C9C9C" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/4-location-06-location2.svg b/frontend/src/deicons/svg/4-location-06-location2.svg
new file mode 100644
index 0000000000..81fa53d188
--- /dev/null
+++ b/frontend/src/deicons/svg/4-location-06-location2.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 621.696l-150.848-150.826667 30.165333-30.186666L512 561.365333l120.682667-120.682666 30.165333 30.165333L512 621.696z m150.848-150.826667l-30.165333-30.186666a170.666667 170.666667 0 1 0-241.365334 0L361.173333 470.826667c-83.306667-83.306667-83.306667-218.389333 0-301.696 83.306667-83.306667 218.389333-83.306667 301.696 0 83.306667 83.306667 83.306667 218.389333 0 301.696zM512 362.666667a42.666667 42.666667 0 1 1 0-85.333334 42.666667 42.666667 0 0 1 0 85.333334z m-134.186667 365.290666a21.333333 21.333333 0 1 1 30.144-30.165333l110.634667 110.613333L857.664 469.333333H768v-42.666666h106.538667A63.936 63.936 0 0 1 938.666667 490.474667V874.88A64 64 0 0 1 874.602667 938.666667H149.397333A63.914667 63.914667 0 0 1 85.333333 874.858667V490.453333A63.808 63.808 0 0 1 149.461333 426.666667H256v42.666666H149.461333A21.141333 21.141333 0 0 0 128 490.474667v302.208l200.042667-200.042667a21.205333 21.205333 0 0 1 30.058666 0.128c8.32 8.32 8.192 21.973333 0.106667 30.037333L130.474667 850.56a21.333333 21.333333 0 0 1-2.474667 2.133333v22.186667c0 11.669333 9.536 21.141333 21.397333 21.141333h396.437334l-168.042667-168.042666zM874.581333 896A21.333333 21.333333 0 0 0 896 874.858667V491.050667a21.973333 21.973333 0 0 1-1.984 2.261333L548.757333 838.592l54.186667 54.186667c1.002667 1.002667 1.898667 2.090667 2.666667 3.221333h269.013333z" fill="#3D3D3D" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/4-location-07-map.svg b/frontend/src/deicons/svg/4-location-07-map.svg
new file mode 100644
index 0000000000..da38e94039
--- /dev/null
+++ b/frontend/src/deicons/svg/4-location-07-map.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M554.666667 849.066667c-12.8 0-29.866667 4.266667-42.666667 4.266666-187.733333 0-341.333333-153.6-341.333333-341.333333 0-64 17.066667-123.733333 51.2-179.2l8.533333-12.8c25.6-42.666667 59.733333-76.8 102.4-102.4 42.666667-25.6 89.6-42.666667 140.8-46.933333h38.4c187.733333 0 341.333333 153.6 341.333333 341.333333 0 76.8-25.6 145.066667-64 200.533333l-4.266666 4.266667c-25.6 34.133333-59.733333 64-98.133334 89.6-42.666667 25.6-89.6 38.4-132.266666 42.666667zM507.733333 768v-85.333333l-64-93.866667 106.666667-106.666667 64 76.8h102.4l34.133333 34.133334c8.533333-25.6 12.8-51.2 12.8-81.066667 0-140.8-115.2-256-256-256-12.8 0-25.6 0-38.4 4.266667l-29.866666 29.866666L494.933333 341.333333l17.066667 115.2-85.333333 85.333334-145.066667-140.8C264.533333 435.2 256 469.333333 256 512c0 140.8 110.933333 256 251.733333 256z" fill="#444444" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/4-location-08-map1.svg b/frontend/src/deicons/svg/4-location-08-map1.svg
new file mode 100644
index 0000000000..1785ee84f8
--- /dev/null
+++ b/frontend/src/deicons/svg/4-location-08-map1.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M551.151 609.445c-45.521-39.020-41.183-56.364-99.71-56.364-58.53 0-95.378 13.005-80.204 95.382 15.172 82.366 58.529 45.521 54.191 106.215-4.335 60.693 10.842 75.874 19.508 91.045 8.675 15.169 39.020 58.528 49.862-2.164 10.833-60.704 30.34-95.382 54.19-125.735 23.846-30.342 47.685-69.361 2.162-108.379zM390.747 466.372c2.163-30.349 52.026-62.865 86.706-78.037 34.678-15.177 65.030-19.509 60.69-45.522-4.328-26.012-13.006-45.522-65.025-45.522-52.026 0-30.345 71.534-73.704 28.18-43.352-43.355 8.673-30.348 30.351-41.186 21.675-10.84 43.352-49.859 6.503-52.025-36.854-2.169-30.352 17.341-60.697 6.503-30.345-10.84-43.351 39.019-62.863 30.346-13.006-4.334-45.521-30.346-69.37-54.192-45.522 36.852-80.202 84.54-104.051 140.902 6.503 73.702 45.522 110.554 45.522 110.554s19.509 47.689 143.069 106.218c0 0 23.848 2.164-4.334-26.013-28.183-28.178-56.359-60.695-23.844-78.037 32.518-17.343 43.353-17.343 52.026 17.343 8.668 34.681 36.851 13.005 39.020-19.511zM884.984 477.209c0-4.334 0-6.503-2.172-10.837 0-8.673-2.164-17.343-4.329-23.846 0-4.336-2.175-8.669-2.175-13.006-2.164-8.669-4.33-15.173-6.502-23.846 0-4.334-2.164-6.503-2.164-10.837-4.339-10.839-6.503-21.68-10.842-30.349-2.164-4.337-4.329-8.67-6.503-13.006-2.164-6.503-6.503-10.839-8.668-17.342-2.164-4.334-6.502-10.837-8.666-15.174-2.176-4.336-4.34-8.669-8.678-13.006-4.328-4.336-6.503-10.839-10.833-15.173-2.175-2.169-4.339-6.503-6.502-8.673-15.181-19.509-32.518-39.019-52.026-56.359-2.175 0-2.175-2.169-4.34-2.169-6.502-6.503-13.006-10.837-21.674-17.34h-2.174c-30.342-23.845-65.032-43.355-101.876-56.362-10.843 17.342-21.685 39.018-34.691 47.689-19.507 10.839-17.334 54.194 19.51 49.859 0 0-10.832 10.839 0 49.859 10.842 39.020 28.187 47.689 82.376 26.012 23.848-8.673 41.182-4.337 39.019 19.509-6.503 49.855-43.357 47.689-15.171 127.893 17.334 49.859 60.692 67.203 78.038 106.222 8.667 21.675 43.347 39.020 71.534 54.189 2.164-10.842 6.502-21.674 8.667-30.351 0-4.329 2.164-8.667 2.164-13.006 2.175-8.667 2.175-15.169 4.339-23.838 0-4.339 0-6.503 2.164-10.842 0-10.843 2.172-23.849 2.172-34.681 2.166-17.344 2.166-28.184 0-41.19zM737.577 605.105c-15.169 8.667-15.169 30.351-2.163 41.184 13.006 10.842 39.018 26.012 47.687 0 8.667-26.012-30.352-49.851-45.524-41.184z"  /><path d="M512.954 963.543c-60.9 0-119.982-11.929-175.601-35.454-53.721-22.723-101.967-55.25-143.398-96.681-41.432-41.431-73.959-89.676-96.682-143.397-23.526-55.62-35.454-114.7-35.454-175.599 0-60.9 11.929-119.981 35.454-175.6 22.723-53.721 55.251-101.966 96.682-143.397 41.431-41.431 89.676-73.958 143.398-96.681 55.621-23.526 114.701-35.453 175.601-35.453 60.9 0 119.98 11.929 175.598 35.453 53.721 22.723 101.966 55.25 143.396 96.681s73.957 89.676 96.68 143.397c23.526 55.62 35.453 114.7 35.453 175.6 0 60.9-11.928 119.98-35.453 175.599-22.721 53.721-55.249 101.966-96.68 143.397s-89.675 73.958-143.396 96.681c-55.618 23.526-114.698 35.454-175.598 35.454zM512.954 67.419c-245.371 0-444.996 199.622-444.996 444.992 0 245.369 199.625 444.992 444.996 444.992 245.366 0 444.988-199.622 444.988-444.992 0-245.369-199.62-444.992-444.988-444.992z"  /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/5-weather-01-bigsnow.svg b/frontend/src/deicons/svg/5-weather-01-bigsnow.svg
new file mode 100644
index 0000000000..f4ee1c4971
--- /dev/null
+++ b/frontend/src/deicons/svg/5-weather-01-bigsnow.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="165.29px" viewBox="0 0 1239 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M1168.961931 286.525821c-44.00404-42.978812-100.288195-67.53822-160.665789-71.631455-19.443608-3.069952-39.910601-1.023283-59.354208 2.046566-36.840547-121.773453-168.852566-216.940932-313.144801-216.940932l-1.023349 0c-220.019997 1.023283-320.308294 144.286194-352.032118 257.873177-12.280216-2.046566-25.583716-3.069952-37.863932-3.069952-85.96131 0-165.782511 44.002197-212.856606 115.63355 0 1.023283 0 1.023283-1.023385 3.069952-32.74721 60.375034-66.517702 202.614559 55.260871 293.688803 35.817264 29.675927 92.101418 32.745776 113.591694 32.745776l1.023349 0 2.046698 0c0 0 0 0 202.623161 0 29.677155 0 53.2141-23.536023 53.2141-52.188564 0-31.722493-23.537047-54.235233-53.2141-54.235233l-202.623111 0-4.093396 0c-22.513662 0-42.980655-5.116518-48.097378-9.209753-74.704479-57.305185-32.74721-145.309477-24.56033-158.612464 35.817264-59.351751 95.171472-65.491552 118.708519-65.491552 22.513662 0 37.863932 6.139801 42.980655 9.209753 15.35027 11.256319 35.817264 16.372939 54.237486 7.163186 17.396939-7.163186 30.700439-23.536023 31.723824-44.002197 0-9.209753 23.537047-225.127299 260.953984-226.150685l1.023349 0c120.755188 0 215.92666 95.167478 218.996714 177.031969 1.023385 15.349554 9.210162 31.722493 22.513662 39.908962 13.303499 9.209753 31.723824 12.279704 47.074094 6.139801 22.513662-7.163186 42.980655-10.233036 64.471034-10.233036 5.116723 0 12.280216 1.023283 19.443608 1.023283 31.723824 3.069952 62.424263 17.396222 83.914641 40.932246 25.583716 24.559306 39.910601 57.305185 39.910601 91.074244 0 105.400514-94.148087 136.099724-118.708519 141.216242l-5.116745 0 0 1.023306c-2.046669 0-2.046669 0-2.046669 0l0-1.023306-6.140094 0-201.599762 0-6.140094 0 0 1.023306c-26.607101 3.069952-46.050709 24.559306-46.050709 53.21195 0 25.582692 19.443608 48.095432 46.050709 51.165281l0 1.023306 6.140094 0 201.599762 0 6.140094 0 0-1.023306c0 0 0 0 2.046669 0l0 1.023306 12.280189 0c3.070054 0 6.140108-1.023283 10.233445-1.023283 72.65781-13.302987 207.739883-83.911057 207.739883-246.616756C1238.549687 391.926335 1211.942586 329.504633 1168.961931 286.525821L1168.961931 286.525821zM512.995174 675.382102c6.140108 9.209753 15.35027 13.302987 26.607101 13.302987 6.140108 0 11.256831-1.023283 17.396939-6.139801l19.443608-11.256319 0 18.41951c0 17.396222 12.280216 30.69921 29.677155 30.69921s30.700439-13.302987 30.700439-30.69921l0-17.396204 16.373554 9.209753c6.140108 4.093235 10.233445 5.116518 16.373554 5.116518 10.233445 0 19.443608-6.139801 26.607101-14.326271 8.186777-15.349554 4.09344-32.745776-11.256831-41.955529l-24.56033-17.396222 23.537047-15.349554c15.35027-9.209753 17.396939-28.652541 8.186777-41.955529-9.210162-15.349554-28.65377-18.419505-41.957269-9.209753l-13.303499 8.18647 0-15.349591c0-17.396222-13.303499-29.675927-30.700439-29.675927s-29.677155 12.279704-29.677155 29.675927l0 20.466122-16.373554-10.233036c-13.303499-10.233036-34.793878-4.093235-44.00404 9.209753-6.140108 14.326271-3.070054 34.792445 11.256831 42.978812l21.490379 13.302987-27.630384 18.419505C508.901837 641.613043 503.785114 660.032548 512.995174 675.382102L512.995174 675.382102zM701.29145 914.835774l-38.887215-26.605975 37.863932-23.536023c13.303499-9.209753 16.373554-30.69921 8.186777-44.002197-9.210162-13.302987-29.677155-18.419505-44.00404-8.18647l-24.56033 16.372939 0-29.675877c0-17.396222-13.303499-31.722493-31.723824-31.722493-15.35027 0-29.677155 14.326271-29.677155 31.722493l0 34.792407-29.677155-19.442788c-14.326885-7.163186-33.770493-4.093235-41.957269 9.209753-8.186777 15.349554-5.116723 35.815728 9.210162 44.002197l33.770493 21.489457-39.910601 28.652541c-14.326885 9.209753-17.396939 26.605975-8.186777 40.932246 5.116723 9.209753 14.326885 13.302987 23.537047 13.302987 8.186777 0 14.326885-1.023283 18.420325-6.139801l34.793878-21.489457 0 36.839019c0 17.396222 14.326885 30.69921 29.677155 30.69921 18.420325 0 31.723824-13.302987 31.723824-30.69921l0-34.792407 28.65377 18.419505c5.116723 3.069952 11.256831 5.116518 15.35027 5.116518 12.280216 0 22.513662-5.116518 27.630384-14.326271C720.735058 942.465032 716.641618 923.022244 701.29145 914.835774L701.29145 914.835774zM946.895163 880.04333l-25.583716-15.349554 23.537047-15.349554c10.233445-8.18647 13.303499-25.582692 7.163494-35.815728-8.186777-12.279704-24.56033-14.326271-35.817264-6.139801l-13.303499 7.163186 0-14.326285c0-16.372939-12.280216-26.605975-25.583716-26.605975-14.326885 0-25.583716 10.233036-25.583716 26.605975l0 18.41951-16.373554-10.233036c-11.256831-7.163186-28.65377-4.093235-35.817264 8.18647-6.140108 12.279704-3.070054 29.675927 8.186777 35.815728l21.490379 13.302987-25.583716 18.419505c-11.256831 6.139801-15.35027 22.51274-7.163494 34.792445 5.116723 7.163186 12.280216 11.256319 21.490379 11.256319 5.116723 0 11.256831-2.046566 14.326885-4.093235l19.443608-14.326271 0 21.489428c0 13.302987 11.256831 25.582692 25.583716 25.582692 13.303499 0 25.583716-12.279704 25.583716-25.582692l0-19.442816 16.373554 10.233036c2.046669 3.069952 8.186777 3.069952 11.256831 3.069952 11.256831 0 18.420325-3.069952 23.537047-10.233036C962.245433 903.579353 957.128711 888.229799 946.895163 880.04333L946.895163 880.04333zM399.40348 880.04333l-25.583716-15.349554 24.56033-15.349554c11.256831-8.18647 16.373554-25.582692 7.163494-35.815728-8.186777-12.279704-24.56033-14.326271-36.840547-6.139801l-14.326885 7.163186 0-14.326285c0-16.372939-11.256831-26.605975-24.56033-26.605975-14.326885 0-26.607101 10.233036-26.607101 26.605975l0 18.41951-15.35027-10.233036c-11.256831-7.163186-26.607101-4.093235-33.770493 8.18647-8.186777 12.279704-5.116723 29.675927 7.163494 35.815728l20.466993 13.302987-25.583716 18.419505c-11.256831 6.139801-15.35027 22.51274-6.140108 34.792445 5.116723 7.163186 13.303499 11.256319 20.466993 11.256319 5.116723 0 9.210162-2.046566 13.303499-4.093235l19.443608-14.326271 0 21.489428c0 13.302987 12.280216 25.582692 26.607101 25.582692 13.303499 0 24.56033-12.279704 24.56033-25.582692l0-19.442816 17.396939 10.233036c4.09344 3.069952 9.210162 3.069952 13.303499 3.069952 9.210162 0 17.396939-3.069952 22.513662-10.233036C415.777034 903.579353 412.70698 888.229799 399.40348 880.04333z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/5-weather-02-littlesnow.svg b/frontend/src/deicons/svg/5-weather-02-littlesnow.svg
new file mode 100644
index 0000000000..fae5c94cd4
--- /dev/null
+++ b/frontend/src/deicons/svg/5-weather-02-littlesnow.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="165.29px" viewBox="0 0 1239 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M717.865062 899.486106l-39.910605-23.536026 36.84055-25.582694c13.303501-8.18647 18.420326-28.652544 7.163494-45.025485-9.210163-12.279706-28.653773-15.349555-41.957274-6.139802l-24.560333 17.396224 0-31.722492c0-15.349555-14.326886-30.699213-31.723827-30.699213s-31.723827 15.349555-31.723827 30.699213l0 36.839023-27.630387-19.44279c-16.373555-9.209754-33.770496-4.093235-42.980659 9.209754-10.233446 15.349555-6.140109 34.792448 9.210163 44.002202l34.793882 21.489459-41.957274 27.629261c-13.303501 9.209754-18.420326 27.629261-8.186778 41.955533 6.140109 9.209754 16.373555 13.302989 25.583718 13.302989 6.140109 0 11.256832-1.023283 17.396941-5.116518l33.770496-22.512742 0 36.839023c0 16.372941 14.326886 30.699213 31.723827 30.699213s31.723827-14.326272 31.723827-30.699213l0-35.815717 28.653773 19.44279c6.140109 3.069952 12.280218 4.093235 16.373555 4.093235 10.233446 0 19.44361-4.093235 25.583718-14.326272C736.285389 927.115366 733.215334 909.719245 717.865062 899.486106L717.865062 899.486106zM962.445517 867.76361l-24.560333-17.396224 23.53705-13.302989c11.256832-9.209754 13.303501-25.582694 5.116723-36.839014-6.140109-11.25632-23.53705-15.349555-34.793882-7.163187l-13.303501 8.18647 0-16.372899c0-13.302989-12.280218-24.559309-26.607104-24.559309-13.303501 0-24.560333 11.25632-24.560333 24.559309l0 19.442818-16.373555-10.233037c-11.256832-5.116518-27.630387-3.069952-36.84055 8.18647-6.140109 12.279706-3.070054 28.652544 9.210163 36.839014l20.466995 12.279706-24.560333 18.419507c-12.280218 8.18647-16.373555 23.536026-8.186778 35.815731 4.09344 7.163187 13.303501 10.233037 22.513664 10.233037 4.09344 0 9.210163-1.023283 12.280218-3.069952l21.490381-14.326272 0 22.512736c0 12.279706 11.256832 24.559309 24.560333 24.559309 14.326886 0 26.607104-12.279706 26.607104-24.559309l0-21.48943 15.350272 12.279706c5.116723 2.046566 9.210163 3.069952 14.326886 3.069952 8.186778 0 17.396941-3.069952 21.490381-11.25632C976.772403 890.276352 973.702349 875.95008 962.445517 867.76361L962.445517 867.76361zM413.930394 867.76361l-24.560333-17.396224 22.513664-13.302989c12.280218-9.209754 15.350272-25.582694 6.140109-36.839014-7.163494-11.25632-23.53705-15.349555-35.817267-7.163187l-13.303501 8.18647 0-16.372899c0-13.302989-11.256832-24.559309-24.560333-24.559309-15.350272 0-27.630387 11.25632-27.630387 24.559309l0 19.442818-14.326886-10.233037c-12.280218-5.116518-28.653773-3.069952-35.817267 8.18647-8.186778 12.279706-4.09344 28.652544 7.163494 36.839014l21.490381 12.279706-25.583718 18.419507c-11.256832 8.18647-15.350272 23.536026-7.163494 35.815731 5.116723 7.163187 12.280218 10.233037 20.466995 10.233037 5.116723 0 11.256832-1.023283 14.326886-3.069952l19.44361-14.326272 0 22.512736c0 12.279706 12.280218 24.559309 27.630387 24.559309 13.303501 0 24.560333-12.279706 24.560333-24.559309l0-21.48943 16.373555 12.279706c5.116723 2.046566 9.210163 3.069952 14.326886 3.069952 8.186778 0 16.373555-3.069952 21.490381-11.25632C429.280666 890.276352 426.210611 875.95008 413.930394 867.76361L413.930394 867.76361zM984.959181 210.80105c-11.256832 0-22.513664 1.023283-35.817267 3.069952-38.887219-119.726797-169.875968-213.871002-313.144832-213.871002l-2.046698 0c-218.996736 1.023283-319.284941 141.216256-353.055437 254.803251-11.256832-1.023283-22.513664-2.046566-34.793882-2.046566-86.984704 0-165.782528 42.978816-212.856627 117.68023l-1.023386 1.023283c-33.770496 63.444992-68.564378 205.684531 54.237491 298.805453 38.887219 29.67593 94.148096 31.722496 115.638477 31.722496l1.023349 0 814.585923 0 10.233491 0c72.657818-13.302989 209.786573-85.957734 209.786573-249.686733C1237.726413 319.271526 1125.158093 210.80105 984.959181 210.80105L984.959181 210.80105zM1010.543002 588.40105l-807.422479 0c0 0 0 0-1.023386 0-20.466995 0-41.957274-5.116518-48.097382-9.209754-30.700442-22.512742-42.980659-52.18857-39.910605-92.097536 2.046669-30.699213 16.373555-55.258522 17.396941-59.351757 34.793882-57.30519 93.124813-63.444992 114.615091-63.444992 22.513664 0 36.84055 6.139802 41.957274 10.233037 16.373555 12.279706 37.863936 14.326272 58.330931 8.18647 16.373555-8.18647 30.700442-27.629261 32.747213-46.048768 2.046669-24.559309 28.653773-223.080755 254.813901-224.104038l2.046698 0c117.685146 0 209.786573 93.120819 213.880013 170.892186 0 19.44279 8.186778 34.792448 23.53705 45.025485 14.326886 11.25632 32.747213 12.279706 50.144154 8.18647 20.466995-8.18647 41.957274-12.279706 61.400986-12.279706 86.984704 0 140.19881 67.538227 140.19881 127.913267C1125.158093 553.608704 1033.056666 583.284531 1010.543002 588.40105z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/5-weather-03-bigrain.svg b/frontend/src/deicons/svg/5-weather-03-bigrain.svg
new file mode 100644
index 0000000000..c57fd98927
--- /dev/null
+++ b/frontend/src/deicons/svg/5-weather-03-bigrain.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="177.93px" viewBox="0 0 1151 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M242.07913 773.619507c-33.770496 0-62.424269 27.629261-62.424269 62.421709l0 61.398372c0 34.792448 28.653773 61.398323 62.424269 61.398323 32.747213 0 60.3776-26.605978 60.3776-61.398323l0-61.398372C302.45673 801.248768 274.826342 773.619507 242.07913 773.619507L242.07913 773.619507zM474.379469 773.619507c-35.817267 0-62.424269 27.629261-62.424269 62.421709l0 61.398372c0 34.792448 26.607104 61.398323 62.424269 61.398323 32.747213 0 59.354214-26.605978 59.354214-61.398323l0-61.398372C533.733683 801.248768 507.126579 773.619507 474.379469 773.619507L474.379469 773.619507zM698.492928 773.619507c-34.793882 0-62.424269 27.629261-62.424269 62.421709l0 61.398372c0 34.792448 27.630387 61.398323 62.424269 61.398323 32.747213 0 62.424269-26.605978 62.424269-61.398323l0-61.398372C760.917197 801.248768 731.240038 773.619507 698.492928 773.619507L698.492928 773.619507zM754.777088 0c-161.68919 0-308.028109 98.23744-370.452378 245.593498-7.163494 14.326272-12.280218 33.769062-19.44361 53.211955-38.887219-20.466074-85.961318-39.908966-140.19881-39.908966-61.400986 0-115.638477 24.559309-162.712474 73.678029-9.210163 8.18647-45.027328 46.048768-56.28416 108.470477-18.420326 97.214054 11.256832 180.101939 84.937933 230.243942 19.44361 13.302989 72.657818 35.815731 111.545037 35.815731l700.994168 0c5.116723 0 8.186778 0 12.280218-3.069952 8.186778-1.023283 89.031373-16.372941 145.315533-78.794547 58.330931-63.444992 90.054758-149.402726 90.054758-240.476979C1150.813184 171.915469 973.773824 0 754.777088 0L754.777088 0zM977.867162 549.515469c-24.560333 28.652544-66.517709 39.908966-78.797926 42.978816l-696.900771 0c-11.256832 0-40.93399-10.233037-49.120768-14.326272-12.280218-9.209754-52.190822-35.815731-36.84055-115.633562 6.140109-30.699213 24.560333-49.11872 22.513664-49.11872 2.046669 0 2.046669-1.023283 2.046669-1.023283 25.583718-27.629261 55.260877-41.955533 83.91465-41.955533 46.050714 0 89.031373 29.67593 112.568422 47.072051 1.023386 0 1.023386 3.069952 3.070054 3.069952l24.560333 18.419507c16.373555 10.233037 34.793882 12.279706 52.190822 5.116518 18.420326-5.116518 30.700442-19.44279 33.770496-36.839014 8.186778-32.745779 26.607104-94.144205 35.817267-117.68023 46.050714-106.423808 152.479027-177.031987 268.117504-177.031987 156.572467 0 283.467674 121.773466 283.467674 272.199475C1038.244762 448.208077 1017.777869 507.559834 977.867162 549.515469L977.867162 549.515469zM910.32617 773.619507c-35.817267 0-63.447654 27.629261-63.447654 62.421709l0 61.398372c0 34.792448 27.630387 61.398323 63.447654 61.398323 32.747213 0 60.3776-26.605978 60.3776-61.398323l0-61.398372C970.70377 801.248768 943.073382 773.619507 910.32617 773.619507z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/5-weather-04-littlerain.svg b/frontend/src/deicons/svg/5-weather-04-littlerain.svg
new file mode 100644
index 0000000000..80fd211ba1
--- /dev/null
+++ b/frontend/src/deicons/svg/5-weather-04-littlerain.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="177.47px" viewBox="0 0 1154 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M780.288 0q73.728 0 141.312 29.184t119.296 78.848 81.92 115.712 30.208 139.776q0 60.416-19.456 122.88t-46.08 111.616q-13.312 23.552-37.376 43.008t-51.712 33.28-54.272 22.016-45.056 8.192l-714.752 0q-39.936 0-73.216-12.8t-57.856-36.864-38.4-57.344-13.824-73.216q0-55.296 13.312-103.936t40.448-85.504 68.608-58.368 97.792-21.504q24.576 0 42.496 3.072t34.304 8.704 32.256 14.848 34.304 21.504q10.24-63.488 44.032-118.784t87.552-96.256 125.44-64.512 158.72-23.552zM861.184 579.584q32.768 0 62.976-14.336t53.76-41.984 37.376-67.584 13.824-91.136-18.432-95.232-51.2-75.776-77.312-49.664-95.744-17.92-89.6 8.192-66.56 20.48-47.616 27.136-32.768 28.16q-14.336 14.336-27.648 34.304t-23.04 41.472-14.848 42.496-3.072 38.4q4.096 29.696-11.264 50.176t-39.424 28.672-50.688 3.584-44.032-25.088q-19.456-20.48-45.568-31.232t-65.024-10.752q-31.744 0-51.2 12.288t-30.72 30.72-15.36 40.448-4.096 41.472q0 16.384 7.168 29.696t18.944 23.04 26.112 14.848 28.672 5.12l656.384 0zM257.024 769.024q26.624 0 45.056 18.944t18.432 45.568l0 63.488q0 26.624-18.432 45.568t-45.056 18.944-45.568-18.944-18.944-45.568l0-63.488q0-26.624 18.944-45.568t45.568-18.944zM769.024 769.024q26.624 0 45.568 18.944t18.944 45.568l0 63.488q0 26.624-18.944 45.568t-45.568 18.944-45.056-18.944-18.432-45.568l0-63.488q0-26.624 18.432-45.568t45.056-18.944z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/5-weather-05-icerain.svg b/frontend/src/deicons/svg/5-weather-05-icerain.svg
new file mode 100644
index 0000000000..55ad187bde
--- /dev/null
+++ b/frontend/src/deicons/svg/5-weather-05-icerain.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="177.47px" viewBox="0 0 1154 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M755.801088 0c-161.68919 0-308.028109 95.167488-372.499046 245.593498-4.09344 14.326272-12.280218 34.792448-18.420326 55.258522-37.863936-23.536026-85.961318-42.978816-139.175526-42.978816-62.424269 0-117.685146 25.582694-165.782528 74.701312-7.163494 8.18647-42.980659 46.048768-54.237491 109.49376-18.420326 97.214054 11.256832 179.078554 84.937933 229.220557 22.513664 15.349555 73.681101 36.839014 110.521754 36.839014 0 0 0 0 7.163494 0l161.689166 0 10.233491 0c31.723827 0 57.307546-25.582694 57.307546-55.258522 0-31.722496-25.583718-57.30519-57.307546-57.30519l-10.233491 0 0-1.023306-168.852582 1.023283c-9.210163 0-38.887219-11.25632-47.074099-17.396224-13.303501-8.18647-54.237491-36.839014-37.863936-115.633562 6.140109-30.699213 23.53705-50.142003 23.53705-50.142003l1.023349 0c27.630387-27.629261 55.260877-39.908966 84.937933-39.908966 46.050714 0 90.054758 28.652544 112.568422 46.048768 0 0 0 1.023283 1.023386 1.023283l25.583718 18.419507c15.350272 11.25632 34.793882 14.326272 53.214106 8.18647 17.396941-7.163187 29.677158-21.489459 35.817267-39.908966 7.163494-32.745779 24.560333-93.120819 33.770496-115.633562 47.074099-108.470477 151.455642-179.078554 268.117504-179.078554 156.572467 0 284.491059 121.773466 284.491059 272.199475 0 65.491558-20.466995 123.820032-60.3776 165.775565-26.607104 28.652544-67.541094 39.908966-78.797926 44.002202l-140.198834 0-9.210142 0c-30.700442 0-56.28416 24.559309-56.28416 57.30519 0 29.67593 25.583718 55.258522 56.28416 55.258522l12.28019 0 142.245581-1.023283 9.210142 0c8.186778-2.046566 90.054758-17.396224 146.338918-79.817933 59.354214-62.421709 91.078042-148.379443 91.078042-241.500262C1152.86057 171.915469 974.797824 0 755.801088 0L755.801088 0zM301.434061 744.966963c-32.747213 0-61.400986 28.652544-61.400986 62.421709l0 63.444984c0 33.769062 28.653773 61.398323 61.400986 61.398323 34.793882 0 61.400986-27.629261 61.400986-61.398323l0-63.444984C362.835046 773.619507 336.227942 744.966963 301.434061 744.966963L301.434061 744.966963zM815.155302 744.966963c-33.770496 0-60.3776 28.652544-60.3776 62.421709l0 63.444984c0 33.769062 26.607104 61.398323 60.3776 61.398323s61.400986-27.629261 61.400986-61.398323l0-63.444984C876.556288 773.619507 848.925901 744.966963 815.155302 744.966963L815.155302 744.966963zM591.041843 599.657472l-53.214156 0c-24.560333 0-44.004045 24.559309-44.004045 54.235238l0 237.407038c0 29.67593 19.44361 54.235238 44.004045 54.235238l53.214156 0c25.583718 0 45.027328-24.559309 45.027328-54.235238L636.069171 653.892661C636.069274 624.216781 616.625562 599.657472 591.041843 599.657472z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/5-weather-06-snowrain.svg b/frontend/src/deicons/svg/5-weather-06-snowrain.svg
new file mode 100644
index 0000000000..ad623306d0
--- /dev/null
+++ b/frontend/src/deicons/svg/5-weather-06-snowrain.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="165.43px" viewBox="0 0 1238 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M861.984971 925.794255l-39.89777-23.528456 36.828703-24.551411c12.276268-9.206792 17.391346-28.643329 7.161191-41.94204-8.184145-14.321665-26.598547-17.390629-41.94378-8.183838l-23.52948 15.344619 0-29.666336c0-17.390629-14.322279-29.666386-31.713625-29.666386-15.345335 0-29.667614 12.275756-29.667614 29.666386l0 35.804199-28.644558-18.413584c-14.322279-9.206792-32.736681-4.091919-41.94378 9.206792s-5.115078 33.758202 9.207201 42.964994l33.759636 20.459492-39.89777 26.597421c-13.299222 9.206792-18.414402 28.643329-8.184145 41.94204 6.138134 9.206792 15.345335 14.321665 25.575491 14.321665 5.115078 0 11.253212-3.068965 17.391346-6.137827l32.736681-23.528456 0 36.827176c0 16.367675 14.322279 30.68934 29.667614 30.68934 17.391346 0 31.713625-14.321665 31.713625-30.68934l0-33.758245 28.644558 18.413584c4.092124 3.068965 10.230155 4.091919 15.345335 4.091919 11.253212 0 21.48347-4.091919 25.575491-13.298711C879.376317 954.437687 875.284194 935.001047 861.984971 925.794255L861.984971 925.794255zM984.747348 210.733257c-12.276268 0-22.506424 3.068965-34.782692 4.091919-40.920826-120.71135-171.867347-214.825176-314.067182-214.825176l-2.04604 0c-217.903251 1.022954-318.159203 142.193795-351.918941 255.744261-12.276268-1.022954-24.552434-2.045908-35.805748-2.045908-87.979684 0-167.775326 42.964994-213.81123 117.642385 0 0 0 0 0 2.045908-33.759636 61.378578-68.542328 203.572476 53.196992 295.640393 36.828703 28.643329 94.117818 31.712294 116.624242 31.712294 1.023056 0 1.023056 0 1.023056 0l814.323955 0c3.069067 0 6.138134 0 11.253212-1.022954 71.611395-13.298711 208.69605-83.88408 208.69605-245.514516C1237.433291 320.191804 1124.90107 210.733257 984.747348 210.733257L984.747348 210.733257zM1010.322838 590.257832l-807.162815 0-1.02302 0c-21.48347 0-43.989893-5.114873-50.128027-8.183838-71.611395-56.263705-29.667614-141.170841-22.506424-154.469552 34.782692-57.286761 93.094864-62.401634 116.624242-62.401634 21.48347 0 37.851759 5.114873 41.94378 8.183838 17.391346 12.275756 39.89777 15.344619 56.266059 7.160884 19.437357-7.160884 32.736681-24.551411 34.782692-46.033959 0-8.183838 21.48347-221.986059 255.75501-223.009013l1.02302 0c117.647298 0 211.765117 92.067918 213.81123 171.860181 0 18.413584 9.207201 34.781259 22.506424 45.011005 15.345335 10.229746 33.759636 12.275756 51.150982 6.137827 21.48347-7.160884 41.94378-11.2527 61.381239-11.2527 89.002741 0 141.176779 66.493553 141.176779 130.941095C1125.924126 554.453619 1035.898329 584.119903 1010.322838 590.257832L1010.322838 590.257832zM479.375462 791.784297c-33.759636 0-60.358183 26.597421-60.358183 60.355624l0 102.297711c0 34.781259 26.598547 61.378578 60.358183 61.378578s61.381239-26.597421 61.381239-61.378578l0-102.297711C540.756701 818.381719 513.135097 791.784297 479.375462 791.784297z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/5-weather-07-sunny.svg b/frontend/src/deicons/svg/5-weather-07-sunny.svg
new file mode 100644
index 0000000000..e4eb5a02dc
--- /dev/null
+++ b/frontend/src/deicons/svg/5-weather-07-sunny.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="199.80px" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512.909414 282.827709q47.28952 0 89.122558 18.188277t72.753108 49.108348 49.108348 72.753108 18.188277 89.122558q0 48.198934-18.188277 90.031972t-49.108348 72.753108-72.753108 49.108348-89.122558 18.188277q-48.198934 0-90.031972-18.188277t-72.753108-49.108348-49.108348-72.753108-18.188277-90.031972q0-47.28952 18.188277-89.122558t49.108348-72.753108 72.753108-49.108348 90.031972-18.188277zM967.616341 454.706927q23.64476 0 40.468917 16.824156t16.824156 40.468917-16.824156 40.468917-40.468917 16.824156l-107.310835 0q-7.275311 43.651865-24.099467 82.301954t-42.287744 72.298401l80.937833 70.024867q16.369449 16.369449 16.369449 40.01421t-16.369449 40.01421q-16.369449 17.278863-40.01421 17.278863t-40.01421-17.278863l-70.934281-80.028419q-68.206039 51.83659-154.600355 65.477798l0 108.220249q0 23.64476-16.369449 40.01421t-40.01421 16.369449-40.468917-16.369449-16.824156-40.01421l0-108.220249q-86.394316-13.641208-154.600355-65.477798l-70.024867 80.028419q-17.278863 17.278863-40.468917 17.278863t-40.468917-17.278863q-16.369449-16.369449-16.369449-40.01421t16.369449-40.01421l80.937833-70.024867q-50.927176-68.206039-66.387211-154.600355l-107.310835 0q-23.64476 0-40.468917-16.824156t-16.824156-40.468917 16.824156-40.468917 40.468917-16.824156l107.310835 0q15.460036-86.394316 66.387211-154.600355l-80.937833-70.024867q-16.369449-16.369449-16.369449-40.01421t16.369449-40.01421q17.278863-17.278863 40.468917-17.278863t40.468917 17.278863l70.024867 80.937833q33.648313-25.463588 72.298401-42.287744t82.301954-24.099467l0-108.220249q0-23.64476 16.824156-40.01421t40.468917-16.369449 40.01421 16.369449 16.369449 40.01421l0 108.220249q43.651865 7.275311 82.301954 24.099467t72.298401 42.287744l70.934281-80.937833q16.369449-17.278863 40.01421-17.278863t40.01421 17.278863q16.369449 16.369449 16.369449 40.01421t-16.369449 40.01421l-80.937833 70.024867q25.463588 33.648313 42.287744 72.298401t24.099467 82.301954l107.310835 0zM512.909414 795.737123q58.202487 0 110.039076-22.280639t90.486679-60.930728 60.930728-90.031972 22.280639-110.493783q0-58.202487-22.280639-110.039076t-60.930728-90.486679-90.486679-60.930728-110.039076-22.280639q-59.111901 0-110.94849 22.280639t-90.031972 60.930728-60.476021 90.486679-22.280639 110.039076q0 59.111901 22.280639 110.493783t60.476021 90.031972 90.031972 60.930728 110.94849 22.280639z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/5-weather-08-cloudy.svg b/frontend/src/deicons/svg/5-weather-08-cloudy.svg
new file mode 100644
index 0000000000..87ebf17cc4
--- /dev/null
+++ b/frontend/src/deicons/svg/5-weather-08-cloudy.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="170.10px" viewBox="0 0 1204 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M882.526316 286.796992q-17.323308 17.323308-42.345865 17.323308t-42.345865-17.323308q-18.285714-18.285714-18.285714-42.827068t18.285714-42.827068l42.345865-42.345865q17.323308-17.323308 42.345865-17.323308t42.345865 17.323308q18.285714 17.323308 18.285714 42.345865t-18.285714 43.308271zM250.225564 611.12782q-3.849624-16.360902-6.255639-33.684211t-2.406015-35.609023q0-61.593985 23.578947-116.451128t64.481203-95.278195 95.278195-64 116.932331-23.578947q72.180451 0 132.330827 30.796992t101.533835 82.766917q-31.759398 6.736842-61.593985 14.43609t-57.744361 23.097744q-24.06015-19.24812-52.451128-27.428571t-62.075188-8.180451q-38.496241 0-71.699248 14.43609t-58.225564 39.458647-39.458647 58.706767-14.43609 71.218045q0 27.909774 6.736842 49.082707-30.796992 0-58.706767 5.293233t-55.819549 14.917293zM541.834586 180.932331q-25.022556 0-42.827068-17.804511t-17.804511-42.827068l0-59.669173q0-25.022556 17.804511-42.827068t42.827068-17.804511 42.827068 17.804511 17.804511 42.827068l0 59.669173q0 25.022556-17.804511 42.827068t-42.827068 17.804511zM158.796992 244.451128q-18.285714-18.285714-18.285714-43.308271t18.285714-42.345865q17.323308-17.323308 42.345865-17.323308t42.345865 17.323308l42.345865 42.345865q18.285714 18.285714 18.285714 42.827068t-18.285714 42.827068q-17.323308 17.323308-42.345865 17.323308t-42.345865-17.323308zM853.654135 421.533835q69.293233 0 132.81203 27.428571t111.639098 74.105263 76.511278 109.233083 28.390977 131.849624q0 56.781955-12.511278 100.090226t-37.533835 88.541353q-12.511278 22.135338-27.909774 35.609023t-32.240602 21.654135-34.165414 11.067669-34.646617 2.887218l-783.398496 0q-21.172932 0-42.345865-13.954887t-38.496241-35.12782-27.909774-47.157895-10.586466-50.045113q0-103.93985 56.781955-159.759398t150.135338-55.819549q22.135338 0 39.458647 2.887218t32.240602 8.180451 29.834586 13.954887 32.240602 20.210526q10.586466-59.669173 42.345865-111.639098t82.285714-90.947368 117.894737-61.112782 149.172932-22.135338zM1024 905.62406q22.135338-6.736842 42.345865-42.345865t20.210526-99.12782q0-48.120301-17.323308-89.503759t-48.120301-71.218045-72.180451-46.676692-89.503759-16.842105-84.210526 7.699248-63.037594 19.24812-45.233083 25.984962-30.796992 26.947368q-12.511278 13.473684-25.022556 31.759398t-22.135338 38.496241-14.43609 40.421053-1.924812 35.609023q3.849624 27.909774-10.586466 47.157895t-37.052632 27.428571-47.639098 3.849624-42.345865-23.578947-41.864662-29.834586-61.112782-10.586466q-29.834586 0-48.601504 4.330827t-29.353383 13.473684-14.43609 23.097744-3.849624 32.240602q0 15.398496 6.736842 25.503759t17.804511 15.879699 24.541353 8.180451 26.947368 2.406015l712.180451 0zM179.969925 541.834586q0 25.022556-17.323308 42.827068t-42.345865 17.804511l-60.631579 0q-25.022556 0-42.345865-17.804511t-17.323308-42.827068 17.323308-42.345865 42.345865-17.323308l60.631579 0q25.022556 0 42.345865 17.323308t17.323308 42.345865z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/5-weather-09-smog.svg b/frontend/src/deicons/svg/5-weather-09-smog.svg
new file mode 100644
index 0000000000..3675f04c21
--- /dev/null
+++ b/frontend/src/deicons/svg/5-weather-09-smog.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="177.47px" viewBox="0 0 1154 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M780.288 128q73.728 0 141.312 29.184t119.296 78.848 81.92 115.712 30.208 140.8q0 60.416-19.456 122.88t-46.08 110.592q-13.312 23.552-37.376 43.008t-51.712 33.792-54.272 22.528-45.056 8.192l-714.752 0q-39.936 0-73.216-13.312t-57.856-36.864-38.4-56.832-13.824-73.216q0-55.296 13.312-104.448t40.448-86.016 68.608-58.368 97.792-21.504q24.576 0 42.496 3.072t34.304 8.704 32.256 14.848 34.304 21.504q10.24-62.464 44.032-117.76t87.552-96.768 125.44-65.024 158.72-23.552zM786.432 253.952q-86.016 0-137.216 20.992t-79.872 45.568l388.096 0q-32.768-31.744-76.288-49.152t-94.72-17.408zM515.072 384q-19.456 32.768-28.672 64.512l538.624 0q-6.144-31.744-20.48-64.512l-489.472 0zM225.28 509.952q-40.96 0-62.464 19.968t-30.72 46.592l245.76 0q-23.552-4.096-43.008-23.552-18.432-20.48-44.544-31.744t-65.024-11.264zM861.184 707.584q35.84 0 68.096-16.896t55.808-49.664l-861.184 0q1.024 15.36 8.704 27.648t18.944 20.992 25.088 13.312 28.16 4.608l656.384 0zM1016.832 576.512q10.24-30.72 11.264-63.488l-545.792 0q-2.048 25.6-20.48 41.984t-43.008 21.504l598.016 0z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/5-weather-10-typhoon.svg b/frontend/src/deicons/svg/5-weather-10-typhoon.svg
new file mode 100644
index 0000000000..90fe750325
--- /dev/null
+++ b/frontend/src/deicons/svg/5-weather-10-typhoon.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M880.81 390.38c-153.42-236-333.4-227.19-445.52-188.84C358.57 228.1 290.71 284.16 249.4 355c-118 206.54 79.67 368.81 79.67 368.81l-0.63-2.11A277.4 277.4 0 0 0 365 747.61c-2.12-0.06-4.25-0.14-6.39-0.22-123.92-11.8-215.38-115.07-215.38-115.07 153.42 236 333.4 230.14 445.52 188.83 79.67-26.55 144.58-79.66 185.89-153.43 121-206.53-79.67-368.81-79.67-368.81s0.14 0.34 0.39 1a283 283 0 0 0-32.3-25c1.58 0.23 2.41 0.37 2.41 0.37 123.88 14.78 215.34 115.1 215.34 115.1zM574 591c-47.21 35.41-112.12 26.56-144.57-17.7-35.41-44.26-26.56-109.17 17.7-144.58s109.17-26.55 144.57 17.71S618.22 555.61 574 591z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/5-weather-11-wind.svg b/frontend/src/deicons/svg/5-weather-11-wind.svg
new file mode 100644
index 0000000000..3701473974
--- /dev/null
+++ b/frontend/src/deicons/svg/5-weather-11-wind.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="177.78px" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M444.416 256q0-27.648 10.24-51.2t28.16-41.472 41.472-28.16 51.2-10.24q26.624 0 50.176 10.24t41.472 28.16 28.16 41.472 10.24 51.2q0 26.624-10.24 50.688t-28.16 41.472-41.472 27.648-50.176 10.24l-12.288 0q-5.12 0-10.24-2.048l-488.448 0 0-128 379.904 0zM707.584 643.072q26.624 0 49.664 9.728t40.448 27.136 27.136 40.448 9.728 49.664-9.728 49.664-27.136 39.936-40.448 27.136-49.664 10.24-49.664-10.24-39.936-27.136-27.136-39.936-10.24-49.664l0-1.024-580.608 0 0-128 705.536 0 0 2.048 2.048 0zM992.256 254.976q32.768 0 61.952 12.8t50.688 34.816 34.304 51.2 12.8 61.952q0 33.792-12.8 62.976t-34.304 50.688-50.688 34.304-61.952 12.8l-2.048 0-990.208 0 0-128 834.56 0q-3.072-15.36-3.072-32.768 0-32.768 12.8-61.952t34.304-51.2 50.688-34.816 62.976-12.8z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/deicons/svg/5-weather-12-thunder.svg b/frontend/src/deicons/svg/5-weather-12-thunder.svg
new file mode 100644
index 0000000000..6f0c237111
--- /dev/null
+++ b/frontend/src/deicons/svg/5-weather-12-thunder.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M674.242038 0q58.700637 0 112.509554 23.235669t94.980892 62.77707 65.22293 92.127389 24.050955 111.286624q0 48.101911-15.490446 97.834395t-36.687898 88.866242q-10.598726 18.751592-29.757962 34.242038t-41.171975 26.496815-43.210191 17.528662-35.872611 6.522293l-569.070064 0q-31.796178 0-58.292994-10.191083t-46.063694-29.350318-30.573248-45.656051-11.006369-58.292994q0-44.025478 10.598726-82.751592t32.203822-68.076433 54.624204-46.471338 77.859873-17.121019q19.566879 0 33.834395 2.44586t27.312102 6.929936 25.681529 11.821656 27.312102 17.121019q8.152866-50.547771 35.057325-94.573248t69.707006-76.636943 99.872611-51.363057 126.369427-18.751592zM738.649682 461.452229q26.089172 0 50.140127-11.414013t42.802548-33.426752 29.757962-53.808917 11.006369-72.56051-14.675159-75.821656-40.764331-60.33121-61.55414-39.541401-76.229299-14.267516-71.33758 6.522293-52.993631 16.305732-37.910828 21.605096-26.089172 22.420382q-11.414013 11.414013-22.012739 27.312102t-18.343949 33.019108-11.821656 34.242038-2.44586 30.165605q3.261146 23.643312-8.968153 39.949045t-31.388535 22.828025-40.356688 2.853503-35.057325-19.974522q-15.490446-16.305732-36.280255-24.866242t-51.770701-8.56051q-25.273885 0-40.764331 9.783439t-24.458599 24.458599-12.229299 32.203822-3.261146 33.019108q0 13.044586 5.707006 23.643312t15.082803 18.343949 20.789809 11.821656 22.828025 4.076433l522.598726 0zM512.815287 714.191083l100.280255 0-100.280255 309.808917 0-210.343949-103.541401 0 2.44586-199.745223 101.095541 0 0 100.280255z" /></svg>
\ No newline at end of file
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 27708a6d37..6822dcbe3a 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -931,6 +931,11 @@ export default {
     password_input_error: 'Original password input error'
   },
   chart: {
+    '1-trend': 'trend',
+    '2-state': 'State',
+    '3-rank': 'Rank',
+    '4-location': 'Location',
+    '5-weather': 'Weather',
     chinese: 'Chinese',
     mark_field: 'Field',
     mark_value: 'Value',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index cc4a6bda24..e306347505 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -930,6 +930,11 @@ export default {
     password_input_error: '原始密碼輸入錯誤'
   },
   chart: {
+    '1-trend': '趨勢',
+    '2-state': '狀態',
+    '3-rank': '排名',
+    '4-location': '位置',
+    '5-weather': '天氣',
     chinese: '中文',
     mark_field: '字段',
     mark_value: '值',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index d4de2d534d..733d69d3af 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -929,6 +929,11 @@ export default {
     password_input_error: '原始密码输入错误'
   },
   chart: {
+    '1-trend': '趋势',
+    '2-state': '状态',
+    '3-rank': '排名',
+    '4-location': '位置',
+    '5-weather': '天气',
     chinese: '中文',
     mark_field: '字段',
     mark_value: '值',
diff --git a/frontend/src/views/chart/chart/map/map.js b/frontend/src/views/chart/chart/map/map.js
index 0068d79fef..109b6feb33 100644
--- a/frontend/src/views/chart/chart/map/map.js
+++ b/frontend/src/views/chart/chart/map/map.js
@@ -164,74 +164,81 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode, seri
 
       if (chart.data?.detailFields?.length > 1) {
         const deNameArray = ['x', 'y']
+        let hasx = false
+        let hasy = false
         chart.data.detailFields.forEach(item => {
           if (item?.busiType === 'locationXaxis') {
+            hasx = true
             deNameArray[0] = item
           } else if (item?.busiType === 'locationYaxis') {
+            hasy = true
             deNameArray[1] = item
           } else {
             deNameArray.push(item)
           }
         })
         let markData = []
-        chart.data.tableRow.forEach(row => {
-          if (row?.details) {
-            markData = markData.concat(row.details.map(detail => {
-              const temp = deNameArray.map(key => detail[key.dataeaseName])
-              temp.push(1)
-              return temp
-            }))
-          }
-        })
-
-        if (markData.length) {
-          let valueIndex = -1
-          const markCondition = customAttr.mark
-          if (markCondition?.fieldId && markCondition.conditions?.length) {
-            for (let i = 0; i < deNameArray.length; i++) {
-              if (deNameArray[i].id === markCondition.fieldId) {
-                valueIndex = i
-                break
-              }
+        if (hasx && hasy) {
+          chart.data.tableRow.forEach(row => {
+            if (row?.details) {
+              markData = markData.concat(row.details.map(detail => {
+                const temp = deNameArray.map(key => detail[key.dataeaseName])
+                temp.push(1)
+                return temp
+              }))
             }
-          }
-          const markSeries = {
-            type: 'scatter',
-            coordinateSystem: 'geo',
-            geoIndex: 0,
-            symbolSize: function(params) {
-              return 20
-            },
-            symbol: (values, param) => {
-              if (valueIndex < 0) {
-                return svgPathData()
-              }
-              const val = values[valueIndex]
-              const field = deNameArray[valueIndex]
-              const con = getSvgCondition(val, field, markCondition.conditions)
-              let svgName = null
-              if (con) {
-                svgName = con.icon
-                if (svgName && svgName.startsWith('#')) {
-                  svgName = svgName.substr(1)
+          })
+
+          if (markData.length) {
+            let valueIndex = -1
+            const markCondition = customAttr.mark
+            if (markCondition?.fieldId && markCondition.conditions?.length) {
+              for (let i = 0; i < deNameArray.length; i++) {
+                if (deNameArray[i].id === markCondition.fieldId) {
+                  valueIndex = i
+                  break
                 }
               }
-              return svgPathData(svgName)
-            },
-            itemStyle: {
-              color: params => {
-                const { value } = params
-                const val = value[valueIndex]
-                const con = getSvgCondition(val, null, markCondition.conditions)
-                return con?.color || '#b02a02'
-              }
-            },
-            encode: {
-              tooltip: 2
-            },
-            data: markData
+            }
+            const markSeries = {
+              type: 'scatter',
+              coordinateSystem: 'geo',
+              geoIndex: 0,
+              symbolSize: function(params) {
+                return 20
+              },
+              symbol: (values, param) => {
+                if (valueIndex < 0) {
+                  return svgPathData()
+                }
+                const val = values[valueIndex]
+                const field = deNameArray[valueIndex]
+                const con = getSvgCondition(val, field, markCondition.conditions)
+                let svgName = null
+                if (con) {
+                  svgName = con.icon
+                  if (svgName && svgName.startsWith('#')) {
+                    svgName = svgName.substr(1)
+                  }
+                }
+                return svgPathData(svgName)
+              },
+              itemStyle: {
+                color: params => {
+                  const { value } = params
+                  const val = value[valueIndex]
+                  const con = getSvgCondition(val, null, markCondition.conditions)
+                  return con?.color || '#b02a02'
+                }
+              },
+              encode: {
+                tooltip: 2
+              },
+              silent: true,
+              data: markData
+            }
+            chart_option.series.push(markSeries)
           }
-          chart_option.series.push(markSeries)
         }
       }
     }
@@ -309,7 +316,7 @@ const loadXML = xmlString => {
 }
 
 const svgPathData = iconName => {
-  iconName = iconName || 'weizhi'
+  iconName = iconName || '4-location-01-mark'
   const defaultNode = require(`@/deicons/svg/${iconName}.svg`).default
   if (!defaultNode?.content) return null
   const content = defaultNode.content
diff --git a/frontend/src/views/chart/components/functionStyle/MapMarkSelector.vue b/frontend/src/views/chart/components/functionStyle/MapMarkSelector.vue
index d3a885b885..5b06b3e706 100644
--- a/frontend/src/views/chart/components/functionStyle/MapMarkSelector.vue
+++ b/frontend/src/views/chart/components/functionStyle/MapMarkSelector.vue
@@ -96,7 +96,7 @@
             class="col-center"
             :span="6"
           >
-            <de-icon-picker
+            <de-icon-group-picker
               v-model="condition.icon"
               :options="iconOptions"
               :color="condition.color"
@@ -141,11 +141,11 @@
 
 <script>
 import { DEFAULT_MARK } from '../../chart/chart'
-import DeIconPicker from '@/components/deIconPicker'
+import DeIconGroupPicker from '@/components/deIconPicker/deIconGroupPicker'
 import deSvgIcons from '@/deicons'
 export default {
   name: 'MapMarkSelector',
-  components: { DeIconPicker },
+  components: { DeIconGroupPicker },
   props: {
     param: {
       type: Object,
@@ -285,7 +285,18 @@ export default {
       this.changeMarkAttr('conditions')
     },
     loadSvg() {
-      this.iconOptions.addIconList = [...this.iconOptions.addIconList, ...deSvgIcons]
+      const svgList = deSvgIcons
+      const groupMap = {}
+      svgList.forEach(svg => {
+        const arr = svg.split('-')
+        if (arr?.length > 3) {
+          const groupName = arr[0] + '-' + arr[1]
+          const svgName = svg
+          groupMap[groupName] = groupMap[groupName] || []
+          groupMap[groupName].push(svgName)
+        }
+      })
+      this.iconOptions.addIconGroup = groupMap
     },
     initData() {
       const chart = JSON.parse(JSON.stringify(this.chart))
diff --git a/frontend/src/views/chart/view/ChartStyle.vue b/frontend/src/views/chart/view/ChartStyle.vue
index e206fe567f..589a3c90e7 100644
--- a/frontend/src/views/chart/view/ChartStyle.vue
+++ b/frontend/src/views/chart/view/ChartStyle.vue
@@ -1,7 +1,7 @@
 <template>
   <el-row class="view-panel">
     <div
-      v-if="!pluginShow && properties.length===0"
+      v-if="!pluginShow && properties.length === 0"
       class="no-properties"
     >
       {{ $t('chart.chart_no_properties') }}
@@ -11,19 +11,19 @@
       style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;"
       class="attr-style theme-border-class"
       :component-name="view.type + '-style'"
-      :obj="{view, param, chart, dimensionData, quotaData}"
+      :obj="{ view, param, chart, dimensionData, quotaData }"
     />
     <div
-      v-if="!pluginShow&&properties.length>0"
+      v-if="!pluginShow && properties.length > 0"
       style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;padding-right: 6px"
       class="attr-style theme-border-class"
     >
       <el-row
         v-show="showPropertiesCollapse([
-          'color-selector','size-selector','size-selector-ant-v',
-          'label-selector','label-selector-ant-v',
-          'tooltip-selector','tooltip-selector-ant-v',
-          'total-cfg','suspension-selector'])"
+          'color-selector', 'size-selector', 'size-selector-ant-v',
+          'label-selector', 'label-selector-ant-v',
+          'tooltip-selector', 'tooltip-selector-ant-v',
+          'total-cfg', 'suspension-selector'])"
         class="de-collapse-style"
       >
         <span class="padding-lr">{{ $t('chart.shape_attr') }}</span>
@@ -41,7 +41,7 @@
               class="attr-selector"
               :chart="chart"
               :property-inner="propertyInnerAll['color-selector']"
-              @onColorChange="onColorChange($event,'color-selector')"
+              @onColorChange="onColorChange($event, 'color-selector')"
             />
           </el-collapse-item>
           <el-collapse-item
@@ -54,7 +54,7 @@
               class="attr-selector"
               :property-inner="propertyInnerAll['size-selector']"
               :chart="chart"
-              @onSizeChange="onSizeChange($event,'size-selector')"
+              @onSizeChange="onSizeChange($event, 'size-selector')"
             />
           </el-collapse-item>
           <el-collapse-item
@@ -68,11 +68,11 @@
               :chart="chart"
               :property-inner="propertyInnerAll['size-selector-ant-v']"
               :quota-fields="quotaData"
-              @onSizeChange="onSizeChange($event,'size-selector-ant-v')"
+              @onSizeChange="onSizeChange($event, 'size-selector-ant-v')"
             />
           </el-collapse-item>
           <el-collapse-item
-            v-show="showPropertiesCollapse(['label-selector','label-selector-ant-v'])"
+            v-show="showPropertiesCollapse(['label-selector', 'label-selector-ant-v'])"
             name="label"
             :title="$t('chart.label')"
           >
@@ -82,7 +82,7 @@
               class="attr-selector"
               :chart="chart"
               :property-inner="propertyInnerAll['label-selector']"
-              @onLabelChange="onLabelChange($event,'label-selector')"
+              @onLabelChange="onLabelChange($event, 'label-selector')"
             />
             <label-selector-ant-v
               v-else-if="showProperties('label-selector-ant-v')"
@@ -90,11 +90,11 @@
               class="attr-selector"
               :chart="chart"
               :property-inner="propertyInnerAll['label-selector-ant-v']"
-              @onLabelChange="onLabelChange($event,'label-selector-ant-v')"
+              @onLabelChange="onLabelChange($event, 'label-selector-ant-v')"
             />
           </el-collapse-item>
           <el-collapse-item
-            v-show="showPropertiesCollapse(['tooltip-selector','tooltip-selector-ant-v'])"
+            v-show="showPropertiesCollapse(['tooltip-selector', 'tooltip-selector-ant-v'])"
             name="tooltip"
             :title="$t('chart.tooltip')"
           >
@@ -104,7 +104,7 @@
               class="attr-selector"
               :chart="chart"
               :property-inner="propertyInnerAll['tooltip-selector']"
-              @onTooltipChange="onTooltipChange($event,'tooltip-selector')"
+              @onTooltipChange="onTooltipChange($event, 'tooltip-selector')"
             />
             <tooltip-selector-ant-v
               v-else-if="showProperties('tooltip-selector-ant-v')"
@@ -112,7 +112,7 @@
               class="attr-selector"
               :chart="chart"
               :property-inner="propertyInnerAll['tooltip-selector-ant-v']"
-              @onTooltipChange="onTooltipChange($event,'tooltip-selector-ant-v')"
+              @onTooltipChange="onTooltipChange($event, 'tooltip-selector-ant-v')"
             />
           </el-collapse-item>
           <el-collapse-item
@@ -125,7 +125,7 @@
               class="attr-selector"
               :chart="chart"
               :property-inner="propertyInnerAll['total-cfg']"
-              @onTotalCfgChange="onTotalCfgChange($event,'total-cfg')"
+              @onTotalCfgChange="onTotalCfgChange($event, 'total-cfg')"
             />
           </el-collapse-item>
           <el-collapse-item
@@ -138,7 +138,7 @@
               class="attr-selector"
               :chart="chart"
               :property-inner="propertyInnerAll['suspension-selector']"
-              @onSuspensionChange="onSuspensionChange($event,'suspension-selector')"
+              @onSuspensionChange="onSuspensionChange($event, 'suspension-selector')"
             />
           </el-collapse-item>
         </el-collapse>
@@ -150,7 +150,7 @@
           class="style-collapse"
         >
           <el-collapse-item
-            v-show="showPropertiesCollapse(['x-axis-selector','x-axis-selector-ant-v'])"
+            v-show="showPropertiesCollapse(['x-axis-selector', 'x-axis-selector-ant-v'])"
             name="xAxis"
             :title="$t('chart.xAxis')"
           >
@@ -160,7 +160,7 @@
               class="attr-selector"
               :chart="chart"
               :property-inner="propertyInnerAll['x-axis-selector']"
-              @onChangeXAxisForm="onChangeXAxisForm($event,'x-axis-selector')"
+              @onChangeXAxisForm="onChangeXAxisForm($event, 'x-axis-selector')"
             />
             <x-axis-selector-ant-v
               v-else-if="showProperties('x-axis-selector-ant-v')"
@@ -168,11 +168,11 @@
               class="attr-selector"
               :chart="chart"
               :property-inner="propertyInnerAll['x-axis-selector-ant-v']"
-              @onChangeXAxisForm="onChangeXAxisForm($event,'x-axis-selector-ant-v')"
+              @onChangeXAxisForm="onChangeXAxisForm($event, 'x-axis-selector-ant-v')"
             />
           </el-collapse-item>
           <el-collapse-item
-            v-show="showPropertiesCollapse(['y-axis-selector','y-axis-selector-ant-v'])"
+            v-show="showPropertiesCollapse(['y-axis-selector', 'y-axis-selector-ant-v'])"
             name="yAxis"
             :title="view.type === 'chart-mix' ? $t('chart.yAxis_main') : $t('chart.yAxis')"
           >
@@ -182,7 +182,7 @@
               class="attr-selector"
               :chart="chart"
               :property-inner="propertyInnerAll['y-axis-selector']"
-              @onChangeYAxisForm="onChangeYAxisForm($event,'y-axis-selector')"
+              @onChangeYAxisForm="onChangeYAxisForm($event, 'y-axis-selector')"
             />
             <y-axis-selector-ant-v
               v-else-if="showProperties('y-axis-selector-ant-v')"
@@ -190,11 +190,11 @@
               class="attr-selector"
               :chart="chart"
               :property-inner="propertyInnerAll['y-axis-selector-ant-v']"
-              @onChangeYAxisForm="onChangeYAxisForm($event,'y-axis-selector-ant-v')"
+              @onChangeYAxisForm="onChangeYAxisForm($event, 'y-axis-selector-ant-v')"
             />
           </el-collapse-item>
           <el-collapse-item
-            v-show="showPropertiesCollapse(['y-axis-ext-selector','y-axis-ext-selector-ant-v'])"
+            v-show="showPropertiesCollapse(['y-axis-ext-selector', 'y-axis-ext-selector-ant-v'])"
             name="yAxisExt"
             :title="$t('chart.yAxis_ext')"
           >
@@ -204,7 +204,7 @@
               class="attr-selector"
               :chart="chart"
               :property-inner="propertyInnerAll['y-axis-ext-selector']"
-              @onChangeYAxisForm="onChangeYAxisExtForm($event,'y-axis-ext-selector')"
+              @onChangeYAxisForm="onChangeYAxisExtForm($event, 'y-axis-ext-selector')"
             />
             <y-axis-ext-selector-ant-v
               v-else-if="showProperties('y-axis-ext-selector-ant-v')"
@@ -212,11 +212,11 @@
               class="attr-selector"
               :chart="chart"
               :property-inner="propertyInnerAll['y-axis-ext-selector-ant-v']"
-              @onChangeYAxisForm="onChangeYAxisExtForm($event,'y-axis-ext-selector-ant-v')"
+              @onChangeYAxisForm="onChangeYAxisExtForm($event, 'y-axis-ext-selector-ant-v')"
             />
           </el-collapse-item>
           <el-collapse-item
-            v-show="showPropertiesCollapse(['split-selector','split-selector-ant-v'])"
+            v-show="showPropertiesCollapse(['split-selector', 'split-selector-ant-v'])"
             name="split"
             :title="$t('chart.split')"
           >
@@ -226,7 +226,7 @@
               class="attr-selector"
               :chart="chart"
               :property-inner="propertyInnerAll['split-selector']"
-              @onChangeSplitForm="onChangeSplitForm($event,'split-selector')"
+              @onChangeSplitForm="onChangeSplitForm($event, 'split-selector')"
             />
             <split-selector-ant-v
               v-else-if="showProperties('split-selector-ant-v')"
@@ -234,11 +234,11 @@
               class="attr-selector"
               :chart="chart"
               :property-inner="propertyInnerAll['split-selector-ant-v']"
-              @onChangeSplitForm="onChangeSplitForm($event,'split-selector-ant-v')"
+              @onChangeSplitForm="onChangeSplitForm($event, 'split-selector-ant-v')"
             />
           </el-collapse-item>
           <el-collapse-item
-            v-show="showPropertiesCollapse(['title-selector','title-selector-ant-v'])"
+            v-show="showPropertiesCollapse(['title-selector', 'title-selector-ant-v'])"
             name="title"
             :title="$t('chart.title')"
           >
@@ -248,7 +248,7 @@
               class="attr-selector"
               :chart="chart"
               :property-inner="propertyInnerAll['title-selector']"
-              @onTextChange="onTextChange($event,'title-selector')"
+              @onTextChange="onTextChange($event, 'title-selector')"
             />
             <title-selector-ant-v
               v-else-if="showProperties('title-selector-ant-v')"
@@ -256,11 +256,11 @@
               class="attr-selector"
               :chart="chart"
               :property-inner="propertyInnerAll['title-selector-ant-v']"
-              @onTextChange="onTextChange($event,'title-selector-ant-v')"
+              @onTextChange="onTextChange($event, 'title-selector-ant-v')"
             />
           </el-collapse-item>
           <el-collapse-item
-            v-show="showPropertiesCollapse(['legend-selector','legend-selector-ant-v'])"
+            v-show="showPropertiesCollapse(['legend-selector', 'legend-selector-ant-v'])"
             name="legend"
             :title="$t('chart.legend')"
           >
@@ -270,7 +270,7 @@
               class="attr-selector"
               :chart="chart"
               :property-inner="propertyInnerAll['legend-selector']"
-              @onLegendChange="onLegendChange($event,'legend-selector')"
+              @onLegendChange="onLegendChange($event, 'legend-selector')"
             />
             <legend-selector-ant-v
               v-else-if="showProperties('legend-selector-ant-v')"
@@ -278,7 +278,7 @@
               class="attr-selector"
               :chart="chart"
               :property-inner="propertyInnerAll['legend-selector-ant-v']"
-              @onLegendChange="onLegendChange($event,'legend-selector-ant-v')"
+              @onLegendChange="onLegendChange($event, 'legend-selector-ant-v')"
             />
           </el-collapse-item>
           <el-collapse-item
@@ -290,7 +290,7 @@
               :param="param"
               class="attr-selector"
               :chart="chart"
-              @onChangeBackgroundForm="onChangeBackgroundForm($event,'background-color-selector')"
+              @onChangeBackgroundForm="onChangeBackgroundForm($event, 'background-color-selector')"
             />
           </el-collapse-item>
           <el-collapse-item
@@ -304,7 +304,7 @@
               class="attr-selector"
               :chart="chart"
               :property-inner="propertyInnerAll['margin-selector']"
-              @onMarginChange="onMarginChange($event,'margin-selector')"
+              @onMarginChange="onMarginChange($event, 'margin-selector')"
             />
 
           </el-collapse-item>
@@ -312,7 +312,7 @@
       </el-row>
 
       <el-row
-        v-show="showPropertiesCollapse(['condition-style-selector'])"
+        v-show="showPropertiesCollapse(['condition-style-selector']) && markSelectorShow"
         class="de-collapse-style"
       >
         <span class="padding-lr">{{ $t('chart.function_style') }}</span>
@@ -321,7 +321,7 @@
           class="style-collapse"
         >
           <el-collapse-item
-            v-show="showPropertiesCollapse(['condition-style-selector'])"
+            v-show="showPropertiesCollapse(['condition-style-selector']) && markSelectorShow"
             name="conditionStyle"
             :title="$t('chart.condition_style')"
           >
@@ -447,6 +447,29 @@ export default {
     pluginShow() {
       return this.view.isPlugin && !this.batchOptStatus
     },
+    markSelectorShow() {
+      const hasViewFields = this.view?.viewFields?.length
+      if (hasViewFields) {
+        let hasx = false
+        let hasy = false
+        for (let index = 0; index < this.view.viewFields.length; index++) {
+          const element = this.view.viewFields[index]
+          if (element.busiType === 'locationXaxis') {
+            hasx = true
+          }
+          if (element.busiType === 'locationYaxis') {
+            hasy = true
+          }
+          if (hasx && hasy) {
+            break
+          }
+        }
+        if (hasx && hasy) {
+          return true
+        }
+      }
+      return false
+    },
     ...mapState([
       'batchOptStatus'
     ])
@@ -561,7 +584,7 @@ export default {
   float: left;
 }
 
-.col + .col {
+.col+.col {
   margin-left: 10px;
 }