lambo-design-bi 0.0.1

package/bi/widget/README.md

@@ -0,0 +1,18 @@
+## 自定义配置查询功能组件路径
+### common(普通组件)
+#### charts(图表)
+
+---
+### widget(需要配置的组件)
+#### layout(布局)
+- row 行布局
+- col 列布局
+
+#### table(表格)
+- paging-table 分页表格
+
+#### container(容器)
+
+
+
+

package/bi/widget/api/data.js

@@ -0,0 +1,48 @@
+import biConfig from "../config/config";
+import ajax from "@lambo-design/shared/utils/ajax";
+
+  /**
+   * 公共分页数据查询接口
+   *
+   * @param apiId
+   * @param inJsonObj
+   * @param offset
+   * @param limit
+   * @param sort
+   * @param order
+   * @returns {Promise<AxiosResponse<any>>}
+   */
+  export function getListMapPageData(apiId, inJsonObj, offset, limit, sort, order) {
+    const params = {
+      apiId: apiId,
+      inJson: encodeURIComponent(JSON.stringify(inJsonObj)),
+      offset: offset,
+      limit: limit,
+      sort: sort,
+      order: order
+    }
+    return ajax.request({
+      url: biConfig.dataServerContext + '/itfc/data/list',
+      method: 'get',
+      params
+    })
+  }
+
+  /**
+   * 公共数据查询接口
+   *
+   * @param apiId
+   * @param inJsonObj
+   * @returns {Promise<AxiosResponse<any>>}
+   */
+  export function getListMapData(apiId, inJsonObj) {
+    const params = {
+      apiId: apiId,
+      inJson: encodeURIComponent(JSON.stringify(inJsonObj))
+    }
+    return ajax.request({
+      url: biConfig.dataServerContext + '/itfc/data/list',
+      method: 'get',
+      params
+    })
+  }

