hongxilin
/
AIxiaocaishen
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

情绪大模型图表的适配

ds_hxl
宋杰 2 weeks ago
parent
5e919701de
commit
f57f15e53c
5 changed files with 530 additions and 132 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 336
      src/views/AiEmotion.vue
  2. 15
      src/views/components/emoEnergyConverter.vue
  3. 23
      src/views/components/emotionDecod.vue
  4. 46
      src/views/components/emotionalBottomRadar.vue
  5. 110
      src/views/components/marketTemperature.vue

336
src/views/AiEmotion.vue
View File

@ -27,12 +27,7 @@
<div class="class02"> <div class="class02">
<div class="container"> <div class="container">
<img class="item" :src="item" alt="思维矩阵图片" /> <img class="item" :src="item" alt="思维矩阵图片" />
<div class="span01" style="
position: relative;
top: 0.5rem;
left: -14rem;
transform: translate(-50%, -50%);
">
<div class="span01">
{{ stockName }}{{ stockName ? '量子四维矩阵图' : '' }} {{ stockName }}{{ stockName ? '量子四维矩阵图' : '' }}
</div> </div>
</div> </div>
@ -43,7 +38,7 @@
</div> </div>
<!-- 温度计图表 --> <!-- 温度计图表 -->
<div class="class03"> <div class="class03">
<div class="class003" style="padding-top: 7rem;padding-left: 12rem;">
<div class="class003">
<div class="content1"> <div class="content1">
<img class="img01" src="@/assets/img/AiEmotion/温度计.png" alt="温度计图标"> <img class="img01" src="@/assets/img/AiEmotion/温度计.png" alt="温度计图标">
<span class="title1">股票温度计</span> <span class="title1">股票温度计</span>
@ -132,13 +127,13 @@
import { ref, reactive } from 'vue'; import { ref, reactive } from 'vue';
import { getReplyAPI } from '@/api/AiEmotionApi.js'; // 导入工作流接口方法 import { getReplyAPI } from '@/api/AiEmotionApi.js'; // 导入工作流接口方法
import axios from 'axios'; import axios from 'axios';
import { useChatStore } from '@/store/chat.js';
import item from '@/assets/img/AiEmotion/bk01.png'; // 导入思维矩阵图片 import item from '@/assets/img/AiEmotion/bk01.png'; // 导入思维矩阵图片
import emotionDecod from '@/views/components/emotionDecod.vue'; // 导入情绪解码组件 import emotionDecod from '@/views/components/emotionDecod.vue'; // 导入情绪解码组件
import emotionalBottomRadar from '@/views/components/emotionalBottomRadar.vue'; // 导入情绪探底雷达图组件 import emotionalBottomRadar from '@/views/components/emotionalBottomRadar.vue'; // 导入情绪探底雷达图组件
import emoEnergyConverter from '@/views/components/emoEnergyConverter.vue'; // 导入情绪能量转化器组件 import emoEnergyConverter from '@/views/components/emoEnergyConverter.vue'; // 导入情绪能量转化器组件
import marketTemperature from '@/views/components/marketTemperature.vue'; import marketTemperature from '@/views/components/marketTemperature.vue';
import blueBorderImg from '@/assets/img/AiEmotion/blueBorder.png' //导入蓝色背景框图片 import blueBorderImg from '@/assets/img/AiEmotion/blueBorder.png' //导入蓝色背景框图片
import { ElMessage } from 'element-plus';
const stockName = ref(''); // 存储股票名称 const stockName = ref(''); // 存储股票名称
const marketTemperatureRef = ref(null); // 引用市场温度计组件 const marketTemperatureRef = ref(null); // 引用市场温度计组件
@ -147,7 +142,7 @@ const emotionDecodRef = ref(null)
const emotionalBottomRadarRef = ref(null) const emotionalBottomRadarRef = ref(null)
const messages = ref([]); const messages = ref([]);
const displayDate = ref(''); // 用于存储显示的日期 const displayDate = ref(''); // 用于存储显示的日期
const isPageLoaded = ref(true); // 控制页面是否显示
const isPageLoaded = ref(false); // 控制页面是否显示
const isRotating = ref(false);//控制旋转 const isRotating = ref(false);//控制旋转
const userInputDisplayRef = ref(null);//消息区域的引用 const userInputDisplayRef = ref(null);//消息区域的引用
const data1 = ref(null); // 个股温度 const data1 = ref(null); // 个股温度
@ -163,15 +158,6 @@ function startImageRotation() {
isRotating.value = false; isRotating.value = false;
}, 5000); // 5 秒后停止旋转 }, 5000); // 5 秒后停止旋转
} }
// 更新 span01 中股票名字的方法
function updateSpan01() {
nextTick(() => {
const span01 = document.querySelector('.span01');
if (span01) {
span01.textContent = `${stockName.value}量子四维矩阵图`;
}
});
}
// 发送消息方法 // 发送消息方法
@ -220,18 +206,18 @@ async function handleSendMessage(input) {
fetchData(parsedData.code, parsedData.market); fetchData(parsedData.code, parsedData.market);
// 更新 span01 的内容 // 更新 span01 的内容
updateSpan01();
// updateSpan01();
} else { } else {
console.error('工作流接口返回非股票信息:', parsedData.refuse);
ElMessage.error('工作流接口未返回非股票信息');
} }
} catch (error) { } catch (error) {
console.error('请求工作流接口失败:', error);
ElMessage.error('请求工作流接口失败，请检查网络连接');
} finally { } finally {
// 停止图片旋转 // 停止图片旋转
isRotating.value = false; isRotating.value = false;
} }
} else { } else {
ElMessage.error('消息发送失败，请检查网络连接');
} }
} }
@ -241,8 +227,8 @@ async function fetchData(code, market) {
const stockDataParams = { const stockDataParams = {
// token: '+XgqsgdW0RLIbIG2pxnnbZi0+fEeMx8pywnIlrmTxtkSaPZ9xjSOWrxq+s0rL3RrfNhXPvGtz9srFfjwu8A', // token: '+XgqsgdW0RLIbIG2pxnnbZi0+fEeMx8pywnIlrmTxtkSaPZ9xjSOWrxq+s0rL3RrfNhXPvGtz9srFfjwu8A',
token: '9ior41AF0xTIbIG2pRnnbZi0+fEeMx8pywnIlrmTwo5FbqJ9lWrSWOxp9MkpKiNtedtUafqvzIwpFKrwuMs', token: '9ior41AF0xTIbIG2pRnnbZi0+fEeMx8pywnIlrmTwo5FbqJ9lWrSWOxp9MkpKiNtedtUafqvzIwpFKrwuMs',
market: 'usa',
code: 'TSLA',
market: market,
code: code,
language: 'cn', language: 'cn',
version: version1.value version: version1.value
}; };
@ -259,13 +245,10 @@ async function fetchData(code, market) {
); );
const stockDataResponse = stockDataResult.data; // 获取返回所有的数据 const stockDataResponse = stockDataResult.data; // 获取返回所有的数据
const chatStore = useChatStore();
chatStore.kLineData.push(stockDataResponse.data);
console.log('图表数据接口返回数据:', stockDataResponse.data); console.log('图表数据接口返回数据:', stockDataResponse.data);
if (stockDataResponse.code === 200 && stockDataResponse.data) { if (stockDataResponse.code === 200 && stockDataResponse.data) {
console.log(stockDataResponse.code)
// 数据清洗并四舍五入xx // 数据清洗并四舍五入xx
const lastTwoNumbers = stockDataResponse.data.GSWDJ.map(([date, num1, num2]) => [ const lastTwoNumbers = stockDataResponse.data.GSWDJ.map(([date, num1, num2]) => [
date, date,
@ -278,16 +261,16 @@ async function fetchData(code, market) {
data2.value = lastTwoNumbers[2] // 市场温度 data2.value = lastTwoNumbers[2] // 市场温度
console.log('1111111111111111111111') console.log('1111111111111111111111')
// 调用渲染图表的方法 // 调用渲染图表的方法
renderCharts(chatStore.kLineData[chatStore.kLineData.length - 1]);
console.log('2222222222222222222222')
// renderCharts(stockDataResponse.data);
// 数据和图表加载完成，显示页面 // 数据和图表加载完成，显示页面
// isPageLoaded.value = true;
} else {
isPageLoaded.value = true;
renderCharts(stockDataResponse.data);
} else {
ElMessage.error('获取接口数据失败');
} }
} catch (error) { } catch (error) {
ElMessage.error('获取接口数据失败。。。');
} }
} }
@ -335,6 +318,11 @@ onMounted(() => {
</script> </script>
<style scoped> <style scoped>
.class003 {
padding-top: 7rem;
padding-left: 12rem;
}
.class003 .div02 { .class003 .div02 {
background-image: url('@/assets/img/AiEmotion/redBorder.png'); background-image: url('@/assets/img/AiEmotion/redBorder.png');
background-repeat: no-repeat; background-repeat: no-repeat;
@ -438,11 +426,9 @@ onMounted(() => {
width: fit-content; width: fit-content;
} }
.class0503 {
/* .class0503 {
min-width: 100%; min-width: 100%;
/* margin: 0 auto; */
}
} */
.class0402 { .class0402 {
width: 80%; width: 80%;
@ -528,8 +514,6 @@ onMounted(() => {
margin-left: 2rem; margin-left: 2rem;
} }
.class0502 {}
.img02 { .img02 {
width: 10rem; width: 10rem;
height: 10rem; height: 10rem;
@ -595,7 +579,7 @@ onMounted(() => {
/* 设置容器宽度 */ /* 设置容器宽度 */
height: auto; height: auto;
/* 高度根据内容动态变化 */ /* 高度根据内容动态变化 */
min-height: 70rem;
min-height: 72rem;
/* 设置最小高度，确保图片显示 */ /* 设置最小高度，确保图片显示 */
margin: 0 auto; margin: 0 auto;
} }
@ -627,7 +611,7 @@ onMounted(() => {
/* 设置容器宽度 */ /* 设置容器宽度 */
height: auto; height: auto;
/* 高度根据内容动态变化 */ /* 高度根据内容动态变化 */
min-height: 55rem;
min-height: 57rem;
/* 设置最小高度，确保图片显示 */ /* 设置最小高度，确保图片显示 */
margin: 0 auto; margin: 0 auto;
} }
@ -639,7 +623,7 @@ onMounted(() => {
/* 确保背景图片完整显示 */ /* 确保背景图片完整显示 */
background-repeat: no-repeat; background-repeat: no-repeat;
/* 防止背景图片重复 */ /* 防止背景图片重复 */
width: 95%;
width: 100%;
/* 设置容器宽度 */ /* 设置容器宽度 */
height: auto; height: auto;
/* 高度根据内容动态变化 */ /* 高度根据内容动态变化 */
@ -703,13 +687,12 @@ onMounted(() => {
font-size: 1.5rem; font-size: 1.5rem;
color: white; color: white;
float: right; float: right;
margin-top: -90px;
margin-top: -3.5rem;
} }
.span01 { .span01 {
/* background-image: url('@/assets/img/AiEmotion/bk01.png'); */
/* 使用导入的背景图片 */ /* 使用导入的背景图片 */
background-size: cover;
background-size: 100% 100%;
/* 背景图片覆盖整个容器 */ /* 背景图片覆盖整个容器 */
background-repeat: no-repeat; background-repeat: no-repeat;
/* 防止背景图片重复 */ /* 防止背景图片重复 */
@ -719,14 +702,11 @@ onMounted(() => {
/* 添加内边距以显示内容 */ /* 添加内边距以显示内容 */
color: #fff; color: #fff;
/* 设置文字颜色以确保可读性 */ /* 设置文字颜色以确保可读性 */
border-radius: 5px;
/* 添加圆角 */
min-height: 3rem;
min-width: 30rem;
font-size: 1.5rem; font-size: 1.5rem;
/* 增加字体大小以便更清晰显示股票名称 */ /* 增加字体大小以便更清晰显示股票名称 */
text-align: center; text-align: center;
/* 文字居中 */
transform: translate(-50%, -50%);
margin-left: -13rem;
} }
@ -828,4 +808,258 @@ onMounted(() => {
.send-button:hover { .send-button:hover {
background-color: #0056b3; background-color: #0056b3;
} }
/* 手机端适配样式 */
@media only screen and (max-width: 768px) {
/* 图片样式 */
.golden-wheel img {
width: 100%;
}
.class02 img {
width: 70%;
}
.class0201 img {
width: 100%;
}
.class0301 img {
width: 100%;
}
.class0403 img {
width: 100%;
}
.class0501 img {
width: 100%;
}
.class0702 img {
width: 100%;
}
.class0700 img {
width: 100%;
}
.scaled-img img {
width: 30%;
height: auto;
}
.class09 img {
width: 100%;
}
.img01 {
height: auto;
margin-left: 0rem;
width: 35%;
margin-top: 10px;
}
.title1 {
font-size: 10px;
margin-left: 30px;
}
.class02 .span02 {
font-size: 14px;
color: white;
float: right;
margin-top: -45px;
}
.class03 {
background-image: url('@/assets/img/AiEmotion/bk03.png');
background-size: 100% 100%;
background-repeat: no-repeat;
width: 132%;
margin-left: -45px;
}
.class03 .class003 {
padding-top: 3rem;
padding-left: 0rem;
}
.class01 {
min-height: 100px;
height: auto;
box-sizing: border-box;
background-color: #5e81a7;
margin: 0 auto;
margin-bottom: 10rem;
}
.class04 {
width: 126%;
/* min-height: 51rem; */
margin-left: -39px;
min-height: 38rem;
}
.class02 .container img {
width: 68%;
height: auto;
margin-top: -15px;
margin-left: -2rem;
}
.title2,
.title3,
.title4 {
font-size: 10px;
margin-left: -3rem;
}
.img02 {
width: 35%;
height: auto;
margin-left: 5rem;
}
.class0401 {
padding-top: 3rem;
}
.img03,
.img04 {
width: 35%;
height: auto;
margin-left: 5rem;
}
.text-container p {
font-size: 10px;
}
.lz-img {
margin-bottom: 3rem;
padding-top: 20px;
img {
width: 45%;
height: auto;
}
}
.class08 {
background-size: 100% 100%;
background-repeat: no-repeat;
width: 127%;
height: auto;
min-height: 13rem;
margin: 0 auto;
margin-left: -41px;
}
.bk-image {
background-size: 100% 100%;
background-repeat: no-repeat;
width: 126%;
height: 15rem;
margin: 0 auto;
margin-top: 0px;
margin-left: -40px;
}
.class05 {
background-size: 100% 100%;
background-repeat: no-repeat;
width: 127%;
height: auto;
min-height: 45rem;
margin-left: -41px;
}
.class06 {
background-size: 100% 100%;
background-repeat: no-repeat;
width: 127%;
height: auto;
min-height: 35rem;
margin: 0 auto;
margin-left: -41px;
}
.text-container {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
text-align: left;
padding: 20px;
}
.div00 {
display: flex;
flex-direction: column;
margin-left: 3rem;
gap: 0;
margin-top: -8rem;
width: 100%;
height: auto;
}
.class003 .div01 {
background-repeat: no-repeat;
background-size: 100% 100%;
width: 35%;
min-height: 25px;
float: left;
margin-left: 100px;
text-align: center;
margin-top: 10px;
font-size: 10px;
color: white;
}
.class003 .div02 {
background-repeat: no-repeat;
background-size: 100% 100%;
width: 35%;
min-height: 25px;
float: left;
margin-left: 100px;
text-align: center;
margin-top: 10px;
font-size: 10px;
color: white;
}
/*
.container {
max-width: 80vw;
width: 100%;
height: auto;
} */
.span01 {
/* 使用导入的背景图片 */
background-size: 100% 100%;
/* 背景图片覆盖整个容器 */
background-repeat: no-repeat;
/* 防止背景图片重复 */
display: inline-block;
/* 确保容器是块级元素 */
padding: 10px;
/* 添加内边距以显示内容 */
color: #fff;
/* 设置文字颜色以确保可读性 */
font-size: 13px;
/* 增加字体大小以便更清晰显示股票名称 */
text-align: center;
transform: translate(-50%, -50%);
margin-left: -5rem;
}
}
</style> </style>

15
src/views/components/emoEnergyConverter.vue
View File

@ -246,6 +246,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
data: mixData.map((item) => item.date), data: mixData.map((item) => item.date),
axisLabel: { axisLabel: {
rotate: 45, // 日期旋转45度防止重叠 rotate: 45, // 日期旋转45度防止重叠
color: "white"
}, },
}, },
yAxis: { yAxis: {
@ -415,11 +416,12 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
}, },
], ],
grid: { grid: {
left: "0",
left: "7%",
right: "10", right: "10",
top: '10', top: '10',
bottom: "0", bottom: "0",
containLabel: true, containLabel: true,
width: '85%'
}, },
}; };
// 应用配置 // 应用配置
@ -443,4 +445,15 @@ onBeforeUnmount(() => {
height: 700px; height: 700px;
margin-left: -1rem; margin-left: -1rem;
} }
/* 手机端适配样式 */
@media only screen and (max-width: 768px) {
#qxnlzhqEcharts {
min-width: 100%;
height: 300px;
margin-left: -1rem;
margin-top: -5rem;
}
}
</style> </style>

23
src/views/components/emotionDecod.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<!-- <div ref="qxnlzhqEchartsRef" id="qxnlzhqEcharts"></div> --> <!-- <div ref="qxnlzhqEchartsRef" id="qxnlzhqEcharts"></div> -->
<div class="qxjmqbox"> <div class="qxjmqbox">
<div ref="KlineCanvs" id="qxjmqEcharts" class="qxjmqbox"></div>
<div ref="KlineCanvs" id="qxjmqEcharts"></div>
</div> </div>
</template> </template>
@ -358,12 +358,31 @@ onBeforeUnmount(() => {
</script> </script>
<style scoped> <style scoped>
.qxjmqbox { .qxjmqbox {
height:100%;
height: auto;
width: 100%;
} }
#qxjmqEcharts { #qxjmqEcharts {
width: 100%; width: 100%;
height: 500px; height: 500px;
margin-left: 1rem; margin-left: 1rem;
top: 5rem; top: 5rem;
} }
/* 手机端适配样式 */
@media only screen and (max-width: 768px) {
#qxjmqEcharts {
width: 100%;
height: 400px;
margin-left: 1rem;
top: 5rem;
}
.qxjmqbox {
height: auto;
width: 110%;
margin-top: -5rem;
margin-left: -1rem;
}
}
</style> </style>

46
src/views/components/emotionalBottomRadar.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div ref="bottomRadarRef" id="bottomRadarChart" style="heigh: 100%; width: 100%;"></div>
<div ref="bottomRadarRef" id="bottomRadarChart"></div>
</template> </template>
<script setup> <script setup>
@ -141,27 +141,32 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
}, },
grid: [ grid: [
{ {
left: '3%',
left: '10%',
right: '3%', right: '3%',
top: '20px', top: '20px',
bottom: '50%', bottom: '50%',
height: '300px', height: '300px',
width: '85%'
// containLabel: true // containLabel: true
}, },
{ {
left: '3%',
left: '10%',
right: '3%', right: '3%',
top: '320px', top: '320px',
bottom: '25%', bottom: '25%',
height: '300px', height: '300px',
width: '85%'
// containLabel: true // containLabel: true
}, },
{ {
left: '3%',
left: '10%',
right: '3%', right: '3%',
top: '620px', top: '620px',
bottom: '50px', bottom: '50px',
height: '300px', height: '300px',
width: '85%'
// containLabel: true // containLabel: true
} }
], ],
@ -535,8 +540,28 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
// 监听窗口大小变化，调整图表尺寸 // 监听窗口大小变化，调整图表尺寸
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
adjustGridHeight()
bottomRadarChart.resize() bottomRadarChart.resize()
}) })
function adjustGridHeight() {
if (window.innerWidth <= 768) {
option.grid[0].height = '150px'
option.grid[1].height = '150px'
option.grid[2].height = '150px'
option.grid[0].left = '15%'
option.grid[1].left = '15%'
option.grid[2].left = '15%'
option.grid[1].top = '170px'
option.grid[2].top = '320px'
option.grid[0].width = '80%'
option.grid[1].width = '80%'
option.grid[2].width = '80%'
}
bottomRadarChart.setOption(option)
}
// 初始化时调整高度
adjustGridHeight()
} }
// 暴露给父级 // 暴露给父级
@ -554,10 +579,23 @@ onBeforeUnmount(() => {
<style> <style>
#bottomRadarChart { #bottomRadarChart {
height: auto;
width: 100%;
min-width: 100%; min-width: 100%;
/* min-height: 100%; */ /* min-height: 100%; */
height: 1040px; height: 1040px;
/* padding-bottom: 3rem; */ /* padding-bottom: 3rem; */
} }
/* 手机端适配样式 */
@media only screen and (max-width: 768px) {
#bottomRadarChart {
height: auto;
width: 100%;
min-width: 100%;
height: 560px;
}
}
</style> </style>

