lambo-design-bi 0.0.174 → 0.0.176

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,47 @@ 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, "charts_note")){
+                  this.chartsNote = rowData["charts_note"]
+                }
+              }
+            } 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/num/index.vue

@@ -1,11 +1,12 @@
 <template>
   <LamboNumberInfoBi :title="title" :sub-title="subTitle" :num="num" :sub-num1="subNum1" :trend1="trend1"
-    :sub-num2="subNum2" :trend2="trend2" :polar1="polar1" :polar2="polar2">
+    :is-drill="isDrill" @on-drill="onDrill" :sub-num2="subNum2" :trend2="trend2" :polar1="polar1" :polar2="polar2">
   </LamboNumberInfoBi>
 </template>
 <script>
 import { getListMapData } from "../api/data"
 import LamboNumberInfoBi from "../../../pub/number-info/index"
+import { pageDrill } from '../util/router-util';
 
 export default {
   name: "BiNumIndex",
@@ -31,13 +32,27 @@ export default {
       polar1: null,
       subNum2: null,
       trend2: null,
-      polar2: null
+      polar2: null,
+      isDrill: false,
+      toPageId: null,
+      toRouteName: null,
+      drillK1: null,
+      drillV1: null,
+      drillK2: null,
+      drillV2: null,
+      drillK3: null,
+      dirllV3: null
     }
   },
   methods: {
     initConfig() {
       this.title = this.widget.options.title || this.widget.name || ''
       this.apiId = this.widget.options.apiId
+      this.toPageId = this.widget.options.toPageId
+      this.toRouteName = this.widget.options.toRouteName
+      if (this.toPageId && this.toRouteName) {
+        this.isDrill = true
+      }
     },
     doSearch() {
       if (!this.apiId) {
@@ -61,7 +76,19 @@ export default {
                 this.polar1 = row['polar1']
               }
               if (Object.prototype.hasOwnProperty.call(row, 'polar2')) {
-                this.polar2 = row['polar2'] 
+                this.polar2 = row['polar2']
+              }
+              if (Object.prototype.hasOwnProperty.call(row, 'drill_k1') && Object.prototype.hasOwnProperty.call(row, 'drill_v1')) {
+                this.drillK1 = row['drill_k1'] || ''
+                this.drillV1 = row['drill_v1'] || ''
+              }
+              if (Object.prototype.hasOwnProperty.call(row, 'drill_k2') && Object.prototype.hasOwnProperty.call(row, 'drill_v2')) {
+                this.drillK2 = row['drill_k2'] || ''
+                this.drillV2 = row['drill_v2'] || ''
+              }
+              if (Object.prototype.hasOwnProperty.call(row, 'drill_k3') && Object.prototype.hasOwnProperty.call(row, 'drill_v3')) {
+                this.drillK3 = row['drill_k3'] || ''
+                this.drillV3 = row['drill_v3'] || ''
               }
             }
           }
@@ -69,6 +96,32 @@ export default {
       }).catch(err => {
         console.error("数据卡片的调用服务[" + this.widget.options.apiId + "]异常：", err)
       })
+    },
+    async onDrill(obj) {
+      let drillKV = {}
+      if (this.drillK1 && this.drillV1) {
+        drillKV[this.drillK1] = this.drillV1
+      }
+      if (this.drillK2 && this.drillV2) {
+        drillKV[this.drillK2] = this.drillV2
+      }
+      if (this.drillK3 && this.drillV3) {
+        drillKV[this.drillK3] = this.drillV3
+      }
+      let drillParams = Object.assign({}, this.params, obj, drillKV)
+      try {
+        await pageDrill(
+          this.$router,
+          this.widget.rootId,
+          this.toPageId,
+          this.toRouteName,
+          drillParams
+        )
+        console.log('number 跳转成功')
+      } catch (error) {
+        console.error('num 跳转失败:', error.msg)
+        this.$message.error(error.msg)
+      }
     }
   },
   created() {

package/bi/widget/page/util/common.js

@@ -153,5 +153,4 @@ export function getSearchFormRes(formParams, pageWidget) {
     }
   }
   return emptySearchArr
-
 }

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

@@ -1,7 +1,7 @@
 <template>
   <div style="width: 100%">
     <LamboPagingTableBi ref="table" :auto-search="false" :columns="columns" :dataUrl="widget.options.url"
-      :export-batch-size="20000" :show-table-option="true" :exportName="widget.name"
+      :export-batch-size="20000" :show-table-option="false" :exportName="widget.name"
       :page-disable="widget.options.isPaging === '0'" :page-size="widget.options.pageSize" :export-request-limit="200"
       :isSingleSelectModel="true" :showSummary="widget.options.isPageSum === '1'" :summary-method="handleSummary"
       @on-data-load="onDataLoad" :searchParams="tableSearchParams">
