@supermapgis/vue-iclient-leaflet 11.2.0

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

@@ -0,0 +1,42 @@
+@mixin focus-color($border, $shadow) {
+  border-color: $border;
+  box-shadow: 0 0 0 2px $shadow;
+}
+@mixin focus-active-no-shadow {
+  &:focus,
+  &:active {
+    box-shadow: none;
+  }
+}
+@mixin focus-active($border, $shadow) {
+  &:focus,
+  &:active {
+    @include focus-color($border, $shadow);
+  }
+}
+
+@mixin disabled {
+  border-color: $disabled-border-color;
+  &:hover {
+    border-color: $disabled-border-color;
+  }
+}
+
+@mixin suffix-icon {
+  &-icon {
+    color: $text-color-secondary;
+    &:hover {
+      color: $icon-color-hover;
+    }
+  }
+}
+
+@mixin clear-icon {
+  &:hover {
+    color: $text-color-secondary;
+  }
+}
+
+@mixin input-md {
+  height: $input-height-md;
+}

package/src/common/input-number/InputNumber.vue

@@ -0,0 +1,44 @@
+<script lang="ts">
+import InputNumber, { InputNumberProps } from 'ant-design-vue/es/input-number';
+import VueTypes from 'vue-iclient/src/common/_utils/vue-types';
+import Base from 'vue-iclient/src/common/input/BaseMixin.vue';
+
+export const inputNumberTypes = {
+  ...InputNumberProps,
+  size: VueTypes.oneOf(['small', 'large', 'default', 'middle']),
+  error: VueTypes.bool.def(false)
+};
+
+export default {
+  name: 'SmInputNumber',
+  defaultComponent: InputNumber,
+  mixins: [Base],
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: inputNumberTypes,
+  computed: {
+    extralListeners() {
+      const vm = this;
+      return {
+        // 这里确保组件配合 `v-model` 的工作
+        change: function(value) {
+          vm.$emit('change', value);
+        }
+      };
+    },
+    extralProps() {
+      return {
+        size: this.size === 'middle' ? undefined : this.size
+      };
+    },
+    componentClass() {
+      return {
+        'sm-component-input-number-md': this.size === 'middle',
+        'sm-component-input-number-error': this.error === true
+      };
+    }
+  }
+};
+</script>

package/src/common/input-number/index.js

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

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

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

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

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

@@ -0,0 +1,43 @@
+@import '../../_utils/style/mixins/mixins.scss';
+@import '../../_utils//style/theme/theme.scss';
+@import '../../input/style/mixin.scss';
+
+@include b(input-number) {
+  @include focus-active($primary-5, $primary-shadow-color);
+  &-disabled {
+    @include disabled();
+  }
+  &-focused{
+    @include focus-color($primary-5, $primary-shadow-color);
+  }
+  &-handler {
+    color: $text-color-secondary;
+    &:active {
+      background: $input-number-handler-active-bg;
+    }
+    &-up-inner,
+    &-down-inner {
+      color: $text-color-secondary;
+    }
+  }
+  @include e(error, '-') {
+    border-color: $input-error-color;
+    &:hover,
+    &:active,
+    &:focus {
+      border-color: $input-error-color;
+    }
+    @include focus-active-no-shadow();
+  }
+  @at-root {
+    #{&}-focused#{&}-error{
+      box-shadow: none;
+    }
+  }
+  &-md {
+    @include input-md();
+    input {
+      @include input-md();
+    }
+  }
+}

package/src/common/layout/Content.vue

@@ -0,0 +1,25 @@
+<script lang="ts">
+import Layout from 'ant-design-vue/es/layout';
+import { BasicProps } from 'ant-design-vue/es/layout/layout';
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import AntdRender from 'vue-iclient/src/common/_mixin/AntdRender';
+
+export const layoutContentTypes = {
+  ...BasicProps
+};
+
+export default {
+  name: 'SmLayoutContent',
+  defaultComponent: Layout.Content,
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  props: layoutContentTypes,
+  computed: {
+    extralProps() {
+      return {
+        tagName: 'main'
+      };
+    }
+  }
+};
+</script>

package/src/common/layout/Footer.vue

