lambo-design-bi 0.0.175 → 0.0.177

package/bi/widget/charts/index.vue

@@ -1,5 +1,6 @@
 <template>
-  <LamboChartsFactory v-if="dataX" :height="height" :type="chartsType" :data-x="dataX" :data-y="dataY" :data-dim="dataDim">
+  <LamboChartsFactory v-if="dataX" :height="height" :type="chartsType" :data-x="dataX" :data-y="dataY"
+    :data-dim="dataDim" :charts-note="chartsNote">
   </LamboChartsFactory>
 </template>
 <script>
@@ -32,7 +33,9 @@ export default {
       xKey: null,
       yKey: null,
       dKey: null,
-      dataCol: null
+      dataCol: null,
+      noteApiId: null,
+      chartsNote: null
     }
   },
   methods: {
@@ -58,6 +61,7 @@ export default {
           this.dataCol = this.columns["data_col"]
         }
       }
+      this.noteApiId = this.widget.options.noteApiId
     },
     doSearch() {
       if (!this.apiId) {
@@ -66,7 +70,7 @@ export default {
       }
       getListMapData(this.apiId, this.params).then(res => {
         if (res.data.code === 0) {
-          console.error("charts组件调用服务[" + this.widget.options.apiId + "]失败：" + res.data.message)
+          console.error("charts数据服务[" + this.widget.options.apiId + "]请求失败：" + res.data.message)
         } else {
           if (res.data.data.rows.length > 0) {
             let rows = res.data.data.rows
@@ -78,21 +82,44 @@ export default {
                 this.dataY = resObj.dataY
                 this.dataDim = resObj.dataDim
               } else {
-                console.error("charts组件[" + this.widget.name + "]数据转换失败：" + resObj)
-                this.$Message.warning("charts组件[" + this.widget.name + "]数据转换失败")
+                console.error("charts数据服务[" + this.widget.name + "]数据转换失败：" + resObj)
+                this.$Message.warning("charts数据服务[" + this.widget.name + "]数据转换失败")
               }
             }
           } else {
-            console.warn("charts组件调用服务[" + this.widget.options.apiId + "]数据为空：" + res.data.message)
+            console.warn("charts数据服务[" + this.widget.options.apiId + "]请求数据为空：" + res.data.message)
             this.dataX = []
             this.dataY = []
             this.dataDim = []
           }
         }
       }).catch(err => {
-        console.error("charts的调用服务[" + this.widget.options.apiId + "]异常：", err)
+        console.error("charts数据服务[" + this.widget.options.apiId + "]请求异常：", err)
       })
 
+      if (this.noteApiId) {
+        getListMapData(this.noteApiId, this.params).then(res => {
+          if (res.data.code === 0) {
+            console.error("charts说明服务[" + this.widget.options.apiId + "]请求失败：" + res.data.message)
+          } else {
+            if (res.data.data.rows.length > 0) {
+              let rows = res.data.data.rows
+              if (rows && rows.length > 0) {
+                let rowData = rows[0]
+                if(rowData && Object.prototype.hasOwnProperty.call(rowData, "val")){
+                  this.chartsNote = rowData["val"]
+                }
+              }
+            } else {
+              console.warn("charts说明服务[" + this.widget.options.apiId + "]请求数据为空：" + res.data.message)
+              this.chartsNote = null
+            }
+          }
+        }).catch(err => {
+          console.error("charts说明服务[" + this.widget.options.apiId + "]请求异常：", err)
+          this.chartsNote = null
+        })
+      }
     }
   },
   computed: {

package/bi/widget/page/index.vue

@@ -1,13 +1,13 @@
 <!-- eslint-disable -->
 <template>
   <div>
-    <template v-for="(item, index) in widget.widgets">
-      <component :is="getWidgetName(item)" :widget="item" :key="index" :params="params">
+    <div v-for="(item, index) in widget.widgets" :key="index">
+      <component :is="getWidgetName(item)" :widget="item" :params="params">
         <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
           <slot :name="slot" v-bind="scope" />
         </template>
       </component>
-    </template>
+    </div>
   </div>
 </template>
 <script>

package/bi/widget/text/text-group.vue

@@ -0,0 +1,87 @@
+<template>
+  <lambo-text-obj-group-bi :text-obj-list="textList"></lambo-text-obj-group-bi>
+</template>
+<script>
+import LamboTextObjGroupBi from "../../../pub/text/text-obj-group.vue"
+import { getListMapData } from "../api/data"
+
+export default {
+  name: 'BiTextGroup',
+  components: { LamboTextObjGroupBi },
+  props: {
+    widget: {
+      type: Object,
+      default: () => ({})
+    },
+    params: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      textList: []
+    }
+  },
+  methods: {
+    initConfig() {
+      this.textList = this.widget.options.textList || []
+    },
+    async doSearch() {
+      if (!this.textList || this.textList.length < 1) {
+        this.$Message.warning("组件[" + this.widget.name + "]未配置全")
+        return false
+      }
+      
+      let apiIdArr = this.textList.map(item => item.apiId) || []
+      const promiseArray = apiIdArr.map((apiId, index) => {
+        return getListMapData(apiId, this.params)
+          .then(res => {
+            return { success: true, data: res, apiId, index }
+          })
+          .catch(err => {
+            return { success: false, error: err, apiId, index }
+          })
+      })
+
+      try {
+        const results = await Promise.all(promiseArray)
+        results.forEach(result => {
+          if (result.success) {
+            const res = result.data
+            if (res.data.code === 0) {
+              console.error(`文字卡片的服务[${result.apiId}]调用失败：${res.data.message}`)
+            } else {
+              if (res.data.data.rows.length > 0) {
+                let row = res.data.data.rows[0]
+                if (row) {
+                  this.$set(this.textList[result.index], 'val', row['val'])
+                }
+              }
+            }
+          } else {
+            console.error(`文字卡片的服务[${result.apiId}]调用异常：`, result.error)
+          }
+        })
+      } catch (error) {
+        console.error("文字卡片批量请求异常：", error)
+      }
+    }
+  },
+  created() {
+    console.log("text-group widget:", this.widget)
+    this.initConfig()
+    this.doSearch()
+  },
+  watch: {
+    params: {
+      handler: function (val, oldVal) {
+        console.log('text-group widget watch val,oldVal', val, oldVal)
+        this.doSearch()
+      },
+      deep: true
+    }
+  }
+}
+</script>
+<style scoped></style>

