@supermapgis/vue-iclient-leaflet 11.2.0

package/src/common/indicator/Indicator.vue

@@ -0,0 +1,308 @@
+<template>
+  <div class="sm-component-indicator" :style="getBackgroundStyle" @click="handleClick">
+    <div :class="`sm-component-indicator__content sm-component-indicator__content-${mode}`">
+      <span
+        v-show="showTitleUnit"
+        class="sm-component-indicator__title"
+        :style="[unit_titleStyle, getTextColorStyle]"
+      >{{ titleData }}</span>
+      <div>
+        <span class="sm-component-indicator__num" :style="indicatorStyle">
+          <countTo
+            v-if="isNumber(indicatorNum)"
+            :decimals="calDecimals"
+            :startVal="startData"
+            :endVal="numData"
+            :duration="Number(duration) || 1000"
+            :separator="filterSeparator"
+            :numBackground="numBackground"
+            :numSpacing="numSpacing"
+            :separatorBackground="separatorBackground"
+            :fontSize="parseFloat(fontSize) + fontUnit"
+          ></countTo>
+          {{ isNumber(indicatorNum) ? '' : indicatorNum }}
+        </span>
+        <span
+          v-show="showTitleUnit"
+          class="sm-component-indicator__unit"
+          :style="[unit_titleStyle, getTextColorStyle]"
+        >{{ unitData }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import Timer from 'vue-iclient/src/common/_mixin/Timer';
+import RestService from 'vue-iclient/src/common/_utils/RestService';
+import CountTo from './CountTo';
+
+export default {
+  name: 'SmIndicator',
+  components: {
+    countTo: CountTo
+  },
+  mixins: [Theme, Timer],
+  props: {
+    title: {
+      type: String,
+      default() {
+        return this.$t('indicator.title');
+      }
+    },
+    unit: {
+      type: String,
+      default() {
+        return this.$t('indicator.unit');
+      }
+    },
+    indicatorColor: {
+      type: String
+    },
+    // title/unit
+    textFontSize: {
+      type: [String, Number]
+    },
+    fontSize: {
+      type: [String, Number]
+    },
+    fontWeight: {
+      type: [String, Number],
+      default: 'border'
+    },
+    num: {
+      type: [Number, String],
+      default: 0
+    },
+    url: {
+      type: String
+    },
+    proxy: {
+      type: String
+    },
+    animated: {
+      type: Boolean,
+      default: false
+    },
+    duration: {
+      type: [Number, String],
+      default: 1000
+    },
+    decimals: {
+      type: Number,
+      default: -1
+    },
+    mode: {
+      type: String,
+      default: 'vertical',
+      validator: function() {
+        return ['vertical', 'horizontal'];
+      }
+    },
+    separator: {
+      type: String,
+      default: ','
+    },
+    numSpacing: {
+      type: Number,
+      default: 0
+    },
+    numBackground: {
+      type: Object,
+      default: function() {
+        return { color: 'rgba(0, 0, 0, 0)', image: '', padding: 0 };
+      }
+    },
+    separatorBackground: {
+      type: Boolean,
+      default: false
+    },
+    showTitleUnit: {
+      type: Boolean,
+      default: true
+    },
+    titleField: String,
+    numField: String,
+    unitField: String,
+    thresholdsStyle: Array
+  },
+  data() {
+    return {
+      indicatorColorData: '',
+      titleData: this.title,
+      unitData: this.unit,
+      numData: 0,
+      startData: 0,
+      indicatorNum: 0
+    };
+  },
+  computed: {
+    unit_titleStyle() {
+      return {
+        fontSize: this.textFontSize || parseFloat(this.fontSize) * 0.66 + this.fontUnit,
+        fontWeight: this.fontWeight
+      };
+    },
+    fontUnit() {
+      const reg = /\d+(\.\d+)?([a-z]+)/gi;
+      const fontUnit = this.fontSize && isNaN(this.fontSize) ? this.fontSize.replace(reg, '$2') : 'px';
+      return fontUnit;
+    },
+    indicatorStyle() {
+      let color = this.indicatorColorData;
+      if (!isNaN(this.indicatorNum) && this.thresholdsStyle) {
+        const matchStyle = this.thresholdsStyle.find(item => {
+          let status;
+          if (item.min) {
+            status = +this.indicatorNum >= +item.min;
+          }
+          if (item.max) {
+            status = status === void 0 ? true : status;
+            status = status && +this.indicatorNum <= +item.max;
+          }
+          return status;
+        });
+        if (matchStyle) {
+          color = matchStyle.color;
+        }
+      }
+      let style = { color };
+      typeof this.indicatorNum === 'string' && (style.fontSize = parseFloat(this.fontSize) + this.fontUnit);
+      return style;
+    },
+    direction() {
+      return { vertical: 'column', horizontal: 'row' }[this.mode];
+    },
+    filterSeparator() {
+      return this.separator.replace(/\d+/, '');
+    },
+    calDecimals() {
+      if (this.decimals >= 0) {
+        return this.decimals;
+      }
+      if (this.numData.toString().split('.')[1]) {
+        return this.numData.toString().split('.')[1].length;
+      }
+      return 0;
+    }
+  },
+  watch: {
+    url: {
+      handler(val) {
+        if (val) {
+          this.getData();
+        } else {
+          this.unitData = this.unit;
+          this.changeNumData(this.num);
+          this.titleData = this.title;
+          this.fetchProperties = null;
+        }
+      },
+      immediate: true
+    },
+    indicatorColor(val) {
+      this.indicatorColorData = val;
+    },
+    proxy() {
+      this.restService && this.restService.setProxy(this.proxy);
+      if (this.url) {
+        this.getData();
+      }
+    },
+    indicatorNum(indicatorNum) {
+      this.$emit('indicatorNumChange', indicatorNum);
+    }
+  },
+  mounted() {
+    this.$on('theme-style-changed', () => {
+      this.indicatorColorData = this.getColor(0);
+    });
+    this.indicatorColorData = this.indicatorColor || this.getColor(0);
+    this.partsOfPropsWatcher();
+  },
+  beforeDestroy() {
+    this.restService && this.restService.remove('getdatasucceeded');
+  },
+  methods: {
+    partsOfPropsWatcher() {
+      const propsFields = ['title', 'unit', 'num', 'titleField', 'unitField', 'numField'];
+      propsFields.forEach(props => {
+        this.$watch(props, function(next) {
+          switch (props) {
+            case 'title':
+              this.titleData = next;
+              break;
+            case 'titleField':
+              if (this.fetchProperties && Object.prototype.hasOwnProperty.call(this.fetchProperties, next)) {
+                this.titleData = this.fetchProperties[this.titleField];
+              } else {
+                this.titleData = this.title;
+              }
+              break;
+            case 'unit':
+              this.unitData = next;
+              break;
+            case 'unitField':
+              if (this.fetchProperties && Object.prototype.hasOwnProperty.call(this.fetchProperties, next)) {
+                this.unitData = this.fetchProperties[this.unitField];
+              } else {
+                this.unitData = this.unit;
+              }
+              break;
+            case 'num':
+              this.changeNumData(next);
+              break;
+            case 'numField':
+              if (this.fetchProperties && Object.prototype.hasOwnProperty.call(this.fetchProperties, next)) {
+                this.changeNumData(this.fetchProperties[this.numField]);
+              } else {
+                this.changeNumData(this.num);
+              }
+              break;
+          }
+        });
+      });
+    },
+    isNumber(str) {
+      return /^\d+(\.\d*)?$/.test(str);
+    },
+    timing() {
+      this.getData();
+    },
+    fetchData({ features }) {
+      if (features && !!features.length) {
+        const properties = features[0].properties;
+        this.fetchProperties = properties;
+        this.unitData = Object.prototype.hasOwnProperty.call(properties, this.unitField) ? properties[this.unitField] : this.unit;
+        Object.prototype.hasOwnProperty.call(properties, this.numField)
+          ? this.changeNumData(properties[this.numField])
+          : this.changeNumData(this.num);
+        this.titleData = Object.prototype.hasOwnProperty.call(properties, this.titleField) ? properties[this.titleField] : this.title;
+      }
+    },
+    getData() {
+      this.getRestService().getData(this.url);
+    },
+    changeNumData(newData) {
+      const startData = this.animated ? +this.numData : +newData;
+      this.startData = isNaN(startData) ? 0 : startData;
+      this.numData = +newData;
+      this.indicatorNum = newData;
+    },
+    changeIndicatorColor(color) {
+      this.indicatorColorData = color;
+    },
+    getRestService() {
+      if (!this.restService) {
+        this.restService = new RestService({ proxy: this.proxy });
+        this.restService.on({ getdatasucceeded: this.fetchData });
+      }
+      return this.restService;
+    },
+    handleClick() {
+      this.$emit('click', this.indicatorNum);
+    }
+  }
+};
+</script>

package/src/common/indicator/index.js

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

package/src/common/indicator/style/countTo.scss

@@ -0,0 +1,7 @@
+@import '../../_utils/style/mixins/mixins.scss';
+
+@include b(count-to) {
+  @include e(numItem) {
+    display: inline-block;
+  }
+}

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

package/src/common/indicator/style/indicator.scss

@@ -0,0 +1,47 @@
+@import '../../_utils/style/mixins/mixins.scss';
+@import '../../_utils/style/theme/theme.scss';
+@import './countTo.scss';
+
+@include b(indicator) {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+  color: $text-color;
+  background: $component-background;
+  @include e(content) {
+    display: flex;
+    align-items: flex-end;
+    font-weight: bolder;
+  }
+  @include e(content-vertical) {
+    flex-direction: column;
+    align-items: flex-start;
+    .sm-component-indicator__title {
+      margin-bottom: 8px;
+    }
+  }
+  @include e(content-horizontal) {
+    flex-flow: row nowrap;
+    width: 100%;
+    justify-content: space-around;
+    .sm-component-indicator__title {
+      line-height: 1.2;
+    }
+  }
+  @include e(title) {
+    font-size: 16px;
+    font-weight: bolder;
+  }
+  @include e(num) {
+    font-weight: bolder;
+    color: $primary-color;
+    font-size: 22px;
+    line-height: 1;
+  }
+  @include e(unit) {
+    text-indent: 5px;
+    font-size: 16px;
+    line-height: 1.2;
+  }
+}

package/src/common/input/BaseMixin.vue

@@ -0,0 +1,24 @@
+<script lang="ts">
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import AntdRender from 'vue-iclient/src/common/_mixin/AntdRender';
+
+export default {
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  model: {
+    prop: 'value',
+    event: 'change.value'
+  },
+  computed: {
+    extralListeners() {
+      const vm = this;
+      return {
+        // 这里确保组件配合 `v-model` 的工作
+        'change.value': function(value) {
+          vm.$emit('change.value', value);
+        }
+      };
+    }
+  }
+};
+</script>

package/src/common/input/Group.vue

@@ -0,0 +1,31 @@
+<script lang="ts">
+import Group from 'ant-design-vue/es/input/Group';
+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 inputGroupTypes = {
+  size: VueTypes.oneOf(['small', 'large', 'default', 'middle']).def('default'),
+  compact: VueTypes.bool
+};
+
+export default {
+  name: 'SmInputGroup',
+  defaultComponent: Group,
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  props: inputGroupTypes,
+  computed: {
+    extralProps() {
+      return {
+        size: this.size === 'middle' ? undefined : this.size
+      };
+    },
+    componentClass() {
+      return {
+        'sm-component-input-group-md': this.size === 'middle'
+      };
+    }
+  }
+};
+</script>

package/src/common/input/Input.vue

@@ -0,0 +1,41 @@
+<script lang="ts">
+import Input from 'ant-design-vue/es/input/Input';
+import inputProps from 'ant-design-vue/es/input/inputProps';
+import VueTypes from 'vue-iclient/src/common/_utils/vue-types';
+import Base from './BaseMixin.vue';
+
+export const inputTypes = {
+  ...inputProps,
+  size: VueTypes.oneOf(['small', 'large', 'default', 'middle']),
+  error: VueTypes.bool.def(false),
+  unit: VueTypes.string
+};
+
+export default {
+  name: 'SmInput',
+  defaultComponent: Input,
+  mixins: [Base],
+  props: inputTypes,
+  computed: {
+    extralProps() {
+      return {
+        size: this.size === 'middle' ? undefined : this.size,
+        addonAfter: this.unit || this.addonAfter
+      };
+    },
+    componentClass() {
+      return {
+        'sm-component-input-affix-wrapper-md': this.size === 'middle',
+        'sm-component-input-error': this.error,
+        'sm-component-input-unit': this.unit
+      };
+    }
+  },
+  mounted() {
+    if (this.size === 'middle') {
+      const inputDom = this.$el.querySelector('.sm-component-input');
+      inputDom && inputDom.classList && inputDom.classList.add('sm-component-input-md');
+    }
+  }
+};
+</script>

package/src/common/input/Password.vue

@@ -0,0 +1,41 @@
+<script lang="ts">
+import Password from 'ant-design-vue/es/input/Password';
+import inputProps from 'ant-design-vue/es/input/inputProps';
+import VueTypes from 'vue-iclient/src/common/_utils/vue-types';
+import Base from './BaseMixin.vue';
+
+export const inputPasswordTypes = {
+  ...inputProps,
+  action: VueTypes.oneOf(['click', 'hover']).def('click'),
+  visibilityToggle: VueTypes.bool.def(true),
+  size: VueTypes.oneOf(['small', 'large', 'default', 'middle'])
+};
+
+export default {
+  name: 'SmInputPassword',
+  defaultComponent: Password,
+  mixins: [Base],
+  props: inputPasswordTypes,
+  computed: {
+    extralProps() {
+      return {
+        prefixCls: this.prefixCls || 'sm-component-input-password',
+        inputPrefixCls: this.inputPrefixCls || 'sm-component-input',
+        size: this.size === 'middle' ? undefined : this.size
+      };
+    },
+    componentClass() {
+      return {
+        'sm-component-input-affix-wrapper-md': this.size === 'middle',
+        'sm-component-input-password-md': this.size === 'middle'
+      };
+    }
+  },
+  mounted() {
+    if (this.size === 'middle') {
+      const inputDom = this.$el.querySelector('.sm-component-input');
+      inputDom && inputDom.classList && inputDom.classList.add('sm-component-input-md');
+    }
+  }
+};
+</script>

package/src/common/input/Search.vue

@@ -0,0 +1,40 @@
+<script lang="ts">
+import Search from 'ant-design-vue/es/input/Search';
+import inputProps from 'ant-design-vue/es/input/inputProps';
+import VueTypes from 'vue-iclient/src/common/_utils/vue-types';
+import Base from './BaseMixin.vue';
+
+export const inputSearchTypes = {
+  ...inputProps,
+  enterButton: VueTypes.any,
+  size: VueTypes.oneOf(['small', 'large', 'default', 'middle'])
+};
+
+export default {
+  name: 'SmInputSearch',
+  defaultComponent: Search,
+  mixins: [Base],
+  props: inputSearchTypes,
+  computed: {
+    extralProps() {
+      return {
+        size: this.size === 'middle' ? undefined : this.size
+      };
+    },
+    componentClass() {
+      return {
+        'sm-component-input-group-wrapper-md': this.size === 'middle',
+        'sm-component-input-search-md': this.size === 'middle'
+      };
+    }
+  },
+  mounted() {
+    if (this.size === 'middle') {
+      const inputDom = this.$el.querySelector('.sm-component-input');
+      inputDom && inputDom.classList && inputDom.classList.add('sm-component-input-md');
+      const btnDom = this.$el.querySelector('.sm-component-input-group-addon .sm-component-btn');
+      btnDom && btnDom.classList && btnDom.classList.add('sm-component-btn-md');
+    }
+  }
+};
+</script>

package/src/common/input/TextArea.vue

@@ -0,0 +1,25 @@
+<script lang="ts">
+import TextArea from 'ant-design-vue/es/input/TextArea';
+import inputProps from 'ant-design-vue/es/input/inputProps';
+import VueTypes from 'vue-iclient/src/common/_utils/vue-types';
+import Base from './BaseMixin.vue';
+
+export const textAreaTypes = {
+  ...inputProps,
+  error: VueTypes.bool.def(false)
+};
+
+export default {
+  name: 'SmTextarea',
+  defaultComponent: TextArea,
+  mixins: [Base],
+  props: textAreaTypes,
+  computed: {
+    componentClass() {
+      return {
+        'sm-component-input-error': this.error === true
+      };
+    }
+  }
+};
+</script>

package/src/common/input/index.js

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

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

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

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

package/src/common/input/style/input.scss

@@ -0,0 +1,72 @@
+@import '../../_utils/style/mixins/mixins.scss';
+@import '../../_utils//style/theme/theme.scss';
+@import 'mixin.scss';
+
+@include b(input) {
+  $input-prefix: &;
+  @include focus-active($primary-5, $primary-shadow-color);
+  &[disabled] {
+    @include disabled();
+  }
+  @include e(error, '-') {
+    border-color: $input-error-color;
+    &:hover,
+    &:active,
+    &:focus {
+      border-color: $input-error-color;
+    }
+    @include focus-active-no-shadow();
+  }
+  &[readOnly=true] {
+    color: $input-read-only-color;
+    border-color: $input-read-only-border-color;
+    background-color: $input-read-only-bg;
+    &:hover {
+      border-color: $primary-5;
+    }
+    @include focus-active($primary-5, $primary-shadow-color);
+  }
+  @include e(unit, '-') {
+    #{$input-prefix}-group-addon {
+      color: $input-with-unit-color;
+      background-color: $input-bg;
+      border: $border-color-base;
+    }
+    #{$input-prefix}-disabled + #{$input-prefix}-group-addon {
+      color: $input-with-unit-disabled-color;
+      background-color: $input-addon-bg;
+    }
+  }
+  @include e(disabled, '-') {
+    @include disabled();
+  }
+  @include e(md, '-') {
+    @include input-md();
+  }
+  @include e(group-addon, '-') {
+    background-color: $input-addon-bg;
+  }
+  
+  @include e(password, '-') {
+    @include suffix-icon();
+  }
+  @include e(search, '-') {
+    @include suffix-icon();
+  }
+  @include e(clear-icon, '-') {
+    @include clear-icon();
+  }
+  @include e(textarea-clear-icon, '-') {
+    @include clear-icon();
+  }
+  @include e(group, '-') {
+    &-md #{$input-prefix},
+    &-md > &-addon {
+      @include input-md();
+    }
+  }
+
+  // &:-internal-autofill-selected {
+  //   background-color: inset 0 0 0 1000px rgab(255, 255, 255, 0)!important;
+  // }
+}