agilebuilder-ui 1.1.65-tmp3 → 1.1.65-tmp31

package/packages/chat-embed/src/components/answer-auto-chart.vue

@@ -1,365 +0,0 @@
-<template>
-  <div style="max-height: 700px">
-    <div v-if="unabledChart" style="text-align: center; color: #999; margin-top: 20px">
-      {{ unabledChartTip }}
-    </div>
-    <VChart v-else ref="chartRef" style="height: 400px" :option="chartOption" autoresize />
-  </div>
-</template>
-<script setup lang="ts">
-import { defineProps, ref, onMounted } from 'vue'
-import { ElMessage } from 'element-plus'
-import { use } from 'echarts/core'
-import VChart from 'vue-echarts'
-import { CanvasRenderer } from 'echarts/renderers'
-import { LineChart, BarChart, PieChart, RadarChart } from 'echarts/charts'
-import {
-  GridComponent,
-  LegendComponent,
-  TitleComponent,
-  TooltipComponent,
-  ToolboxComponent,
-  DataZoomComponent
-} from 'echarts/components'
-import mcpUtils from '../util/mcp-utils.ts'
-//统计图
-use([
-  CanvasRenderer,
-  LineChart,
-  BarChart,
-  PieChart,
-  RadarChart,
-  GridComponent,
-  LegendComponent,
-  TitleComponent,
-  TooltipComponent,
-  ToolboxComponent,
-  DataZoomComponent
-])
-const props = defineProps({
-  chartProps: {
-    type: Object,
-    default: {}
-  }
-})
-const chartRef = ref<any>(null)
-const chartOption = ref<any>({})
-const unabledChart = ref(false)
-const unabledChartTip = ref('')
-
-let params = {}
-// params = "chartName": "来料检验报告",
-//   "chartType": "bar",
-//   "xAxis": "物料名称",
-//   "series": [
-//       {
-//           "showType": "bar",
-//           "name": "到货数量"
-//       }
-//   ]
-if (props.chartProps.params) {
-  params = JSON.parse(props.chartProps.params)
-}
-let dataList: any = []
-let answer: any = {}
-if (props.chartProps.answer) {
-  answer = JSON.parse(props.chartProps.answer)
-  if (answer.dataList) {
-    dataList = answer.dataList
-  }
-}
-
-// 根据params和dataList生成图表配置
-if (dataList?.length > 0 && params) {
-  chartOption.value = generateChartOption(params, dataList)
-  if (chartOption.value) {
-    refreshChart(chartOption.value)
-  } else {
-    unabledChart.value = true
-  }
-} else if (!dataList || dataList.length === 0) {
-  ElMessage.error('未能获取到可用数据展示图表')
-  unabledChartTip.value = '未能获取到可用数据展示图表'
-  unabledChart.value = true
-}
-
-function refreshChart(chartOption: any) {
-  // 强制完全替换图表配置
-  if (chartRef.value) {
-    chartRef.value.setOption(chartOption, true)
-  }
-}
-
-function generateChartOption(params: any, dataList: any) {
-  const chartType = params.chartType || 'bar'
-  if (chartType.indexOf('bar') !== -1 || chartType.indexOf('line') !== -1) {
-    return generateBarLinChartOption(params, dataList)
-  } else if (chartType === 'pie') {
-    return generatePieChartOption(params, dataList)
-    // } else if (chartType === 'radar') {
-    //   return generateRadarChartOption(params, dataList)
-  } else {
-    ElMessage.error('不支持的图表类型')
-    unabledChartTip.value = '不支持的图表类型'
-    return null
-  }
-}
-
-function generateBarLinChartOption(params: any, dataList: any) {
-  debugger
-  const xAxisKey = params.xAxis
-  let seriesConfigs = params.series || []
-
-  let yAxisConfigs = params.yAxis || []
-  // 如果生成了chartOption(有可能ai没有生成)，优先使用chartOption中的配置, chartOption优先级更高，chartOption是由百炼生成，  params.series、params.yAxis是手动配置百炼参数生成的，有可能会有问题
-  if (params.chartOption) {
-    if (params.chartOption.yAxis) {
-      yAxisConfigs = params.chartOption.yAxis
-    }
-    if (params.chartOption.series) {
-      seriesConfigs = params.chartOption.series
-    }
-  }
-  // 提取X轴数据。当是undefined或者null时，记作未知
-  const xData = dataList.map((item: any) => {
-    const xValue = item[xAxisKey]
-    return xValue !== undefined && xValue !== null ? xValue : '未知'
-  })
-  // 所有undefined或者null时，补充为字符串'未知'，避免图表报错
-  let chartType = 'bar'
-  if (params.chartType?.indexOf('line') !== -1) {
-    chartType = 'line'
-  }
-  const series = seriesConfigs.map((seriesConfig: any) => {
-    const yName = seriesConfig.name
-    const type = seriesConfig.type || chartType
-    const yData = dataList.map((item: any) => item[yName] || 0)
-    const tempSeries: any = {
-      name: yName,
-      type: type,
-      data: yData
-    }
-    // format: '{value}%'
-    if (seriesConfig.format) {
-      tempSeries.tooltip = {
-        valueFormatter: function (value: any) {
-          return seriesConfig.format.replace('{value}', value)
-        }
-      }
-    } else if (seriesConfig.tooltip?.formatter) {
-      tempSeries.tooltip = {
-        valueFormatter: function (value: any) {
-          return seriesConfig.tooltip.formatter.replace('{value}', value)
-        }
-      }
-    }
-    if ('yAxisIndex' in seriesConfig) {
-      if (params.yAxis && Array.isArray(params.yAxis) && seriesConfig['yAxisIndex'] > params.yAxis.length - 1) {
-        // 有多个Y轴时，指定对应的Y轴
-        seriesConfig['yAxisIndex'] = 0
-      } else {
-        // 只有一个Y轴时，强制指定为第0个Y轴
-        tempSeries['yAxisIndex'] = seriesConfig['yAxisIndex']
-      }
-    }
-    if ('formatter' in seriesConfig) {
-      tempSeries
-    }
-    return tempSeries
-  })
-  const yAxis: any = []
-  if (yAxisConfigs && Array.isArray(yAxisConfigs)) {
-    yAxisConfigs.forEach((yConfig: any) => {
-      const tempYAxis: any = {
-        type: yConfig.type || 'value'
-      }
-      if (yConfig.axisLabel) {
-        tempYAxis.axisLabel = yConfig.axisLabel
-      }
-      if (yConfig.name) {
-        tempYAxis.name = yConfig.name
-      }
-      yAxis.push(tempYAxis)
-    })
-  } else {
-    yAxis.push({
-      type: 'value'
-    })
-  }
-  let chartName = params.chartName || '图表'
-  if (params.chartOption) {
-    chartName = params.chartOption.title?.text || chartName
-  }
-  const option: any = {
-    title: {
-      text: chartName,
-      left: 'center'
-    },
-    toolbox: {
-      show: true,
-      feature: {
-        saveAsImage: {
-          title: '保存为图片'
-        }
-      }
-    },
-    tooltip: {
-      trigger: 'axis'
-    },
-    legend: {
-      data: seriesConfigs.map((yConfig: any) => yConfig.name),
-      left: 'right',
-      textStyle: {
-        width: 180, // 限制文字宽度
-        overflow: 'truncate' // 自动截断文字
-      },
-      type: 'scroll',
-      orient: 'vertical', // 设置图例为垂直布局
-      top: 'center',
-      tooltip: {
-        show: true // 鼠标悬停时显示完整内容
-      }
-    },
-    xAxis: {
-      type: 'category',
-      data: xData
-    },
-    yAxis: yAxis,
-    series: series
-  }
-  // 超过十个系列，启用数据缩放
-  if (xData.length > 10) {
-    option.dataZoom = [
-      {
-        type: 'slider',
-        start: 0,
-        end: 100
-      },
-      {
-        type: 'inside',
-        start: 0,
-        end: 100
-      }
-    ]
-  }
-  debugger
-  return option
-}
-
-function generatePieChartOption(params: any, dataList: any) {
-  const nameKey = params.xAxis
-  const valueKey = params.series[0]?.name || ''
-  if (!valueKey) {
-    ElMessage.error('饼图必须指定数值轴')
-    unabledChartTip.value = '饼图必须指定数值轴'
-    return null
-  }
-  const pieData = dataList.map((item: any) => {
-    return {
-      name: item[nameKey] || '未知',
-      value: item[valueKey] || 0
-    }
-  })
-  const option: any = {
-    title: {
-      text: params.chartName || '饼图',
-      left: 'center'
-    },
-    toolbox: {
-      trigger: 'item',
-      show: true,
-      feature: {
-        saveAsImage: {
-          title: '保存为图片'
-        }
-      }
-    },
-    legend: {
-      left: 'right',
-      textStyle: {
-        width: 180, // 限制文字宽度
-        overflow: 'truncate' // 自动截断文字
-      },
-      type: 'scroll',
-      orient: 'vertical', // 设置图例为垂直布局
-      top: '10%',
-      tooltip: {
-        show: true // 鼠标悬停时显示完整内容
-      }
-    },
-    series: [
-      {
-        name: params.chartName || '饼图',
-        type: 'pie',
-        radius: '70%',
-        data: pieData,
-        emphasis: {
-          itemStyle: {
-            shadowBlur: 10,
-            shadowOffsetX: 0,
-            shadowColor: 'rgba(0, 0, 0, 0.5)'
-          }
-        }
-      }
-    ]
-  }
-  return option
-}
-
-function generateRadarChartOption(params: any, dataList: any) {
-  const indicatorConfigs = params.series || []
-  // radarData:  [
-  //       {
-  //         value: [4200, 3000, 20000, 35000, 50000, 18000],
-  //         name: 'Allocated Budget'
-  //       },
-  //       {
-  //         value: [5000, 14000, 28000, 26000, 42000, 21000],
-  //         name: 'Actual Spending'
-  //       }
-  //     ]
-  const radarData: any = []
-  const tempItem: any = {}
-  indicatorConfigs.forEach((config: any, index: number) => {
-    dataList.forEach((dataItem: any) => {
-      const name = dataItem[params.xAxis] || `数据${index + 1}`
-      if (!tempItem[name]) {
-        tempItem[name] = {
-          name: name,
-          value: []
-        }
-      }
-      tempItem[name].value.push(dataItem[config.name] || 0)
-    })
-  })
-  for (const key in tempItem) {
-    radarData.push(tempItem[key])
-  }
-  const option: any = {
-    title: {
-      text: params.chartName || '雷达图'
-    },
-    tooltip: {},
-    legend: {
-      data: radarData.map((data: any) => data.name)
-    },
-    radar: {},
-    series: [
-      {
-        name: params.chartName || '雷达图',
-        type: 'radar',
-        data: radarData
-      }
-    ]
-  }
-  return option
-}
-</script>
-<style scoped>
-.home-chart-iframe {
-  width: 100%;
-  height: 100%;
-  border: none;
-  opacity: 1;
-}
-</style>

package/packages/chat-embed/src/components/answer-home-chart.vue

@@ -1,42 +0,0 @@
-<template>
-  <div style="height: 300px; width: 100%">
-    <iframe
-      v-if="chartProps.chartuuid"
-      height="100%"
-      width="100%"
-      class="home-chart-iframe"
-      :src="
-        'http://localhost:9601/dsc/#/dsc-home-chart/page?chartUuid=' +
-        chartProps.chartuuid +
-        '&homeChartSettingUserId=' +
-        chartProps.id
-      "
-    ></iframe>
-    <iframe
-      v-else-if="chartProps.customurl"
-      height="100%"
-      width="100%"
-      class="home-chart-iframe"
-      :src="chartProps.customurl"
-    ></iframe>
-  </div>
-</template>
-<script setup lang="ts">
-import { defineProps, defineEmits } from 'vue'
-import { useI18n } from 'vue-i18n'
-const { t } = useI18n()
-const props = defineProps({
-  chartProps: {
-    type: Object,
-    default: {}
-  }
-})
-</script>
-<style scoped>
-.home-chart-iframe {
-  width: 100%;
-  height: 100%;
-  border: none;
-  opacity: 1;
-}
-</style>