@@ -0,0 +1,25 @@
+<script lang="ts">
+import Layout from 'ant-design-vue/es/layout';
+import { BasicProps } from 'ant-design-vue/es/layout/layout';
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import AntdRender from 'vue-iclient/src/common/_mixin/AntdRender';
+
+export const layoutFooterTypes = {
+  ...BasicProps
+};
+
+export default {
+  name: 'SmLayoutFooter',
+  defaultComponent: Layout.Footer,
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  props: layoutFooterTypes,
+  computed: {
+    extralProps() {
+      return {
+        tagName: 'footer'
+      };
+    }
+  }
+};
+</script>

package/src/common/layout/Header.vue

@@ -0,0 +1,25 @@
+<script lang="ts">
+import Layout from 'ant-design-vue/es/layout';
+import { BasicProps } from 'ant-design-vue/es/layout/layout';
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import AntdRender from 'vue-iclient/src/common/_mixin/AntdRender';
+
+export const layoutHederTypes = {
+  ...BasicProps
+};
+
+export default {
+  name: 'SmLayoutHeader',
+  defaultComponent: Layout.Header,
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  props: layoutHederTypes,
+  computed: {
+    extralProps() {
+      return {
+        tagName: 'header'
+      };
+    }
+  }
+};
+</script>

package/src/common/layout/Layout.vue

@@ -0,0 +1,25 @@
+<script lang="ts">
+import Layout from 'ant-design-vue/es/layout';
+import { BasicProps } from 'ant-design-vue/es/layout/layout';
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import AntdRender from 'vue-iclient/src/common/_mixin/AntdRender';
+
+export const layoutTypes = {
+  ...BasicProps
+};
+
+export default {
+  name: 'SmLayout',
+  defaultComponent: Layout,
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  props: layoutTypes,
+  computed: {
+    extralProps() {
+      return {
+        tagName: 'section'
+      };
+    }
+  }
+};
+</script>

package/src/common/layout/Sider.vue

@@ -0,0 +1,33 @@
+<script lang="ts">
+import Layout from 'ant-design-vue/es/layout';
+import { SiderProps } from 'ant-design-vue/es/layout/Sider';
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import AntdRender from 'vue-iclient/src/common/_mixin/AntdRender';
+
+export const layoutSiderTypes = {
+  ...SiderProps
+};
+
+export default {
+  name: 'SmLayoutSider',
+  __ANT_LAYOUT_SIDER: true,
+  defaultComponent: Layout.Sider,
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  model: {
+    prop: 'collapsed',
+    event: 'collapse'
+  },
+  props: layoutSiderTypes,
+  computed: {
+    extralListeners() {
+      const vm = this;
+      return {
+        collapse: function() {
+          vm.$emit('collapse', ...arguments);
+        }
+      };
+    }
+  }
+};
+</script>

package/src/common/layout/index.js

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

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

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

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

package/src/common/layout/style/layout.scss

@@ -0,0 +1,5 @@
+@import '../../_utils/style/mixins/mixins.scss';
+@import '../../_utils//style/theme/theme.scss';
+
+@include b(layout) {
+}

package/src/common/liquid-fill/LiquidFill.vue

