@supermapgis/vue-iclient-leaflet 11.2.1 → 11.3.0

package/src/common/image/Image.vue

@@ -1,22 +1,36 @@
 <template>
   <div class="sm-component-image" :style="[getBackgroundStyle, getTextColorStyle]">
-    <a
-      :class="['sm-component-image__link', realHref ? '': 'sm-component-image__noLink']"
-      :href="realHref"
-      :target="target"
-    >
-      <div v-if="src" class="sm-component-image__content" :style="[repeatStyle,imgUrl]"></div>
+    <a :class="['sm-component-image__link']" :href="realHref" @click="handleLinkClick" :target="target">
+      <div v-if="src" @click="startPreview" class="sm-component-image__content" :style="[repeatStyle, imgUrl]">
+        <!-- 用img标签确保没有给定宽高时，能使用src图片的宽高 -->
+        <img :src="src" style="visibility: hidden; max-width: 100%; max-height: 100%" />
+      </div>
       <i v-else class="sm-components-icon-tupian sm-component-image__defaultImg"></i>
     </a>
+    <sm-modal
+      v-model="previewVisible"
+      :zIndex="1009"
+      centered
+      width="50%"
+      :dialogClass="fullScreenStyle.dialogClass"
+      :dialogStyle="fullScreenStyle.dialogStyle"
+      :bodyStyle="fullScreenStyle.bodyStyle"
+      :footer="null"
+    >
+      <img :src="src" @click="endPreview" :style="{ 'object-fit': 'contain', width: '100%', height: '100%' }" />
+    </sm-modal>
   </div>
 </template>
 
 <script>
 import Theme from 'vue-iclient/src/common/_mixin/Theme';
 import { parseUrl } from 'vue-iclient/src/common/_utils/util';
+import SmModal from 'vue-iclient/src/common/modal/Modal.vue';
+import Message from 'vue-iclient/src/common/message/index.js';
 
 export default {
   name: 'SmImage',
+  components: { SmModal },
   mixins: [Theme],
   props: {
     src: {
@@ -30,6 +44,10 @@ export default {
       type: String,
       default: ''
     },
+    previewMode: {
+      type: String,
+      default: 'none'
+    },
     target: {
       type: String,
       default: '_self'
@@ -37,12 +55,18 @@ export default {
   },
   data() {
     return {
+      previewVisible: false,
       repeatOption: {
         center: {
           backgroundRepeat: 'no-repeat',
           backgroundPosition: 'center',
           backgroundSize: 'contain'
         },
+        left: {
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'left center',
+          backgroundSize: 'contain'
+        },
         noRepeat: {
           backgroundSize: '100% 100%',
           backgroundRepeat: 'no-repeat'
@@ -63,6 +87,27 @@ export default {
     };
   },
   computed: {
+    fullScreenStyle() {
+      return this.previewMode === 'full'
+        ? {
+          dialogStyle: {
+            backgroundColor: 'transparent',
+            height: '100%'
+          },
+          dialogClass: 'sm-component-image__full',
+          bodyStyle: {
+            padding: 0,
+            width: '100%',
+            height: '100%'
+          }
+        }
+        : {
+          dialogClass: 'sm-component-image__preview',
+          bodyStyle: {
+            padding: 0
+          }
+        };
+    },
     repeatStyle() {
       return this.repeatOption[this.repeat];
     },
@@ -78,6 +123,23 @@ export default {
       }
       return href;
     }
+  },
+  methods: {
+    handleLinkClick(e) {
+      if (!this.href) {
+        e.preventDefault();
+      }
+    },
+    startPreview() {
+      if (this.previewMode === 'none') {
+        return;
+      }
+      Message.info(this.previewMode === 'popup' ? this.$t('info.pressEscToExit') : this.$t('info.pressEscOrClickToExit'), 3);
+      this.previewVisible = true;
+    },
+    endPreview() {
+      this.previewVisible = false;
+    }
   }
 };
 </script>

package/src/common/image/style/image.scss

@@ -17,6 +17,38 @@
       cursor: pointer;
     }
   }
+  @include e(preview) {
+    .sm-component-modal-content {
+      .sm-component-modal-close {
+        margin-left: -64px;
+        .sm-component-modal-close-x {
+          font-size: 40px;
+        }
+      }
+     
+    }
+  }
+  @include e(full) {
+    width: 100% !important;
+    padding: 0 !important;
+    .sm-component-modal-content {
+      background-color: transparent !important;
+      box-shadow: none !important;
+      width: 100%;
+      height: 100%;
+      .sm-component-modal-close {
+        display: none;
+      }
+      .sm-component-modal-close {
+        margin-left: -64px;
+        .sm-component-modal-close-x {
+          font-size: 40px;
+        }
+      }
+     
+    }
+  }
+
   @include e(noLink){
     pointer-events: none;
   }

package/src/common/message/style/message.scss

@@ -4,6 +4,7 @@
 @include b(message) {
   &-notice-content {
     background: $message-background;
+    color: $text-color-active;
   }
 
   &-error .#{$iconfont-css-prefix} {

package/src/common/modal/style/modal.scss

@@ -3,12 +3,32 @@
 @import '../../_utils/style/theme/theme.scss';
 
 @include b (modal) {
+  $modal-prefix: &;
+
   @include e(content, '-') {
     background-color: $modal-content-bg;
+
+    #{$modal-prefix}-header {
+      padding: 14px 24px;
+      border-color: $border-color-secondary;
+      #{$modal-prefix}-title {
+        line-height: 24px;
+      }
+    }
+    #{$modal-prefix}-footer {
+      padding: 10px 24px;
+      border-color: $border-color-secondary;
+    }
   }
 
   @include e(close, '-') {
     color: $text-color-secondary;
+    &-x {
+      line-height: 52px;
+      height: 52px;
+      width: 64px;
+    }
+
   }
 
   @include e(confirm, '-') {
@@ -19,5 +39,21 @@
     &-confirm &-body > .#{$iconfont-css-prefix} {
       color: $warning-color;
     }
+    &-body &-title {
+      line-height: 24px;
+    }
+    &-body {
+      .#{$iconfont-css-prefix} {
+        margin-right: 12px;
+        font-size: 24px;
+        
+        + #{$modal-prefix}-title + #{$modal-prefix}-content {
+          margin-left: 36px;
+        }
+      }
+    }
+    #{$modal-prefix}-body {
+      padding: 20px 24px;
+    }
   }
 }

