vue2-client 1.18.7 → 1.18.9

package/src/base-client/components/his/HChart/HChart.vue

@@ -1,8 +1,47 @@
 <template>
   <div class="h-chart-configurable" :class="wrapperClassObject">
     <x-title v-if="chartTitle" v-bind="xTitleAttrs" :title="chartTitle" />
-    <!-- 图表挂载容器 -->
-    <div ref="chartRef" class="chart-canvas" :style="chartStyle"></div>
+    <div class="chart-layout">
+      <div v-if="showSideList" class="chart-side-list">
+        <div v-if="sideListLabel" class="side-list-label">{{ sideListLabel }}</div>
+        <div class="side-list-menu">
+          <button
+            v-for="option in sideListOptions"
+            :key="option.value"
+            type="button"
+            class="side-list-item"
+            :class="{ 'is-active': option.value === selectedSideListValue }"
+            @click="handleListChange(option.value)"
+          >
+            <span class="item-label">{{ option.label }}</span>
+            <span v-if="option.badge" class="item-badge">{{ option.badge }}</span>
+          </button>
+        </div>
+      </div>
+      <div class="chart-main">
+        <div v-if="showRadioFilter" class="chart-toolbar">
+          <span v-if="radioFilterLabel" class="toolbar-label">{{ radioFilterLabel }}</span>
+          <div class="toolbar-radio-group">
+            <label
+              v-for="option in radioFilterOptions"
+              :key="option.value"
+              class="radio-pill"
+              :class="{ 'is-active': option.value === selectedFilterValue }"
+            >
+              <input
+                type="radio"
+                class="radio-pill-input"
+                :value="option.value"
+                :checked="option.value === selectedFilterValue"
+                @change="handleFilterChange(option.value)"
+              />
+              <span>{{ option.label }}</span>
+            </label>
+          </div>
+        </div>
+        <div ref="chartRef" class="chart-canvas" :style="chartStyle"></div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -47,6 +86,9 @@ const chartConfig = ref(null)
 const chartData = ref([])
 const loading = ref(false)
 let resizeObserver = null
+const activePointIndex = ref(-1)
+const selectedFilterValue = ref('')
+const selectedSideListValue = ref('')
 
 // 记录上一次的 queryParamsName，用于比较变化
 const lastQueryParamsName = ref('')
@@ -66,6 +108,87 @@ const chartStyle = computed(() => {
   if (target.style && typeof target.style === 'object') return target.style
   return {}
 })
