From 2887b039ae67af588b988c257b314a3f4c70ae0f Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期三, 17 七月 2024 16:16:35 +0800
Subject: [PATCH] 8%
---
src/components/chat/chatComponents/summaryCom/SummaryCom.vue | 151 ++++++++++++++++++++++++++++++++++++--------------
1 files changed, 108 insertions(+), 43 deletions(-)
diff --git a/src/components/chat/chatComponents/summaryCom/SummaryCom.vue b/src/components/chat/chatComponents/summaryCom/SummaryCom.vue
index 96057d6..c827974 100644
--- a/src/components/chat/chatComponents/summaryCom/SummaryCom.vue
+++ b/src/components/chat/chatComponents/summaryCom/SummaryCom.vue
@@ -1,43 +1,49 @@
<template>
- <div style="width:calc(100ch - 28px)">
- <template v-if="summaryList && summaryList.length > 0">
- <div class="w-full" v-for="(item, idx) in summaryList" :key="idx">
- <h3>{{ item.title }}</h3>
- <el-table ref="tableRefList" class="w-full" :data="[{}]">
- <el-table-column v-for="(col, index) in item.values" :label="col.title" :key="index">
- <template #default="scope">
- {{ col?.value }}
- </template>
- </el-table-column>
- </el-table>
+ <div class="w-full">
+ <template v-if="data && data.length > 0">
+ <template v-if="summaryList && summaryList.length > 0">
+ <div class="w-full" v-for="(item, idx) in summaryList" :key="idx">
+ <h3>{{ item.title }}</h3>
+ <el-table ref="tableRefList" class="w-full" :data="[{}]">
+ <el-table-column v-for="(col, index) in item.values" :label="col.title" :key="index">
+ <template #default="scope">
+ {{ col?.value }}
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ </template>
+
+ <div
+ class="flex-column w-full"
+ :class="{ 'mt-10': summaryList && summaryList.length > 0 }"
+ v-if="recordSetList && recordSetList.length > 0"
+ >
+ <div class="h-[20rem] flex-auto w-full">
+ <div ref="chartRefList" v-for="(item, index) in recordSetList" :key="index"></div>
+ </div>
+ </div>
+ <div v-if="urlList && urlList.length > 0" class="w-full">
+ <!-- <HTMLCom data="http://101.133.133.173:8019/ai_html/views/demo/html/MonthlyPay.html" v-for="(item, index) in urlList" :key="index"></HTMLCom> -->
+ <HTMLCom :data="item.url" v-for="(item, index) in urlList" :key="index"></HTMLCom>
+
</div>
</template>
-
- <div class="flex-column w-full mt-10" v-if="recordSetList && recordSetList.length > 0">
- <el-select class="flex-0 w-36 ml-auto mr-16" v-model="selectChartType" @change="selectChartTypeChange">
- <el-option
- v-for="item in Object.keys(chartTypeMapName)"
- :key="item"
- :value="parseInt(item)"
- :label="chartTypeMapName[item]"
- ></el-option>
- </el-select>
- <div class="min-h-[48rem] flex-auto w-full">
- <div ref="chartRefList" v-for="(item, index) in recordSetList" :key="index"></div>
- </div>
- </div>
+ <div v-else class="text-red-500">{{ error }}</div>
</div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts';
+import type { TableInstance } from 'element-plus';
import _ from 'lodash';
import { computed, onMounted, ref } from 'vue';
-import { ChartTypeEnum, chartTypeMapEchart, chartTypeMapName } from '../types';
+import { AnswerType } from '../../model/types';
+import { PATH_ICON, SCATTER_SYMBOL_SIZE, timeDataOptionToContent } from '../common';
+import HTMLCom from '../htmlCom/HTMLCom.vue';
+import { ChartTypeEnum, chartTypeMapEchart } from '../types';
import { axisLabelFormatter } from '/@/utils/chart';
-import type { TableInstance } from 'element-plus';
-
-const props = defineProps(['data']);
+const props = defineProps(['data', 'error']);
const selectChartType = ref<ChartTypeEnum>(ChartTypeEnum.Line);
@@ -73,12 +79,13 @@
refList = [chartRef.value as unknown as HTMLDivElement];
}
}
-
return refList;
});
-const recordSetList = computed(() => props.data.filter((item) => item.type === 'recordset'));
-const summaryList = computed(() => props.data.filter((item) => item.type === 'summary'));
+const recordSetList = computed(() => props.data.filter((item) => item.type === AnswerType.RecordSet));
+const summaryList = computed(() => props.data.filter((item) => item.type === AnswerType.Summary));
+const urlList = computed(() => props.data.filter((item) => item.type === AnswerType.Url));
+
const drawAllChart = () => {
chartInstanceList.map((item, index) => {
drawChart(item, recordSetList.value[index]);
@@ -132,17 +139,79 @@
name: item === 'default' ? '' : item,
data: values.map((item) => [item[timeIndex], item[valueIndex]]),
type: chartTypeMapEchart[selectChartType.value],
+ symbol: 'none',
+ smooth: true,
};
});
-
instance.setOption({
grid: {
// bottom: 120,
// right: '15%',
- bottom: '15%',
+ bottom: '8%',
},
+ toolbox: {
+ show: true,
+ feature: {
+ dataZoom: {
+ yAxisIndex: 'none',
+ },
+
+ myBar: {
+ title: '杞寲涓烘煴鐘跺浘',
+ show: true,
+ icon: PATH_ICON.bar,
+ onclick: () => {
+ instance.setOption({
+ series: seriesData.map((item) => ({
+ ...item,
+ type: 'bar',
+ symbol: 'none',
+ })),
+ });
+ },
+ },
+
+ myScatter: {
+ title: '杞寲涓烘暎鐐瑰浘',
+ show: true,
+ icon: PATH_ICON.scatter,
+ onclick: () => {
+ instance.setOption({
+ series: seriesData.map((item) => ({
+ ...item,
+ type: 'scatter',
+ symbol: 'circle',
+ symbolSize: SCATTER_SYMBOL_SIZE,
+ })),
+ });
+ },
+ },
+ myLine: {
+ title: '杞寲涓烘洸绾垮浘',
+ show: true,
+ icon: PATH_ICON.line,
+ onclick: () => {
+ instance.setOption({
+ series: seriesData.map((item) => ({
+ ...item,
+ type: 'line',
+ symbol: 'none',
+ smooth: true,
+ })),
+ });
+ },
+ },
+ dataView: {
+ readOnly: true,
+ optionToContent: timeDataOptionToContent,
+ },
+ saveAsImage: {},
+ },
+ },
+
tooltip: {
show: true,
+ trigger: 'axis',
},
title: {
text: data?.title,
@@ -166,26 +235,22 @@
});
};
-const doTableLayout = ()=>{
- tableRefList.value.forEach((item)=>{
- console.log("馃殌 ~ item:", item)
+const doTableLayout = () => {
+ tableRefList.value.forEach((item) => {
item.doLayout();
- })
-}
+ });
+};
let chartInstanceList: echarts.ECharts[] = null;
onMounted(() => {
setTimeout(() => {
const parent = chartRefList.value[0]?.parentElement;
const data = props.data;
setTimeout(() => {
- doTableLayout();
-
+ doTableLayout();
}, 3000);
-
if (!parent) {
return;
- } else {
}
const parentBound = parent.getBoundingClientRect();
--
Gitblit v1.9.3