lambo-design-bi 0.0.151 → 0.0.153

package/bi/widget/num/index.vue

@@ -1,14 +1,15 @@
 <template>
-  <num-index :title="widget.name" :val="numVal" :unit="unit" :items="items" :note="widget.options.note"></num-index>
+  <LamboNumberInfoBi :title="title" :sub-title="subTitle" :num="num" :sub-num1="subNum1" :trend1="trend1"
+    :sub-num2="subNum2" :trend2="trend2">
+  </LamboNumberInfoBi>
 </template>
 <script>
-import NumIndex from "../../../pub/num-index/num-index.vue"
 import { getListMapData } from "../api/data"
-import { formatNumLocale } from "../../../util/num-util"
+import LamboNumberInfoBi from "../../../pub/number-info/index"
 
 export default {
   name: "BiNumIndex",
-  components: { NumIndex },
+  components: { LamboNumberInfoBi },
   props: {
     widget: {
       type: Object,
@@ -21,25 +22,20 @@ export default {
   },
   data() {
     return {
-      numVal: '',
-      unit: '',
-      /**
-       * [
-       *  {"k_name": "同比", "val": "+12%"},
-       *  {"k_name": "环比", "val": "-12%"},
-       * ]
-       */
-      kName1: '',
-      kName2: '',
-      items: [],
-      apiId: '',
+      title: '',
+      apiId: null,
+      subTitle: null,
+      num: null,
+      subNum1: null,
+      trend1: null,
+      subNum2: null,
+      trend2: null
     }
   },
   methods: {
     initConfig() {
+      this.title = this.widget.options.title || this.widget.name || ''
       this.apiId = this.widget.options.apiId
-      this.kName1 = this.widget.options.kName1 || ''
-      this.kName2 = this.widget.options.kName2 || ''
     },
     doSearch() {
       if (!this.apiId) {
@@ -52,26 +48,13 @@ export default {
         } else {
           if (res.data.data.rows.length > 0) {
             let row = res.data.data.rows[0]
-            /**
-             * [
-             *  {"val": "457182134", "unit": "条", "extend_val1": "+12%", "extend_val2": "-12%",  }
-             * ]
-             */
             if (row) {
-              if (Object.prototype.hasOwnProperty.call(row, "val") && row['val']) {
-                this.numVal = formatNumLocale(row.val)
-              }
-              if (Object.prototype.hasOwnProperty.call(row, "unit") && row['unit']) {
-                this.unit = row['unit']
-              }
-              let itemArr = []
-              if (Object.prototype.hasOwnProperty.call(row, "extend_val1") && row['extend_val1']) {
-                itemArr.push({ "k_name": this.kName1, "val": row['extend_val1'] })
-              }
-              if (Object.prototype.hasOwnProperty.call(row, "extend_val2") && row['extend_val2']) {
-                itemArr.push({ "k_name": this.kName2, "val": row['extend_val2'] })
-              }
-              this.items = itemArr
+              this.subTitle = row['sub_title']
+              this.num = row['num']
+              this.subNum1 = row['sub_num1']
+              this.trend1 = row['trend1']
+              this.subNum2 = row['sub_num2']
+              this.trend2 = row['trend2']
             }
           }
         }
@@ -81,6 +64,7 @@ export default {
     }
   },
   created() {
+    console.log("num-idx widget:", this.widget)
     this.initConfig()
     this.doSearch()
   },
@@ -98,4 +82,3 @@ export default {
   }
 }
 </script>
-<style scoped></style>

package/bi/widget/search/search-item.vue

@@ -2,28 +2,28 @@
 <template>
   <div>
     <div v-if="widget.options.searchType === searchDict.INPUT.id"> <!-- 输入框 -->
-      <Input v-model="widget.options.val" class="query" placeholder="请输入" :clearable="true" />
+      <Input v-model="widget.options.val" class="lambo-query-class" placeholder="请输入" :clearable="true" />
     </div>
     <div v-else-if="widget.options.searchType === searchDict.FUZZY_INPUT.id"> <!-- 模糊输入框 -->
-      <Input v-model="widget.options.val" class="query" placeholder="请输入" :clearable="true" />
+      <Input v-model="widget.options.val" class="lambo-query-class" placeholder="请输入" :clearable="true" />
     </div>
-    <div v-else-if="widget.options.searchType === searchDict.NOT_SHOW_INPUT.id" class="not-show"> <!-- 隐形查询条件 -->
-      <Input v-model="widget.options.val" class="query" />
+    <div v-else-if="widget.options.searchType === searchDict.NOT_SHOW_INPUT.id" class="lambo-display-none "> <!-- 隐形查询条件 -->
+      <Input v-model="widget.options.val" class="lambo-query-class" />
     </div>
     <div v-else-if="widget.options.searchType === searchDict.SINGLE_SELECT.id"> <!-- 单选下拉框 -->
-      <Select v-model="widget.options.val" class="query" filterable :clearable="true" placeholder="请选择">
+      <Select v-model="widget.options.val" class="lambo-query-class" filterable :clearable="true" placeholder="请选择">
         <Option v-for="(item, index) in widget.options.dataList" :key="index" :value="item.K"> {{ item.V }}</Option>
       </Select>
     </div>
     <div v-else-if="widget.options.searchType === searchDict.MUlTI_SELECT.id"> <!-- 多选下拉框 -->
-      <Select v-model="widget.options.val" class="query" filterable :clearable="true" placeholder="请选择" multiple
+      <Select v-model="widget.options.val" class="lambo-query-class" filterable :clearable="true" placeholder="请选择" multiple
         :max-tag-count="1">
         <Option v-for="(item, index) in widget.options.dataList" :key="index" :value="item.K"> {{ item.V }}</Option>
       </Select>
     </div>
     <div v-else-if="widget.options.searchType === searchDict.SINGLE_HELP.id"> <!-- 单选帮助框 -->
-      <Input class="display-none" v-model="helpVal" />
-      <Input class="query" v-model="helpValName" icon="ios-list-box-outline" readonly @on-click="showHelpBox"
+      <Input class="lambo-display-none" v-model="helpVal" />
+      <Input class="lambo-query-class" v-model="helpValName" icon="ios-list-box-outline" readonly @on-click="showHelpBox"
         placeholder="请选择" />
 
       <HelpBox v-model="helpBoxShow" :title="widget.name" :columns="helpColumns" :url="helpBoxUrl"
@@ -31,8 +31,8 @@
         :help-box-search-params="helpSearchParams" @on-ok="onHelpOk" @onClear="onHelpClear"></HelpBox>
     </div>
     <div v-else-if="widget.options.searchType === searchDict.MUlTI_HELP.id"> <!-- 多选帮助框 -->
-      <Input class="display-none" v-model="helpVal" />
-      <Input class="query" v-model="helpValName" icon="ios-list-box-outline" readonly @on-click="showHelpBox"
+      <Input class="lambo-display-none" v-model="helpVal" />
+      <Input class="lambo-query-class" v-model="helpValName" icon="ios-list-box-outline" readonly @on-click="showHelpBox"
         placeholder="请选择" />
 
       <HelpBox v-model="helpBoxShow" :title="widget.name" :columns="helpColumns" :url="helpBoxUrl"
@@ -41,11 +41,11 @@
     </div>
     <div v-else-if="widget.options.searchType === searchDict.SINGLE_DATE.id"> <!-- 单日期选择框 -->
       <DatePicker v-model="widget.options.val" format="yyyy-MM-dd" placeholder="请选择" placement="bottom-end"
-        class="query"></DatePicker>
+        class="lambo-query-class"></DatePicker>
     </div>
     <div v-else-if="widget.options.searchType === searchDict.MUlTI_DATE.id"> <!-- 日期范围选择框 -->
       <DatePicker v-model="widget.options.val" format="yyyy-MM-dd" placeholder="请选择" placement="bottom-end"
-        class="query" type="daterange"></DatePicker>
+        class="lambo-lambo-query-class-class" type="daterange"></DatePicker>
     </div>
   </div>
 </template>
@@ -208,7 +208,10 @@ export default {
 }
 </script>
 <style scoped>
-.not-show {
-  display: none;
+.lambo-display-none {
+  display: none
+}
+.lambo-query-class {
+  width: 200px;
 }
 </style>

package/bi/widget/table/detail-table.vue

@@ -1,13 +1,13 @@
 <template>
-  <DetailTableBi :data="data"></DetailTableBi>
+  <LamboDetailTableBi :data="data"></LamboDetailTableBi>
 </template>
 <script>
-import DetailTableBi from "../../../pub/table/detail-table/index.vue"
+import LamboDetailTableBi from "../../../pub/table/detail-table/index.vue"
 import { getListMapData } from "../api/data"
 
 export default {
   name: "BiDetailTable",
-  components: { DetailTableBi },
+  components: { LamboDetailTableBi },
   props: {
     widget: {
       type: Object,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lambo-design-bi",
-  "version": "0.0.151",
-  "description": "",
+  "version": "0.0.153",
+  "description": "Vue2 BI 数据可视化组件库",
   "main": "index.js",
   "author": "finch",
   "license": "ISC",
@@ -16,20 +16,21 @@
   },
   "dependencies": {
     "@lambo-design/core": "^4.7.1-beta.162",
+    "@lambo-design/detail-table": "^1.0.0-beta.23",
     "@lambo-design/file-list": "^1.0.0-beta.9",
+    "@lambo-design/page-container": "^1.0.0-beta.35",
     "@lambo-design/percent-progress": "^1.0.0-beta.9",
-    "@lambo-design/shared": "^1.0.0-beta.283",
     "@lambo-design/query-filter": "^1.0.0-beta.38",
-    "@lambo-design/detail-table": "^1.0.0-beta.23",
-    "@lambo-design/page-container": "^1.0.0-beta.35",
+    "@lambo-design/shared": "^1.0.0-beta.283",
     "axios": "1.6.7",
     "core-js": "^3.8.3",
     "echarts": "^4.8.0",
     "element-ui": "^2.15.14",
+    "jszip": "^3.5.0",
     "moment": "^2.30.1",
+    "view-ui-plus": "^1.3.21",
     "xlsx": "^0.13.3",
-    "xlsx-style": "^0.8.13",
-    "jszip": "^3.5.0"
+    "xlsx-style": "^0.8.13"
   },
   "devDependencies": {
     "less": "^4.4.0",

package/pub/number-info/index.js

@@ -0,0 +1,2 @@
+import LamboNumberInfoBi from './number-info.vue'
+export default LamboNumberInfoBi

package/pub/number-info/number-info.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="ivu-number-info">
+    <div class="ivu-number-info-title-lambo" v-if="title || $slots.title">
+      <slot name="title">{{ title }}</slot>
+    </div>
+    <div class="ivu-number-info-subTitle" v-if="subTitle || $slots.subTitle">
+      <slot name="subTitle">{{ subTitle }}</slot>
+    </div>
+    <div class="ivu-number-info-value-lambo" :style="valueStyle">
+      <span class="ivu-number-info-total">
+        <slot name="num">{{ num }}</slot>
+      </span>
+      <span class="ivu-number-info-subTotal" v-if="subNum1 || subNum2">
+        <slot name="subNum">
+          <template v-if="subNum1">
+            <template v-if="trend1">
+              <Trend :flag="trend1" text-color>{{ subNum1 }}</Trend>
+            </template>
+            <template v-else>
+              {{ subNum1 }}
+            </template>
+          </template>
+          <template v-if="subNum2">
+            <template v-if="trend1">
+              <Trend :flag="trend2" text-color>{{ subNum2 }}</Trend>
+            </template>
+            <template v-else>
+              {{ subNum2 }}
+            </template>
+          </template>
+        </slot>
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { oneOf } from 'view-ui-plus/src/utils/assist'
+import Trend from 'view-ui-plus/src/components/trend'
+import 'view-ui-plus/dist/styles/viewuiplus.css'
+
+export default {
+  name: 'LamboNumberInfoBi',
+  components: { Trend },
+  props: {
+    title: {
+      type: String
+    },
+    subTitle: {
+      type: String
+    },
+    num: {
+      type: [String, Number]
+    },
+    subNum1: {
+      type: [String, Number]
+    },
+    trend1: {
+      validator(value) {
+        return oneOf(value, ['up', 'down']);
+      }
+    },
+    subNum2: {
+      type: [String, Number]
+    },
+    trend2: {
+      validator(value) {
+        return oneOf(value, ['up', 'down']);
+      }
+    },
+    gap: {
+      type: [String, Number],
+      default: 6
+    }
+  },
+  computed: {
+    valueStyle() {
+      return {
+        'margin-top': this.gap + 'px'
+      };
+    }
+  }
+};
+</script>
+<style scoped lang="less">
+.ivu-number-info-value-lambo {
+  margin-top: 4px;
+  overflow: hidden;
+  font-size: 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  display: flex;
+  flex-direction: column;
+}
+.ivu-number-info-title-lambo {
+  margin-bottom: 9px;
+  color: #17233d;
+  font-size: 16px;
+  -webkit-transition: all .2s;
+  transition: all .2s
+}
+</style>

package/pub/table/detail-table/index.vue

@@ -9,7 +9,7 @@
 import { LamboDetailTable, LamboDetailTableItem } from "@lambo-design/detail-table"
 
 export default {
-  name: "DetailTableBi",
+  name: "LamboDetailTableBi",
   components: { LamboDetailTable, LamboDetailTableItem },
   props: {
     data: {

package/pub/num-index/num-index.vue

@@ -1,120 +0,0 @@
-<template>
-  <div class="num-index">
-    <div class="title">
-      <span class="title-text">{{ title }}</span>
-      <Poptip v-if="note" trigger="hover" placement="right-end" transfer word-wrap width="250" :content="note"
-        class="title-icon">
-        <Icon type="ios-information-circle-outline" />
-      </Poptip>
-    </div>
-    <div class="content">
-      <span class="value">{{ val }}</span>
-      <span v-if="unit" class="unit">{{ unit }}</span>
-    </div>
-    <div class="extends">
-      <div v-for="(item, index) in items" :key="index" class="extends-item">
-        <p><span>{{ item.k_name }}&nbsp;</span><span>{{ item.val }}</span></p>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-
-export default {
-  name: "NumIndex",
-  components: {},
-  props: {
-    title: {
-      type: String,
-      default: ''
-    },
-    val: {
-      type: [String, Number],
-      default: ''
-    },
-    unit: {
-      type: String,
-      default: ''
-    },
-    items: {
-      type: Array,
-      default: () => []
-    },
-    note: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-
-    }
-  },
-  methods: {
-
-  },
-  created() {
-
-  },
-  mounted() {
-
-  }
-}
-</script>
-<style scoped lang="less">
-.num-index {
-  width: 257px;
-
-  .title {
-    font-size: 16px;
-    position: relative;
-    text-align: center;
-
-    .title-text {
-      display: inline-block;
-      position: relative;
-      z-index: 1
-    }
-
-    .title-icon {
-      position: absolute;
-      right: 0;
-      width: 16px;
-      height: 16px;
-      line-height: 24px;
-    }
-  }
-
-  .content {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    line-height: 50px;
-    position: relative;
-
-    .value {
-      font-size: 35px;
-    }
-
-    .unit {
-      font-size: 12px;
-      position: absolute;
-      right: 0;
-    }
-  }
-
-  .extends {
-    margin-left: 10px;
-    display: flex;
-    justify-content: center;
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 0 10px;
-
-    .extends-item {
-      font-size: 14px;
-      color: #888;
-    }
-  }
-}
-</style>