package/src/common/notification/style/notification.scss

@@ -3,7 +3,9 @@
 
 @include b(notification) {
   &-notice {
+    $notice-prefix: &;
     background: $message-background;
+    padding: 20px 24px 24px;
 
     &-message {
       color: $heading-color;
@@ -11,6 +13,7 @@
 
     @at-root {
       .#{$iconfont-css-prefix}#{&}-icon {
+        margin-left: 0;
         &-warning {
           color: $warning-color;
         }
@@ -26,5 +29,11 @@
         color: $text-color;
       }
     }
+
+    &-with-icon {
+      #{$notice-prefix}-message, #{$notice-prefix}-description {
+        margin-left: 36px;
+      }
+    }
   }
 }

package/src/common/slideshow/Slideshow.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import type { CreateElement, VNode } from 'vue';
+import type { CreateElement } from 'vue';
 import Theme from 'vue-iclient/src/common/_mixin/Theme';
 import Swiper from './Swiper';
 import BaseCard from 'vue-iclient/src/common/_mixin/Card';
@@ -11,22 +11,23 @@ import { addListener, removeListener } from 'resize-detector';
 import 'swiper/swiper-bundle.min.css';
 
 interface swiperOptionsType {
-  initialSlide: Number;
-  direction: String;
-  speed: Number;
-  loopedSlides: Number;
-  loop: Boolean;
-  grabCursor: Boolean;
-  mousewheel: Boolean;
-  keyboard: Boolean;
-  autoplay: Boolean | Object;
-  effect: String;
+  initialSlide: number;
+  direction: string;
+  speed: number;
+  loopedSlides: number;
+  loop: boolean;
+  grabCursor: boolean;
+  mousewheel: boolean;
+  keyboard: boolean;
+  autoplay: boolean | Object;
+  effect: string;
   navigation?: Object;
   pagination?: Object;
   scrollbar?: Object;
-  observer: Boolean;
-  observeParents: Boolean;
-  observeSlideChildren: Boolean;
+  observer: boolean;
+  observeParents: boolean;
+  observeSlideChildren: boolean;
+  on: Object;
 }
 
 @Component({
@@ -39,7 +40,7 @@ interface swiperOptionsType {
 class Slideshow extends Mixins(Theme, BaseCard) {
   __resizeHandler: Function;
   swiper: any;
-  isRefresh: boolean = true;
+  swiperCmptKey: number = +new Date();
   manualUpdateProps: string[] = [
     'speed',
     'loop',
@@ -52,8 +53,6 @@ class Slideshow extends Mixins(Theme, BaseCard) {
     'direction'
   ];
 
-  activeIndexData: number = 0;
-
   // 当 loop 为 true && effect 为 cube, 幻灯片页数等于3会出现重叠。
   loopedSlides: number = 3;
 
@@ -89,7 +88,7 @@ class Slideshow extends Mixins(Theme, BaseCard) {
 
   get swiperOptions() {
     let options: swiperOptionsType = {
-      initialSlide: this.defaultActiveIndex,
+      initialSlide: this.activeIndex ?? this.defaultActiveIndex,
       direction: this.direction,
       speed: this.speed,
       loop: this.loop,
@@ -101,7 +100,10 @@ class Slideshow extends Mixins(Theme, BaseCard) {
       effect: this.effect,
       observer: true,
       observeParents: true,
-      observeSlideChildren: true
+      observeSlideChildren: true,
+      on: {
+        init: this.slideInit
+      }
     };
     this.navigation && (options.navigation = this.navigation);
     this.pagination && (options.pagination = this.pagination);
@@ -134,13 +136,7 @@ class Slideshow extends Mixins(Theme, BaseCard) {
     this.autoResizeHandler();
   }
 
-  created() {
-    this.activeIndexData = this.defaultActiveIndex || this.activeIndex;
-  }
-
   mounted() {
-    // @ts-ignore
-    this.swiper = this.$refs.mySwiper.$swiper;
     this.watchOptions();
     this.autoResizeHandler();
   }
@@ -150,6 +146,12 @@ class Slideshow extends Mixins(Theme, BaseCard) {
     removeListener(this.$el, this.__resizeHandler);
   }
 
+  slideInit(swiper: any) {
+    this.swiper = swiper;
+    this.goTo(this.swiperOptions.initialSlide, 0);
+    this.$emit('init', swiper);
+  }
+
   slideChange() {
     let changeParameter = {
       progress: this.swiper.progress,
@@ -159,62 +161,11 @@ class Slideshow extends Mixins(Theme, BaseCard) {
     };
     this.$emit('change', changeParameter);
     this.$emit('indexChange', this.swiper.realIndex);
-    this.activeIndexData = this.swiper.realIndex;
   }
 
   _activeIndexChangedHandler(newIndex: number) {
-    const prevActiveIndexData = this.activeIndexData;
-    if (prevActiveIndexData === newIndex) {
-      return;
-    }
-    this.activeIndexData = newIndex;
-    if (this.loop) {
-      const changeType = this._getChangeType(newIndex, prevActiveIndexData);
-      if (['next', 'loopToFirst'].includes(changeType)) {
-        this.next();
-        return;
-      }
-      if (['prev', 'loopToLast'].includes(changeType)) {
-        this.prev();
-        return;
-      }
-    }
-    this.goTo(newIndex, this.speed);
-  }
-
-  _getChangeType(newIndex, oldIndex) {
-    const childrenLength = this._getChildrenLength();
-    const offset = newIndex - oldIndex;
-    if (offset === 1) {
-      return 'next';
-    }
-    if (offset === -1) {
-      return 'prev';
-    }
-    if (oldIndex === childrenLength - 1 && newIndex === 0) {
-      return 'loopToFirst';
-    }
-    if (oldIndex === 0 && newIndex === childrenLength - 1) {
-      return 'loopToLast';
-    }
-    return 'jump';
-  }
-
-  _observerUpdate(swiper, mutationRecord) {
-    if (mutationRecord.type === 'childList') {
-      this.goTo(this.activeIndexData, 0);
-      this.$emit('childrenlistchange');
-    }
-  }
-
-  _reload() {
-    this.isRefresh = false;
     this.$nextTick(() => {
-      this.isRefresh = true;
-      this.$nextTick(() => {
-        // @ts-ignore
-        this.swiper = this.$refs.mySwiper.$swiper;
-      });
+      this.goTo(newIndex, 0);
     });
   }
 
@@ -231,7 +182,7 @@ class Slideshow extends Mixins(Theme, BaseCard) {
     this.swiper.slidePrev(speed);
   }
 
-  goTo(index: number, speed?: number) {
+  goTo(index: number, speed: number) {
     if (this.swiper) {
       this.loop ? this.swiper.slideToLoop(index, speed) : this.swiper.slideTo(index, speed);
     }
@@ -255,7 +206,7 @@ class Slideshow extends Mixins(Theme, BaseCard) {
         item,
         function (newVal, oldVal) {
           if (!isequal(newVal, oldVal)) {
-            this._reload();
+            this.swiperCmptKey = +new Date();
           }
         },
         { deep: true }
@@ -313,23 +264,19 @@ class Slideshow extends Mixins(Theme, BaseCard) {
       textColor: this.textColor,
       splitLine: this.splitLine
     };
-    let SwiperCompt: VNode | null = null;
-    if (this.isRefresh) {
-      SwiperCompt = h(
-        // @ts-ignore
-        Swiper,
-        {
-          domProps: { realIndex: this.activeIndex },
-          props: { options: this.swiperOptions },
-          on: {
-            slideChange: this.slideChange,
-            observerUpdate: this._observerUpdate
-          },
-          ref: 'mySwiper'
+    const SwiperCompt = h(
+      // @ts-ignore
+      Swiper,
+      {
+        domProps: { realIndex: this.activeIndex },
+        props: { options: this.swiperOptions },
+        on: {
+          slideChange: this.slideChange
         },
-        slots
-      );
-    }
+        key: this.swiperCmptKey
+      },
+      slots
+    );
     return h(
       'sm-collapse-card',
       {

package/src/common/slideshow/Swiper.js

@@ -26,4 +26,4 @@ SwiperClass.use([
 const { Swiper, SwiperSlide } = getAwesomeSwiper(SwiperClass);
 
 export default Swiper;
-export { SwiperSlide };
+export { SwiperSlide, SwiperClass };

package/src/common/table/style/table.scss

@@ -7,6 +7,7 @@
   
   &-thead > tr > th {
     background: $table-header-bg;
+    position: relative;
     // .#{$iconfont-css-prefix}-filter,
     // #{$table-prefix}-filter-icon {
     //   color: $table-header-icon-color;
@@ -116,6 +117,41 @@
       }
     }
   }
+  &:not(&-bordered) {
+    #{$table-prefix}-thead > tr > th::after {
+      content: "";
+      position: absolute;
+      top: 50%;
+      right: 0;
+      width: 1px;
+      height: 14px;
+      background-color: $border-color-secondary;
+      transform: translateY(-50%);
+    }
+  }
+
+  &-thead > tr > th,
+  &-tbody > tr > td {
+    padding: 13px 24px;
+  }
+
+  &-middle {
+    > #{$table-prefix}-content > #{$table-prefix}-body > table {
+      > #{$table-prefix}-thead > tr > th,
+      > #{$table-prefix}-tbody > tr > td {
+        padding: 9px 24px;
+      }
+    }
+  }
+
+  &-small {
+    > #{$table-prefix}-content > #{$table-prefix}-body > table {
+      > #{$table-prefix}-thead > tr > th,
+      > #{$table-prefix}-tbody > tr > td {
+        padding: 5px 24px;
+      }
+    }
+  }
 
   // &-selection {
   //   .#{$iconfont-css-prefix}-down {

package/src/common/table-popup/TablePopup.vue

@@ -9,6 +9,7 @@
       :columns="columns"
       :rowKey="(record, index) => index"
       :pagination="false"
+      :showHeader="showHeader"
     />
   </div>
 </template>
@@ -39,6 +40,10 @@ export default {
     splitLine: {
       type: Boolean,
       default: true
+    },
+    showHeader: {
+      type: Boolean,
+      default: true
     }
   },
   watch: {

package/src/common/tooltip/style/tooltip.scss

@@ -2,4 +2,7 @@
 @import '../../_utils/style/theme/theme.scss';
 
 @include b (tooltip) {
+  &-inner {
+    padding: 6px 12px;
+  }
 }

package/src/common/video-player/style/video-player.scss

@@ -226,6 +226,7 @@
   }
 }
 .sm-component-video-player-modal {
+  background: rgba(0, 0, 0, 0.7);
   .sm-component-modal-close {
     color: #a2a3a5;
     right: -5%;
@@ -257,7 +258,6 @@
       }
     }
   }
-  background: rgba(0, 0, 0, 0.7);
 }
 .sm-component-video-full-fill{
   video{

package/src/leaflet/entrys.json

@@ -59,7 +59,6 @@
   "_mixin/ThirdService": "vue-iclient/src/common/_mixin/ThirdService.ts",
   "_mixin/Timer": "vue-iclient/src/common/_mixin/Timer.ts",
   "_mixin/VmUpdater": "vue-iclient/src/common/_mixin/VmUpdater.ts",
-  "_mixin/WebMapBase": "vue-iclient/src/common/web-map/WebMapBase.ts",
   "_mixin/GridLayer": "vue-iclient/src/leaflet/_mixin/GridLayer.js",
   "_mixin/Layer": "vue-iclient/src/leaflet/_mixin/Layer.js",
   "_mixin/map-getter": "vue-iclient/src/leaflet/_mixin/map-getter.ts",
@@ -93,7 +92,6 @@
   "_utils/RestService": "vue-iclient/src/common/_utils/RestService.js",
   "_utils/statistics": "vue-iclient/src/common/_utils/statistics.js",
   "_utils/util": "vue-iclient/src/common/_utils/util.js",
-  "_utils/WebMapService": "vue-iclient/src/common/_utils/WebMapService.ts",
   "_utils/vue-types/index": "vue-iclient/src/common/_utils/vue-types/index.js",
   "_utils/vue-types/utils": "vue-iclient/src/common/_utils/vue-types/utils.js",
   "_utils/style/theme/chart": "vue-iclient/src/common/_utils/style/theme/chart.js",

package/src/leaflet/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@supermapgis/vue-iclient-leaflet",
   "description": "SuperMap iClient for Vue.js",
-  "version": "11.2.1",
+  "version": "11.3.0",
   "homepage": "http://iclient.supermap.io",
   "main": "lib/index",
   "dependencies": {
@@ -13,7 +13,6 @@
     "@turf/length": "^6.0.2",
     "@turf/rhumb-bearing": "^6.0.1",
     "@turf/transform-scale": "^5.1.5",
-    "@turf/meta": "^6.5.0",
     "@types/geojson": "^7946.0.7",
     "@types/leaflet": "^1.5.5",
     "@types/node": "^12.0.3",
@@ -40,14 +39,13 @@
     "lodash.isnumber": "^3.0.3",
     "lodash.isplainobject": "^4.0.6",
     "lodash.max": "^4.0.1",
-    "lodash.min": "^4.0.1",
     "lodash.merge": "^4.6.1",
     "lodash.orderby": "^4.6.0",
     "lodash.tonumber": "^4.0.3",
     "lodash.uniqueid": "^4.0.1",
     "mux.js": "^5.6.7",
     "omit.js": "^2.0.2",
-    "proj4": "^2.6.0",
+    "proj4": "^2.8.0",
     "resize-detector": "^0.2.0",
     "simple-statistics": "^7.8.3",
     "swiper": "^6.8.4",

package/src/leaflet/web-map/WebMap.vue

@@ -165,7 +165,7 @@ class SmWebMap extends Mixins(VmUpdater, MapEvents) {
          */
         this.load({ map: e.map });
       },
-      getmapinfofailed: e => {
+      mapcreatefailed: e => {
         /**
          * @event getMapFailed
          * @desc 获取 WebMap 地图信息失败。
@@ -176,7 +176,7 @@ class SmWebMap extends Mixins(VmUpdater, MapEvents) {
         Message.error(e.error.message);
         this.spinning = false;
       },
-      getlayerdatasourcefailed: e => {
+      layercreatefailed: e => {
         /**
          * @event getLayerDatasourceFailed
          * @desc 获取图层数据失败。
@@ -193,9 +193,9 @@ class SmWebMap extends Mixins(VmUpdater, MapEvents) {
           Message.error(this.$t('webmap.getLayerInfoFailed'));
         }
       },
-      notsupportmvt: () => {
+      mvtnotsupport: () => {
         // @ts-ignore
-        Message.error('暂不支持加载矢量瓦片图层！');
+        Message.error(this.$t('webmap.mvtNotSupport'));
         this.spinning = false;
       }
     });