package/bi/widget/atom/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <component :is="getWidgetName(widget)" :widget="widget" :params="params">
+    <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+      <slot :name="slot" v-bind="scope" />
+    </template>
+  </component>
+</template>
+<script>
+import { getWidgetName } from '../util/widget-map'
+
+export default {
+  name: "AtomWidget",
+  components: {},
+  props: {
+    widget: {
+      type: Object,
+      default: () => ({})
+    },
+    params: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: { getWidgetName },
+  created() {
+
+  },
+  mounted() {
+
+  }
+}
+</script>
+<style scoped></style>

package/bi/widget/atom/test.vue

@@ -0,0 +1,36 @@
+<template>
+  <component :is="getWidgetName(widget)" :widget="widget" :params="params">
+    <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+      <slot :name="slot" v-bind="scope" />
+    </template>
+  </component>
+</template>
+<script>
+import { getWidgetName } from '../util/widget-map'
+
+export default {
+  name: "WidgetTest",
+  components: {},
+  props: {
+    widget: {
+      type: Object,
+      default: () => ({})
+    },
+    params: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: { getWidgetName },
+  created() {
+
+  },
+  mounted() {
+
+  }
+}
+</script>
+<style scoped></style>

package/bi/widget/config/config.js

@@ -0,0 +1,7 @@
+
+let biConfig = {
+    dataServerContext: '/scl-platform-server',
+    dataServiceUri: '/itfc/data/list?apiId='
+}
+
+export default biConfig

package/bi/widget/container/card/card-widget.vue

@@ -0,0 +1,46 @@
+<template>
+  <lambo-indicator-card-bi
+    :has-title="(widget.options && widget.options.title && widget.options.title.length > 0) ? true : false">
+    <template slot="content-title" v-if="(widget.options.title && widget.options.title.length > 0)">
+      {{ widget.options.title }}
+    </template>
+    <template v-for="(item, index) in widget.widgets">
+      <atom-widget :widget="item" :key="index"></atom-widget>
+    </template>
+  </lambo-indicator-card-bi>
+</template>
+<script>
+import LamboIndicatorCardBi from './comps/indicator-card/src/indicator-card-bi.vue'
+import { getWidgetName } from '../../util/widget-map'
+import AtomWidget from '../../atom/index.vue'
+
+export default {
+  name: "BiContainerCard",
+  components: { LamboIndicatorCardBi, AtomWidget },
+  props: {
+    widget: {
+      type: Object,
+      default: () => ({})
+    },
+    params: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    getWidgetName
+  },
+  created() {
+
+  },
+  mounted() {
+
+  }
+}
+</script>
+<style scoped></style>

package/bi/widget/container/card/comps/indicator-card/index.js

@@ -0,0 +1,7 @@
+import LamboIndicatorCardBi from './src/indicator-card-bi.vue'
+import LamboIndicatorCardItemBi from './src/indicator-card-item-bi.vue'
+export default LamboIndicatorCardBi;
+export {
+    LamboIndicatorCardBi,
+    LamboIndicatorCardItemBi
+}

package/bi/widget/container/card/comps/indicator-card/src/indicator-card-bi-search.vue

@@ -0,0 +1,132 @@
+<!--
+查询条件样式需求不一样，专门弄个组件
+-->
+<template>
+  <div :class="classes"
+    :style="{ ...(autoAdapt && toggleStatus ? { 'min-height': 'calc(100% - 10px)' } : {}), width: containerWidth }">
+    <div v-if="hasTitle || hasExtend" :class="['ct-header', toggleStatus ? '' : 'collapse']">
+      <div v-if="hasTitle" :class="[isCenterTitle && 'center-title', 'ct-title']">
+        <slot name="content-title"></slot>
+      </div>
+      <div v-if="hasExtend" class="hd-extend">
+        <slot name="header-extend"></slot>
+      </div>
+      <div v-if="hasExtend" class="ct-extend">
+        <slot name="content-extend"></slot>
+      </div>
+      <div v-if="hasToggle" class="ct-toggle">
+        <Button type="text" @click="toggleButton">
+          {{ toggleStatus ? '收起' : '展开' }}
+          <Icon :type="toggleStatus ? 'ios-arrow-up' : 'ios-arrow-down'" />
+        </Button>
+      </div>
+    </div>
+    <transition name="fade">
+      <div :class="['ct-body-search', (hasTitle || hasExtend) ? 'offset-padding' : 'no-border-top']"
+        v-if="toggleStatus">
+        <slot></slot>
+      </div>
+    </transition>
+  </div>
+</template>
+<script>
+
+const prefixCls = 'c-info';
+export default {
+  name: "LamboIndicatorCardBiSearch",
+  props: {
+    containerWidth: {
+      type: String,
+      default: '100%'
+    },
+    hasTitle: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    isCenterTitle: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    hasExtend: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    hasToggle: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    forceAutoAdapt: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    bordered: {
+      type: Boolean,
+      default: true
+    },
+    disHover: {
+      type: Boolean,
+      default: false
+    },
+    shadow: {
+      type: Boolean,
+      default: false
+    },
+  },
+  computed: {
+    classes() {
+      return [
+        `${prefixCls}`,
+        {
+          [`${prefixCls}-bordered`]: this.bordered && !this.shadow,
+          [`${prefixCls}-dis-hover`]: this.disHover || this.shadow,
+          [`${prefixCls}-shadow`]: this.shadow
+        }
+      ];
+    },
+  },
+  data() {
+    return {
+      autoAdapt: false,
+      toggleStatus: true
+    }
+  },
+  methods: {
+    // 如果使用一个LamboIndicatorCard，自适应高度
+    openAutoAdapt() {
+      if (!this.forceAutoAdapt) {
+        //  LamboIndicatorCard 组件数量
+        let count = 0;
+        const children = this.$parent.$children
+        for (let i = 0; i < children.length; i++) {
+          const componentName = children[i].$options['_componentTag']
+          if (componentName == 'LamboIndicatorCard') {
+            count += 1
+          }
+          if (count > 1) {
+            break
+          }
+        }
+        this.autoAdapt = count == 1
+      } else {
+        this.autoAdapt = true
+      }
+    },
+    toggleButton() {
+      this.toggleStatus = !this.toggleStatus;
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.openAutoAdapt()
+    })
+  }
+}
+</script>
+<style lang="less" scoped>
+@import "styles/css/card-search.less";
+</style>

package/bi/widget/container/card/comps/indicator-card/src/indicator-card-bi.vue

@@ -0,0 +1,129 @@
+<template>
+  <div :class="classes"
+    :style="{ ...(autoAdapt && toggleStatus ? { 'min-height': 'calc(100% - 10px)' } : {}), width: containerWidth }">
+    <div v-if="hasTitle || hasExtend" :class="['ct-header', toggleStatus ? '' : 'collapse']">
+      <div v-if="hasTitle" :class="[isCenterTitle && 'center-title', 'ct-title']">
+        <slot name="content-title"></slot>
+      </div>
+      <div v-if="hasExtend" class="hd-extend">
+        <slot name="header-extend"></slot>
+      </div>
+      <div v-if="hasExtend" class="ct-extend">
+        <slot name="content-extend"></slot>
+      </div>
+      <div v-if="hasToggle" class="ct-toggle">
+        <Button type="text" @click="toggleButton">
+          {{ toggleStatus ? '收起' : '展开' }}
+          <Icon :type="toggleStatus ? 'ios-arrow-up' : 'ios-arrow-down'" />
+        </Button>
+      </div>
+    </div>
+    <transition name="fade">
+      <div :class="['ct-body', (hasTitle || hasExtend) ? 'offset-padding' : 'no-border-top']" v-if="toggleStatus">
+        <slot></slot>
+      </div>
+    </transition>
+  </div>
+</template>
+<script>
+/* eslint-disable */
+
+const prefixCls = 'c-info';
+export default {
+  name: "LamboIndicatorCardBi",
+  props: {
+    containerWidth: {
+      type: String,
+      default: '100%'
+    },
+    hasTitle: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    isCenterTitle: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    hasExtend: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    hasToggle: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    forceAutoAdapt: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    bordered: {
+      type: Boolean,
+      default: true
+    },
+    disHover: {
+      type: Boolean,
+      default: false
+    },
+    shadow: {
+      type: Boolean,
+      default: false
+    },
+  },
+  computed: {
+    classes() {
+      return [
+        `${prefixCls}`,
+        {
+          [`${prefixCls}-bordered`]: this.bordered && !this.shadow,
+          [`${prefixCls}-dis-hover`]: this.disHover || this.shadow,
+          [`${prefixCls}-shadow`]: this.shadow
+        }
+      ];
+    },
+  },
+  data() {
+    return {
+      autoAdapt: false,
+      toggleStatus: true
+    }
+  },
+  methods: {
+    // 如果使用一个LamboIndicatorCard，自适应高度
+    openAutoAdapt() {
+      if (!this.forceAutoAdapt) {
+        //  LamboIndicatorCard 组件数量
+        let count = 0;
+        const children = this.$parent.$children
+        for (let i = 0; i < children.length; i++) {
+          const componentName = children[i].$options['_componentTag']
+          if (componentName == 'LamboIndicatorCard') {
+            count += 1
+          }
+          if (count > 1) {
+            break
+          }
+        }
+        this.autoAdapt = count == 1
+      } else {
+        this.autoAdapt = true
+      }
+    },
+    toggleButton() {
+      this.toggleStatus = !this.toggleStatus;
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.openAutoAdapt()
+    })
+  }
+}
+</script>
+<style lang="less" scoped>
+@import "styles/css/card.less";
+</style>

