lambo-design-bi 0.0.176 → 0.0.178

package/bi/widget/charts/index.vue

@@ -106,23 +106,20 @@ export default {
               let rows = res.data.data.rows
               if (rows && rows.length > 0) {
                 let rowData = rows[0]
-                if(rowData && Object.prototype.hasOwnProperty.call(rowData, "charts_note")){
-                  this.chartsNote = rowData["charts_note"]
+                if(rowData && Object.prototype.hasOwnProperty.call(rowData, "val")){
+                  this.chartsNote = rowData["val"]
                 }
               }
             } else {
               console.warn("charts说明服务[" + this.widget.options.apiId + "]请求数据为空：" + res.data.message)
-              this.noteApiId = null
               this.chartsNote = null
             }
           }
         }).catch(err => {
           console.error("charts说明服务[" + this.widget.options.apiId + "]请求异常：", err)
-          this.noteApiId = null
           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,104 @@
+<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() {
+      let oldTextList = this.widget.options.textList || []
+      let newTextList = oldTextList.map(item => ({
+        ...item,
+        titleStyle: parseStyleString(item.titleStyle),
+        valStyle: parseStyleString(item.valStyle)
+      }))
+      this.textList = newTextList
+    },
+    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)
+      }
+    },
+    parseStyleString(styleStr) {
+      if (typeof styleStr === 'string') {
+        try {
+          return JSON.parse(styleStr)
+        } catch (e) {
+          console.warn('样式字符串解析失败:', styleStr)
+          return {}
+        }
+      }
+      return styleStr || {}
+    }
+  },
+  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.176",
+  "version": "0.0.178",
   "description": "Vue2 BI 数据可视化组件库",
   "main": "index.js",
   "author": "finch",

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'

package/pub/words-info/index.vue

@@ -1,64 +0,0 @@
-<template>
-  <div>
-    <div class="words-item" v-for="(item, index) in suggestions" :key="index">
-      <div class="words-title" :style="{ background: item.titleBackgroundColor || '#21DA2E' }">
-        {{ item.title }}
-      </div>
-      <div class="words-content">{{ item.content }}</div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'LamboWordsInfoBi',
-  props: {
-    suggestions: {
-      type: Array,
-      default: () => [
-        {
-          title: '旺季建议',
-          titleBackgroundColor: '#1E58F8',
-          content: '成都市在旺季期间，例如11，12月份，装载率高于90%，建议增加配送车辆，优化路线规划，提高配送效率。成都市在旺季期间，例如11，12月份，装载率高于90%，建议增加配送车辆，优化路线规划，提高配送效率。成都市在旺季期间，例如11，12月份，装载率高于90%，建议增加配送车辆，优化路线规划，提高配送效率。成都市在旺季期间，例如11，12月份，装载率高于90%，建议增加配送车辆，优化路线规划，提高配送效率。成都市在旺季期间，例如11，12月份，装载率高于90%，建议增加配送车辆，优化路线规划，提高配送效率。成都市在旺季期间，例如11，12月份，装载率高于90%，建议增加配送车辆，优化路线规划，提高配送效率。成都市在旺季期间，例如11，12月份，装载率高于90%，建议增加配送车辆，优化路线规划，提高配送效率。'
-        },
-        {
-          title: '淡季建议',
-          titleBackgroundColor: '#21DA2E',
-          content: '成都市在旺季期间，例如11，12月份，装载率高于90%，建议增加配送车辆，优化路线规划，提高配送效率。成都市在旺季期间，例如11，12月份，装载率高于90%，建议增加配送车辆，优化路线规划，提高配送效率。成都市在旺季期间，例如11，12月份，装载率高于90%，建议增加配送车辆，优化路线规划，提高配送效率。'
-        }
-      ]
-    }
-  }
-}
-</script>
-<style scoped>
-.words-item {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 15px;
-}
-
-.words-item:last-child {
-  margin-bottom: 0;
-}
-
-.words-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; 
-}
-
-.words-content {
-  margin-top: -14px;
-  padding: 20px 5px 15px 5px; 
-  background: #F3F8FE;
-  border-radius: 5px;
-  line-height: 1.6;
-  font-size: 14px;
-}
-</style>