@supermapgis/vue-iclient-leaflet 11.2.0

package/src/common/table-popup/index.js

@@ -0,0 +1,9 @@
+import TablePopup from './TablePopup';
+import init from 'vue-iclient/src/init';
+
+TablePopup.install = function(Vue, opts) {
+  init(Vue, opts);
+  Vue.component(TablePopup.options ? TablePopup.options.name : TablePopup.name, TablePopup);
+};
+
+export default TablePopup;

package/src/common/table-popup/style/index.js

@@ -0,0 +1,5 @@
+import 'vue-iclient/src/common/_assets/iconfont/icon-sm-components.css';
+import 'vue-iclient/src/common/_utils/style/common/common.scss';
+import 'vue-iclient/src/common/table/style/index.js';
+
+import './table-popup.scss';

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

@@ -0,0 +1,52 @@
+@import '../../_utils/style/mixins/mixins.scss';
+@import '../../_utils/style/theme/theme.scss';
+@import '../../table/style/table.scss';
+
+@include b(table-popup) {
+  $table-prefix: #{$ant-prefix}-table;
+  color: $text-color;
+  border-radius: 4px;
+  .#{$table-prefix}-thead > tr > th {
+    border-bottom: 1px solid $collapse-card-split-line;
+  }
+  &:not(.with-split-line) {
+    .#{$table-prefix}-thead > tr > th {
+      border-bottom: none;
+    }
+  }
+  @include e(table) {
+    &.#{$table-prefix}-wrapper {
+      .#{$table-prefix}-content {
+        max-height: 250px;
+        overflow: auto;
+        .#{$table-prefix}-placeholder {
+          background: transparent;
+          border-top: none;
+          color: inherit;
+          .#{$ant-prefix}-empty {
+            background-color: transparent;
+          }
+        }
+      }
+    }
+    &
+    .#{$table-prefix} {
+      color: inherit;
+      font-size: 12px;
+    }
+    .#{$table-prefix}-thead > tr, .#{$table-prefix}-tbody > tr {
+      & > th, & > td {
+        padding: 4px 16px;
+      }
+    }
+    .#{$table-prefix}-tbody > tr > td {
+      transition: all 0s, height 0s;
+      border-bottom-color: transparent;
+    }
+    .#{$table-prefix}-row {
+      &:hover {
+        color: $primary-color;
+      }
+    }
+  }
+}

package/src/common/tabs/TabPane.vue

@@ -0,0 +1,26 @@
+<script lang="ts">
+import { TabPane } from 'ant-design-vue/es/tabs';
+import VueTypes from 'vue-iclient/src/common/_utils/vue-types';
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import AntdRender from 'vue-iclient/src/common/_mixin/AntdRender';
+
+export const tabPaneTypes = {
+  active: VueTypes.bool,
+  destroyInactiveTabPane: VueTypes.bool,
+  forceRender: VueTypes.bool,
+  placeholder: VueTypes.any,
+  rootPrefixCls: VueTypes.string,
+  tab: VueTypes.any,
+  closable: VueTypes.bool,
+  disabled: VueTypes.bool
+};
+
+export default {
+  name: 'SmTabPane',
+  __ANT_TAB_PANE: true,
+  defaultComponent: TabPane,
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  props: tabPaneTypes
+};
+</script>

package/src/common/tabs/Tabs.vue

@@ -0,0 +1,41 @@
+<script lang="ts">
+import Tabs from 'ant-design-vue/es/tabs';
+import VueTypes from 'vue-iclient/src/common/_utils/vue-types';
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import AntdRender from 'vue-iclient/src/common/_mixin/AntdRender';
+
+export const tabsTypes = {
+  activeKey: VueTypes.oneOfType([VueTypes.string, VueTypes.number]),
+  animated: VueTypes.oneOfType([VueTypes.bool, VueTypes.object]),
+  defaultActiveKey: VueTypes.oneOfType([VueTypes.string, VueTypes.number]),
+  hideAdd: VueTypes.bool.def(false),
+  size: VueTypes.oneOf(['default', 'small', 'large']),
+  tabBarExtraContent: VueTypes.any,
+  tabBarStyle: VueTypes.object,
+  tabPosition: VueTypes.oneOf(['top', 'right', 'bottom', 'left']).def('top'),
+  type: VueTypes.oneOf(['line', 'card', 'editable-card']),
+  tabBarGutter: VueTypes.number
+};
+
+export default {
+  name: 'SmTabs',
+  defaultComponent: Tabs,
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  model: {
+    prop: 'activeKey',
+    event: 'change'
+  },
+  props: tabsTypes,
+  computed: {
+    extralListeners() {
+      const vm = this;
+      return {
+        change: function(value) {
+          vm.$emit('change', value);
+        }
+      };
+    }
+  }
+};
+</script>