@@ -0,0 +1,209 @@
+<template>
+  <div id="chart" ref="chart" class="sm-component-liquidfill" :style="[background && getBackgroundStyle]"></div>
+</template>
+<script>
+import echarts from 'echarts';
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import 'echarts-liquidfill';
+import Timer from 'vue-iclient/src/common/_mixin/Timer';
+import ThirdService from 'vue-iclient/src/common/_mixin/ThirdService';
+import { addListener, removeListener } from 'resize-detector';
+import debounce from 'lodash.debounce';
+import { strip } from '../_utils/util';
+
+export default {
+  name: 'SmLiquidFill',
+  mixins: [Theme, Timer, ThirdService],
+  props: {
+    // 百分比的值
+    value: {
+      type: [Number, String],
+      default: 0
+    },
+    formatter: {
+      type: [Function, String]
+    },
+    // 波浪数
+    waveCount: {
+      type: Number,
+      default: 1
+    },
+    // 字体
+    fontSize: {
+      type: [Number, String]
+    },
+    // 波浪颜色
+    waveColor: {
+      type: String
+    },
+    // 边框颜色
+    borderColor: {
+      type: String
+    },
+    // 数字在波浪外的颜色
+    labelColor: {
+      type: String,
+      default: '#626c91'
+    },
+    // 背景色
+    backgroundColor: {
+      type: String
+    },
+    // 数字在波浪内的颜色
+    insideLabelColor: {
+      type: String,
+      default: '#fff'
+    },
+    // 是否开启波浪动画
+    waveAnimation: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      waveColorData: '',
+      labelColorData: '',
+      insideLabelColorData: '',
+      borderColorData: '',
+      backgroundColorData: '',
+      finalValue: this.value
+    };
+  },
+  computed: {
+    // 根据波浪数渲染数据
+    calcData() {
+      let data = [];
+      const formatValue = isNaN(+this.finalValue) ? 0 : +this.finalValue;
+      for (let i = 0; i < this.waveCount; i++) {
+        data.push(strip(formatValue - i * 0.05));
+      }
+      return data;
+    }
+  },
+  watch: {
+    waveColor(val) {
+      this.waveColorData = val;
+      this.updateChart();
+    },
+    labelColor(val) {
+      this.labelColorData = val;
+      this.updateChart();
+    },
+    insideLabelColor(val) {
+      this.insideLabelColorData = val;
+      this.updateChart();
+    },
+    borderColor(val) {
+      this.borderColorData = val;
+      this.updateChart();
+    },
+    backgroundColor(val) {
+      this.backgroundColorData = val;
+      this.updateChart();
+    },
+    formatter() {
+      this.updateChart();
+    },
+    finalValue() {
+      this.updateChart();
+    },
+    fontSize() {
+      this.updateChart();
+    },
+    waveCount() {
+      this.updateChart();
+    },
+    waveAnimation() {
+      this.updateChart();
+    },
+    value(val) {
+      this.finalValue = val;
+    }
+  },
+  mounted() {
+    this.waveColorData = this.waveColor || this.getColor(0);
+    this.labelColorData = this.labelColor || this.getTextColor;
+    this.insideLabelColorData = this.insideLabelColor || this.getTextColor;
+    this.borderColorData = this.borderColor || this.waveColorData;
+    this.backgroundColorData = this.backgroundColor || this.getBackground;
+    this._initAutoResize();
+    this.$nextTick(() => {
+      this.initializeChart();
+    });
+  },
+  beforeDestroy() {
+    this.restService && this.restService.remove('getdatasucceeded');
+    removeListener(this.$el, this.__resizeHandler);
+  },
+  methods: {
+    resize() {
+      this.chart && this.chart.resize();
+    },
+    initializeChart() {
+      this.chart = echarts.init(this.$refs.chart);
+      this.updateChart();
+      this.$on('theme-style-changed', () => {
+        this.waveColorData = this.getColor(0);
+        this.labelColorData = this.getTextColor;
+        this.insideLabelColorData = this.getTextColor;
+        this.borderColorData = this.getColor(0);
+        this.backgroundColorData = this.getBackground;
+        this.updateChart();
+      });
+    },
+    _initAutoResize() {
+      this.__resizeHandler = debounce(
+        () => {
+          this.resize();
+        },
+        100,
+        { leading: true }
+      );
+      // @ts-ignore
+      addListener(this.$el, this.__resizeHandler);
+    },
+    updateChart() {
+      const options = {
+        series: [
+          {
+            color: [this.waveColorData],
+            type: 'liquidFill',
+            waveAnimation: this.waveAnimation,
+            animation: false,
+            radius: '95%',
+            data: this.calcData,
+            label: {
+              fontSize: parseFloat(this.fontSize),
+              color: this.labelColorData,
+              insideColor: this.insideLabelColorData
+            },
+            backgroundStyle: {
+              color: this.backgroundColorData || 'rgba(0, 0, 0, 0)'
+            },
+            itemStyle: {
+              shadowColor: '#fff'
+            },
+            outline: {
+              borderDistance: 3,
+              itemStyle: {
+                borderColor: this.borderColorData,
+                borderWidth: 3,
+                shadowBlur: 0,
+                shadowColor: '#fff'
+              }
+            }
+          }
+        ]
+      };
+      if (this.formatter) {
+        options.series[0].label.formatter = this.formatter;
+      }
+      this.chart && this.chart.setOption(options);
+    },
+    timing() {
+      this.getData();
+    }
+  }
+};
+</script>

