vue2-client 1.17.40 → 1.17.42

package/src/base-client/components/common/richTextModal/richDemo.vue

@@ -1,48 +1,48 @@
-<template>
-  <div>
-    <h1>Canvas Editor 示例</h1>
-    <x-add-native-form ref="nativeForm" />
-  </div>
-</template>
-
-<script>
-import XAddNativeForm from '@vue2-client/base-client/components/common/XAddNativeForm/XAddNativeForm.vue'
-import { getConfigByName } from '../../../../services/api/common'
-
-export default {
-  components: {
-    XAddNativeForm
-  },
-  mounted () {
-    this.$nextTick(() => {
-      getConfigByName('表单测试Form', 'af-his', (res) => {
-        const modifyModelData = {
-          data: {
-            t_f_file_id: 1,
-            t_f_path: '/usr/local/tomcat/files/af-his/txt/f7c758f6d5f14c53bb5246f82a25c0c4.txt'
-          },
-          images: [],
-          files: []
-        }
-        this.$refs.nativeForm.init({
-          serviceName: 'af-his',
-          formItems: res.formJson,
-          title: '收费',
-          businessType: '新增',
-          layout: 'inline',
-          modifyModelData: modifyModelData
-        })
-      })
-    })
-  },
-  methods: {
-    submit () {
-
-    }
-  }
-}
-</script>
-
-<style>
-/* 在这里添加您的样式 */
-</style>
+<template>
+  <div>
+    <h1>Canvas Editor 示例</h1>
+    <x-add-native-form ref="nativeForm" />
+  </div>
+</template>
+
+<script>
+import XAddNativeForm from '@vue2-client/base-client/components/common/XAddNativeForm/XAddNativeForm.vue'
+import { getConfigByName } from '../../../../services/api/common'
+
+export default {
+  components: {
+    XAddNativeForm
+  },
+  mounted () {
+    this.$nextTick(() => {
+      getConfigByName('表单测试Form', 'af-his', (res) => {
+        const modifyModelData = {
+          data: {
+            t_f_file_id: 1,
+            t_f_path: '/usr/local/tomcat/files/af-his/txt/f7c758f6d5f14c53bb5246f82a25c0c4.txt'
+          },
+          images: [],
+          files: []
+        }
+        this.$refs.nativeForm.init({
+          serviceName: 'af-his',
+          formItems: res.formJson,
+          title: '收费',
+          businessType: '新增',
+          layout: 'inline',
+          modifyModelData: modifyModelData
+        })
+      })
+    })
+  },
+  methods: {
+    submit () {
+
+    }
+  }
+}
+</script>
+
+<style>
+/* 在这里添加您的样式 */
+</style>

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