+const radioFilterConfig = computed(() => props.config?.radioFilter || chartConfig.value?.radioFilter || null)
+const radioFilterOptions = computed(() => {
+  const options = radioFilterConfig.value?.options
+  return Array.isArray(options) ? options : []
+})
+const radioFilterLabel = computed(() => radioFilterConfig.value?.label || '')
+const showRadioFilter = computed(() => radioFilterOptions.value.length > 0)
+const filterFieldName = computed(() => radioFilterConfig.value?.field || radioFilterConfig.value?.prop || 'dimension')
+const filterQueryParams = computed(() => {
+  if (!showRadioFilter.value) return {}
+  const optionValue = selectedFilterValue.value
+  if (optionValue === undefined || optionValue === null || optionValue === '') return {}
+  return { [filterFieldName.value]: optionValue }
+})
+const sideListConfig = computed(() => props.config?.sideList || chartConfig.value?.sideList || null)
+const sideListOptions = computed(() => {
+  const options = sideListConfig.value?.options
+  return Array.isArray(options) ? options : []
+})
+const sideListLabel = computed(() => sideListConfig.value?.label || sideListConfig.value?.title || '')
+const showSideList = computed(() => sideListOptions.value.length > 0)
+const sideListFieldName = computed(() => sideListConfig.value?.field || sideListConfig.value?.prop || 'category')
+const listQueryParams = computed(() => {
+  if (!showSideList.value) return {}
+  const optionValue = selectedSideListValue.value
+  if (optionValue === undefined || optionValue === null || optionValue === '') return {}
+  return { [sideListFieldName.value]: optionValue }
+})
+const resolveStaticDataset = (config) => {
+  const dataset = config?.dataset
+  if (Array.isArray(dataset)) return dataset
+  if (dataset && typeof dataset === 'object') {
+    const pickFirstArray = (source) => {
+      if (!source || typeof source !== 'object') return null
+      for (const value of Object.values(source)) {
+        if (Array.isArray(value)) return value
+        if (value && typeof value === 'object') {
+          const nested = pickFirstArray(value)
+          if (nested) return nested
+        }
+      }
+      return null
+    }
+    const pickByKeys = (source, keys, allowObjectReturn = false) => {
+      if (!source || typeof source !== 'object') return null
+      for (const key of keys) {
+        if (!key) continue
+        const scoped = source[key]
+        if (scoped === undefined) continue
+        if (Array.isArray(scoped)) return scoped
+        if (allowObjectReturn && scoped && typeof scoped === 'object') return scoped
+      }
+      return null
+    }
+    const listKeys = [
+      selectedSideListValue.value,
+      sideListConfig.value?.defaultValue
+    ].filter(Boolean)
+    let scopedDataset = dataset
+    if (showSideList.value) {
+      const listScoped = pickByKeys(dataset, listKeys, true)
+      if (Array.isArray(listScoped)) return listScoped
+      if (listScoped && typeof listScoped === 'object') scopedDataset = listScoped
+    }
+    if (Array.isArray(scopedDataset)) return scopedDataset
+    const filterKeys = [
+      selectedFilterValue.value,
+      radioFilterConfig.value?.defaultValue
+    ].filter(Boolean)
+    const filterScoped = pickByKeys(scopedDataset, filterKeys, false)
+    if (Array.isArray(filterScoped)) return filterScoped
+    const firstArray = pickFirstArray(scopedDataset)
+    if (Array.isArray(firstArray)) return firstArray
+  }
+  return null
+}
+const buildQueryPayload = () => ({
+  ...(props.fixedQueryForm || {}),
+  ...listQueryParams.value,
+  ...filterQueryParams.value
+})
 
 const attrs = useAttrs()
 const wrapperClassObject = computed(() => {
@@ -87,6 +210,53 @@ const wrapperClassObject = computed(() => {
   return classes
 })
 
+const ensureFilterSelection = () => {
+  const options = radioFilterOptions.value
+  if (!options.length) {
+    if (selectedFilterValue.value !== '') selectedFilterValue.value = ''
+    return
+  }
+  const exists = options.some(option => option.value === selectedFilterValue.value)
+  if (exists) return
+  const fallback = radioFilterConfig.value?.defaultValue ?? options[0]?.value ?? ''
+  selectedFilterValue.value = fallback
+}
+const ensureListSelection = () => {
+  const options = sideListOptions.value
+  if (!options.length) {
+    if (selectedSideListValue.value !== '') selectedSideListValue.value = ''
+    return
+  }
+  const exists = options.some(option => option.value === selectedSideListValue.value)
+  if (exists) return
+  const fallback = sideListConfig.value?.defaultValue ?? options[0]?.value ?? ''
+  selectedSideListValue.value = fallback
+}
+
+watch([radioFilterOptions, () => radioFilterConfig.value?.defaultValue], () => {
+  ensureFilterSelection()
+}, { immediate: true })
+watch([sideListOptions, () => sideListConfig.value?.defaultValue], () => {
+  ensureListSelection()
+}, { immediate: true })
+
+const handleFilterChange = (value) => {
+  if (value === selectedFilterValue.value) return
+  selectedFilterValue.value = value
+  const config = chartConfig.value || props.config
+  if (config) {
+    loadChartData(config)
+  }
+}
+const handleListChange = (value) => {
+  if (value === selectedSideListValue.value) return
+  selectedSideListValue.value = value
+  const config = chartConfig.value || props.config
+  if (config) {
+    loadChartData(config)
+  }
+}
+
 // 常用图表预设，统一处理 dataset → ECharts option 的映射
 const presetResolvers = {
   bar: ({ dataset }) => ({
@@ -119,47 +289,123 @@ const presetResolvers = {
       }
     ]
   }),
-  line: ({ dataset }) => ({
-    animationDuration: 420,
-    animationEasing: 'cubicOut',
-    animationDelay: (_, idx) => idx * 50,
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'line'
+  line: ({ dataset = [], config = {}, state = {} }) => {
+    if (!dataset.length) {
+      return {
+        xAxis: { type: 'category', data: [] },
+        yAxis: { type: 'value' },
+        series: [{ type: 'line', data: [] }]
       }
-    },
-    xAxis: { type: 'category', data: dataset.map(item => item.label) },
-    yAxis: { type: 'value' },
-    series: [
-      {
-        type: 'line',
-        smooth: true,
-        data: dataset.map(item => item.value),
-        lineStyle: {
-          width: 3,
-          color: '#28C8B5'
-        },
-        itemStyle: {
-          color: '#28C8B5'
-        },
-        emphasis: {
-          itemStyle: {
-            color: '#4BE1CD',
-            borderColor: '#D8FFF6',
-            borderWidth: 6
-          },
+    }
+
+    const highlightColor = config.highlightColor || '#1F5BFF'
+    const lineColor = config.lineColor || '#1F66FF'
+    const areaStart = config.areaStartColor || 'rgba(31, 91, 255, 0.25)'
+    const areaEnd = config.areaEndColor || 'rgba(31, 91, 255, 0.02)'
+    const valueSuffix = config.valueSuffix || ''
+    const isSmoothLine = typeof config.smooth === 'boolean' ? config.smooth : false
+    const baseSymbolSize = Number(config.symbolSize) || 12
+    const activeSymbolSize = Number(config.activeSymbolSize) || baseSymbolSize + 4
+    const inactivePointFill = config.inactivePointFill || '#fff'
+    const pointBorderWidth = Number(config.pointBorderWidth) || 4
+    const activeIndex = typeof state.activePointIndex === 'number' ? state.activePointIndex : -1
+
+    const seriesData = dataset.map((item, idx) => ({
+      value: item.value,
+      label: item.label,
+      symbol: 'circle',
+      symbolSize: idx === activeIndex ? activeSymbolSize : baseSymbolSize,
+      itemStyle: {
+        color: idx === activeIndex ? highlightColor : inactivePointFill,
+        borderColor: idx === activeIndex ? highlightColor : lineColor,
+        borderWidth: pointBorderWidth
+      }
+    }))
+
+    return {
+      animationDuration: 420,
+      animationEasing: 'cubicOut',
+      tooltip: {
+        trigger: 'axis',
+        backgroundColor: '#1F5BFF',
+        borderWidth: 0,
+        textStyle: { color: '#fff' },
+        axisPointer: {
+          type: 'line',
           lineStyle: {
-            width: 4
+            color: highlightColor,
+            width: 2
           }
         },
-        areaStyle: {
-          opacity: 0.1,
-          color: '#28C8B5'
+        formatter: (params = []) => {
+          if (!params.length) return ''
+          const point = params[0]
+          return `${point.axisValue}<br/>${point.data.value}${valueSuffix}`
         }
-      }
-    ]
-  }),
+      },
+      grid: {
+        top: 40,
+        left: 60,
+        right: 40,
+        bottom: 40,
+        containLabel: true
+      },
+      xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        data: dataset.map(item => item.label),
+        axisLine: { lineStyle: { color: '#C8D2E8' } },
+        axisLabel: { color: '#5C6C8C', fontWeight: 500 },
+        axisTick: { show: false },
+        splitLine: { show: false }
+      },
+      yAxis: {
+        type: 'value',
+        minInterval: 1,
+        axisLine: { show: false },
+        axisTick: { show: false },
+        axisLabel: { color: '#5C6C8C', fontWeight: 500 },
+        splitLine: {
+          show: true,
+          lineStyle: { type: 'dashed', color: '#E0E6F1' }
+        }
+      },
+      series: [
+        {
+          type: 'line',
+          smooth: isSmoothLine,
+          showSymbol: true,
+          symbol: 'circle',
+          data: seriesData.map((point, idx) => ({
+            value: point.value,
+            symbolSize: point.symbolSize,
+            itemStyle: point.itemStyle,
+            label: {
+              show: true,
+              fontWeight: idx === activeIndex ? 600 : 500,
+              color: idx === activeIndex ? highlightColor : lineColor,
+              formatter: `${point.value}${valueSuffix}`,
+              position: 'top'
+            }
+          })),
+          lineStyle: {
+            width: 3,
+            color: lineColor
+          },
+          emphasis: {
+            focus: 'series',
+            scale: true
+          },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: areaStart },
+              { offset: 1, color: areaEnd }
+            ])
+          }
+        }
+      ]
+    }
+  },
   pie: ({ dataset }) => ({
     animationDuration: 420,
     animationEasing: 'cubicOut',
@@ -171,6 +417,7 @@ const presetResolvers = {
       {
         type: 'pie',
         radius: '55%',
+        startAngle: 180,
         data: dataset.map(item => ({ name: item.label, value: item.value })),
         itemStyle: {
           borderColor: '#fff',
@@ -193,6 +440,70 @@ const presetResolvers = {
   })
 }
 
+// 颜色工具函数：将十六进制颜色转换为 RGB
+const hexToRgb = (hex) => {
+  // 移除 # 号
+  const cleanHex = hex.replace('#', '')
+  // 处理 3 位和 6 位十六进制
+  const fullHex = cleanHex.length === 3
+    ? cleanHex.split('').map(char => char + char).join('')
+    : cleanHex
+  const r = parseInt(fullHex.substring(0, 2), 16)
+  const g = parseInt(fullHex.substring(2, 4), 16)
+  const b = parseInt(fullHex.substring(4, 6), 16)
+  return { r, g, b }
+}
+
+// 颜色工具函数：将 RGB 转换为十六进制颜色
+const rgbToHex = (r, g, b) => {
+  const toHex = (n) => {
+    const hex = Math.round(n).toString(16)
+    return hex.length === 1 ? '0' + hex : hex
+  }
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`
+}
+
+// 生成颜色渐变数组：基于单个颜色生成变淡的颜色数组
+const generateColorGradient = (baseColor, count, fadeRatio = 0.15) => {
+  if (!baseColor) return []
+  if (count <= 0) return []
+  if (count === 1) {
+    return Array.isArray(baseColor) ? baseColor : [baseColor]
+  }
+
+  // 如果已经是数组且长度大于1，直接返回
+  if (Array.isArray(baseColor) && baseColor.length > 1) {
+    return baseColor
+  }
+
+  // 获取基础颜色（如果是数组，取第一个）
+  const color = Array.isArray(baseColor) ? baseColor[0] : baseColor
+
+  // 转换为 RGB
+  const baseRgb = hexToRgb(color)
+  const white = { r: 255, g: 255, b: 255 }
+
+  // 生成渐变数组
+  const colors = []
+  for (let i = 0; i < count; i++) {
+    // 第一个颜色保持原色不变，后续逐渐向白色混合
+    if (i === 0) {
+      colors.push(color)
+      continue
+    }
+    // 计算混合比例：fadeRatio 控制每次变淡的比例（0-1之间，值越大变淡越快）
+    const ratio = i * fadeRatio
+    const mixRatio = Math.min(ratio, 0.9) // 最多混合到90%，避免完全变白
+    const r = baseRgb.r + (white.r - baseRgb.r) * mixRatio
+    const g = baseRgb.g + (white.g - baseRgb.g) * mixRatio
+    const b = baseRgb.b + (white.b - baseRgb.b) * mixRatio
+
+    colors.push(rgbToHex(r, g, b))
+  }
+
+  return colors
+}
+
 // 数据转换：将后端返回的数据转换为图表需要的 dataset 格式
 const transformData = (rawData, dataMapping) => {
   // 增强数据提取：支持从包装对象中提取数组
@@ -252,7 +563,6 @@ const fetchConfigAndData = async () => {
     // 如果直接提供了 config，直接使用
     if (props.config) {
       chartConfig.value = props.config
-      console.log('44444444444444444444444444444444')
       await loadChartData(props.config)
       return
     }
@@ -266,7 +576,6 @@ const fetchConfigAndData = async () => {
       }
 
       chartConfig.value = res
-      console.log('3333333333333333333333333')
       await loadChartData(res)
     })
   } catch (error) {
@@ -280,20 +589,24 @@ const fetchConfigAndData = async () => {
 // 加载图表数据
 const loadChartData = async (config) => {
   if (!config) return
+  ensureListSelection()
+  ensureFilterSelection()
 
   try {
-    // 如果配置中直接提供了 dataset，直接使用
-    if (config.dataset && Array.isArray(config.dataset)) {
-      chartData.value = config.dataset
+    // 如果配置中直接提供了 dataset（数组或映射），直接使用
+    const staticDataset = resolveStaticDataset(config)
+    if (staticDataset) {
+      chartData.value = staticDataset
+      activePointIndex.value = -1
       renderChart()
-      console.log('1111111111111111111111111')
       emit('dataLoaded', chartData.value)
       return
     }
 
     // 如果配置中提供了 data（logicName），通过 runLogic 获取数据
     if (config.data) {
-      const result = await runLogic(config.data, props.fixedQueryForm, props.serviceName)
+      const queryPayload = buildQueryPayload()
+      const result = await runLogic(config.data, queryPayload, props.serviceName)
 
       // 转换数据格式
       const transformedData = transformData(result, config.dataMapping)
@@ -301,12 +614,13 @@ const loadChartData = async (config) => {
         console.warn('HChart: 数据转换后为空数组，原始数据:', result)
       }
       chartData.value = transformedData
+      activePointIndex.value = -1
       renderChart()
-      console.log('22222222222222222222222222')
       emit('dataLoaded', transformedData)
     } else {
       // 没有数据源，使用空数据
       chartData.value = []
+      activePointIndex.value = -1
       renderChart()
     }
   } catch (error) {
@@ -316,6 +630,17 @@ const loadChartData = async (config) => {
 }
 
 // 渲染图表
+const handleChartClick = (params) => {
+  const config = chartConfig.value || props.config
+  if (config?.type !== 'line') return
+  if (params?.componentType !== 'series') return
+  if (params.seriesType !== 'line') return
+  if (typeof params.dataIndex !== 'number') return
+  if (activePointIndex.value === params.dataIndex) return
+  activePointIndex.value = params.dataIndex
+  renderChart()
+}
+
 const renderChart = () => {
   if (!chartRef.value) return
   nextTick(() => {
@@ -326,6 +651,7 @@ const renderChart = () => {
         chartInstance?.resize()
       })
       resizeObserver.observe(chartRef.value)
+      chartInstance.on('click', handleChartClick)
     }
 
     const config = chartConfig.value || props.config
@@ -337,7 +663,21 @@ const renderChart = () => {
       return
     }
 
-    const preset = resolver({ dataset: chartData.value })
+    const preset = resolver({
+      dataset: chartData.value,
+      config,
+      state: { activePointIndex: activePointIndex.value }
+    })
+
+    // 处理颜色配置：如果只有一个颜色，生成渐变数组
+    let processedColor = config.options?.color
+    if (processedColor) {
+      const dataCount = chartData.value.length || 12 // 默认生成12个颜色
+      // 如果只有一个颜色（字符串或长度为1的数组），生成渐变
+      if (typeof processedColor === 'string' || (Array.isArray(processedColor) && processedColor.length === 1)) {
+        processedColor = generateColorGradient(processedColor, dataCount)
+      }
+    }
     // 深度合并 series 配置
     let finalOptions = {
       legend: config.legend || {},
@@ -348,11 +688,13 @@ const renderChart = () => {
     // 如果 options 中有 series，进行深度合并
     if (config.options?.series && preset.series) {
       // 分离需要特殊处理的配置项
-      const { xAxis: customXAxis, yAxis: customYAxis, series: customSeries, ...restOptions } = config.options
+      const { xAxis: customXAxis, yAxis: customYAxis, series: customSeries, color: _, ...restOptions } = config.options
 
       finalOptions = {
         ...finalOptions,
         ...restOptions,
+        // 应用处理后的颜色
+        ...(processedColor && { color: processedColor }),
         // 对于有 xAxis 的图表类型（bar, line），智能合并 xAxis
         ...(preset.xAxis && {
           xAxis: {
@@ -382,11 +724,13 @@ const renderChart = () => {
       }
     } else {
       // 没有自定义 series 的情况
-      const { xAxis: customXAxis, yAxis: customYAxis, ...restOptions } = config.options || {}
+      const { xAxis: customXAxis, yAxis: customYAxis, color: _, ...restOptions } = config.options || {}
 
       finalOptions = {
         ...finalOptions,
         ...restOptions,
+        // 应用处理后的颜色
+        ...(processedColor && { color: processedColor }),
         // 对于有 xAxis 的图表类型，智能合并
         ...(preset.xAxis && {
           xAxis: {
@@ -416,7 +760,6 @@ watch(
   () => props.queryParamsName,
   (newName, oldName) => {
     if (newName !== oldName) {
-      console.log('99999999999999999999999999')
       fetchConfigAndData()
     }
   }
@@ -424,7 +767,6 @@ watch(
 
 // 暴露给外部的方法
 const refresh = () => {
-  console.log('88888888888888888888888888')
   fetchConfigAndData()
 }
 
@@ -432,7 +774,6 @@ const reload = (newQueryForm) => {
   if (newQueryForm) {
     emit('update:fixedQueryForm', { ...props.fixedQueryForm, ...newQueryForm })
   } else {
-    console.log('7777777777777777777777777')
     fetchConfigAndData()
   }
 }
@@ -446,13 +787,13 @@ defineExpose({
 onMounted(() => {
   // 初始化时记录 queryParamsName
   lastQueryParamsName.value = props.queryParamsName
-  console.log('66666666666666666666666666666')
   fetchConfigAndData()
 })
 
 onBeforeUnmount(() => {
   // 清理图表实例和观察器
   if (chartInstance) {
+    chartInstance.off('click', handleChartClick)
     chartInstance.dispose()
     chartInstance = null
   }
@@ -485,6 +826,112 @@ onBeforeUnmount(() => {
   box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
 }
 
+.chart-layout {
+  display: flex;
+  gap: 16px;
+}
+
+.chart-side-list {
+  width: 180px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid #ECF0F7;
+  padding-right: 12px;
+}
+
+.side-list-label {
+  font-size: 14px;
+  color: #4A5875;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.side-list-menu {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.side-list-item {
+  width: 100%;
+  text-align: left;
+  border: 0;
+  background: transparent;
+  padding: 8px 10px;
+  border-radius: 8px;
+  font-size: 14px;
+  color: #4A5875;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.side-list-item .item-label {
+  flex: 1;
+}
+
+.side-list-item .item-badge {
+  font-size: 12px;
+  color: #9AA7C5;
+}
+
+.side-list-item.is-active {
+  background: rgba(31, 91, 255, 0.08);
+  color: #1F5BFF;
+  font-weight: 600;
+}
+
+.chart-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.chart-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 4px;
+}
+
+.toolbar-label {
+  font-size: 14px;
+  color: #5C6C8C;
+  font-weight: 500;
+}
+
+.toolbar-radio-group {
+  display: inline-flex;
+  gap: 8px;
+}
+
+.radio-pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 14px;
+  border-radius: 16px;
+  border: 1px solid #D5DFF2;
+  font-size: 13px;
+  color: #5C6C8C;
+  cursor: pointer;
+  transition: all 0.18s ease;
+  user-select: none;
+}
+
+.radio-pill-input {
+  display: none;
+}
+
+.radio-pill.is-active {
+  background-color: rgba(31, 91, 255, 0.08);
+  border-color: #1F5BFF;
+  color: #1F5BFF;
+  font-weight: 600;
+}
+
 .chart-canvas {
   width: 100%;
   margin-top: 10px;