@supermapgis/vue-iclient-leaflet 11.2.0

package/src/common/time-picker/TimePicker.vue

@@ -0,0 +1,47 @@
+<script lang="ts">
+import TimePicker, { TimePickerProps } from 'ant-design-vue/es/time-picker';
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import VueTypes from 'vue-iclient/src/common/_utils/vue-types';
+import AntdRender from 'vue-iclient/src/common/_mixin/AntdRender';
+
+export const timepickerTypes = {
+  ...TimePickerProps,
+  align: {
+    type: Object,
+    default: () => ({ points: ['tl', 'bl'], offset: [0, 4] })
+  },
+  size: VueTypes.oneOf(['small', 'large', 'default', 'middle'])
+};
+
+export default {
+  name: 'SmTimePicker',
+  defaultComponent: TimePicker,
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: timepickerTypes,
+  computed: {
+    extralProps() {
+      return {
+        size: this.size === 'middle' ? undefined : this.size
+      };
+    },
+    componentClass() {
+      return {
+        'sm-component-time-picker-md': this.size === 'middle'
+      };
+    },
+    extralListeners() {
+      const vm = this;
+      return {
+        change: function(value) {
+          vm.$emit('change', value);
+        }
+      };
+    }
+  }
+};
+</script>

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

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

package/src/common/time-picker/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 './time-picker.scss';

package/src/common/time-picker/style/index.less

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

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

@@ -0,0 +1,69 @@
+@import '../../_utils/style/mixins/mixins.scss';
+@import '../../_utils/style/theme/theme.scss';
+
+@include b(time-picker) {
+  $prefix: &;
+  &:hover {
+    #{$prefix}-icon:not(:last-child) {
+      opacity: 0;
+    }
+  }
+
+  .anticon,
+  &-icon,
+  &-clear {
+    color: $text-color-secondary;
+  }
+  &-clear:hover {
+    color: $text-color;
+  }
+
+  &-input[disabled] + &-icon {
+    &, .anticon {
+      color: $disabled-color;
+    }
+  }
+
+  &-small {
+    #{$prefix}-input {
+      font-size: 12px;
+    }
+  }
+
+  @include e(md, '-') {
+    #{$prefix}-input {
+      height: 28px;
+      font-size: 12px;
+    }
+  }
+
+  @include e(panel, '-') {
+    $panel: &;
+    color: $text-color-active;
+    &-inner {
+      background-color: $select-dropdown-bg;
+    }
+    &-input {
+      background-color: $select-dropdown-bg;
+    }
+    &-select-option-selected {
+      $selected: &;
+      background-color: $selected-color;
+    }
+    &-select, &-addon {
+      border-color: $border-color-secondary;
+    }
+    &-select li {
+      padding: 0 0 0 16px;
+      &:not(#{$panel}-select-option-selected):hover{
+        background-color: $time-picker-item-hover-bg;
+      }
+      &:focus {
+        color: $text-color-active;
+      }
+    }
+    &-input-wrap {
+      display: none;
+    }
+  }
+}

package/src/common/time-range/TimeRange.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="sm-component-time-range" :style="[getBackgroundStyle]">
+    <v-chart
+      :id="chartId"
+      :ref="chartId"
+      :options="options"
+      :autoresize="true"
+      :style="{width: '100%', height: '100%'}"
+      @datazoom="dataZoomChanged"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { getColorWithOpacity } from 'vue-iclient/src/common/_utils/util';
+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 = ['headingColor', 'primaryColor', 'timeRangeBackground', 'textColorSecondary', 'handleColor'];
+
+@Component({
+  name: 'SmTimeRange',
+  components: {
+    'v-chart': ECharts
+  }
+})
+class SmTimeRange extends Mixins(Theme) {
+  chartId = UniqueId(`TimeRange-`);
+  headingColor: string = 'rgba(255, 255, 255, 0.85)';
+  primaryColor: string = '#e14d57';
+  timeRangeBackground: string = 'rgba(255, 255, 255, 0.08)';
+  textColorSecondary: string = 'rgba(255, 255, 255, 0.45)';
+  handleColor: string = '#d9d9d9';
+  themeStyleName: string[] = ThemeStyleName;
+
+  @Prop({ default: 0 }) startValue: string | number;
+  @Prop({ default: 1 }) endValue: string | number;
+  @Prop({
+    default() {
+      return [];
+    }
+  })
+  data: Array<any>;
+
+  @Prop() backgroundColor: string;
+  @Prop() borderColor: string;
+  @Prop() fillerColor: string;
+  @Prop({
+    default() {
+      return {};
+    }
+  })
+  textStyle: Object;
+
+  @Prop({
+    default() {
+      return {};
+    }
+  })
+  handleStyle: Object;
+
+  get color() {
+    return this.getColor(0);
+  }
+
+  get options() {
+    let options = {
+      dataZoom: [
+        {
+          show: true,
+          showDetail: true,
+          realtime: true,
+          type: 'slider',
+          startValue: this.startValue,
+          endValue: this.endValue,
+          left: 0,
+          top: 'middle',
+          right: 1,
+          backgroundColor: this.backgroundColor || this.timeRangeBackground || this.getBackground,
+          borderColor: this.borderColor || this.textColorSecondary,
+          fillerColor: this.fillerColor || this.primaryColor || getColorWithOpacity(this.getTextColor, 0.3),
+          textStyle: Object.assign(
+            {
+              fontFamily: 'MicrosoftYaHei',
+              fontSize: 12,
+              color: this.headingColor
+            },
+            this.textStyle || {}
+          ),
+          handleStyle: Object.assign({ color: this.handleColor }, this.handleStyle || {})
+        }
+      ],
+      xAxis: [
+        {
+          show: false,
+          type: 'category',
+          boundaryGap: false,
+          axisLine: { onZero: false },
+          data: this.data
+        }
+      ],
+      yAxis: [
+        {
+          show: false
+        }
+      ],
+      series: []
+    };
+    return Object.assign({}, options);
+  }
+
+  @Emit('datazoom')
+  dataZoomChanged() {
+    // @ts-ignore
+    let { startValue, endValue } = this.$refs[this.chartId].chart.getOption().dataZoom[0];
+    return { startValue, endValue };
+  }
+}
+export default SmTimeRange;
+</script>

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

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

package/src/common/time-range/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-range.scss';

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

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