@@ -41,7 +41,7 @@ export default {
     },
     goDetail(routerName, pageId, row) {
       let parentPageId = this.widget.rootId || ''
-      let newQuery = Object.assign({}, this.params, row);
+      let newQuery = Object.assign({}, this.params, row)
       newQuery['pageId'] = pageId
       newQuery['parentPageId'] = parentPageId
       console.log("goDetail newQuery:", newQuery)

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

@@ -0,0 +1,101 @@
+/**
+ * 下钻页公共方法 (Promise)
+ * 
+ * @param {*} router Vue Router 实例
+ * @param {*} fromPageId 源页面ID
+ * @param {*} toPageId 目标页面ID
+ * @param {*} toRouteName 目标路由名称
+ * @param {*} dataObj 传递的数据对象
+ * @returns {Promise} 返回Promise对象
+ */
+export function pageDrill(router, fromPageId, toPageId, toRouteName, dataObj = {}) {
+  return new Promise((resolve, reject) => {
+    // 参数验证
+    if (!fromPageId) {
+      const error = {
+        code: RES_CODE.PARAM_ERROR,
+        msg: "页面跳转失败，跳转参数源页面编码为空",
+        data: fromPageId
+      }
+      console.error("drill 参数 fromPageId 无效:", fromPageId)
+      reject(error)
+      return
+    }
+    if (!toPageId) {
+      const error = {
+        code: RES_CODE.PARAM_ERROR,
+        msg: "页面跳转失败，跳转参数目标页面编码为空",
+        data: toPageId
+      }
+      console.error("drill 参数 toPageId 无效:", toPageId)
+      reject(error)
+      return
+    }
+    if (!toRouteName) {
+      const error = {
+        code: RES_CODE.PARAM_ERROR,
+        msg: "页面跳转失败，跳转参数目标路由名称为空",
+        data: toRouteName
+      }
+      console.error("drill 参数 toRouteName 无效:", toRouteName)
+      reject(error)
+      return
+    }
+
+    // 构造查询参数
+    const drillParams = {
+      ...dataObj,
+      pageId: toPageId,
+      parentPageId: fromPageId,
+      toRouteName: toRouteName
+    }
+    console.log("drill 下钻跳转参数 drillParams:", drillParams)
+
+    // 执行跳转
+    router.push({
+      name: toRouteName,
+      query: drillParams
+    })
+      .then(() => {
+        resolve({
+          code: RES_CODE.SUCCESS,
+          msg: "页面跳转成功",
+          data: null
+        })
+      })
+      .catch(error => {
+        console.error("drill 页面跳转失败:", error)
+
+        let errorMsg = "页面跳转失败，未知原因跳转失败"
+        let errorCode = RES_CODE.PAGE_ERROR
+
+        if (error.name === 'NavigationDuplicated') {
+          errorMsg = "页面跳转失败，跳转同一页面"
+        } else if (error.message && error.message.includes('not found')) {
+          errorMsg = "页面跳转失败，页面不存在"
+        }
+
+        reject({
+          code: errorCode,
+          msg: errorMsg,
+          data: error
+        })
+      })
+  })
+}
+
+/**
+ * 返回状态码
+ */
+export const RES_CODE = {
+  // 成功
+  SUCCESS: 1,
+  // 未知原因失败 
+  UNKNOWN_ERROR: 0,
+  // 参数异常
+  PARAM_ERROR: 1001,
+  // 页面异常
+  PAGE_ERROR: 3001,
+  // 系统异常
+  SYSTEM_ERROR: 5001
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lambo-design-bi",
-  "version": "0.0.174",
+  "version": "0.0.176",
   "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/number-info/number-info.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="ivu-number-info">
-    <div class="ivu-number-info-title-lambo" v-if="title || $slots.title">
+    <div class="ivu-number-info-title-lambo title-div"
+    :class="{ 'isDrill': isDrill }" v-if="title || $slots.title" @click="drill">
       <slot name="title">{{ title }}</slot>
+      <Icon v-if="isDrill" type="ios-redo-outline" />
     </div>
-    <div class="ivu-number-info-subTitle" v-if="subTitle || $slots.subTitle">
+    <div v-if="subTitle" class="ivu-number-info-subTitle">
       <slot name="subTitle">{{ subTitle }}</slot>
     </div>
     <div class="ivu-number-info-value-lambo" :style="valueStyle">
@@ -56,7 +58,8 @@ export default {
       type: String
     },
     subTitle: {
-      type: String
+      type: String,
+      default: ''
     },
     num: {
       type: [String, Number]
@@ -71,7 +74,7 @@ export default {
     },
     polar1: {
       type: String,
-      required: false, 
+      required: false,
       validator(value) {
         return !value || ['pos', 'neg'].includes(value);
       }
@@ -86,7 +89,7 @@ export default {
     },
     polar2: {
       type: String,
-      required: false, 
+      required: false,
       validator(value) {
         return !value || ['pos', 'neg'].includes(value);
       }
@@ -94,6 +97,10 @@ export default {
     gap: {
       type: [String, Number],
       default: 6
+    },
+    isDrill: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
@@ -102,6 +109,12 @@ export default {
         'margin-top': this.gap + 'px'
       };
     }
+  },
+  methods: {
+    drill() {
+      console.log("number-info 点击了下钻按钮")
+      this.$emit('on-drill', {})
+    }
   }
 };
 </script>
@@ -124,4 +137,20 @@ export default {
   -webkit-transition: all .2s;
   transition: all .2s
 }
+
+.title-div {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: all 0.2s ease;
+    border-radius: 5px;
+}
+
+.title-div.isDrill {
+    cursor: pointer;
+}
+
+.title-div.isDrill:hover {
+    transform: scale(1.02);
+}
 </style>

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

@@ -218,7 +218,7 @@
       </div>
       </Col>
     </Row>
-    <Row style="margin-top:10px;">
+    <Row>
       <Col span="24">
       <Table v-if="hackReset" ref="tableRef" :border="tableBorder" :columns="tableColumns" :data="tableData"
         :disabledHover="disabledHover" :draggable="draggable" :height="tableHeight" :max-height="tableMaxHeight"

package/pub/words-info/index.vue

@@ -0,0 +1,64 @@
+<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>