package/bi/widget/util/widget-map.js

@@ -8,6 +8,7 @@ import BiRow2 from "../layout/row2.vue"
 import BiCol from "../layout/col.vue"
 import BiDetailTable from "../table/detail-table.vue"
 import BiCharts from "../charts/index.vue"
+import BiTextGroup from '../text/text-group.vue';
 
 /**
  * Strictly define the order to prevent circular references. For component reuse, copy new components instead of direct references.
@@ -18,6 +19,7 @@ export const WIDGET_MAP = {
   "33": BiCol,
   "40": BiContainerCard,
   "41": BiNumIndex,
+  "46": BiTextGroup,
   "50": BiPagingTable,
   "51": BiDetailTable,
   "60": BiCharts,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lambo-design-bi",
-  "version": "0.0.175",
+  "version": "0.0.177",
   "description": "Vue2 BI 数据可视化组件库",
   "main": "index.js",
   "author": "finch",

package/pub/charts/echarts.vue

@@ -1,5 +1,8 @@
 <template>
-  <div ref="chartContainer" :style="{ width: '100%', height: height }"></div>
+  <div class="charts-with-note">
+    <div ref="chartContainer" :style="{ width: '100%', height: height }"></div>
+    <p v-if="chartsNote" v-html="chartsNote"></p>
+  </div>
 </template>
 <script>
 import * as echarts from 'echarts'
@@ -14,6 +17,10 @@ export default {
     height: {
       type: String,
       default: '300px'
+    },
+    chartsNote: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -27,7 +34,7 @@ export default {
   watch: {
     options: {
       handler(newOptions) {
-        console.log("watch options newOptions:", newOptions)       
+        console.log("watch options newOptions:", newOptions)
         if (this.chart) {
           this.chart.setOption(newOptions, true)
         }
@@ -38,13 +45,21 @@ export default {
   },
   methods: {
     initChart() {
-      if (!this.chart) {
+      this.$nextTick(() => {
         const container = this.$refs.chartContainer
         if (container) {
           this.chart = echarts.init(container)
           this.chart.setOption(this.options || {})
+
+          this.chart.resize()
+          const resizeChart = () => {
+            if (this.chart) {
+              this.chart.resize();
+            }
+          }
+          window.addEventListener('resize', resizeChart);
         }
-      }
+      })
     }
   },
   beforeDestroy() {
@@ -55,4 +70,10 @@ export default {
   }
 }
 </script>
-<style scoped></style>
+<style scoped>
+.chart-with-note {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+</style>

package/pub/charts/factory/charts-factory.vue

@@ -1,5 +1,5 @@
 <template>
-  <lambo-charts :options="getOptions" :height="height"></lambo-charts>
+  <lambo-charts :options="getOptions" :height="height" :charts-note="chartsNote"></lambo-charts>
 </template>
 <script>
 import LamboCharts from "../echarts.vue"
@@ -28,6 +28,10 @@ export default {
     height: {
       type: String,
       default: '300px'
+    },
+    chartsNote: {
+      type: String,
+      default: ''
     }
   },
   data() {

package/pub/charts/factory/options.js

@@ -168,10 +168,7 @@ export function getECharts(type, dataX, dataY, dataDim) {
           },
         },
         grid: {
-          top: '10%',
-          left: '2%',
-          bottom: '1%',
-          containLabel: true
+          top: '5px', left: '0px', right: '10px', bottom: '0px', containLabel: true
         },
         xAxis: {
           type: 'category',
@@ -287,10 +284,7 @@ export function getECharts(type, dataX, dataY, dataDim) {
           },
         },
         grid: {
-          top: '10%',
-          left: '2%',
-          bottom: '1%',
-          containLabel: true
+          top: '5px', left: '0px', right: '10px', bottom: '0px', containLabel: true
         },
         xAxis: {
           type: 'category',
@@ -365,10 +359,7 @@ export function getECharts(type, dataX, dataY, dataDim) {
           }
         },
         grid: {
-          top: '10%',
-          left: '2%',
-          bottom: '1%',
-          containLabel: true
+          top: '5px', left: '0px', right: '10px', bottom: '0px', containLabel: true
         },
         calculable: true,
         xAxis: {
@@ -492,10 +483,7 @@ export function getECharts(type, dataX, dataY, dataDim) {
           }
         },
         grid: {
-          top: '10%',
-          left: '2%',
-          bottom: '1%',
-          containLabel: true
+          top: '5px', left: '0px', right: '10px', bottom: '0px', containLabel: true
         },
         legend: {
           icon: 'roundRect',
@@ -609,10 +597,7 @@ export function getECharts(type, dataX, dataY, dataDim) {
           data: dataDim
         },
         grid: {
-          top: '10%',
-          left: '2%',
-          bottom: '1%',
-          containLabel: true
+          top: '5px', left: '0px', right: '10px', bottom: '0px', containLabel: true
         },
         xAxis: {
           type: 'category',
@@ -722,10 +707,7 @@ export function getECharts(type, dataX, dataY, dataDim) {
           data: dataDim
         },
         grid: {
-          top: '10%',
-          left: '2%',
-          bottom: '1%',
-          containLabel: true
+          top: '5px', left: '0px', right: '10px', bottom: '0px', containLabel: true
         },
         xAxis: {
           type: 'value',
@@ -814,10 +796,7 @@ export function getECharts(type, dataX, dataY, dataDim) {
           }
         },
         grid: {
-          top: '10%',
-          left: '2%',
-          bottom: '1%',
-          containLabel: true
+          top: '5px', left: '0px', right: '10px', bottom: '0px', containLabel: true
         },
         legend: {
           icon: 'roundRect',
@@ -931,10 +910,7 @@ export function getECharts(type, dataX, dataY, dataDim) {
           data: dataDim
         },
         grid: {
-          top: '10%',
-          left: '2%',
-          bottom: '1%',
-          containLabel: true
+          top: '5px', left: '0px', right: '10px', bottom: '0px', containLabel: true
         },
         xAxis: {
           type: 'value',
@@ -1024,10 +1000,7 @@ export function getECharts(type, dataX, dataY, dataDim) {
           data: dataDim
         },
         grid: {
-          top: '10%',
-          left: '2%',
-          bottom: '1%',
-          containLabel: true
+          top: '5px', left: '0px', right: '10px', bottom: '0px', containLabel: true
         },
         xAxis: {
           type: 'value',
@@ -1101,6 +1074,9 @@ export function getECharts(type, dataX, dataY, dataDim) {
           trigger: 'item',
           formatter: '{b}:<br/> {d}%<br/>{c}'
         },
+        grid: {
+          top: '5px', left: '0px', right: '10px', bottom: '0px', containLabel: true
+        },
         legend: {
           icon: 'circle',
           itemWidth: 8,
@@ -1399,7 +1375,7 @@ export function getECharts(type, dataX, dataY, dataDim) {
         sum += dataY[0][i]
       }
       let title33 = ''
-      if(dataDim && dataDim.length > 0){
+      if (dataDim && dataDim.length > 0) {
         title33 = formatTitle(dataDim[0])
       }
       opt = {
@@ -1523,7 +1499,7 @@ export function getECharts(type, dataX, dataY, dataDim) {
         });
       }
       let title34 = ''
-      if(dataDim && dataDim.length > 0){
+      if (dataDim && dataDim.length > 0) {
         title34 = formatTitle(dataDim[0])
       }
       opt = {
@@ -1835,10 +1811,7 @@ export function getECharts(type, dataX, dataY, dataDim) {
         backgroundColor: '#fff',
         color: colors,
         grid: {
-          top: '15%',
-          bottom: '54%',
-          left: "30%",
-          containLabel: false
+          top: '5px', left: '0px', right: '10px', bottom: '0px', containLabel: true
         },
         legend: {
           icon: 'circle',
@@ -2016,10 +1989,7 @@ export function getECharts(type, dataX, dataY, dataDim) {
         backgroundColor: '#fff',
         color: colors,
         grid: {
-          top: '15%',
-          bottom: '54%',
-          left: "30%",
-          containLabel: false
+          top: '5px', left: '0px', right: '10px', bottom: '0px', containLabel: true
         },
         legend: {
           icon: 'circle',

package/pub/text/text-obj-group.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <div class="text-obj-div" v-for="(item, index) in textObjList" :key="index">
+      <lambo-text-obj-bi :title="item.title" :title-style="item.titleStyle || { backgroundColor: defaultTitleColor }"
+        :val="item.val" :val-style="item.valStyle || {}"></lambo-text-obj-bi>
+    </div>
+  </div>
+</template>
+<script>
+import LamboTextObjBi from './text-obj.vue'
+import { BLUE_COLOR1 } from '../theme/color'
+
+export default {
+  name: 'LamboTextObjGroupBi',
+  components: { LamboTextObjBi },
+  props: {
+    textObjList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      defaultTitleColor: BLUE_COLOR1
+    }
+  }
+}
+</script>
+<style scoped>
+.text-obj-div {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 10px;
+}
+
+.text-obj-div:last-child {
+  margin-bottom: 0;
+}
+</style>

package/pub/text/text-obj.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="text-obj-container">
+    <div v-if="title" class="text-title" :style="titleStyle">
+      {{ title }}
+    </div>
+    <p class="text-content" :style="valStyle || {}" v-html="val">
+    </p>
+  </div>
+</template>
+<script>
+import { BLUE_COLOR1 } from '../theme/color'
+
+export default {
+  name: 'LamboTextObjBi',
+  props: {
+    title: {
+      type: String,
+      default: ""
+    },
+    val: {
+      type: String,
+      default: ""
+    },
+    // 标题样式对象
+    titleStyle: {
+      type: Object,
+      default: () => ({
+        backgroundColor: BLUE_COLOR1
+      })
+    },
+    // 内容样式对象
+    valStyle: {
+      type: Object,
+      default: () => ({})
+    }
+  }
+}
+</script>
+<style scoped>
+.text-obj-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.text-title {
+  width: 150px;
+  height: 30px;
+  line-height: 30px;
+  font-size: 14px;
+  font-weight: bold;
+  color: #FFFFFF;
+  text-align: center;
+  border-radius: 6px;
+  z-index: 1;
+}
+
+.text-content {
+  margin-top: -14px;
+  padding: 20px 5px 15px 5px;
+  border-radius: 5px;
+  line-height: 1.6;
+  font-size: 14px;
+}
+</style>

package/pub/theme/color.js

@@ -1,3 +1,14 @@
 
 // 这个color要根据lambo-design和ant-design去合并修改
-export const biColorArr = ['#2D8CF0', '#45D5D0', '#FFBF37', '#FD7336', '#655EF3', '#47D791', '#F85968', '#33BFF3', '#C74EF4', '#F84CEE', '#F5D000', '#B7E518']
+export const biColorArr = ['#57a3f3', '#47cb89', '#FFBF37', '#FD7336', '#655EF3', '#47D791', '#F85968', '#33BFF3', '#C74EF4', '#F84CEE', '#F5D000', '#B7E518']
+
+export const PRIMARY_COLOR = '#488aff'
+export const SUCC_COLOR = '#19be6b'
+export const WARNING_COLOR = '#ff9900'
+export const ERR_COLOR = '#ed4014'
+
+
+export const GREEN_COLOR1 = '#21DA2E'
+export const BLUE_COLOR1 = '#1E58F8'
+
+export const LIGHT_BLUE_BG_COLOR1 = '#F3F8FE'