package/src/common/tabs/index.js

@@ -0,0 +1,11 @@
+import TabPane from './TabPane';
+import Tabs from './Tabs';
+import init from 'vue-iclient/src/init';
+
+Tabs.install = function(Vue, opts) {
+  init(Vue, opts);
+  Vue.component(TabPane.options ? TabPane.options.name : TabPane.name, TabPane);
+  Vue.component(Tabs.options ? Tabs.options.name : Tabs.name, Tabs);
+};
+
+export default Tabs;

package/src/common/tabs/style/index.js

@@ -0,0 +1,4 @@
+import 'vue-iclient/src/common/_assets/iconfont/icon-sm-components.css';
+import 'vue-iclient/src/common/_utils/style/common/common.scss';
+import './index.less';
+import './tabs.scss';

package/src/common/tabs/style/index.less

@@ -0,0 +1,3 @@
+@import 'ant-design-vue/es/tabs/style/index.less';
+@import 'ant-design-vue/es/style/index.less';
+@import '../../_utils/style/theme/antdVar.less';

package/src/common/tabs/style/tabs.scss

@@ -0,0 +1,95 @@
+@import '../../_utils/style/mixins/mixins.scss';
+@import '../../_utils/style/theme/theme.scss';
+
+@include b(tabs) {
+  $prefix: &;
+
+  @include e(bar, '-') {
+    border-bottom-color: $border-color-base;
+  }
+
+  @include e(bottom, '-') {
+    & &-bar {
+      border-top-color: $border-color-base;
+    }
+  }
+
+  @include e(tab-prev tab-next, '-') {
+    color: $text-color-secondary;
+  }
+
+  @include e(left-bar, '-') {
+    #{$prefix} & {
+      border-right-color: $border-color-base;
+    }
+  }
+
+  @include e(right-bar, '-') {
+    #{$prefix} & {
+      border-left-color: $border-color-base;
+    }
+  }
+
+  @include e(left-content, '-') {
+    #{$prefix} & {
+      border-left-color: transparent;
+    }
+  }
+
+  @include e(right-content, '-') {
+    #{$prefix} & {
+      border-right-color: transparent;
+    }
+  }
+
+  &#{&}-card {
+    #{$prefix}-card-bar {
+      #{$prefix}-tab {
+        background: $tabs-card-head-background;
+        border-color: $border-color-base;
+        #{$prefix}-close-x {
+          color: $text-color-secondary;
+        }
+      }
+      #{$prefix}-tab-active {
+        background: transparent;
+        border-bottom-color: $body-background-without-opacity;
+      }
+      #{$prefix}-tab-disabled {
+        #{$prefix}-close-x {
+          color: $disabled-color;
+          &:hover {
+            color: $disabled-color;
+          }
+        }
+      }
+    }
+  }
+
+  @include e(extra-content, '-') {
+    #{$prefix}-new-tab {
+      border-color: $border-color-base;
+    }
+  }
+
+  @include e(vertical, '-') {
+    &#{$prefix}-card {
+      #{$prefix}-card-bar {
+        &#{$prefix}-left-bar,
+        &#{$prefix}-right-bar {
+          #{$prefix}-tab {
+            border-bottom-color: $border-color-base;
+          }
+        }
+      }
+    }
+  }
+
+  & #{&}-card-bar#{&}-bottom-bar &-tab {
+    border-bottom-color: $border-color-base;
+  }
+
+  & #{&}-card-bar#{&}-bottom-bar &-tab-active {
+    color: $primary-color;
+  }
+}

package/src/common/text/Text.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="sm-component-text" :style="[customStyle, getBackgroundStyle, getTextColorStyle]">
+    <span v-if="href">
+      <a
+        :target="target"
+        :href="href"
+        class="sm-component-text__href"
+        :style="[getTextColorStyle]"
+      >{{ finalValue }}</a>
+    </span>
+    <span v-else class="sm-component-text__span">{{ finalValue }}</span>
+  </div>
+</template>
+
+<script>
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import Timer from 'vue-iclient/src/common/_mixin/Timer';
+import ThirdService from 'vue-iclient/src/common/_mixin/ThirdService';
+
+export default {
+  name: 'SmText',
+  mixins: [Theme, Timer, ThirdService],
+  props: {
+    fontStyle: {
+      type: Object
+    },
+    title: {
+      type: String
+    },
+    href: {
+      type: String,
+      default: ''
+    },
+    target: {
+      type: String,
+      default: '_self'
+    }
+  },
+  data() {
+    return {
+      finalValue: this.title
+    };
+  },
+  computed: {
+    customStyle() {
+      let style = Object.assign({}, this.fontStyle);
+      if (style.textAlign && !style.justifyContent) {
+        const textAlign = style.textAlign;
+        style.justifyContent = textAlign === 'left' ? 'flex-start' : textAlign === 'right' ? 'flex-end' : 'center';
+        delete style.textAlign;
+      }
+      return style;
+    }
+  },
+  watch: {
+    title(val) {
+      this.finalValue = val;
+    }
+  },
+  beforeDestroy() {
+    this.restService && this.restService.remove('getdatasucceeded');
+  },
+  methods: {
+    timing() {
+      this.getData();
+    }
+  }
+};
+</script>