110
src/views/components/marketTemperature.vue
View File

@ -14,8 +14,8 @@
</div> </div>
<div class="border4"> <div class="border4">
<el-table :data="groupedWDRL" border :row-style="{ height: '8.6vw' }" header-cell-class-name="table_header"
:cell-style="tableCellStyle">
<el-table :data="groupedWDRL" border :row-style="tableRowStyle" header-cell-class-name="table_header"
:cell-style="tableCellStyle" :column-width="cellWidth">
<el-table-column v-for="(day, colIndex) in ['一', '二', '三', '四', '五', '六', '日']" :key="colIndex" :label="day"> <el-table-column v-for="(day, colIndex) in ['一', '二', '三', '四', '五', '六', '日']" :key="colIndex" :label="day">
<template #default="{ $index: rowIndex }"> <template #default="{ $index: rowIndex }">
<div v-if="getDayData(rowIndex, colIndex + 1)"> <div v-if="getDayData(rowIndex, colIndex + 1)">
@ -55,7 +55,7 @@
</template> </template>
<script setup> <script setup>
import { ref, computed, onMounted, defineExpose, defineProps } from 'vue'
import { ref, computed, onMounted, defineExpose, defineProps, onUnmounted } from 'vue'
import * as echarts from 'echarts' import * as echarts from 'echarts'
const props = defineProps({ const props = defineProps({
@ -147,7 +147,15 @@ function tableCellStyle({ row, column, rowIndex, columnIndex }) {
else if (value > 0) return { backgroundColor: '#87CEEB', color: 'white' } else if (value > 0) return { backgroundColor: '#87CEEB', color: 'white' }
else return { backgroundColor: '#4b759f', color: 'white' } else return { backgroundColor: '#4b759f', color: 'white' }
} }
function tableRowStyle() {
// 动态调整行高
const containerWidth = document.querySelector('.border4')?.offsetWidth || 0;
const rowHeight = containerWidth * 0.1; // 根据容器宽度的比例调整行高
return { height: `${rowHeight}px` };
}
// 动态计算单元格宽度
const containerWidth = document.querySelector('.border4')?.offsetWidth || 0;
const cellWidth = containerWidth / 7;
// 初始化图表 // 初始化图表
function initChart(raw, klineDataRawValue, WDRLValue) { function initChart(raw, klineDataRawValue, WDRLValue) {
if (!raw || !klineDataRawValue || !WDRLValue) { if (!raw || !klineDataRawValue || !WDRLValue) {
@ -187,7 +195,7 @@ function initChart(raw, klineDataRawValue, WDRLValue) {
axisLabel: { color: '#FFA500' }, axisLabel: { color: '#FFA500' },
axisLine: { lineStyle: { color: 'purple', width: 2 } } axisLine: { lineStyle: { color: 'purple', width: 2 } }
}], }],
color: ['#f00', '#9370DB'],
color: ['#f00', 'white'],
series: [ series: [
{ {
name: 'K线', name: 'K线',
@ -222,8 +230,39 @@ function initChart(raw, klineDataRawValue, WDRLValue) {
} }
] ]
}) })
// 监听窗口大小变化
const resizeHandler = () => {
chart.resize()
}
window.addEventListener('resize', resizeHandler)
// 组件卸载时移除监听器
onUnmounted(() => {
window.removeEventListener('resize', resizeHandler)
})
// 初始调整字体大小
adjustCellFontSize()
} }
// 调整单元格字体大小
function adjustCellFontSize() {
const table = document.querySelector('.border4 .el-table')
if (table) {
const tableWidth = table.offsetWidth
const cellWidth = tableWidth / 7 // 假设一周 7 天
const fontSize = Math.min(cellWidth * 0.15, 20) // 根据单元格宽度动态计算字体大小
const dateElements = document.querySelectorAll('.WDRL_date')
const dataElements = document.querySelectorAll('.WDRL_data')
dateElements.forEach(el => {
el.style.fontSize = `${fontSize}px`
})
dataElements.forEach(el => {
el.style.fontSize = `${fontSize * 0.8}px`
})
}
}
defineExpose({ initChart }) defineExpose({ initChart })
</script> </script>
@ -277,16 +316,71 @@ defineExpose({ initChart })
.border3 { .border3 {
margin-top: 40px; margin-top: 40px;
border-radius: 8px; border-radius: 8px;
/* padding: 20px; */
margin-left: 12rem;
padding: 20px;
margin-left: -2rem;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.border4 { .border4 {
margin-top: 40px; margin-top: 40px;
border-radius: 8px; border-radius: 8px;
padding: 20px; padding: 20px;
width: 80%; width: 80%;
margin-left:8rem;
margin-left: 7rem;
}
/* 手机端适配样式 */
@media only screen and (max-width: 768px) {
.KlineClass {
width: 100%;
height: 300px;
}
.border4 {
margin-top: 0px;
border-radius: 8px;
padding: 0px;
width: 108%;
margin-left: -8px;
height: auto;
}
.el-table .hidden-columns {
position: absolute;
visibility: hidden;
z-index: -1;
}
.border3 {
margin-top: 40px;
border-radius: 8px;
padding: 20px;
margin-left: -13px;
width: 100%;
height: 100%;
}
.WDRL_date {
font-size: 4.2vw;
}
.month-display {
font-size: 1.8vw;
}
.WDRL_data {
font-size: 3vw;
}
.el-table .cell {
box-sizing: border-box;
line-height: 23px;
overflow: hidden;
overflow-wrap: break-word;
padding: 0 12px;
text-overflow: ellipsis;
white-space: normal;
text-align: center;
}
} }
</style> </style>
Write Preview
Loading…
Cancel
Save