agilebuilder-ui 1.1.65-tmp3 → 1.1.65-tmp31

package/packages/chat-embed/src/components/answer-interaction-data.vue

@@ -1,569 +0,0 @@
-<template>
-  <div style="max-height: 700px">
-    <el-form
-      style="max-height: 200px; overflow-y: auto"
-      size="small"
-      :inline="true"
-      :model="chartConfig"
-      label-width="60"
-    >
-      <el-col>
-        <el-form-item label="展示方式">
-          <el-radio-group v-model="showType" size="small">
-            <el-radio-button label="表格" value="table" />
-            <el-radio-button label="图表" value="chart" />
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item v-if="showType === 'chart'" label="图表类型">
-          <el-select
-            style="width: 100px"
-            v-model="chartConfig.chartType"
-            placeholder="选择图标类型"
-            @change="onChartTypeChange"
-            clearable
-          >
-            <el-option label="柱折图" value="barLine" />
-            <el-option label="饼状图" value="pie" />
-            <el-option label="雷达图" value="radar" />
-          </el-select>
-        </el-form-item>
-        <el-form-item v-if="showType === 'chart'" label="维度">
-          <el-select style="width: 150px" v-model="chartConfig.xAxis" placeholder="选择图标类型" clearable>
-            <el-option v-for="value in groupList" :key="value" :label="value" :value="value" />
-          </el-select>
-        </el-form-item>
-        <el-form-item v-if="showType === 'chart'">
-          <!-- <el-button type="primary" link> 设置系列 </el-button> -->
-          <el-button type="primary" @click="onSubmit">生成图表</el-button>
-        </el-form-item>
-      </el-col>
-      <template v-if="showType === 'chart'">
-        <div v-for="(series, index) in chartConfig.series" :key="index">
-          <el-form-item label="类型" v-if="chartConfig.chartType === 'barLine'">
-            <el-select style="width: 100px" v-model="series.type" placeholder="选择显示类型" clearable>
-              <el-option label="柱形" value="bar" />
-              <el-option label="折线" value="line" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="数据项">
-            <el-select style="width: 150px" v-model="series.yAxis" placeholder="选择数据项" clearable>
-              <el-option v-for="value in groupList" :key="value" :label="value" :value="value" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="计算方式">
-            <el-select style="width: 100px" v-model="series.calculation" placeholder="选择计算方式" clearable>
-              <el-option label="计数" value="count" />
-              <el-option label="求和" value="sum" />
-              <el-option label="平均值" value="average" />
-              <el-option label="最大值" value="max" />
-              <el-option label="最小值" value="min" />
-            </el-select>
-          </el-form-item>
-          <el-form-item v-if="chartConfig.chartType !== 'pie'">
-            <el-icon
-              size="14"
-              style="color: #5893ef; cursor: pointer; font-weight: bold; margin-right: 8px"
-              @click="addSeries(index)"
-            >
-              <Plus />
-            </el-icon>
-            <el-icon size="14" style="color: #5893ef; cursor: pointer" @click="deleteSeries(index)">
-              <Delete />
-            </el-icon>
-          </el-form-item>
-        </div>
-      </template>
-    </el-form>
-    <el-table
-      v-if="showType === 'table'"
-      size="small"
-      :data="sourceDataList"
-      fit
-      :border="true"
-      :resizable="true"
-      style="width: 100%"
-      max-height="500px"
-    >
-      <template v-if="childTables && childTables.length > 0">
-        <el-table-column type="index" width="50" label="序号" />
-        <el-table-column align="center" fit label="关联数据" v-show="childTables && childTables.length > 0" width="180">
-          <template #default="scope">
-            <div v-for="childTable in childTables">
-              <!-- <el-popover
-                effect="light"
-                trigger="click"
-                :title="childTable.alias"
-                placement="top"
-                width="auto"
-                @before-enter="beforeShow(scope.$index, scope.row, childTable)"
-              >
-                <el-table v-loading="loading" :data="currentShowChildTableData" size="small" style="width: 100%">
-                  <el-table-column type="index" width="50" label="序号" />
-                  <el-table-column
-                    v-for="column in currentShowChildTableDataColumns"
-                    :key="column.prop"
-                    :prop="column.prop"
-                    :label="column.label"
-                  />
-                </el-table>
-                <template #reference> -->
-              <div style="align-items: center">
-                <el-link @click="beforeShow(scope.$index, scope.row, childTable)" type="primary">{{
-                  childTable.alias
-                }}</el-link
-                >&nbsp;
-                <el-icon style="color: #409eff"><InfoFilled /></el-icon>
-              </div>
-              <!-- </template> -->
-              <!-- </el-popover> -->
-            </div>
-          </template>
-        </el-table-column>
-      </template>
-      <el-table-column v-for="value in groupList" :key="value" :prop="value" :label="value" />
-    </el-table>
-    <VChart
-      v-else-if="showType === 'chart' && visableChart"
-      ref="chartRef"
-      style="height: 400px"
-      :option="chartOption"
-      autoresize
-    />
-    <el-dialog
-      v-model="dialogVisible"
-      :destroy-on-close="true"
-      :title="currentShowChildTableDataAlias"
-      :before-close="handleClose"
-    >
-      <el-table v-loading="loading" :data="currentShowChildTableData" size="small" style="width: 100%">
-        <el-table-column type="index" width="50" label="序号" />
-        <el-table-column
-          v-for="column in currentShowChildTableDataColumns"
-          :key="column.prop"
-          :prop="column.prop"
-          :label="column.label"
-        />
-      </el-table>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="dialogVisible = false">关闭</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-<script setup lang="ts">
-import { defineProps, ref } 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 { InfoFilled } from '@element-plus/icons-vue'
-import dayjs from 'dayjs'
-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 showType = ref('table')
-const visableChart = ref(false)
-const chartConfig = ref<any>({
-  chartType: 'barLine',
-  // xAxis: '供应商名称',
-  series: [
-    {
-      type: 'bar',
-      yAxis: '',
-      calculation: 'count'
-    }
-    // {
-    //   type: 'line',
-    //   yAxis: '到货数量',
-    //   calculation: 'average'
-    // }
-  ]
-})
-const sourceDataList = ref([])
-const childTableData: any = {}
-const childTableDataColumns: any = {}
-
-const dialogVisible = ref(false)
-
-const currentShowChildTableDataAlias = ref('')
-const currentShowChildTableData = ref<any>()
-const currentShowChildTableDataColumns = ref<any>([])
-
-const loading = ref(false)
-const groupList = ref<any>([])
-const chartOption = ref({})
-const dataTables = ref<any>({})
-const childTables = ref<any>()
-
-if (props.chartProps) {
-  // 解析数据 获取所有的key作为维度和指标
-  let dataList = null
-  if (props.chartProps.datalist) {
-    dataList = JSON.parse(props.chartProps.datalist)
-  } else if (props.chartProps['data-list']) {
-    dataList = JSON.parse(props.chartProps['data-list'])
-  }
-  if (dataList) {
-    sourceDataList.value = dataList
-    if (sourceDataList.value.length > 0) {
-      const tempItem = sourceDataList.value[0]
-      // 把所有的key放到groupList里
-      groupList.value = [...Object.keys(tempItem)].filter((key) => key !== 'id' && key !== 'ID')
-    }
-  }
-
-  if (props.chartProps.datatables) {
-    dataTables.value = JSON.parse(props.chartProps.datatables)
-  } else if (props.chartProps['data-tables']) {
-    dataTables.value = JSON.parse(props.chartProps['data-tables'])
-  }
-  if (props.chartProps.childtables) {
-    childTables.value = JSON.parse(props.chartProps.childtables)
-  }
-}
-
-function onChartTypeChange(value: string) {
-  if (value === 'pie') {
-    // 饼图和雷达图只保留一个系列
-    if (chartConfig.value.series.length > 1) {
-      chartConfig.value.series = [chartConfig.value.series[0]]
-    }
-  }
-}
-
-function addSeries(index: number) {
-  chartConfig.value.series.push({
-    type: 'bar',
-    yAxis: '',
-    calculation: 'count'
-  })
-}
-
-function deleteSeries(index: number) {
-  if (chartConfig.value.series.length > 1) {
-    chartConfig.value.series.splice(index, 1)
-  } else {
-    ElMessage.warning('至少保留一个系列')
-  }
-}
-
-function onSubmit() {
-  // 根据 chartConfig和sourceDataList生成图表
-  generateChart()
-}
-
-function generateChart() {
-  if (!chartConfig.value.xAxis) {
-    return
-  }
-  const seriesConfig = chartConfig.value.series
-  // x轴数据
-  const xAxisData: any[] = []
-  // 生成系列数据
-  const seriesData: any[] = []
-  // 系列数据映射， 存储每个x轴对应的y轴数据，方便计算
-  const seriesDataMap: any = {}
-  seriesConfig.forEach((seriesItem: any) => {
-    seriesData.push({
-      name: seriesItem.yAxis,
-      type: seriesItem.type,
-      data: []
-    })
-  })
-  sourceDataList.value.forEach((dataItem: any) => {
-    const xValue = dataItem[chartConfig.value.xAxis]
-    if (!xAxisData.includes(xValue)) {
-      xAxisData.push(xValue)
-    }
-    // 构建数据映射，方便后续计算
-    let dataMap: any = {}
-    if (seriesDataMap[xValue] && Object.keys(seriesDataMap[xValue]).length > 0) {
-      dataMap = seriesDataMap[xValue]
-    }
-    seriesConfig.forEach((seriesItem: any) => {
-      const yValue = dataItem[seriesItem.yAxis]
-      if (!dataMap[seriesItem.yAxis]) {
-        dataMap[seriesItem.yAxis] = []
-      }
-      dataMap[seriesItem.yAxis].push(yValue)
-    })
-    seriesDataMap[xValue] = dataMap
-  })
-  xAxisData.forEach((xValue) => {
-    seriesConfig.forEach((seriesItem: any, seriesIndex: number) => {
-      // 根据计算方式计算y轴的值
-      let yValue = 0
-      const values = seriesDataMap[xValue][seriesItem.yAxis]
-      // 处理values中数据不是数字的情况，不是数字时设置为0
-      values.forEach((v: any, i: number) => {
-        if (isNaN(Number(v))) {
-          values[i] = 0
-        }
-      })
-      switch (seriesItem.calculation) {
-        case 'count':
-          yValue = values.length
-          break
-        case 'sum':
-          yValue = values.reduce((a: number, b: number) => a + Number(b), 0)
-          break
-        case 'average':
-          // 结果需要保留两位小数
-          yValue =
-            values.length > 0
-              ? Number((values.reduce((a: number, b: number) => a + Number(b), 0) / values.length).toFixed(2))
-              : 0
-          break
-        case 'max':
-          yValue = Math.max(...values.map((v: any) => Number(v)))
-          break
-        case 'min':
-          yValue = Math.min(...values.map((v: any) => Number(v)))
-          break
-        default:
-          yValue = 0
-      }
-      seriesData[seriesIndex].data.push(yValue)
-    })
-  })
-  visableChart.value = true
-  chartOption.value = getChartOption(xAxisData, seriesData)
-  console.log('生成的图表配置:', chartOption.value)
-  // 强制完全替换图表配置
-  if (chartRef.value) {
-    chartRef.value.setOption(chartOption, true)
-  }
-}
-
-function getChartOption(xAxisData: any[], seriesData: any[]) {
-  if (chartConfig.value.chartType === 'pie') {
-    return {
-      tooltip: {
-        trigger: 'item'
-      },
-      legend: {
-        type: 'scroll',
-        orient: 'vertical', // 设置图例为垂直布局
-        right: 10, // 图例距离右侧的距离
-        top: 'center' // 图例垂直居中
-      },
-      toolbox: {
-        show: true,
-        feature: {
-          saveAsImage: {
-            title: '保存为图片'
-          }
-        }
-      },
-      series: [
-        {
-          name: chartConfig.value.xAxis,
-          type: 'pie',
-          radius: '90%',
-          data: xAxisData.map((xValue, index) => {
-            return {
-              name: xValue,
-              value: seriesData[0].data[index]
-            }
-          }),
-          emphasis: {
-            itemStyle: {
-              shadowBlur: 10,
-              shadowOffsetX: 0,
-              shadowColor: 'rgba(0, 0, 0, 0.5)'
-            }
-          }
-        }
-      ]
-    }
-  } else if (chartConfig.value.chartType === 'radar') {
-    const radarData: any = []
-    seriesData.forEach((seriesItem, seriesIndex) => {
-      radarData.push({
-        value: seriesItem.data,
-        name: seriesItem.name
-      })
-    })
-    return {
-      tooltip: {
-        trigger: 'item'
-      },
-      legend: {
-        type: 'scroll',
-        orient: 'vertical', // 设置图例为垂直布局
-        right: 10, // 图例距离右侧的距离
-        top: 'center' // 图例垂直居中
-      },
-      toolbox: {
-        show: true,
-        feature: {
-          saveAsImage: {
-            title: '保存为图片'
-          }
-        }
-      },
-      radar: {
-        indicator: xAxisData.map((xValue, index) => {
-          return {
-            name: xValue,
-            max: Math.max(...seriesData[0].data) * 1.2 // 设置最大值为数据的1.2倍，留出空间
-          }
-        })
-      },
-      series: [
-        {
-          name: chartConfig.value.xAxis,
-          type: 'radar',
-          data: radarData
-        }
-      ]
-    }
-  } else {
-    return {
-      tooltip: {
-        trigger: 'axis'
-      },
-      toolbox: {
-        show: true,
-        feature: {
-          dataZoom: {
-            title: {
-              zoom: '区域缩放',
-              back: '缩放还原'
-            },
-            yAxisIndex: 'none'
-          },
-          dataView: {
-            readOnly: false,
-            title: '数据视图',
-            lang: ['数据视图', '关闭', '刷新']
-          },
-          magicType: {
-            title: {
-              line: '切换为折线图',
-              bar: '切换为柱状图'
-            },
-            type: ['line', 'bar']
-          },
-          restore: {
-            title: '还原'
-          },
-          saveAsImage: {
-            title: '保存为图片'
-          }
-        }
-      },
-      legend: {
-        type: 'scroll',
-        orient: 'vertical', // 设置图例为垂直布局
-        right: 10, // 图例距离右侧的距离
-        top: 'center' // 图例垂直居中
-      },
-      xAxis: {
-        type: 'category',
-        data: xAxisData
-      },
-      yAxis: {
-        type: 'value'
-      },
-      series: seriesData
-    }
-  }
-}
-function handleClose(done: any) {
-  currentShowChildTableData.value = []
-  currentShowChildTableDataColumns.value = []
-  currentShowChildTableDataAlias.value = ''
-  done()
-}
-
-function beforeShow(index: number, row: any, childTable: any) {
-  loading.value = true
-  currentShowChildTableData.value = []
-  currentShowChildTableDataColumns.value = []
-  if (childTableData[row.ID]?.[childTable.id]) {
-    const columns = new Set<string>()
-    childTableData[row.ID][childTable.id].forEach((item: any) => {
-      Object.keys(item).forEach((key) => {
-        columns.add(key)
-      })
-    })
-    currentShowChildTableDataColumns.value = childTableDataColumns[childTable.id]
-    currentShowChildTableDataAlias.value = childTable.alias
-    loading.value = false
-    currentShowChildTableData.value = childTableData[row.ID][childTable.id]
-    dialogVisible.value = true
-    return
-  }
-  mcpUtils
-    .getChildTableData({ parentData: row, childTables: [childTable], dataTable: dataTables.value[0] })
-    .then((res: any) => {
-      if (!childTableData[row.ID]) {
-        childTableData[row.ID] = {}
-      }
-      if (res[childTable.alias]) {
-        const columns = new Set<string>()
-        res[childTable.alias].forEach((item: any) => {
-          Object.keys(item).forEach((key) => {
-            columns.add(key)
-          })
-        })
-        currentShowChildTableDataColumns.value = Array.from(columns)
-          .map((col) => ({
-            prop: col,
-            label: col
-          }))
-          .filter((col) => col.prop !== 'id' && col.prop !== 'ID')
-        childTableDataColumns[childTable.id] = currentShowChildTableDataColumns.value
-        const formatData = res[childTable.alias]
-        childTableData[row.ID][childTable.id] = formatData
-        loading.value = false
-        currentShowChildTableData.value = formatData
-        currentShowChildTableDataAlias.value = childTable.alias
-        dialogVisible.value = true
-      }
-    })
-    .catch(() => {
-      dialogVisible.value = true
-      loading.value = false
-    })
-}
-</script>
-<style scoped>
-.home-chart-iframe {
-  width: 100%;
-  height: 100%;
-  border: none;
-  opacity: 1;
-}
-</style>