package/src/common/text/index.js

@@ -0,0 +1,9 @@
+import Text from './Text';
+import init from 'vue-iclient/src/init';
+
+Text.install = function(Vue, opts) {
+  init(Vue, opts);
+  Vue.component(Text.options ? Text.options.name : Text.name, Text);
+};
+
+export default Text;

package/src/common/text/style/index.js

@@ -0,0 +1,4 @@
+import 'vue-iclient/src/common/_assets/iconfont/icon-sm-components.css';
+import 'vue-iclient/src/common/_utils/style/common/common.scss';
+
+import './text.scss';

package/src/common/text/style/text.scss

@@ -0,0 +1,23 @@
+@import '../../_utils/style/mixins/mixins.scss';
+@import '../../_utils/style/theme/theme.scss';
+
+@include b(text) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1.5;
+  padding: 4px;
+  color: $text-color;
+  background: $component-background;
+  @include e(href) {
+    display: inline-block;
+    color: $text-color;
+    &:hover {
+      cursor: pointer;
+      color: $hover-color !important;
+    }
+  }
+  @include e(span) {
+    white-space: pre-wrap;
+  }
+}

package/src/common/time-line/TimeLine.vue

@@ -0,0 +1,260 @@
+<template>
+  <div class="sm-component-time-line" :style="[getBackgroundStyle]">
+    <v-chart
+      :id="chartId"
+      :ref="chartId"
+      :options="options"
+      :autoresize="true"
+      :style="{ width: '100%', height: '100%' }"
+      @timelinechanged="timelineChange"
+      @timelineplaychanged="timelineplaychanged"
+    />
+  </div>
+</template>
+
+<script lang='ts'>
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import ECharts from 'vue-echarts';
+import { Component, Prop, Mixins, Emit } from 'vue-property-decorator';
+import UniqueId from 'lodash.uniqueid';
+
+const ThemeStyleName = [
+  'primaryColor',
+  'avatarBackground',
+  'hoverColor',
+  'tooltipColor',
+  'tooltipBackground',
+  'shadowColor',
+  'sliderRailBackgroundColor'
+];
+@Component({
+  name: 'SmTimeLine',
+  components: {
+    'v-chart': ECharts
+  }
+})
+export default class SmTimeLine extends Mixins(Theme) {
+  chartId = UniqueId(`TimeLine-`);
+  timer: any = null;
+  playState: boolean = false;
+  hoverColor: string = '#e5666f';
+  tooltipColor: string = 'rgba(255, 255, 255, 0.85)';
+  primaryColor: string = '#e14d57';
+  avatarBackground: string = '#fff';
+  tooltipBackground: string = '#535353';
+  shadowColor: string = 'rgba(0, 0, 0, 0.35)';
+  sliderRailBackgroundColor: string = 'rgba(255, 255, 255, 0.25)';
+  themeStyleName: string[] = ThemeStyleName;
+
+  @Prop({ default: false }) autoPlay: boolean;
+  @Prop({ default: true }) loop: boolean;
+  @Prop({ default: 3000 }) playInterval: string | number;
+  @Prop({ default: 0 }) currentIndex: number;
+  @Prop({ default: 'auto' }) left: string | number;
+  @Prop({ default: 'auto' }) right: string | number;
+  @Prop({ default: 'auto' }) top: string | number;
+  @Prop({ default: 'auto' }) bottom: string | number;
+  @Prop({
+    default() {
+      return [];
+    }
+  })
+  data: Array<any>;
+
+  @Prop({
+    default() {
+      return {};
+    }
+  })
+  label: Object;
+
+  @Prop({
+    default() {
+      return {};
+    }
+  })
+  lineStyle: Object;
+
+  @Prop({
+    default() {
+      return {};
+    }
+  })
+  itemStyle: Object;
+
+  @Prop({
+    default() {
+      return { label: {} };
+    }
+  })
+  emphasis: Object;
+
+  @Prop({
+    default() {
+      return {};
+    }
+  })
+  checkpointStyle: Object;
+
+  @Prop({
+    default() {
+      return {};
+    }
+  })
+  controlStyle: Object;
+
+  @Prop() nextEnable: boolean | null;
+
+  get color() {
+    return this.getColor(0);
+  }
+
+  get options() {
+    let options = {
+      baseOption: {
+        timeline: {
+          axisType: 'category',
+          autoPlay: this.autoPlay,
+          playInterval: this.playInterval,
+          data: this.data,
+          currentIndex: this.currentIndex,
+          label: {
+            color: this.getTextColor,
+            fontSize: 12,
+            position: 15,
+            ...this.label
+          },
+          lineStyle: Object.assign({ color: this.sliderRailBackgroundColor }, this.lineStyle),
+          itemStyle: Object.assign(
+            {
+              itemSize: 13,
+              // @ts-ignore
+              color: (this.checkpointStyle && this.checkpointStyle.borderColor) || this.avatarBackground,
+              // @ts-ignore
+              borderColor: (this.checkpointStyle && this.checkpointStyle.color) || this.primaryColor,
+              borderWidth: 2
+            },
+            this.itemStyle
+          ),
+          controlStyle: Object.assign(
+            {
+              itemSize: 19,
+              itemGap: 10,
+              color: this.primaryColor,
+              borderColor: this.primaryColor,
+              borderWidth: 0,
+              opacity: 1,
+              shadowBlur: 0,
+              prevIcon:
+                'M16.9695,5.115 L16.9695,3.306 C16.9692323,3.23442582 16.9282399,3.16924789 16.8638436,3.13800611 C16.7994472,3.10676433 16.7228823,3.11490949 16.6665,3.159 L6.1005,11.409 C5.91865188,11.5505304 5.81230143,11.7680665 5.81230143,11.9985 C5.81230143,12.2289335 5.91865188,12.4464696 6.1005,12.588 L16.6665,20.841 C16.7228012,20.8856152 16.7997611,20.8938213 16.864204,20.8620808 C16.9286469,20.8303403 16.9690514,20.7643278 16.968,20.6925 L16.968,18.882 C16.9677279,18.7669965 16.9153205,18.6583202 16.8255,18.5865 L8.388,12 L16.8255,5.412 C16.9153205,5.34017977 16.9677279,5.23150348 16.968,5.1165 L16.9695,5.115 Z',
+              nextIcon:
+                'M172.373333 120.32V17.408A10.638222 10.638222 0 0 1 189.667556 9.045333L790.755556 478.378667a42.496 42.496 0 0 1 0 67.072L189.610667 1014.954667a10.581333 10.581333 0 0 1-17.180445-8.476445v-102.968889a21.617778 21.617778 0 0 1 8.078222-16.782222L660.593778 512 180.565333 137.216a21.617778 21.617778 0 0 1-8.078222-16.782222L172.373333 120.32z',
+              stopIcon:
+                'M10.0875,7.983 C9.66,7.983 9.312,8.2815 9.312,8.652 L9.312,15.348 C9.312,15.717 9.6585,16.017 10.0875,16.017 C10.515,16.017 10.8615,15.717 10.8615,15.348 L10.8615,8.652 C10.8615,8.2815 10.5135,7.983 10.0875,7.983 Z M13.9365,7.983 C13.509,7.983 13.1625,8.2815 13.1625,8.652 L13.1625,15.348 C13.1625,15.717 13.5075,16.017 13.9365,16.017 C14.3655,16.017 14.712,15.717 14.712,15.348 L14.712,8.652 C14.712,8.2815 14.364,7.983 13.9365,7.983 Z M12.012,1.5465 C6.2475,1.5465 1.5585,6.2355 1.5585,12 C1.5585,17.7645 6.2475,22.4535 12.012,22.4535 C17.7765,22.4535 22.4655,17.7645 22.4655,12 C22.4655,6.2355 17.7765,1.5465 12.012,1.5465 Z M12.012,20.9535 C7.0755,20.9535 3.0585,16.9365 3.0585,12 C3.0585,7.0635 7.0755,3.0465 12.012,3.0465 C16.9485,3.0465 20.9655,7.0635 20.9655,12 C20.9655,16.9365 16.9485,20.9535 12.012,20.9535 Z',
+              playIcon:
+                'M12.657,1.6635 C6.8925,1.6635 2.2035,6.3525 2.2035,12.117 C2.2035,17.8815 6.8925,22.5705 12.657,22.5705 C18.4215,22.5705 23.1105,17.8815 23.1105,12.117 C23.1105,6.3525 18.4215,1.6635 12.657,1.6635 Z M12.657,21.0705 C7.7205,21.0705 3.7035,17.0535 3.7035,12.117 C3.7035,7.1805 7.7205,3.1635 12.657,3.1635 C17.5935,3.1635 21.6105,7.1805 21.6105,12.117 C21.6105,17.0535 17.5935,21.0705 12.657,21.0705 Z M9.777,15.09 C9.777,15.915 10.362,16.2525 11.076,15.84 L16.2225,12.8685 C16.938,12.456 16.938,11.781 16.2225,11.3685 L11.076,8.3955 C10.3605,7.983 9.777,8.3205 9.777,9.1455 L9.777,15.09 Z'
+            },
+            this.controlStyle
+          ),
+          checkpointStyle: Object.assign(
+            {
+              color: this.primaryColor,
+              borderColor: this.avatarBackground,
+              borderWidth: 2,
+              symbolSize: 13
+            },
+            this.checkpointStyle
+          ),
+          emphasis: {
+            label: {},
+            itemStyle: {},
+            controlStyle: {},
+            ...(this.emphasis || {})
+          },
+          padding: 0,
+          left: this.left,
+          right: this.right,
+          top: this.top,
+          bottom: this.bottom
+        },
+        tooltip: {
+          position: function(point, params, dom, rect, size) {
+            return [point[0] - size.contentSize[0] / 2, '-15'];
+          },
+          backgroundColor: this.tooltipBackground,
+          textStyle: {
+            color: this.tooltipColor,
+            fontFamily: 'MicrosoftYaHei',
+            fontSize: 14
+          },
+          padding: [6, 8],
+          extraCssText: `0px 2px 7px 0px ${this.shadowColor}`
+        }
+      }
+    };
+    const { label, itemStyle, controlStyle } = options.baseOption.timeline;
+    const emphasisStyle = Object.assign(
+      {
+        label: {},
+        itemStyle: {},
+        controlStyle: {}
+      },
+      this.emphasis || {}
+    );
+    options.baseOption.timeline.emphasis.label = Object.assign({}, label, {
+      color: this.hoverColor,
+      ...emphasisStyle.label
+    });
+    options.baseOption.timeline.emphasis.itemStyle = Object.assign(
+      {},
+      { ...itemStyle, color: itemStyle.borderColor, borderColor: itemStyle.color },
+      emphasisStyle.itemStyle
+    );
+    options.baseOption.timeline.emphasis.controlStyle = Object.assign({}, controlStyle, emphasisStyle.controlStyle);
+    return Object.assign({}, options);
+  }
+
+  @Emit('timelinechanged')
+  timelineChange(val) {
+    if (typeof this.nextEnable === 'boolean') {
+      this.nextStep();
+    }
+    return val;
+  }
+
+  @Emit('timelineplaychanged')
+  timelineplaychanged(val) {
+    this.playState = val.playState;
+    return val;
+  }
+
+  setPlayState(status) {
+    if (this.$refs[this.chartId]) {
+      // @ts-ignore
+      this.$refs[this.chartId].chart.dispatchAction({
+        type: 'timelinePlayChange',
+        playState: status
+      });
+    }
+  }
+
+  nextStep() {
+    if (this.timer) {
+      clearInterval(this.timer);
+    }
+    const playState = this.playState;
+    this.setPlayState(false);
+    this.timer = setInterval(() => {
+      if (this.nextEnable) {
+        clearInterval(this.timer);
+        this.timer = null;
+        if (playState) {
+          setTimeout(() => {
+            this.setPlayState(true);
+          }, Number(this.playInterval));
+        }
+      }
+    }, 100);
+  }
+}
+</script>

package/src/common/time-line/index.js

@@ -0,0 +1,9 @@
+import TimeLine from './TimeLine';
+import init from 'vue-iclient/src/init';
+
+TimeLine.install = function(Vue, opts) {
+  init(Vue, opts);
+  Vue.component(TimeLine.options ? TimeLine.options.name : TimeLine.name, TimeLine);
+};
+
+export default TimeLine;

package/src/common/time-line/style/index.js

@@ -0,0 +1,4 @@
+import 'vue-iclient/src/common/_assets/iconfont/icon-sm-components.css';
+import 'vue-iclient/src/common/_utils/style/common/common.scss';
+
+import './time-line.scss';

package/src/common/time-line/style/time-line.scss

@@ -0,0 +1,10 @@
+@import '../../../common/_utils/style/mixins/mixins.scss';
+
+@include b(time-line) {
+  width: 578px;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  pointer-events: auto;
+  cursor: pointer;
+}