From 9a24311db20e434d7022685db2347f3e6434e860 Mon Sep 17 00:00:00 2001
From: yangyin <1850366751@qq.com>
Date: 星期三, 17 七月 2024 09:36:28 +0800
Subject: [PATCH] fix: 修改页面路径
---
src/components/chat/chatComponents/summaryCom/SummaryCom.vue | 166 +++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 131 insertions(+), 35 deletions(-)
diff --git a/src/components/chat/chatComponents/summaryCom/SummaryCom.vue b/src/components/chat/chatComponents/summaryCom/SummaryCom.vue
index e514981..ac768c3 100644
--- a/src/components/chat/chatComponents/summaryCom/SummaryCom.vue
+++ b/src/components/chat/chatComponents/summaryCom/SummaryCom.vue
@@ -1,48 +1,73 @@
<template>
- <div class="min-w-[100ch]">
- <template v-if="summaryList && summaryList.length > 0">
- <div class="ml-10" v-for="(item, idx) in summaryList" :key="idx">
- <h3>{{ item.title }}</h3>
- <el-table class="mt-2" :data="item.values" :style="{ width: `${columnsWidth * (item.values?.length ?? 1)}px` }">
- <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 style="width: calc(100ch - 28px)">
+ <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="min-h-[48rem] 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://192.168.1.7:8888/src/views/project/ch/demo/Overview.html"
+ v-for="(item, index) in urlList"
+ :key="index"
+ ></HTMLCom>
</div>
</template>
-
- <div class="flex-column w-full" 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';
-
-const props = defineProps(['data']);
+const props = defineProps(['data', 'error']);
const selectChartType = ref<ChartTypeEnum>(ChartTypeEnum.Line);
const columnsWidth = 120;
const chartRef = ref<HTMLDivElement[] | HTMLDivElement>(null);
+const tableRef = ref<TableInstance>(null);
+const tableRefList = computed(() => {
+ let refList: TableInstance[] = [];
+ if (!tableRef.value) {
+ refList = [];
+ } else {
+ const first = tableRef.value?.[0];
+ if (first) {
+ refList = tableRef.value as unknown as TableInstance[];
+ } else {
+ refList = [tableRef.value as unknown as TableInstance];
+ }
+ }
+
+ return refList;
+});
const chartRefList = computed(() => {
let refList: HTMLDivElement[] = [];
@@ -56,12 +81,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]);
@@ -115,17 +141,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: '5%',
},
+ 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,
@@ -148,20 +236,28 @@
},
});
};
+
+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();
+ }, 3000);
if (!parent) {
return;
- } else {
}
const parentBound = parent.getBoundingClientRect();
let divideCount = 1;
-
+
const width = parentBound.width / divideCount;
chartInstanceList = chartRefList.value.map((item) => {
return echarts.init(item, undefined, {
--
Gitblit v1.9.3