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 | 136 ++++++++++++++++++++++++++++++++++----------- 1 files changed, 103 insertions(+), 33 deletions(-) diff --git a/src/components/chat/chatComponents/summaryCom/SummaryCom.vue b/src/components/chat/chatComponents/summaryCom/SummaryCom.vue index 2b105b0..ac768c3 100644 --- a/src/components/chat/chatComponents/summaryCom/SummaryCom.vue +++ b/src/components/chat/chatComponents/summaryCom/SummaryCom.vue @@ -1,31 +1,37 @@ <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> + <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 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> @@ -34,10 +40,12 @@ 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); @@ -73,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]); @@ -132,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, @@ -182,7 +253,6 @@ if (!parent) { return; - } else { } const parentBound = parent.getBoundingClientRect(); -- Gitblit v1.9.3