package/bi/widget/container/card/comps/indicator-card/src/indicator-card-item-bi.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="indicator-card-item">
+    <div :class="['indicator-card-item-header',separateHeader && 'single-card-item-header']">
+      <div :class="['indicator-card-item-title',showTitleIcon && 'before-title-icon']">
+        <slot></slot>
+      </div>
+      <div class="indicator-card-item-extend">
+        <slot name="content-extend"></slot>
+        <Button type="text" v-if="hasToggle && toggleStatus" @click="toggleButton">
+          收起
+          <Icon type="ios-arrow-up" />
+        </Button>
+        <Button type="text" v-if="hasToggle && !toggleStatus" @click="toggleButton">
+          展开
+          <Icon type="ios-arrow-down" />
+        </Button>
+      </div>
+    </div>
+    <transition name="fade">
+      <div class="indicator-card-item-body" v-if="toggleStatus">
+        <slot name="content-body"></slot>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "LamboIndicatorCardItemBi",
+  props: {
+    hasToggle: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    showTitleIcon:{
+      type:Boolean,
+      default:false
+    }
+  },
+  data(){
+    return {
+      toggleStatus: true
+    }
+  },
+  methods: {
+    toggleButton(){
+      this.toggleStatus = !this.toggleStatus;
+    }
+  },
+  computed:{
+    separateHeader(){
+      return this.toggleStatus && this.showTitleIcon
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "@lambo-design/core/src/styles/default.less";
+.indicator-card-item {
+  .indicator-card-item-header {
+    background: var(--background-color-base,@_background-color-base);
+    line-height: 32px;
+    color: var(--text-color-secondary,@_text-color-secondary);
+    padding: 5px 15px;
+    margin-bottom: 24px;
+    overflow: hidden;
+    .indicator-card-item-title {
+      font-weight: bold;
+      float: left;
+      font-size: 16px;
+    }
+    .indicator-card-item-extend {
+      float: right;
+      font-size: 14px;
+    }
+    .before-title-icon{
+      &:before{
+        content: '';
+        height: 16px;
+        width: 6px;
+        display: inline-block;
+        background-color: var(--primary-color);
+        vertical-align: text-top;
+        margin-right: 5px;
+      }
+    }
+  }
+  .single-card-item-header{
+    margin: 10px 0;
+  }
+  .indicator-card-item-body {
+
+  }
+}
+</style>

package/bi/widget/container/card/comps/indicator-card/src/styles/css/card-search.less

@@ -0,0 +1,108 @@
+@import "@lambo-design/core/src/styles/default.less";
+
+.c-info {
+  background: var(--component-background, @_component-background);
+  border-radius: var(--border-radius-base, @_border-radius-base);
+  padding: 0;
+  margin-bottom: 8px;
+
+  &-bordered {
+    border: 1px solid var(--border-color-base, @_border-color-base);
+    border-color: var(--border-color-split, @_border-color-split);
+  }
+
+  &-shadow {
+    box-shadow: var(--shadow-base, @_shadow-base);
+  }
+
+  &:hover {
+    box-shadow: var(--shadow-base, @_shadow-base);
+    border-color: var(--border-color-split, @_border-color-split);
+  }
+
+  &&-dis-hover:hover {
+    box-shadow: none;
+    border-color: transparent;
+  }
+
+  &&-dis-hover&-bordered:hover {
+    border-color: var(--border-color-split, @_border-color-split);
+  }
+
+  &&-shadow:hover {
+    box-shadow: var(--shadow-base, @_shadow-base);
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  .ct-header {
+    background: var(--component-background, @_component-background);
+    overflow: hidden;
+    padding: 0px 8px;
+    border-radius: var(--border-radius-base, @_border-radius-base) var(--border-radius-base, @_border-radius-base) 0 0;
+    display: flex;
+
+    .ct-title {
+      color: var(--heading-color, @_heading-color);
+      font-weight: bold;
+      font-size: 15px;
+      line-height: 30px;
+      flex: 0 0 auto;
+    }
+
+    .center-title {
+      position: relative;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    .hd-extend {
+      font-size: 13px;
+      line-height: 30px;
+      flex: 1 1 auto;
+    }
+
+    .ct-extend {
+      font-size: 13px;
+      line-height: 30px;
+      flex: 0 0 auto;
+    }
+
+    .ct-toggle {
+      font-size: 13px;
+      line-height: 30px;
+      flex: 0 0 auto;
+    }
+
+    &.collapse {
+      border-radius: var(--border-radius-base, @_border-radius-base);
+    }
+  }
+
+  .ct-body-search {
+    background: var(--component-background, @_component-background);
+    border-radius: 0 0 var(--border-radius-base, @_border-radius-base) var(--border-radius-base, @_border-radius-base);
+    padding: 8px 8px;
+
+    &.no-border-top {
+      border-top: 0;
+      border-radius: var(--border-radius-base, @_border-radius-base);
+    }
+
+    .ivu-form-label-right {
+      .ivu-form-item {
+        .ivu-form-item-content {
+          button {
+            width: 88px;
+          }
+        }
+      }
+    }
+  }
+
+  .offset-padding {
+    padding: 0px 8px 8px 8px;
+  }
+}