feat: 页面优化
This commit is contained in:
parent
0658c9e5fb
commit
06d8786a41
|
|
@ -1,29 +1,29 @@
|
|||
<template>
|
||||
<t-row style="height: 100%;">
|
||||
<t-col :flex="5" style="height: 100%;">
|
||||
<t-card header-bordered style="height: 100%;">
|
||||
<t-card header-bordered style="height: 100%;overflow-y: auto;">
|
||||
<template #header>
|
||||
<t-button @click="handleCal" :loading="calLoading">开始计算</t-button>
|
||||
</template>
|
||||
<template #content>
|
||||
<t-form label-align="left" label-width="280px" style="overflow-y: auto;">
|
||||
<t-form-item style="min-height: 80px;" label="企业技术说明及改造方案">
|
||||
<t-upload v-model="file6" :autoUpload="false" :max="1" accept=".docx,.pdf,.txt"/>
|
||||
<t-upload v-model="file6" :autoUpload="false" :max="1" accept=".docx,.pdf,.txt,.doc"/>
|
||||
</t-form-item>
|
||||
<t-form-item style="min-height: 80px;" label="企业低碳转型战略与总体规划">
|
||||
<t-upload v-model="file1" :autoUpload="false" :max="1" accept=".docx,.pdf,.txt" />
|
||||
<t-upload v-model="file1" :autoUpload="false" :max="1" accept=".docx,.pdf,.txt,.doc" />
|
||||
</t-form-item>
|
||||
<t-form-item style="min-height: 80px;" label="碳排放数据监测、核查与信息披露报告">
|
||||
<t-upload v-model="file2" :autoUpload="false" :max="1" accept=".docx,.pdf,.txt"/>
|
||||
<t-upload v-model="file2" :autoUpload="false" :max="1" accept=".docx,.pdf,.txt,.doc"/>
|
||||
</t-form-item>
|
||||
<t-form-item style="min-height: 80px;" label="数字化与智能控制系统技术方案">
|
||||
<t-upload v-model="file5" :autoUpload="false" :max="1" accept=".docx,.pdf,.txt"/>
|
||||
<t-upload v-model="file5" :autoUpload="false" :max="1" accept=".docx,.pdf,.txt,.doc"/>
|
||||
</t-form-item>
|
||||
<t-form-item style="min-height: 80px;" label="环境、社会与治理（ESG）尽职调查报告" >
|
||||
<t-upload v-model="file3" :autoUpload="false" :max="1" accept=".docx,.pdf,.txt"/>
|
||||
<t-upload v-model="file3" :autoUpload="false" :max="1" accept=".docx,.pdf,.txt,.doc"/>
|
||||
</t-form-item>
|
||||
<t-form-item style="min-height: 80px;" label="项目融资与可行性研究方案">
|
||||
<t-upload v-model="file4" :autoUpload="false" :max="1" accept=".docx,.pdf,.txt"/>
|
||||
<t-upload v-model="file4" :autoUpload="false" :max="1" accept=".docx,.pdf,.txt,.doc"/>
|
||||
</t-form-item>
|
||||
|
||||
</t-form>
|
||||
|
|
@ -182,15 +182,22 @@ const handleCal = () => {
|
|||
"正在生成最终评分..."
|
||||
];
|
||||
|
||||
let textIndex = 0;
|
||||
const textInterval = setInterval(() => {
|
||||
loadingText.value = loadingTexts[textIndex];
|
||||
textIndex = (textIndex + 1) % loadingTexts.length;
|
||||
}, 800);
|
||||
|
||||
// 模拟API调用延迟
|
||||
setTimeout(() => {
|
||||
http.postForm("/cal/", formData).then(res => {
|
||||
let textIndex = 0;
|
||||
const minLoadingTime = 5000; // 最小加载时间 5秒
|
||||
const startTime = Date.now(); // 记录开始时间
|
||||
|
||||
const textInterval = setInterval(() => {
|
||||
loadingText.value = loadingTexts[textIndex];
|
||||
textIndex = (textIndex + 1) % loadingTexts.length;
|
||||
}, 800);
|
||||
|
||||
// 模拟API调用延迟
|
||||
setTimeout(() => {
|
||||
http.postForm("/cal/", formData).then(res => {
|
||||
const elapsedTime = Date.now() - startTime; // 已过去的时间
|
||||
const remainingTime = Math.max(0, minLoadingTime - elapsedTime); // 还需要等待的时间
|
||||
|
||||
setTimeout(() => {
|
||||
clearInterval(textInterval);
|
||||
calLoading.value = false;
|
||||
score.value = res.total_score;
|
||||
|
|
@ -200,14 +207,19 @@ const handleCal = () => {
|
|||
showAnimation.value = false;
|
||||
showResult.value = true;
|
||||
}, 500);
|
||||
|
||||
}).catch(e => {
|
||||
}, remainingTime);
|
||||
|
||||
}).catch(e => {
|
||||
const elapsedTime = Date.now() - startTime;
|
||||
const remainingTime = Math.max(0, minLoadingTime - elapsedTime);
|
||||
|
||||
setTimeout(() => {
|
||||
clearInterval(textInterval);
|
||||
calLoading.value = false;
|
||||
showAnimation.value = false;
|
||||
alert('计算失败，请重试');
|
||||
});
|
||||
}, 3000); // 模拟网络延迟
|
||||
}, remainingTime);
|
||||
});
|
||||
}, 3000); // 模拟网络延迟
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,14 +5,46 @@
|
|||
<template #header>
|
||||
<div class="redTitle" @click="goDq">转型金融贷前计算器</div>
|
||||
</template>
|
||||
<xt-chart :option="option"></xt-chart>
|
||||
<t-table
|
||||
row-key="key"
|
||||
:data="tableData"
|
||||
:columns="columns"
|
||||
lazy-load
|
||||
@active-change="onActiveChange"
|
||||
></t-table>
|
||||
<xt-chart :option="option" :key="chartKey" height="400px" @chart-click="handleChartClick"></xt-chart>
|
||||
<!-- 悬浮提示框 -->
|
||||
<t-dialog
|
||||
v-model:visible="dialogVisible"
|
||||
header="指标详情"
|
||||
:on-confirm="handleConfirm"
|
||||
:on-close="handleClose"
|
||||
>
|
||||
<div class="indicator-detail">
|
||||
<h3>{{ currentIndicator?.name }}</h3>
|
||||
<p class="current-value">当前值: {{ currentIndicator?.currentValue }}/{{ currentIndicator?.max }}</p>
|
||||
<div class="indicator-description">
|
||||
{{ getIndicatorDescription(currentIndicator?.name) }}
|
||||
</div>
|
||||
</div>
|
||||
</t-dialog>
|
||||
<!-- 原生表格实现 -->
|
||||
<div class="table-container">
|
||||
<table class="score-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>项目碳排放量</th>
|
||||
<th>企业分值区间</th>
|
||||
<th>企业/项目等级</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(item, index) in tableData"
|
||||
:key="index"
|
||||
:class="['score-row', { 'current-row': item.isCurrent }]"
|
||||
:style="{ backgroundColor: item.color }"
|
||||
>
|
||||
<td>{{ item.pf }}</td>
|
||||
<td>{{ item.score }}</td>
|
||||
<td>{{ item.level }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</t-card>
|
||||
</t-col>
|
||||
<t-col :flex="3">
|
||||
|
|
@ -25,9 +57,10 @@
|
|||
</t-col>
|
||||
</t-row>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import router from '@/router'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ref, onMounted, onUnmounted, computed } from 'vue'
|
||||
import xtChart from "@/components/xtChart/index.vue";
|
||||
|
||||
const goDq = () => {
|
||||
|
|
@ -36,13 +69,120 @@ const goDq = () => {
|
|||
const goDh = () => {
|
||||
router.push('/dh')
|
||||
}
|
||||
const option = {
|
||||
title: {
|
||||
text: '核算雷达图'
|
||||
|
||||
// 添加响应式变量
|
||||
const chartKey = ref(0);
|
||||
const currentData = ref([35, 20, 10, 10, 10, 8, 7]);
|
||||
const dialogVisible = ref(false);
|
||||
const currentIndicator = ref(null);
|
||||
|
||||
// 指标描述数据
|
||||
const indicatorDescriptions = {
|
||||
'技术路径': '评估企业采用的技术方案是否先进、可行，是否符合低碳转型要求。包括技术创新性、成熟度、实施路径清晰度等维度。',
|
||||
'碳排放': '衡量企业碳排放水平和减排潜力。包括碳排放总量、碳强度、减排目标达成率等关键指标。',
|
||||
'企业碳治理': '评估企业碳管理体系和治理能力。包括碳管理制度、管理机构、信息披露、碳资产管理等方面。',
|
||||
'融资计划': '分析转型项目融资方案的合理性和可行性。包括资金需求、融资结构、成本控制、风险防范等要素。',
|
||||
'社会与治理协同效益': '评估项目对社会发展和公司治理的协同促进作用。包括就业创造、社区发展、治理结构优化等。',
|
||||
'数字化与智能化水平': '衡量企业数字化转型和智能化应用程度。包括数字化基础设施、数据应用、智能化改造等方面。',
|
||||
'环境协同效益': '评估项目对环境保护和生态改善的协同效应。包括污染物减排、资源循环利用、生态保护等。'
|
||||
}
|
||||
// 获取指标描述
|
||||
const getIndicatorDescription = (indicatorName) => {
|
||||
return indicatorDescriptions[indicatorName] || '暂无详细描述信息。';
|
||||
}
|
||||
|
||||
// 处理图表点击事件
|
||||
const handleChartClick = (params) => {
|
||||
console.log('图表点击参数:', params);
|
||||
if (params.componentType === 'radar' && params.name) {
|
||||
// 点击的是雷达图指标文字
|
||||
const indicatorIndex = option.value.radar.indicator.findIndex(item => item.name === params.name);
|
||||
if (indicatorIndex !== -1) {
|
||||
currentIndicator.value = {
|
||||
name: params.name,
|
||||
max: option.value.radar.indicator[indicatorIndex].max,
|
||||
currentValue: currentData.value[indicatorIndex]
|
||||
};
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 处理对话框确认
|
||||
const handleConfirm = () => {
|
||||
dialogVisible.value = false;
|
||||
Message.success('已查看指标详情');
|
||||
}
|
||||
|
||||
// 处理对话框关闭
|
||||
const handleClose = () => {
|
||||
dialogVisible.value = false;
|
||||
}
|
||||
|
||||
// 计算当前总分
|
||||
const currentScore = computed(() => {
|
||||
return currentData.value.reduce((sum, value) => sum + value, 0);
|
||||
});
|
||||
|
||||
// 根据分数确定等级和颜色
|
||||
const levelInfo = computed(() => {
|
||||
const score = currentScore.value;
|
||||
if (score >= 80) {
|
||||
return { level: '领先', color: '#4caf50' };
|
||||
} else if (score >= 60) {
|
||||
return { level: '良好', color: '#2196f3' };
|
||||
} else if (score >= 30) {
|
||||
return { level: '一般', color: '#ff9800' };
|
||||
} else {
|
||||
return { level: '较差', color: '#f44336' };
|
||||
}
|
||||
});
|
||||
|
||||
const tableData = computed(() => [
|
||||
{
|
||||
pf: "低于10%及以上",
|
||||
score: "80~100",
|
||||
level: "领先",
|
||||
color: "rgba(76, 175, 80, 0.7)",
|
||||
isCurrent: currentScore.value >= 80
|
||||
},
|
||||
{
|
||||
pf: "低于5%（含）~0%",
|
||||
score: "60~79",
|
||||
level: "良好",
|
||||
color: "rgba(33, 150, 243, 0.7)",
|
||||
isCurrent: currentScore.value >= 60 && currentScore.value < 80
|
||||
},
|
||||
{
|
||||
pf: "低于0~5%",
|
||||
score: "30~59",
|
||||
level: "一般",
|
||||
color: "rgba(255, 152, 0, 0.7)",
|
||||
isCurrent: currentScore.value >= 30 && currentScore.value < 60
|
||||
},
|
||||
{
|
||||
pf: "高于",
|
||||
score: "0~29",
|
||||
level: "较差",
|
||||
color: "rgba(244, 67, 54, 0.7)",
|
||||
isCurrent: currentScore.value < 30
|
||||
}
|
||||
]);
|
||||
|
||||
// 红色主题雷达图配置
|
||||
const option = ref({
|
||||
title: {
|
||||
text: '核算雷达图',
|
||||
textStyle: {
|
||||
color: '#c23531'
|
||||
}
|
||||
},
|
||||
// tooltip: {
|
||||
|
||||
// },
|
||||
radar: {
|
||||
center: ['50%', '55%'],
|
||||
// shape: 'circle',
|
||||
radius: '70%',
|
||||
indicator: [
|
||||
{ name: '技术路径', max: 35 },
|
||||
{ name: '碳排放', max: 20 },
|
||||
|
|
@ -52,27 +192,91 @@ const option = {
|
|||
{ name: '数字化与智能化水平', max: 8 },
|
||||
{ name: '环境协同效益', max: 7 }
|
||||
],
|
||||
// axisName: {
|
||||
// formatter: function(value, indicator) {
|
||||
// return `${value}\n(${indicator.max})`;
|
||||
// }
|
||||
// }
|
||||
axisName: {
|
||||
color: '#c23531',
|
||||
// fontWeight: 'bold',
|
||||
fontSize: 16
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: ['rgba(194, 53, 49, 0.3)']
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: ['rgba(194, 53, 49, 0.05)', 'rgba(194, 53, 49, 0.1)']
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(194, 53, 49, 0.5)'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: []
|
||||
series: [
|
||||
{
|
||||
type: 'radar',
|
||||
data: [
|
||||
{
|
||||
value: currentData.value,
|
||||
name: '企业评估',
|
||||
areaStyle: {
|
||||
color: 'rgba(194, 53, 49, 0.4)'
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#c23531',
|
||||
width: 2
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#c23531'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 模拟数据更新函数
|
||||
const updateRadarData = () => {
|
||||
// 生成随机数据，但保持在合理范围内
|
||||
const newData = currentData.value.map((value, index) => {
|
||||
const maxValue = option.value.radar.indicator[index].max;
|
||||
const fluctuation = (Math.random() - 0.5) * 0.4; // -20% 到 +20%
|
||||
let newValue = value * (1 + fluctuation);
|
||||
|
||||
// 确保不超过最大值
|
||||
newValue = Math.min(newValue, maxValue);
|
||||
// 确保不小于0
|
||||
newValue = Math.max(newValue, 0);
|
||||
|
||||
return Math.round(newValue * 10) / 10; // 保留一位小数
|
||||
});
|
||||
|
||||
currentData.value = newData;
|
||||
|
||||
// 更新图表数据
|
||||
option.value.series[0].data[0].value = newData;
|
||||
|
||||
// 强制图表重新渲染
|
||||
chartKey.value += 1;
|
||||
};
|
||||
|
||||
const tableData = [
|
||||
{"pf": "低于10%及以上", "score": "80~100", "level": "领先"},
|
||||
{"pf": "低于5%（含）~0%", "score": "60~79", "level": "良好"},
|
||||
{"pf": "低于0~5%", "score": "30~59", "level": "一般"},
|
||||
{"pf": "高于", "score": "0~29", "level": "较差"}
|
||||
];
|
||||
const columns = [
|
||||
{ colKey: 'pf', title: '项目碳排放量', width: '300' },
|
||||
{ colKey: 'score', title: '企业分值区间' },
|
||||
{ colKey: 'level', title: '企业/项目等级', ellipsis: true }
|
||||
];
|
||||
// 定时器引用
|
||||
let timer = null;
|
||||
|
||||
onMounted(() => {
|
||||
// 每2秒更新一次数据
|
||||
timer = setInterval(updateRadarData, 4000);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
// 组件卸载时清除定时器
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bigNav {
|
||||
font-size: 20px;
|
||||
|
|
@ -89,4 +293,66 @@ const columns = [
|
|||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 表格容器样式 */
|
||||
.table-container {
|
||||
margin-top: 20px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 原生表格样式 */
|
||||
.score-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 表头样式 */
|
||||
.score-table thead {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.score-table th {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
padding: 12px 16px;
|
||||
text-align: center;
|
||||
border-bottom: 2px solid #555;
|
||||
}
|
||||
|
||||
/* 表格行样式 */
|
||||
.score-table tbody tr {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.score-table td {
|
||||
padding: 12px 16px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 当前行高亮样式 */
|
||||
.current-row {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.current-row td {
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* 鼠标悬停效果 */
|
||||
.score-table tbody tr:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue