ry-vue-map 0.0.1

package/src/components/maps/switchMap/src/index.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="switch-map">
+    <div class="top" :style="{height:height + 'px'}">
+      <p
+        :class="bottomRight?(isExpand?'el-icon-arrow-left':'el-icon-arrow-right'):(!isExpand?'el-icon-arrow-left':'el-icon-arrow-right')"
+        @click="changeExpand"
+      />
+      <ul>
+        <li
+          v-for="(obj,index) in mapTypeCopy"
+          :key="index"
+          @click="mapTypeClick(index)"
+          :class="{ color: !isExpand?mapTypeActive === index:true }"
+        ><i
+          :class="isExpand?obj.activeIcon:(mapTypeActive === index?obj.activeIcon:obj.icon)"/>
+          {{ obj.name }}
+        </li>
+      </ul>
+    </div>
+    <ul
+      :class="{bottom:true,marginLeft:bottomRight}"
+    >
+      <li
+        v-for="(row,index) in mapStyleCopy"
+        :key="index"
+        :class="{color:!isTop?mapStyleActive === index:true}"
+        :style="{height:height + 'px',lineHeight:height + 'px'}"
+      >
+        <span  @click="mapStyleClick(index)">
+          {{ row }}
+        </span>
+        <i
+          v-show="index===0"
+          @click="changeDirectionArrow"
+          :class="isTop?'el-icon-arrow-down':'el-icon-arrow-up'"/>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import Dto from './../../models/switchMap/switchMap.js';
+
+export default {
+  name: 'SwitchMap',
+  props: {
+    ...new Dto(),
+  },
+  data() {
+    return {
+      isExpand: true,
+      mapTypeActive: 1,
+      mapStyleActive: 2,
+      isTop: true,
+      mapTypeCopy: [[...this.mapType][1]],
+      mapStyleCopy: [[...this.mapStyle][2]]
+    }
+  },
+  watch: {
+    switchMapDefaultTypeOrLayer: {
+      handler(e) {
+        if(!e)return;
+        const isCorrect = this.formatToJudge(e);
+        if (!isCorrect) return;
+        setTimeout(() => {
+          this.$emit('changeSwitchMap', {
+            mapType: (isCorrect || isCorrect===0)?e[0]:1,
+            layerType: (isCorrect || isCorrect===1)?e[1]:2
+          });
+        }, 100)
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    if(!this.switchMapDefaultTypeOrLayer){
+      setTimeout(()=>{
+        this.$emit('changeSwitchMap', {
+          mapType: 1,
+          layerType: 2
+        });
+      },100);
+    }
+  },
+  methods: {
+    formatToJudge(arr) {
+      const length = [1, 2];
+      const isArr = Array.isArray(arr);
+      const isLength = length.includes(arr.length);
+      const isType = arr[0] >= 0 && arr[0] <= this.mapType.length - 1;
+      const isLayer = arr[1] >=0 && arr[1] <= this.mapStyle.length - 1;
+
+      if(!isArr || !isLength) return false;
+
+      if(isType && !isLayer){
+        this.mapTypeActive = arr[0];
+        this.mapTypeCopy = [[...this.mapType][arr[0]]];
+        return 0;
+      }
+      if(isLayer && !isType){
+        this.mapStyleActive = arr[1];
+        this.mapStyleCopy = [[...this.mapStyle][arr[1]]];
+        return 1;
+      }
+      if(isType && isLayer){
+        this.mapTypeActive = arr[0];
+        this.mapTypeCopy = [[...this.mapType][arr[0]]];
+        this.mapStyleActive = arr[1];
+        this.mapStyleCopy = [[...this.mapStyle][arr[1]]];
+        return  true
+      }
+      return false;
+    },
+    changeExpand() {
+      this.isExpand = !this.isExpand;
+      if (this.isExpand) {
+        this.mapTypeCopy = this.mapType.filter((v, i) => this.mapTypeActive === i);
+        if (!this.isTop) {
+          this.isTop = true;
+          this.mapStyleCopy = this.mapStyle.filter((v, i) => this.mapStyleActive === i);
+        }
+        return;
+      }
+      this.mapTypeCopy = [...this.mapType];
+    },
+    changeDirectionArrow() {
+      this.isTop = !this.isTop;
+      if (this.isTop) {
+        this.mapStyleCopy = this.mapStyle.filter((v, i) => this.mapStyleActive === i);
+        return;
+      }
+      this.mapStyleCopy = [...this.mapStyle];
+    },
+    mapTypeClick(index) {
+      if (this.mapTypeActive === index || this.isExpand) return;
+      this.mapTypeActive = index;
+      this.$emit('changeSwitchMap', {
+        mapType: this.mapTypeActive,
+        layerType: this.mapStyleActive
+      });
+    },
+    mapStyleClick(index) {
+      if (this.mapStyleActive === index || this.isTop) return;
+      this.mapStyleActive = index;
+      this.$emit('changeSwitchMap', {
+        mapType: this.mapTypeActive,
+        layerType: this.mapStyleActive
+      });
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.switch-map {
+  ul {
+    list-style: none;
+  }
+
+  .top {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    border-radius: 8px;
+    margin-top: 10px;
+    background-color: white;
+
+    p {
+      font-size: 18px;
+      cursor: pointer;
+      margin-left: 8px;
+    }
+
+    ul {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      li {
+        width: 98px;
+        text-align: center;
+        cursor: pointer;
+
+        span {
+          width: 100%;
+          height: 100%;
+        }
+
+        i {
+          margin-right: 6px;
+        }
+      }
+    }
+  }
+
+  .bottom {
+    width: 100px;
+    border-radius: 8px;
+    padding: 0 10px;
+    margin-top: 20px;
+    box-sizing: border-box;
+    background-color: white;
+
+    li {
+      cursor: pointer;
+      text-align: center;
+      border-bottom: #EFEFEF 1px solid;
+
+      &:nth-last-child(1) {
+        border-bottom: 0;
+      }
+    }
+  }
+
+  .marginLeft {
+    margin-left: 32px;
+  }
+
+  .color {
+    color: #1890FF;
+  }
+}
+</style>

package/src/components/maps/switchMap/src/newIndex.vue

@@ -0,0 +1,256 @@
+<template>
+  <div class="switch-map" v-if="mapTypeAndLayer && mapTypeAndLayer.length > 0">
+    <div class="top" :style="{height:height + 'px'}">
+      <p
+        :class="bottomRight?(isExpand?'el-icon-arrow-left':'el-icon-arrow-right'):(!isExpand?'el-icon-arrow-left':'el-icon-arrow-right')"
+        @click="changeExpand"
+      />
+      <ul>
+        <li
+          v-for="(obj,index) in mapTypeCopy"
+          :key="index"
+          @click="mapTypeClick(obj)"
+          :class="{ color: !isExpand?mapTypeActive === obj.id:true }"
+        ><i
+          :class="isExpand?obj.activeIcon:(mapTypeActive === obj.id?obj.activeIcon:obj.icon)"/>
+          {{ obj.name }}
+        </li>
+      </ul>
+    </div>
+    <ul
+      :class="{bottom:true,marginLeft:bottomRight}"
+    >
+      <li
+        v-for="(row,index) in mapStyleCopy"
+        :key="index"
+        :class="{color:!isTop?mapStyleActive === row.id:true}"
+        :style="{height:height + 'px',lineHeight:height + 'px'}"
+      >
+        <span  @click="mapStyleClick(row)">
+          {{ row.name }}
+        </span>
+        <i
+          v-show="index===0"
+          @click="changeDirectionArrow"
+          :class="isTop?'el-icon-arrow-down':'el-icon-arrow-up'"/>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import Dto from './../../models/switchMap/switchMap.js';
+
+export default {
+  name: 'SwitchMap',
+  props: {
+    ...new Dto(),
+  },
+  data() {
+    return {
+      isExpand: true,
+      mapTypeActive: 1,
+      mapStyleActive: 2,
+      isTop: true,
+      mapTypeCopy: [],
+      mapStyleCopy: []
+    }
+  },
+  watch: {
+    switchMapDefaultTypeOrLayer: {
+      handler(e) {
+        if(!e)return;
+        const isCorrect = this.formatToJudge(e);
+        if (!isCorrect) return;
+        const active = this.mapStyleActive;
+        const mapType = (isCorrect || isCorrect===0)?e[0]:1;
+        const layerType = (isCorrect || isCorrect===1)?active:2;
+        setTimeout(() => {
+          this.$emit('changeSwitchMap', {
+            mapType,
+            layerType
+          });
+        }, 100);
+      },
+      immediate: true
+    },
+    mapTypeAndLayer :{
+      handler(e){
+        if(!Array.isArray(e) || !e[1])return;
+        e.forEach((r,index)=>{
+          if(index===1 && !this.switchMapDefaultTypeOrLayer){
+            this.mapStyleCopy = [r.layer[2]];
+            this.mapTypeCopy = [r];
+          }
+        });
+      },
+      immediate:true
+    }
+  },
+  mounted() {
+    if(!this.switchMapDefaultTypeOrLayer){
+      setTimeout(()=>{
+        this.$emit('changeSwitchMap', {
+          mapType: 1,
+          layerType: 2
+        });
+      },100);
+    }
+  },
+  methods: {
+    formatToJudge(arr) {
+      const length = [1, 2];
+      const isArr = Array.isArray(arr);
+      const isLength = length.includes(arr.length);
+      const isType = arr[0] >= 0 && arr[0] <= this.mapTypeAndLayer.length - 1;
+      const isLayer = arr[1] >=0 && arr[1] <= this.mapTypeAndLayer[arr[0]]?.layer.length - 1;
+
+      if(!isArr || !isLength)return false;
+
+      if(!isType || !isLayer){
+        const type = this.mapTypeActive;
+        const layer = this.mapStyleActive;
+        this.mapTypeCopy = [this.mapTypeAndLayer[type]];
+        this.mapStyleCopy = [this.mapTypeAndLayer[type]?.layer[layer]];
+        this.mapStyleActive = this.mapStyleCopy[0]?.id;
+        return false;
+      }
+      if(isType && !isLayer){
+        this.mapTypeActive = arr[0];
+        this.mapTypeCopy = [this.mapTypeAndLayer[arr[0]]];
+        return 0;
+      }
+      if(isLayer && !isType){
+        this.mapStyleCopy = [this.mapTypeAndLayer[arr[0]]?.layer[arr[1]]];
+        this.mapStyleActive = this.mapStyleCopy[0].id;
+        return 1;
+      }
+      if(isType && isLayer){
+        this.mapTypeActive = arr[0];
+        this.mapTypeCopy = [this.mapTypeAndLayer[arr[0]]];
+        this.mapStyleCopy = [this.mapTypeAndLayer[arr[0]]?.layer[arr[1]]];
+        this.mapStyleActive = this.mapStyleCopy[0]?.id;
+        return  true
+      }
+      return false;
+    },
+    changeExpand() {
+      this.isExpand = !this.isExpand;
+      if (this.isExpand) {
+        this.mapTypeCopy = this.mapTypeAndLayer.filter((v, i) => this.mapTypeActive === i);
+        if (!this.isTop) {
+          this.isTop = true;
+          this.mapStyleCopy = this.mapTypeAndLayer[this.mapTypeActive].layer.filter((v) => this.mapStyleActive === v.id);
+        }
+        return;
+      }
+      this.mapTypeCopy = [...this.mapTypeAndLayer];
+    },
+    changeDirectionArrow() {
+      this.isTop = !this.isTop;
+      const active = this.mapTypeActive;
+      const mapStyle = this.mapTypeAndLayer[active].layer;
+      if (this.isTop) {
+        this.mapStyleCopy = mapStyle.filter((v) => active === v.id);
+        return;
+      }
+      this.mapStyleCopy = [...mapStyle];
+    },
+    mapTypeClick({id}) {
+      if (this.mapTypeActive === id || this.isExpand) return;
+      const layer = this.mapTypeAndLayer[id].layer;
+      this.mapTypeActive = id;
+      this.mapStyleActive = layer[layer.length - 1].id;
+      if(!this.isTop){
+        this.mapStyleCopy = layer;
+      }else {
+        this.mapStyleCopy = layer.filter((v) => this.mapStyleActive === v.id);
+      }
+      this.$emit('changeSwitchMap', {
+        mapType: this.mapTypeActive,
+        layerType: this.mapStyleActive
+      });
+    },
+    mapStyleClick({id}) {
+      if (this.mapStyleActive === id || this.isTop) return;
+      this.mapStyleActive = id;
+      this.$emit('changeSwitchMap', {
+        mapType: this.mapTypeActive,
+        layerType: this.mapStyleActive
+      });
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.switch-map {
+  ul {
+    list-style: none;
+  }
+
+  .top {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    border-radius: 8px;
+    margin-top: 10px;
+    background-color: white;
+
+    p {
+      font-size: 18px;
+      cursor: pointer;
+      margin-left: 8px;
+    }
+
+    ul {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      li {
+        width: 98px;
+        text-align: center;
+        cursor: pointer;
+
+        span {
+          width: 100%;
+          height: 100%;
+        }
+
+        i {
+          margin-right: 6px;
+        }
+      }
+    }
+  }
+
+  .bottom {
+    width: 100px;
+    border-radius: 8px;
+    padding: 0 10px;
+    margin-top: 20px;
+    box-sizing: border-box;
+    background-color: white;
+
+    li {
+      cursor: pointer;
+      text-align: center;
+      border-bottom: #EFEFEF 1px solid;
+
+      &:nth-last-child(1) {
+        border-bottom: 0;
+      }
+    }
+  }
+
+  .marginLeft {
+    margin-left: 32px;
+  }
+
+  .color {
+    color: #1890FF;
+  }
+}
+</style>

package/src/config/setting.js

@@ -0,0 +1,40 @@
+// 不显示侧栏的路由
+export const HIDE_SIDEBARS = [];
+
+// 不显示页脚的路由
+export const HIDE_FOOTERS = [
+  '/system/dictionary',
+  '/system/organization',
+  '/form/advanced',
+  '/example/choose'
+];
+
+// 页签同路由不同参数可重复打开的路由
+export const REPEATABLE_TABS = ['/system/user-info'];
+
+// 不需要登录的路由
+export const WHITE_LIST = ['/login', '/forget'];
+
+// 直接指定菜单数据
+export const USER_MENUS = null;
+
+// token传递的header名称
+export const TOKEN_HEADER_NAME = 'Authorization';
+
+// token存储的名称
+export const TOKEN_STORE_NAME = 'access_token';
+
+// 主题配置存储的名称
+export const THEME_STORE_NAME = 'theme';
+
+// 首页名称, 为空则取第一个菜单的名称
+export const HOME_TITLE = '主页';
+
+// 首页路径, 为空则取第一个菜单的地址
+export const HOME_PATH = null;
+
+// 顶栏是否显示主题设置按钮
+export const ENABLE_SETTING = true;
+
+// 开启多页签后是否缓存组件
+export const TAB_KEEP_ALIVE = process.env.NODE_ENV !== 'development';

package/src/directives/index.js

@@ -0,0 +1,4 @@
+import map from './map';
+
+
+export { map };

package/src/directives/map.js

@@ -0,0 +1,41 @@
+import { SvgModel, geo2svg } from 'ry-map';
+
+export default {
+  install(Vue) {
+    Vue.directive('lmap', {
+      bind: function (el, binding, vnode) {
+        const that = vnode.context;
+        that[binding.arg](el);
+      }
+    });
+
+    Vue.directive('lGeoSvg', {
+      inserted: function (el, binding, vnode) {
+        let {
+          geoJSON,
+          svgModel = new SvgModel(),
+          isStringConvertGeoJso = true
+        } = binding.value;
+
+        if (isStringConvertGeoJso) {
+          el.innerHTML = geo2svg(JSON.parse(geoJSON), svgModel);
+        } else {
+          el.innerHTML = geo2svg(geoJSON, svgModel);
+        }
+      },
+      update: function (el, binding, vnode) {
+        //组件更新
+        let {
+          geoJSON,
+          svgModel = new SvgModel(),
+          isStringConvertGeoJso = true
+        } = binding.value;
+        if (isStringConvertGeoJso) {
+          el.innerHTML = geo2svg(JSON.parse(geoJSON), svgModel);
+        } else {
+          el.innerHTML = geo2svg(geoJSON, svgModel);
+        }
+      }
+    });
+  }
+};

package/src/layout/components/footer.vue

@@ -0,0 +1,35 @@
+<!-- 页脚 -->
+<template>
+  <div class="ele-text-center" style="padding: 16px 0">
+    <div>
+      <a target="_blank" class="ele-text-secondary" href="https://eleadmin.com">
+        {{ $t('layout.footer.website') }}
+      </a>
+      <em />
+      <a
+        target="_blank"
+        class="ele-text-secondary"
+        href="https://eleadmin.com/doc/eleadmin/"
+      >
+        {{ $t('layout.footer.document') }}
+      </a>
+      <em />
+      <a
+        target="_blank"
+        class="ele-text-secondary"
+        href="https://eleadmin.com/goods/8"
+      >
+        {{ $t('layout.footer.authorization') }}
+      </a>
+    </div>
+    <div class="ele-text-secondary" style="margin-top: 8px">
+      {{ $t('layout.footer.copyright') }}
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'EleFooter'
+  };
+</script>