misp-ui-library-test 0.0.1

package/src/packages/status-timeline-chart/src/main.vue

@@ -0,0 +1,499 @@
+<template>
+  <div class="ui-status-timeline-chart">
+    <transition name="fade">
+      <div
+        v-show="hasData"
+        v-init="chartInit"
+        v-resize="chartResize"
+        class="ui-status-timeline-chart__inner"
+      />
+    </transition>
+    <transition name="fade">
+      <div v-show="!hasData" class="ui-status-timeline-chart__empty">
+        <ui-no-data />
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import UiNoData from '../../no-data'
+import init from '../../../directives/init'
+import resize from '../../../directives/resize'
+import { debounce } from '../../../utils/lodash'
+import { DEFAULT_STATUS_COLOR_PALETTE } from './constants'
+import { buildStatusTimelineOption } from './option-builder'
+
+const RESIZE_DELAY = 200
+
+/**
+ * 状态时序图（甘特式状态条），基于 ECharts custom series
+ * @component
+ */
+export default {
+  name: 'UiStatusTimelineChart',
+  components: { UiNoData },
+  directives: { init, resize },
+  props: {
+    /** 接口数据结构：startTime、endTime、yAxis、summaries */
+    chartData: {
+      type: Object,
+      default: null
+    },
+    /** 是否显示「汇总」行 */
+    showSummary: {
+      type: Boolean,
+      default: true
+    },
+    /** 汇总行文案 */
+    summaryLabel: {
+      type: String,
+      default: '汇总'
+    },
+    /** 是否展示图例（可由接口/父组件动态绑定） */
+    displayLegend: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * 单行可视图例项数阈值：状态种数（yAxis 长度）大于该值时启用 `scroll` 图例，
+     * 两侧出现左右翻页箭头；不超过则为 `plain` 单行排布
+     */
+    legendMaxItemsPerRow: {
+      type: Number,
+      default: 6
+    },
+    /** 每项图例估算宽度（px），用于计算 scroll 模式下的 legend 宽度 */
+    legendItemApproxWidth: {
+      type: Number,
+      default: 88
+    },
+    /**
+     * 强制指定 scroll 图例宽度（数字为 px，或如 `'75%'`）；不传则按
+     * legendMaxItemsPerRow * legendItemApproxWidth + 翻页按钮区 自动估算
+     */
+    legendScrollWidth: {
+      type: [Number, String],
+      default: null
+    },
+    /** 合并到 ECharts legend 的配置 */
+    legendOption: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * 状态码 -> 颜色，覆盖默认色卡顺序
+     * @type {Record<string, string>}
+     */
+    colorMap: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * 色卡（默认 15 色，与文档一致）
+     */
+    presetColors: {
+      type: Array,
+      default: () => [...DEFAULT_STATUS_COLOR_PALETTE]
+    },
+    /** 静态模式下是否启用 DataZoom；动态模式强制关闭 */
+    enableDataZoom: {
+      type: Boolean,
+      default: true
+    },
+    /** 同 enableDataZoom 为 true 时的自定义 dataZoom 配置 */
+    dataZoom: {
+      type: [Array, Object, Boolean],
+      default: null
+    },
+    /** 合并到 ECharts xAxis（time） */
+    xAxisOption: {
+      type: Object,
+      default: () => ({})
+    },
+    /** 合并到 ECharts yAxis（category） */
+    yAxisOption: {
+      type: Object,
+      default: () => ({})
+    },
+    /** 合并到 grid */
+    grid: {
+      type: Object,
+      default: () => ({})
+    },
+    /** 传入 ECharts.init 的主题名或 null */
+    theme: {
+      type: [String, Object],
+      default: null
+    },
+    /**
+     * static：一次 setData + DataZoom 浏览
+     * dynamic：定时 request 拉数，带滑动窗口与更新动画，无 DataZoom
+     */
+    mode: {
+      type: String,
+      default: 'static',
+      validator: v => v === 'static' || v === 'dynamic'
+    },
+    /** 动态模式轮询间隔（毫秒） */
+    refreshInterval: {
+      type: Number,
+      default: 2000
+    },
+    /**
+     * 动态模式数据源，返回 Promise<chartData>
+     * 与 chartData 二选一：若同时存在，定时结果会覆盖展示
+     */
+    request: {
+      type: Function,
+      default: null
+    },
+    /** 动态模式可视窗口宽度（毫秒），默认约 24 小时 */
+    dynamicWindowMs: {
+      type: Number,
+      default: 86400000
+    },
+    /** 汇总行是否用 gapColor 填充无数据段 */
+    fillSummaryGaps: {
+      type: Boolean,
+      default: true
+    },
+    /** 无状态区/空档颜色 */
+    gapColor: {
+      type: String,
+      default: '#E4E7ED'
+    },
+    /** 单次渲染最大片段数，防止异常数据拖垮页面 */
+    maxSegments: {
+      type: Number,
+      default: 4000
+    },
+    animationDuration: {
+      type: Number,
+      default: 300
+    },
+    animationDurationUpdate: {
+      type: Number,
+      default: 650
+    },
+    /** setOption 是否 notMerge（一般保持 false 利于动画与性能） */
+    notMerge: {
+      type: Boolean,
+      default: false
+    },
+    /** setOption lazyUpdate */
+    lazyUpdate: {
+      type: Boolean,
+      default: true
+    },
+    /** 渲染前钩子 (option) => option */
+    beforeRender: {
+      type: Function,
+      default: null
+    },
+    /** 渲染后钩子 (instance) => void */
+    afterRender: {
+      type: Function,
+      default: null
+    },
+    /** 深度合并到最终 option */
+    echartsOption: {
+      type: Object,
+      default: () => ({})
+    },
+    /** 自定义 tooltip formatter，签名同 ECharts */
+    tooltipFormatter: {
+      type: Function,
+      default: null
+    }
+  },
+  data() {
+    return {
+      echartInstance: null,
+      optionBuffer: null,
+      pollTimer: null,
+      requestSeq: 0,
+      unmounted: false,
+      /** 动态 request 模式下由轮询写入，与 chartData 二选一（chartData 优先） */
+      internalChartData: null
+    }
+  },
+  computed: {
+    hasData() {
+      const d = this.effectiveData
+      if (!d || typeof d !== 'object') return false
+      const y = d.yAxis
+      const s = d.summaries
+      return Array.isArray(y) && y.length > 0 && Array.isArray(s) && s.length > 0
+    },
+    effectiveData() {
+      if (this.chartData != null && typeof this.chartData === 'object') {
+        return this.chartData
+      }
+      return this.internalChartData
+    },
+    dataZoomEnabled() {
+      if (this.mode === 'dynamic') return false
+      return this.enableDataZoom !== false
+    }
+  },
+  watch: {
+    theme() {
+      this.rerender()
+    },
+    chartData: {
+      deep: true,
+      handler() {
+        if (this.mode === 'static') this.scheduleRender()
+      }
+    },
+    showSummary() {
+      this.scheduleRender()
+    },
+    summaryLabel() {
+      this.scheduleRender()
+    },
+    displayLegend() {
+      this.scheduleRender()
+    },
+    legendMaxItemsPerRow() {
+      this.scheduleRender()
+    },
+    legendItemApproxWidth() {
+      this.scheduleRender()
+    },
+    legendScrollWidth() {
+      this.scheduleRender()
+    },
+    legendOption: {
+      deep: true,
+      handler() {
+        this.scheduleRender()
+      }
+    },
+    colorMap: {
+      deep: true,
+      handler() {
+        this.scheduleRender()
+      }
+    },
+    presetColors: {
+      deep: true,
+      handler() {
+        this.scheduleRender()
+      }
+    },
+    mode(val) {
+      this.stopPoll()
+      if (val === 'dynamic') this.startPoll()
+      this.scheduleRender()
+    },
+    refreshInterval() {
+      if (this.mode === 'dynamic') {
+        this.stopPoll()
+        this.startPoll()
+      }
+    },
+    request: {
+      handler() {
+        if (this.mode === 'dynamic') {
+          this.stopPoll()
+          this.startPoll()
+        }
+      }
+    }
+  },
+  created() {
+    this.chartResize = debounce(function resizeCb() {
+      this.echartInstance && this.echartInstance.resize()
+    }, RESIZE_DELAY)
+    this.scheduleRender = debounce(function schedule() {
+      this.renderFromBuffer()
+    }, 50)
+  },
+  mounted() {
+    if (this.mode === 'dynamic') this.startPoll()
+  },
+  beforeDestroy() {
+    this.unmounted = true
+    this.stopPoll()
+    if (this.echartInstance) {
+      this.echartInstance.dispose()
+      this.echartInstance = null
+    }
+  },
+  methods: {
+    chartInit(el) {
+      this.echartInstance = echarts.init(el, this.theme || null, {
+        renderer: 'canvas',
+        // 矩形与部分组件（图例/坐标轴文字等）在 5.x 下偶发不刷新，关闭以保证图例稳定显示
+        useDirtyRect: false
+      })
+      this.renderFromBuffer()
+    },
+    buildOption() {
+      if (!this.hasData) return null
+      const zoomCfg =
+        this.dataZoomEnabled && (this.dataZoom == null ? true : this.dataZoom)
+      let opt = buildStatusTimelineOption({
+        payload: this.effectiveData,
+        showSummary: this.showSummary,
+        summaryLabel: this.summaryLabel,
+        displayLegend: this.displayLegend,
+        legendMaxItemsPerRow: this.legendMaxItemsPerRow,
+        legendItemApproxWidth: this.legendItemApproxWidth,
+        legendScrollWidth: this.legendScrollWidth,
+        legendOption: this.legendOption,
+        colorMap: this.colorMap,
+        presetColors: this.presetColors,
+        dataZoom: zoomCfg === true ? undefined : zoomCfg,
+        enableDataZoom: !!this.dataZoomEnabled && zoomCfg !== false,
+        xAxisOption: this.xAxisOption,
+        yAxisOption: this.yAxisOption,
+        grid: this.grid,
+        gapColor: this.gapColor,
+        fillSummaryGaps: this.fillSummaryGaps,
+        tooltipFormatter: this.tooltipFormatter,
+        dynamicWindowMs: this.mode === 'dynamic' ? this.dynamicWindowMs : null,
+        maxSegments: this.maxSegments,
+        animationDuration: this.animationDuration,
+        animationDurationUpdate: this.animationDurationUpdate,
+        echartsOption: this.echartsOption
+      })
+      if (opt && opt._invalid) return null
+      if (this.beforeRender) opt = this.beforeRender(opt) || opt
+      return opt
+    },
+    renderFromBuffer() {
+      const opt = this.buildOption()
+      this.optionBuffer = opt
+      if (!this.echartInstance || !opt) return
+      this.echartInstance.setOption(opt, {
+        notMerge: this.notMerge,
+        lazyUpdate: this.lazyUpdate
+      })
+      if (this.afterRender) this.afterRender(this.echartInstance)
+      this.$emit('rendered', this.echartInstance)
+    },
+    rerender() {
+      if (this.echartInstance) {
+        this.echartInstance.dispose()
+        this.echartInstance = null
+      }
+      this.$nextTick(() => {
+        const el = this.$el && this.$el.querySelector('.ui-status-timeline-chart__inner')
+        if (el && this.hasData) {
+          this.echartInstance = echarts.init(el, this.theme || null, {
+            renderer: 'canvas',
+            useDirtyRect: false
+          })
+          this.renderFromBuffer()
+        }
+      })
+    },
+    /** 外部调用：按当前 chartData 重绘 */
+    refresh() {
+      this.scheduleRender()
+    },
+    getEchartsInstance() {
+      return this.echartInstance
+    },
+    stopPoll() {
+      if (this.pollTimer) {
+        clearInterval(this.pollTimer)
+        this.pollTimer = null
+      }
+    },
+    startPoll() {
+      this.stopPoll()
+      if (this.mode !== 'dynamic' || typeof this.request !== 'function') return
+      const tick = async () => {
+        if (this.unmounted) return
+        const seq = ++this.requestSeq
+        try {
+          const data = await this.request()
+          if (this.unmounted || seq !== this.requestSeq) return
+          if (data && typeof data === 'object') {
+            this.$emit('data-loaded', data)
+            this.applyExternalData(data)
+          }
+        } catch (e) {
+          if (!this.unmounted) this.$emit('load-error', e)
+        }
+      }
+      tick()
+      this.pollTimer = setInterval(tick, Math.max(500, this.refreshInterval))
+    },
+    applyExternalData(data) {
+      this.internalChartData = data
+      const opt = buildStatusTimelineOption({
+        payload: data,
+        showSummary: this.showSummary,
+        summaryLabel: this.summaryLabel,
+        displayLegend: this.displayLegend,
+        legendMaxItemsPerRow: this.legendMaxItemsPerRow,
+        legendItemApproxWidth: this.legendItemApproxWidth,
+        legendScrollWidth: this.legendScrollWidth,
+        legendOption: this.legendOption,
+        colorMap: this.colorMap,
+        presetColors: this.presetColors,
+        dataZoom: false,
+        enableDataZoom: false,
+        xAxisOption: this.xAxisOption,
+        yAxisOption: this.yAxisOption,
+        grid: this.grid,
+        gapColor: this.gapColor,
+        fillSummaryGaps: this.fillSummaryGaps,
+        tooltipFormatter: this.tooltipFormatter,
+        dynamicWindowMs: this.dynamicWindowMs,
+        maxSegments: this.maxSegments,
+        animationDuration: this.animationDuration,
+        animationDurationUpdate: this.animationDurationUpdate,
+        echartsOption: this.echartsOption
+      })
+      if (!opt || opt._invalid) return
+      let finalOpt = this.beforeRender ? this.beforeRender(opt) || opt : opt
+      this.optionBuffer = finalOpt
+      if (this.echartInstance) {
+        this.echartInstance.setOption(finalOpt, {
+          notMerge: this.notMerge,
+          lazyUpdate: this.lazyUpdate
+        })
+        if (this.afterRender) this.afterRender(this.echartInstance)
+        this.$emit('rendered', this.echartInstance)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ui-status-timeline-chart {
+  width: 100%;
+  height: 100%;
+  min-height: 280px;
+  position: relative;
+}
+.ui-status-timeline-chart__inner {
+  width: 100%;
+  height: 100%;
+  min-height: 280px;
+}
+.ui-status-timeline-chart__empty {
+  width: 100%;
+  height: 100%;
+  min-height: 280px;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>