@@ -0,0 +1,493 @@
+<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>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, computed, useAttrs, onBeforeUnmount, nextTick } from 'vue'
+import * as echarts from 'echarts/core'
+import { BarChart, LineChart, PieChart } from 'echarts/charts'
+import { TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
+import XTitle from '../XTitle/XTitle.vue'
+// 注册常用图表类型，避免每次重复导入
+echarts.use([BarChart, LineChart, PieChart, TooltipComponent, LegendComponent, GridComponent, CanvasRenderer])
+
+const props = defineProps({
+  // 配置名称（用于查询配置）
+  queryParamsName: {
+    type: String,
+    default: ''
+  },
+  // 服务名
+  serviceName: {
+    type: String,
+    default: 'af-his'
+  },
+  // 固定查询参数
+  fixedQueryForm: {
+    type: Object,
+    default: () => ({ condition: '1=1' })
+  },
+  config: {
+    type: Object,
+    default: null
+  }
+})
+
+const emit = defineEmits(['dataLoaded', 'error', 'update:fixedQueryForm'])
+
+const chartRef = ref(null)
+let chartInstance = null
+const chartConfig = ref(null)
+const chartData = ref([])
+const loading = ref(false)
+let resizeObserver = null
+
+// 记录上一次的 queryParamsName，用于比较变化
+const lastQueryParamsName = ref('')
+
+const chartTitle = computed(() => {
+  if (props.config?.xtitle) return props.config.xtitle
+  if (chartConfig.value?.xtitle) return chartConfig.value.xtitle
+  return ''
+})
+const xTitleAttrs = computed(() => {
+  if (props.config?.xtitleAttrs) return props.config.xtitleAttrs
+  if (chartConfig.value?.xtitleAttrs) return chartConfig.value.xtitleAttrs
+  return {}
+})
+const chartStyle = computed(() => {
+  const target = props.config ?? chartConfig.value ?? {}
+  if (target.style && typeof target.style === 'object') return target.style
+  return {}
+})
+
+const attrs = useAttrs()
+const wrapperClassObject = computed(() => {
+  const a = attrs
+  const classes = {}
+
+  // 通用布尔样式开关（以存在/空字符串/'true' 为真）
+  const booleanStyleKeys = [
+    'show-border',
+    'border-hide-left',
+    'border-hide-right'
+  ]
+  for (const key of booleanStyleKeys) {
+    const val = a[key]
+    const truthy = val === true || val === '' || val === 'true'
+    if (truthy) classes[`h-chart-${key}`] = true
+  }
+
+  return classes
+})
+
+// 常用图表预设，统一处理 dataset → ECharts option 的映射
+const presetResolvers = {
+  bar: ({ dataset }) => ({
+    animationDuration: 420,
+    animationEasing: 'cubicOut',
+    animationDelay: (_, idx) => idx * 60,
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    xAxis: { type: 'category', data: dataset.map(item => item.label) },
+    yAxis: { type: 'value' },
+    series: [
+      {
+        type: 'bar',
+        data: dataset.map(item => item.value),
+        itemStyle: {
+          color: '#3362DA',
+          borderRadius: [4, 4, 0, 0]
+        },
+        emphasis: {
+          itemStyle: {
+            color: '#4C7CFF',
+            shadowBlur: 18,
+            shadowColor: 'rgba(76, 124, 255, 0.45)'
+          }
+        }
+      }
+    ]
+  }),
+  line: ({ dataset }) => ({
+    animationDuration: 420,
+    animationEasing: 'cubicOut',
+    animationDelay: (_, idx) => idx * 50,
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'line'
+      }
+    },
+    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
+          },
+          lineStyle: {
+            width: 4
+          }
+        },
+        areaStyle: {
+          opacity: 0.1,
+          color: '#28C8B5'
+        }
+      }
+    ]
+  }),
+  pie: ({ dataset }) => ({
+    animationDuration: 420,
+    animationEasing: 'cubicOut',
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b}: {c} ({d}%)'
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: '55%',
+        data: dataset.map(item => ({ name: item.label, value: item.value })),
+        itemStyle: {
+          borderColor: '#fff',
+          borderWidth: 2
+        },
+        emphasis: {
+          scale: true,
+          scaleSize: 6,
+          itemStyle: {
+            shadowBlur: 16,
+            shadowColor: 'rgba(0, 0, 0, 0.25)'
+          },
+          label: {
+            show: true,
+            fontWeight: 'bold'
+          }
+        }
+      }
+    ]
+  })
+}
+
+// 数据转换：将后端返回的数据转换为图表需要的 dataset 格式
+const transformData = (rawData, dataMapping) => {
+  // 增强数据提取：支持从包装对象中提取数组
+  let dataArray = rawData
+
+  // 如果 rawData 是对象但不是数组，尝试提取数组数据
+  if (rawData && typeof rawData === 'object' && !Array.isArray(rawData)) {
+    // 尝试常见的包装字段
+    dataArray = rawData.data || rawData.result || rawData.list || rawData.items || rawData.records
+
+    // 如果还是找不到数组，检查是否所有值都是数组
+    if (!Array.isArray(dataArray)) {
+      const arrayValues = Object.values(rawData).filter(val => Array.isArray(val))
+      if (arrayValues.length === 1) {
+        dataArray = arrayValues[0]
+      }
+    }
+  }
+
+  // 最终检查：必须是数组
+  if (!dataArray || !Array.isArray(dataArray)) {
+    console.warn('HChart: transformData 接收到的数据不是数组格式:', rawData)
+    return []
+  }
+
+  // 如果配置了数据映射规则，使用映射规则
+  if (dataMapping) {
+    const { labelField = 'label', valueField = 'value' } = dataMapping
+    return dataArray.map(item => ({
+      label: item[labelField] || item.name || item.label || '',
+      value: Number(item[valueField] || item.value || 0)
+    }))
+  }
+
+  // 默认处理：尝试自动识别
+  return dataArray.map(item => {
+    if (typeof item === 'object' && item !== null) {
+      return {
+        label: item.label || item.name || item.text || item.x || String(item[Object.keys(item)[0]] || ''),
+        value: Number(item.value || item.count || item.y || item[Object.keys(item)[1]] || 0)
+      }
+    }
+    return { label: String(item), value: 0 }
+  })
+}
+
+// 获取配置和数据
+const fetchConfigAndData = async () => {
+  if (!props.queryParamsName && !props.config) {
+    console.warn('HChart: queryParamsName 或 config 必须提供一个')
+    return
+  }
+
+  try {
+    loading.value = true
+
+    // 如果直接提供了 config，直接使用
+    if (props.config) {
+      chartConfig.value = props.config
+      console.log('44444444444444444444444444444444')
+      await loadChartData(props.config)
+      return
+    }
+
+    // 否则通过 queryParamsName 查询配置
+    getConfigByName(props.queryParamsName, props.serviceName, async (res) => {
+      if (!res) {
+        console.error('HChart: 未能获取到配置内容')
+        emit('error', new Error('未能获取到配置内容'))
+        return
+      }
+
+      chartConfig.value = res
+      console.log('3333333333333333333333333')
+      await loadChartData(res)
+    })
+  } catch (error) {
+    console.error('HChart: 获取配置或数据时发生错误:', error)
+    emit('error', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 加载图表数据
+const loadChartData = async (config) => {
+  if (!config) return
+
+  try {
+    // 如果配置中直接提供了 dataset，直接使用
+    if (config.dataset && Array.isArray(config.dataset)) {
+      chartData.value = config.dataset
+      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 transformedData = transformData(result, config.dataMapping)
+      if (transformedData.length === 0) {
+        console.warn('HChart: 数据转换后为空数组，原始数据:', result)
+      }
+      chartData.value = transformedData
+      renderChart()
+      console.log('22222222222222222222222222')
+      emit('dataLoaded', transformedData)
+    } else {
+      // 没有数据源，使用空数据
+      chartData.value = []
+      renderChart()
+    }
+  } catch (error) {
+    console.error('HChart: 加载数据时发生错误:', error)
+    emit('error', error)
+  }
+}
+
+// 渲染图表
+const renderChart = () => {
+  if (!chartRef.value) return
+  nextTick(() => {
+    if (!chartInstance) {
+      chartInstance = echarts.init(chartRef.value)
+      // 监听窗口大小变化
+      resizeObserver = new ResizeObserver(() => {
+        chartInstance?.resize()
+      })
+      resizeObserver.observe(chartRef.value)
+    }
+
+    const config = chartConfig.value || props.config
+    if (!config || !config.type) return
+
+    const resolver = presetResolvers[config.type]
+    if (!resolver) {
+      console.warn(`HChart: 不支持的图表类型 ${config.type}`)
+      return
+    }
+
+    const preset = resolver({ dataset: chartData.value })
+    // 深度合并 series 配置
+    let finalOptions = {
+      legend: config.legend || {},
+      grid: config.grid || {},
+      ...preset
+    }
+
+    // 如果 options 中有 series，进行深度合并
+    if (config.options?.series && preset.series) {
+      // 分离需要特殊处理的配置项
+      const { xAxis: customXAxis, yAxis: customYAxis, series: customSeries, ...restOptions } = config.options
+
+      finalOptions = {
+        ...finalOptions,
+        ...restOptions,
+        // 对于有 xAxis 的图表类型（bar, line），智能合并 xAxis
+        ...(preset.xAxis && {
+          xAxis: {
+            ...preset.xAxis,
+            ...customXAxis,
+            // 如果用户配置的 data 为空数组或未定义，使用预设的 data
+            data: (customXAxis?.data && customXAxis.data.length > 0)
+              ? customXAxis.data
+              : preset.xAxis.data
+          }
+        }),
+        // 对于有 yAxis 的图表类型，合并 yAxis
+        ...(preset.yAxis && {
+          yAxis: {
+            ...preset.yAxis,
+            ...customYAxis
+          }
+        }),
+        series: [
+          {
+            ...preset.series[0],
+            ...customSeries[0],
+            // 确保 data 来自预设（从 logic 获取的数据）
+            data: preset.series[0].data
+          }
+        ]
+      }
+    } else {
+      // 没有自定义 series 的情况
+      const { xAxis: customXAxis, yAxis: customYAxis, ...restOptions } = config.options || {}
+
+      finalOptions = {
+        ...finalOptions,
+        ...restOptions,
+        // 对于有 xAxis 的图表类型，智能合并
+        ...(preset.xAxis && {
+          xAxis: {
+            ...preset.xAxis,
+            ...customXAxis,
+            // 如果用户配置的 data 为空数组或未定义，使用预设的 data
+            data: (customXAxis?.data && customXAxis.data.length > 0)
+              ? customXAxis.data
+              : preset.xAxis.data
+          }
+        }),
+        // 对于有 yAxis 的图表类型，合并 yAxis
+        ...(preset.yAxis && {
+          yAxis: {
+            ...preset.yAxis,
+            ...customYAxis
+          }
+        })
+      }
+    }
+    chartInstance.setOption(finalOptions, true)
+  })
+}
+
+// 监听 queryParamsName 变化，只有在名称变化时才重新获取配置
+watch(
+  () => props.queryParamsName,
+  (newName, oldName) => {
+    if (newName !== oldName) {
+      console.log('99999999999999999999999999')
+      fetchConfigAndData()
+    }
+  }
+)
+
+// 暴露给外部的方法
+const refresh = () => {
+  console.log('88888888888888888888888888')
+  fetchConfigAndData()
+}
+
+const reload = (newQueryForm) => {
+  if (newQueryForm) {
+    emit('update:fixedQueryForm', { ...props.fixedQueryForm, ...newQueryForm })
+  } else {
+    console.log('7777777777777777777777777')
+    fetchConfigAndData()
+  }
+}
+
+defineExpose({
+  refresh,
+  reload,
+  chartInstance
+})
+
+onMounted(() => {
+  // 初始化时记录 queryParamsName
+  lastQueryParamsName.value = props.queryParamsName
+  console.log('66666666666666666666666666666')
+  fetchConfigAndData()
+})
+
+onBeforeUnmount(() => {
+  // 清理图表实例和观察器
+  if (chartInstance) {
+    chartInstance.dispose()
+    chartInstance = null
+  }
+  if (resizeObserver) {
+    resizeObserver.disconnect()
+    resizeObserver = null
+  }
+})
+</script>
+
+<style scoped lang="less">
+.h-chart-configurable {
+  display: flex;
+  flex-direction: column;
+  transition: transform 0.22s ease, box-shadow 0.22s ease;
+
+  &.h-chart-show-border {
+    border: 1px solid #E5E9F0;
+  }
+  &.h-chart-border-hide-right {
+    border-right: 0px;
+  }
+  &.h-chart-border-hide-left {
+    border-left: 0px;
+  }
+}
+
+.h-chart-configurable.hoverable:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
+}
+
+.chart-canvas {
+  width: 100%;
+  margin-top: 10px;
+  min-height: 280px;
+}
+</style>

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

@@ -0,0 +1,88 @@
+<template>
+  <div class="h-chart-test-container">
+    <h2>HChart 组件测试案例</h2>
+
+    <section class="test-section">
+      <h3>测试1: 通过 queryParamsName 查询配置（从后端获取配置和数据）</h3>
+      <div class="chart-wrapper">
+        <HChart
+          ref="chart1"
+          query-params-name="accountsReceivableChart"
+          :fixed-query-form="{ condition: '1=1', dateRange: '2024-01' }"
+          service-name="af-his"
+          @init="handleChartInit"
+          @dataLoaded="handleDataLoaded"
+          @error="handleError"
+        />
+      </div>
+      <div class="test-actions">
+        <a-button @click="refreshChart1">刷新图表</a-button>
+        <a-button @click="reloadChart1">重新加载（更新查询条件）</a-button>
+      </div>
+    </section>
+
+    <section class="test-section">
+      <h3>测试日志</h3>
+      <div class="log-container">
+        <div v-for="(log, index) in logs" :key="index" class="log-item">
+          <span class="log-time">{{ log.time }}</span>
+          <span class="log-type" :class="log.type">{{ log.type }}</span>
+          <span class="log-message">{{ log.message }}</span>
+        </div>
+      </div>
+      <a-button @click="clearLogs">清空日志</a-button>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { message } from 'ant-design-vue'
+import HChart from './HChart.vue'
+
+const chart1 = ref(null)
+
+const logs = ref([])
+
+const addLog = (type, messageText) => {
+  logs.value.unshift({
+    time: new Date().toLocaleTimeString(),
+    type,
+    message: typeof messageText === 'object' ? JSON.stringify(messageText, null, 2) : messageText
+  })
+  if (logs.value.length > 50) logs.value.pop()
+}
+
+const clearLogs = () => {
+  logs.value = []
+}
+
+const handleChartInit = (config) => {
+  addLog('init', `图表初始化: ${config?.title || '未知'}`)
+  message.success(`图表初始化成功: ${config?.title || '未知'}`)
+}
+
+const handleDataLoaded = (data) => {
+  addLog('dataLoaded', `数据加载完成，共 ${data?.length || 0} 条`)
+  console.log('数据加载完成:', data)
+}
+
+const handleError = (error) => {
+  addLog('error', `错误: ${error?.message || String(error)}`)
+  message.error(`图表加载错误: ${error?.message || String(error)}`)
+}
+
+const refreshChart1 = () => {
+  if (!chart1.value) return
+  chart1.value.refresh()
+  addLog('action', '刷新图表')
+  message.info('正在刷新图表...')
+}
+
+const reloadChart1 = () => {
+  if (!chart1.value) return
+  chart1.value.reload({ condition: '1=1', dateRange: '2024-02' })
+  addLog('action', '重新加载图表，更新查询条件')
+  message.info('正在重新加载图表...')
+}
+</script>