lw-cdp-ui 1.4.35 → 1.4.37

package/dist/components/lwBiChart/charts/AreaChart.vue

@@ -78,13 +78,13 @@ export default {
           yAxis: this.getYAxisOption(setting),
           series: this.getSeriesData(setting, tables),
           color: setting.color,
-          textStyle: setting.textStyle || {}
+          textStyle: setting.textStyle || {},
+          dataZoom: this.getDataZoomOption(setting, tables)
         }
       } else {
         this.option = option
       }
 
-
       this.option && this.chart.setOption(this.option, true)
       setTimeout(() => {
         this.chart.resize()
@@ -123,7 +123,7 @@ export default {
     defaultTooltipFormatter(params) {
       return params
         .map(
-          item => `
+          (item) => `
         <div style="display:flex;align-items:center;">
           <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${item.color};margin-right:5px;"></span>
           ${item.seriesName}: ${item.value}
@@ -170,16 +170,16 @@ export default {
           ...(setting.toolbox.feature || {}),
           saveAsImage: setting.toolbox.feature?.saveAsImage?.show
             ? {
-              type: 'png',
-              pixelRatio: 2,
-              ...setting.toolbox.feature.saveAsImage
-            }
+                type: 'png',
+                pixelRatio: 2,
+                ...setting.toolbox.feature.saveAsImage
+              }
             : undefined,
           dataView: setting.toolbox.feature?.dataView?.show
             ? {
-              readOnly: true,
-              ...setting.toolbox.feature.dataView
-            }
+                readOnly: true,
+                ...setting.toolbox.feature.dataView
+              }
             : undefined
         }
       }
@@ -212,11 +212,18 @@ export default {
       if (value >= 1000) return (value / 1000).toFixed(1) + 'k'
       return value
     },
+    getDataZoomOption(setting, tables) {
+      if (tables?.[0].headers?.length <= 15) return undefined
 
+      return [
+        { type: 'inside', start: 0, endValue: 15 },
+        { start: 0, endValue: 15 }
+      ]
+    },
     getSeriesData(setting, tables) {
       let list = []
       tables.map((table, index) => {
-        table.rows.map(row => {
+        table.rows.map((row) => {
           list.push({
             name: row.name,
             type: 'line',

package/dist/components/lwBiChart/charts/MetricCard.vue

@@ -170,11 +170,11 @@ export default {
         const positionGroup = []
 
         // 3. 遍历每个table，获取第i个header和对应的value
-        tables.forEach((table) => {
+        tables.forEach((table, index) => {
           // 如果当前table的headers长度不够，跳过或用默认值
           if (i < table.headers.length) {
             const header = table.headers[i]
-            const metricName = table.metricName
+            const metricName = index == 0 ? setting?.title?.text || table.metricName : table.metricName
             const value = table.rows[0].values[i]
 
             positionGroup.push({

package/dist/components/lwCronSelect/index.vue

@@ -1,86 +1,66 @@
 <template>
-  <el-input v-model="showInput"
-            placeholder="CRON">
-
+  <el-input v-model="showInput" placeholder="CRON">
     <template #append>
-      <el-popover placement="top"
-                  :width="380"
-                  :visible="visible"
-                  trigger="click">
+      <el-popover placement="top" :width="380" :visible="visible" trigger="click">
         <template #reference>
           <el-button @click="visible = true">选择</el-button>
         </template>
         <div class="select-model">
-          <el-select v-model="setData.curType"
-                     placeholder="选择类型"
-                     @change="changeInt"
-                     style="margin-right: 5px;min-width: 80px;width: 80px">
-            <el-option label="每天"
-                       :value="3" />
-            <el-option label="每月"
-                       :value="4" />
-            <el-option label="每周"
-                       :value="5" />
+          <el-select
+            v-model="setData.curType"
+            placeholder="选择类型"
+            @change="changeInt"
+            style="margin-right: 5px; min-width: 80px; width: 80px">
+            <el-option label="每天" :value="3" />
+            <el-option label="每月" :value="4" />
+            <el-option label="每周" :value="5" />
           </el-select>
 
-          <el-select v-if="setData.curType === 4"
-                     v-model="setData.day"
-                     multiple
-                     allow-clear
-                     placeholder="日期"
-                     @change="changeDay"
-                     :max-tag-count="1"
-                     style="margin-right: 5px; min-width: 120px">
-            <el-option label="最后一天"
-                       value="L" />
-            <el-option v-for="item in 31"
-                       :key="item"
-                       :label="item"
-                       :value="item"
-                       :disabled="setData.day.indexOf('L') !== -1" />
+          <el-select
+            v-if="setData.curType === 4"
+            v-model="setData.day"
+            multiple
+            allow-clear
+            placeholder="日期"
+            @change="changeDay"
+            :max-tag-count="1"
+            style="margin-right: 5px; min-width: 120px">
+            <el-option label="最后一天" value="L" />
+            <el-option
+              v-for="item in 31"
+              :key="item"
+              :label="item"
+              :value="item"
+              :disabled="setData.day.indexOf('L') !== -1" />
           </el-select>
 
-          <el-select v-if="setData.curType === 5"
-                     v-model="setData.weeks"
-                     multiple
-                     allow-clear
-                     placeholder="星期"
-                     @change="changeWeeks"
-                     :max-tag-count="1"
-                     style="margin-right: 5px; min-width: 120px">
-            <el-option label="周日"
-                       value="1"
-                       :disabled="setData.weeks.indexOf('?') !== -1" />
-            <el-option label="周一"
-                       value="2"
-                       :disabled="setData.weeks.indexOf('?') !== -1" />
-            <el-option label="周二"
-                       value="3"
-                       :disabled="setData.weeks.indexOf('?') !== -1" />
-            <el-option label="周三"
-                       value="4"
-                       :disabled="setData.weeks.indexOf('?') !== -1" />
-            <el-option label="周四"
-                       value="5"
-                       :disabled="setData.weeks.indexOf('?') !== -1" />
-            <el-option label="周五"
-                       value="6"
-                       :disabled="setData.weeks.indexOf('?') !== -1" />
-            <el-option label="周六"
-                       value="7"
-                       :disabled="setData.weeks.indexOf('?') !== -1" />
+          <el-select
+            v-if="setData.curType === 5"
+            v-model="setData.weeks"
+            multiple
+            allow-clear
+            placeholder="星期"
+            @change="changeWeeks"
+            :max-tag-count="1"
+            style="margin-right: 5px; min-width: 120px">
+            <el-option label="周日" value="1" :disabled="setData.weeks.indexOf('?') !== -1" />
+            <el-option label="周一" value="2" :disabled="setData.weeks.indexOf('?') !== -1" />
+            <el-option label="周二" value="3" :disabled="setData.weeks.indexOf('?') !== -1" />
+            <el-option label="周三" value="4" :disabled="setData.weeks.indexOf('?') !== -1" />
+            <el-option label="周四" value="5" :disabled="setData.weeks.indexOf('?') !== -1" />
+            <el-option label="周五" value="6" :disabled="setData.weeks.indexOf('?') !== -1" />
+            <el-option label="周六" value="7" :disabled="setData.weeks.indexOf('?') !== -1" />
           </el-select>
 
-          <el-time-picker v-model="setData.timeData"
-                          placeholder="时分秒"
-                          value-format="HH:mm:ss"
-                          style="min-width: 100px" />
-
+          <el-time-picker
+            v-model="setData.timeData"
+            placeholder="时分秒"
+            value-format="HH:mm:ss"
+            style="min-width: 100px" />
         </div>
-        <div style="margin-top: 10px; text-align: right;">
+        <div style="margin-top: 10px; text-align: right">
           <el-button @click="visible = false">取消</el-button>
-          <el-button type="primary"
-                     @click="changeOk">确定</el-button>
+          <el-button type="primary" @click="changeOk">确定</el-button>
         </div>
       </el-popover>
     </template>
@@ -88,7 +68,7 @@
 </template>
 
 <script>
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue'
 
 export default {
   name: 'lwCronSelect',
@@ -139,13 +119,35 @@ export default {
 
     // 初始化setData对象，用于内部数据管理
     const setData = ref({
-      curType: dataList.value[4] !== '*' ? 4 : dataList.value[5] === '?' ? 3 : 5,
-      day: dataList.value[3] === '*' ? [] : dataList.value[3]?.split(','),
-      month: dataList.value[4] === '*' ? [] : dataList.value[4]?.split(','),
-      weeks: dataList.value[5] === '?' ? [] : dataList.value[5]?.split(','),
-      timeData: dataList.value[0] === '*' ? '' : `${dataList.value[2]}:${dataList.value[1]}:${dataList.value[0]}`
+      curType: 3,
+      day: [],
+      month: [],
+      weeks: [],
+      timeData: ''
     })
 
+    watch(
+      () => visible.value,
+      (val) => {
+        if (val) {
+          const values = props.modelValue ? props.modelValue.split(' ') : ['*', '*', '*', '*', '*', '?']
+
+          const hasDay = values[3] !== '*' && values[3] !== '?'
+          const hasWeek = values[5] !== '*' && values[5] !== '?'
+
+          const curType = hasDay ? 4 : hasWeek ? 5 : 3
+
+          setData.value = {
+            curType,
+            day: hasDay ? values[3].split(',') : [],
+            month: values[4] === '*' ? [] : values[4].split(','),
+            weeks: hasWeek ? values[5].split(',') : [],
+            timeData: values[0] === '*' ? '' : `${values[2]}:${values[1]}:${values[0]}`
+          }
+        }
+      }
+    )
+
     /**
      * 处理日期选择
      * @param {string} val - 选择的日期值
@@ -179,9 +181,9 @@ export default {
      */
     const changeOk = () => {
       const time = setData.value.timeData ? setData.value.timeData.split(':') : ['*', '*', '*']
-      dataList.value[0] = time[2] === "*" ? time[2] : parseInt(time[2], 10).toString()
-      dataList.value[1] = time[1] === "*" ? time[1] : parseInt(time[1], 10).toString()
-      dataList.value[2] = time[0] === "*" ? time[0] : parseInt(time[0], 10).toString()
+      dataList.value[0] = time[2] === '*' ? time[2] : parseInt(time[2], 10).toString()
+      dataList.value[1] = time[1] === '*' ? time[1] : parseInt(time[1], 10).toString()
+      dataList.value[2] = time[0] === '*' ? time[0] : parseInt(time[0], 10).toString()
 
       dataList.value[3] = setData.value.day.length > 0 ? setData.value.day.toString() : '*'
       dataList.value[4] = setData.value.month.length > 0 ? setData.value.month.toString() : '*'
@@ -212,7 +214,7 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.select-model{
+.select-model {
   display: flex;
 }
-</style>
+</style>

package/dist/components/lwFormMini/FormItem.vue

@@ -1,16 +1,15 @@
 <template>
   <!-- 间隔标题 -->
-  <div v-if="item.component == 'divider'"
-       class="title-name title-name-divider"
-       :id="'divider-' + item.label"
-       :data-index="item.label">
+  <div
+    v-if="item.component == 'divider'"
+    class="title-name title-name-divider"
+    :id="'divider-' + item.label"
+    :data-index="item.label">
     <span>
       {{ item.label }}
-      <el-tooltip v-if="item.tips"
-                  placement="top">
+      <el-tooltip v-if="item.tips" placement="top">
         <template #content>
-          <span style="max-width: 300px; display: inline-block;"
-                v-html="item.tips"></span>
+          <span style="max-width: 300px; display: inline-block" v-html="item.tips"></span>
         </template>
         <el-icon><el-icon-question-filled /></el-icon>
       </el-tooltip>
@@ -19,99 +18,92 @@
   </div>
 
   <!-- 表单内容 -->
-  <el-form-item v-else
-                :class="{ 'form-item-name-null': !item?.label }"
-                :prop="getPropName(item)"
-                :rules="rulesHandle(item)">
+  <el-form-item
+    v-else
+    :class="{ 'form-item-name-null': !item?.label }"
+    :prop="getPropName(item)"
+    :rules="rulesHandle(item)">
     <template #label>
       {{ item.label }}
-      <el-tooltip v-if="item.tips"
-                  :raw-content="item?.rawContent"
-                  placement="top"
-                  :content="item.tips">
+      <el-tooltip v-if="item.tips" :raw-content="item?.rawContent" placement="top" :content="item.tips">
         <template #content>
-          <span style="max-width: 300px; display: inline-block;"
-                v-html="item.tips"></span>
+          <span style="max-width: 300px; display: inline-block" v-html="item.tips"></span>
         </template>
         <el-icon><el-icon-question-filled /></el-icon>
       </el-tooltip>
     </template>
     <!-- cascader 组个组件有问题  动态加载下拉文字不会显示 -->
     <template v-if="item.component == 'cascader'">
-      <el-cascader v-model="objItem.value"
-                   style="width: 100%;"
-                   :props="item?.options?.props"
-                   :separator="item?.options?.separator"
-                   :disabled="item?.options?.disabled"
-                   :placeholder="item?.options?.placeholder"
-                   :options="item?.options.items"
-                   clearable></el-cascader>
+      <el-cascader
+        v-model="objItem.value"
+        style="width: 100%"
+        :props="item?.options?.props"
+        :separator="item?.options?.separator"
+        :disabled="item?.options?.disabled"
+        :placeholder="item?.options?.placeholder"
+        :options="item?.options.items"
+        clearable></el-cascader>
     </template>
     <!-- 动态组件 -->
     <template v-else-if="componentType.includes(item.component)">
-      <FormComponent v-model="objItem.value"
-                     :item="item"
-                     :disabled="item?.options?.disabled" />
+      <FormComponent v-model="objItem.value" :item="item" :disabled="item?.options?.disabled" />
     </template>
 
     <!-- upload -->
     <template v-else-if="item.component == 'upload'">
-      <template v-for="(_item, _index) in objItem?.options.items"
-                :key="_index">
-        <lw-upload v-model="_item.value"
-                   :height="_item?.height || item.height"
-                   :width="_item?.width || item.width"
-                   :maxSize="_item.maxSize"
-                   :accept="_item.accept"
-                   :title="_item.label"
-                   :parseData="item.parseData"
-                   :disabled="_item?.disabled"
-                   :multiple="_item?.multiple"
-                   :limit="_item?.limit"
-                   :returnFile="_item?.returnFile"
-                   :tip="_item?.tip"
-                   :apiObj="item.apiObj"></lw-upload>
-
+      <template v-for="(_item, _index) in objItem?.options.items" :key="_index">
+        <lw-upload
+          v-model="_item.value"
+          :height="_item?.height || item.height"
+          :width="_item?.width || item.width"
+          :maxSize="_item.maxSize"
+          :accept="_item.accept"
+          :title="_item.label"
+          :parseData="item.parseData"
+          :disabled="_item?.disabled"
+          :multiple="_item?.multiple"
+          :limit="_item?.limit"
+          :returnFile="_item?.returnFile"
+          :tip="_item?.tip"
+          :apiObj="item.apiObj"></lw-upload>
       </template>
     </template>
 
     <!-- tags -->
     <template v-else-if="item.component == 'tags'">
       <div class="tags-list">
-        <el-tag v-for="tag in objItem.value"
-                :key="tag"
-                :closable="!item?.options?.disabled || item?.options?.closable"
-                :disable-transitions="false"
-                @close="tagClose(tag, objItem.value)">
+        <el-tag
+          v-for="tag in objItem.value"
+          :key="tag"
+          :closable="!item?.options?.disabled || item?.options?.closable"
+          :disable-transitions="false"
+          @close="tagClose(tag, objItem.value)">
           {{ tag }}
         </el-tag>
-        <el-input v-if="tagVisible[item.name]"
-                  v-model="tagValue"
-                  class="w-20"
-                  size="small"
-                  @keyup.enter="tagInputConfirm(item, objItem.value)"
-                  @blur="tagInputConfirm(item, objItem.value)" />
-        <el-button v-if="!tagVisible[item.name] && !item?.options?.disabled"
-                   class="button-new-tag"
-                   size="small"
-                   @click="tagVisible[item.name] = true">
-          + {{item?.options?.addText || '添加'}}
+        <el-input
+          v-if="tagVisible[item.name]"
+          v-model="tagValue"
+          class="w-20"
+          size="small"
+          @keyup.enter="tagInputConfirm(item, objItem.value)"
+          @blur="tagInputConfirm(item, objItem.value)" />
+        <el-button
+          v-if="!tagVisible[item.name] && !item?.options?.disabled"
+          class="button-new-tag"
+          size="small"
+          @click="tagVisible[item.name] = true">
+          + {{ item?.options?.addText || '添加' }}
         </el-button>
       </div>
     </template>
 
     <!-- 没有组件是component值 就是插槽名称 -->
     <template v-else>
-      <slot :name="item.component"
-            :itemCur="item"
-            :formCur="form">
-        <el-tag type="danger">[{{ item.component }}]
-          没有这个默认组件也未自定义插槽内容</el-tag>
+      <slot :name="item.component" :itemCur="item" :formCur="form">
+        <el-tag type="danger">[{{ item.component }}] 没有这个默认组件也未自定义插槽内容</el-tag>
       </slot>
     </template>
-    <div v-if="item.message"
-         class="el-form-item-msg"
-         v-html="item.message"></div>
+    <div v-if="item.message" class="el-form-item-msg" v-html="item.message"></div>
   </el-form-item>
 </template>
 
@@ -150,7 +142,7 @@ export default {
   watch: {
     item: {
       handler(val, oldVal) {
-        this.objItem = {...val, ...this.objItem}
+        this.objItem = { ...val, ...this.objItem }
       },
       immediate: true,
       deep: true
@@ -158,7 +150,7 @@ export default {
     form: {
       handler(val) {
         if (this.item.component === 'checkbox' || this.item.component === 'upload') {
-          this.objItem.options?.items?.forEach(option => {
+          this.objItem.options?.items?.forEach((option) => {
             option.value = this.flattenObject(this.form, option.name, option.value)
           })
         } else {
@@ -171,7 +163,7 @@ export default {
     objItem: {
       handler(val) {
         if (val.component === 'checkbox' || val.component === 'upload') {
-          val.options?.items?.forEach(option => {
+          val.options?.items?.forEach((option) => {
             this.unflattenObject(this.form, option.name, option.value)
           })
         } else {
@@ -252,7 +244,7 @@ export default {
           const requiredHandleFunc = new Function('form', `return ${item.requiredHandle.replace(/\$/g, 'form')}`)
           const exp = requiredHandleFunc(this.form)
 
-          const requiredRule = item.rules.find(t => 'required' in t)
+          const requiredRule = item.rules.find((t) => 'required' in t)
           if (requiredRule) {
             requiredRule.required = exp
           }
@@ -266,7 +258,6 @@ export default {
 }
 </script>
 
-
 <style lang="scss" scoped>
 .w-20 {
   width: 100px;
@@ -294,6 +285,7 @@ export default {
 }
 :deep(.el-form-item__label) {
   position: relative;
+  display: inline-block;
   > .el-tooltip__trigger {
     position: absolute;
     right: 0;