package/src/common/liquid-fill/index.js

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

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

package/src/common/liquid-fill/style/liquid-fill.scss

@@ -0,0 +1,6 @@
+@import "../../_utils/style/mixins/mixins.scss";
+
+@include b(liquidfill) {
+  margin: 0 auto;
+  height: 100px;
+}

package/src/common/menu/Menu.vue

@@ -0,0 +1,31 @@
+<script lang="ts">
+import Menu, { menuProps } from 'ant-design-vue/es/menu';
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import AntdRender from 'vue-iclient/src/common/_mixin/AntdRender';
+
+export const menuTypes = {
+  ...menuProps
+};
+
+export default {
+  name: 'SmMenu',
+  defaultComponent: Menu,
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: menuTypes,
+  computed: {
+    extralListeners() {
+      const vm = this;
+      return {
+        change: function(value) {
+          vm.$emit('change', value);
+        }
+      };
+    }
+  }
+};
+</script>

package/src/common/menu/MenuItem.vue

@@ -0,0 +1,37 @@
+<script lang="ts">
+import Menu from 'ant-design-vue/es/menu';
+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 menuItemTypes = {
+  attribute: VueTypes.object,
+  rootPrefixCls: VueTypes.string,
+  eventKey: VueTypes.oneOfType([VueTypes.string, VueTypes.number]),
+  active: VueTypes.bool,
+  selectedKeys: VueTypes.array,
+  disabled: VueTypes.bool,
+  title: VueTypes.any,
+  index: VueTypes.number,
+  inlineIndent: VueTypes.number.def(24),
+  level: VueTypes.number.def(1),
+  mode: VueTypes.oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']).def('vertical'),
+  parentMenu: VueTypes.object,
+  multiple: VueTypes.bool,
+  value: VueTypes.any,
+  isSelected: VueTypes.bool,
+  manualRef: VueTypes.func,
+  role: VueTypes.any,
+  subMenuKey: VueTypes.string,
+  itemIcon: VueTypes.any
+};
+
+export default {
+  name: 'SmMenuItem',
+  isMenuItem: true,
+  defaultComponent: Menu.Item,
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  props: menuItemTypes
+};
+</script>

package/src/common/menu/SubMenu.vue

@@ -0,0 +1,51 @@
+<script lang="ts">
+import Menu from 'ant-design-vue/es/menu';
+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 subMenuTypes = {
+  parentMenu: VueTypes.object,
+  title: VueTypes.any,
+  selectedKeys: VueTypes.array.def([]),
+  openKeys: VueTypes.array.def([]),
+  openChange: VueTypes.func,
+  rootPrefixCls: VueTypes.string,
+  eventKey: VueTypes.oneOfType([VueTypes.string, VueTypes.number]),
+  multiple: VueTypes.bool,
+  active: VueTypes.bool, // TODO: remove
+  isRootMenu: VueTypes.bool.def(false),
+  index: VueTypes.number,
+  triggerSubMenuAction: VueTypes.string,
+  popupClassName: VueTypes.string,
+  getPopupContainer: VueTypes.func,
+  forceSubMenuRender: VueTypes.bool,
+  openAnimation: VueTypes.oneOfType([VueTypes.string, VueTypes.object]),
+  disabled: VueTypes.bool,
+  subMenuOpenDelay: VueTypes.number.def(0.1),
+  subMenuCloseDelay: VueTypes.number.def(0.1),
+  level: VueTypes.number.def(1),
+  inlineIndent: VueTypes.number.def(24),
+  openTransitionName: VueTypes.string,
+  popupOffset: VueTypes.array,
+  isOpen: VueTypes.bool,
+  store: VueTypes.object,
+  mode: VueTypes.oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']).def('vertical'),
+  manualRef: VueTypes.func,
+  builtinPlacements: VueTypes.object.def(function () {
+    return {};
+  }),
+  itemIcon: VueTypes.any,
+  expandIcon: VueTypes.any,
+  subMenuKey: VueTypes.string
+};
+
+export default {
+  name: 'SmSubMenu',
+  isSubMenu: true,
+  defaultComponent: Menu.SubMenu,
+  mixins: [Theme, AntdRender],
+  inheritAttrs: false,
+  props: subMenuTypes
+};
+</script>