feat: 增加贷后页面
This commit is contained in:
parent
2884d8d4f4
commit
9198a35d69
|
|
@ -38,6 +38,7 @@ instance.interceptors.response.use(
|
|||
},
|
||||
error => {
|
||||
let err_msg = "请求错误";
|
||||
console.log(error)
|
||||
if (error.response) {
|
||||
const status = error.response.status;
|
||||
const url = error.config?.url || '';
|
||||
|
|
|
|||
|
|
@ -1,20 +1,375 @@
|
|||
<template>
|
||||
<t-layout style="height: 99%;">
|
||||
<t-content style="background-color: white;">
|
||||
<div class="bigNav">暂未开放</div>
|
||||
</t-content>
|
||||
</t-layout>
|
||||
<t-row style="height: 100%;">
|
||||
<t-col :flex="5" 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,.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,.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,.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,.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,.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,.doc"/>
|
||||
</t-form-item>
|
||||
|
||||
</t-form>
|
||||
</template>
|
||||
</t-card>
|
||||
</t-col>
|
||||
<t-col :flex="7" style="height: 100%;">
|
||||
<t-card header-bordered style="height: 100%;">
|
||||
<template #header>
|
||||
<span v-if="score === null">暂无评分数据，请上传相关文件后计算</span>
|
||||
<span v-else>
|
||||
贵企业的双碳贷后得分为
|
||||
<span class="score-display">{{ score }}</span> 分;
|
||||
等级: <span class="level-display" :style="levelStyle">
|
||||
{{ level }}
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
<template #content>
|
||||
<!-- 动画容器 -->
|
||||
<div class="animation-container" v-show="showAnimation">
|
||||
<div class="particles-container">
|
||||
<div class="particle" v-for="n in 30" :key="n" :style="particleStyle(n)"></div>
|
||||
</div>
|
||||
<div class="loading-circle">
|
||||
<div class="circle"></div>
|
||||
<div class="circle"></div>
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
<div class="loading-text" :style="{color: loadingTextColor}">{{ loadingText }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 结果展示 -->
|
||||
<div class="result-container" v-show="showResult">
|
||||
<div class="score-circle" :style="scoreCircleStyle">
|
||||
<div class="score-value">{{ score }}</div>
|
||||
<!-- <div class="score-label">总分</div> -->
|
||||
</div>
|
||||
<!-- <div class="level-badge" :style="levelStyle">
|
||||
{{ level }}
|
||||
</div> -->
|
||||
<div class="result-description">
|
||||
<p>根据您提交的资料，我们已完成双碳贷后评估。</p>
|
||||
<p>您的企业评级为 <strong :style="{color: levelColor,fontSize: '24px'}">{{ level }}</strong> 级。</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</t-card>
|
||||
</t-col>
|
||||
</t-row>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch, computed } from 'vue';
|
||||
import http from "@/api/request.js";
|
||||
import { MessagePlugin } from "tdesign-vue-next"
|
||||
onMounted(() => {
|
||||
// 初始化代码
|
||||
})
|
||||
|
||||
const file1 = ref([]);
|
||||
const file2 = ref([]);
|
||||
const file3 = ref([]);
|
||||
const file4 = ref([]);
|
||||
const file5 = ref([]);
|
||||
const file6 = ref([]);
|
||||
const calLoading = ref(false);
|
||||
const score = ref(null);
|
||||
const level = ref("较差");
|
||||
const levelColor = ref('#000');
|
||||
const showAnimation = ref(false);
|
||||
const showResult = ref(false);
|
||||
const loadingText = ref("正在计算评分...");
|
||||
const loadingTextColor = ref("#ee2416");
|
||||
|
||||
// 计算等级样式
|
||||
const levelStyle = computed(() => {
|
||||
return {
|
||||
color: levelColor.value,
|
||||
background: `${levelColor.value}15`,
|
||||
border: `1px solid ${levelColor.value}30`
|
||||
};
|
||||
});
|
||||
|
||||
// 计算得分圆环样式
|
||||
const scoreCircleStyle = computed(() => {
|
||||
const percentage = score.value ? (score.value / 100) * 360 : 0;
|
||||
return {
|
||||
background: `conic-gradient(${levelColor.value} ${percentage}deg, #f0f0f0 ${percentage}deg 360deg)`
|
||||
};
|
||||
});
|
||||
|
||||
// 粒子样式
|
||||
const particleStyle = (n) => {
|
||||
const size = Math.random() * 8 + 4;
|
||||
const left = Math.random() * 100;
|
||||
const animationDelay = Math.random() * 2;
|
||||
const animationDuration = Math.random() * 3 + 2;
|
||||
|
||||
return {
|
||||
width: `${size}px`,
|
||||
height: `${size}px`,
|
||||
left: `${left}%`,
|
||||
animationDelay: `${animationDelay}s`,
|
||||
animationDuration: `${animationDuration}s`,
|
||||
background: '#ee2416'
|
||||
};
|
||||
};
|
||||
|
||||
watch(score, (newScore) => {
|
||||
if (newScore >= 80) {
|
||||
level.value = '领先'
|
||||
levelColor.value = '#4caf50'
|
||||
} else if (newScore >= 60) {
|
||||
level.value = '良好'
|
||||
levelColor.value = '#2196f3'
|
||||
} else if (newScore >= 30) {
|
||||
level.value = '一般'
|
||||
levelColor.value = '#ff9800'
|
||||
} else {
|
||||
level.value = '较差'
|
||||
levelColor.value = '#f44336'
|
||||
}
|
||||
}, { immediate: true });
|
||||
|
||||
const handleCal = () => {
|
||||
// 验证是否已上传文件
|
||||
const files = [file1.value, file2.value, file3.value, file4.value, file5.value, file6.value];
|
||||
const hasFiles = files.some(fileArray => fileArray && fileArray.length > 0);
|
||||
|
||||
if (!hasFiles) {
|
||||
MessagePlugin.error('请至少上传一个文件后再进行计算');
|
||||
return;
|
||||
}
|
||||
|
||||
let formData = new FormData();
|
||||
formData.append('file1', file1.value?.[0]?.raw);
|
||||
formData.append('file2', file2.value?.[0]?.raw);
|
||||
formData.append('file3', file3.value?.[0]?.raw);
|
||||
formData.append('file4', file4.value?.[0]?.raw);
|
||||
formData.append('file5', file5.value?.[0]?.raw);
|
||||
formData.append('file6', file6.value?.[0]?.raw);
|
||||
|
||||
calLoading.value = true;
|
||||
showAnimation.value = true;
|
||||
showResult.value = false;
|
||||
|
||||
// 动态变化的加载文本
|
||||
const loadingTexts = [
|
||||
"正在分析企业低碳转型战略...",
|
||||
"正在评估碳排放数据...",
|
||||
"正在审核ESG尽职调查报告...",
|
||||
"正在研究项目融资方案...",
|
||||
"正在分析数字化技术方案...",
|
||||
"正在评估企业技术说明...",
|
||||
"正在生成最终评分..."
|
||||
];
|
||||
|
||||
let textIndex = 0;
|
||||
const minLoadingTime = 5000; // 最小加载时间 5秒
|
||||
const startTime = Date.now(); // 记录开始时间
|
||||
|
||||
const textInterval = setInterval(() => {
|
||||
loadingText.value = loadingTexts[textIndex];
|
||||
textIndex = (textIndex + 1) % loadingTexts.length;
|
||||
}, 800);
|
||||
|
||||
http.postForm("/cal_dh/", 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;
|
||||
|
||||
// 动画完成后显示结果
|
||||
setTimeout(() => {
|
||||
showAnimation.value = false;
|
||||
showResult.value = true;
|
||||
}, 500);
|
||||
}, remainingTime);
|
||||
|
||||
}).catch(e => {
|
||||
const elapsedTime = Date.now() - startTime;
|
||||
const remainingTime = Math.max(0, minLoadingTime - elapsedTime);
|
||||
|
||||
setTimeout(() => {
|
||||
clearInterval(textInterval);
|
||||
calLoading.value = false;
|
||||
showAnimation.value = false;
|
||||
}, remainingTime);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.bigNav {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: var(--td-brand-color);
|
||||
height: 180px;
|
||||
|
||||
<style scoped>
|
||||
.animation-container {
|
||||
margin-top: 80px;
|
||||
position: relative;
|
||||
height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.particles-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.particle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
opacity: 0.7;
|
||||
animation: floatUp linear infinite;
|
||||
}
|
||||
|
||||
@keyframes floatUp {
|
||||
0% {
|
||||
transform: translateY(100px) scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
90% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-100px) scale(1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-circle {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.circle {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
background: var(--td-brand-color);
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.circle:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.circle:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
transform: scale(0.8);
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.result-container {
|
||||
margin-top: 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 400px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.score-circle {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.score-circle::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.score-value {
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
z-index: 1;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.score-label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.level-badge {
|
||||
padding: 8px 20px;
|
||||
border-radius: 20px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.result-description {
|
||||
text-align: center;
|
||||
max-width: 80%;
|
||||
line-height: 1.6;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.score-display {
|
||||
font-weight: bold;
|
||||
font-size: 32px;
|
||||
color: #2d8cf0;
|
||||
}
|
||||
|
||||
.level-display {
|
||||
font-weight: bold;
|
||||
font-size: 32px;
|
||||
padding: 4px 12px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,25 +4,13 @@
|
|||
<t-card hoverShadow header-bordered>
|
||||
<template #header>
|
||||
<div class="redTitle" @click="goDq">转型金融贷前计算器</div>
|
||||
<t-button @click="goDq">前往测算</t-button>
|
||||
<div>
|
||||
<t-button theme="default" style="margin-right:2px" @click="showDq">指标说明</t-button>
|
||||
<t-button @click="goDq">前往测算</t-button>
|
||||
</div>
|
||||
</template>
|
||||
<div style="height:400px" v-if="!chartShow"></div>
|
||||
<xt-chart :option="option" height="400px" @chart-click="handleChartClick" v-else></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>
|
||||
<xt-chart :option="option" height="400px" v-else></xt-chart>
|
||||
<!-- 原生表格实现 -->
|
||||
<div class="table-container">
|
||||
<table class="score-table">
|
||||
|
|
@ -56,11 +44,55 @@
|
|||
<t-card hoverShadow header-bordered>
|
||||
<template #header>
|
||||
<div class="redTitle" @click="goDh">转型金融贷后计算器</div>
|
||||
<div>
|
||||
<t-button theme="default" style="margin-right:2px" @click="showDh">指标说明</t-button>
|
||||
<t-button @click="goDh">前往测算</t-button>
|
||||
</div>
|
||||
</template>
|
||||
<div class="bigNav">暂未开放</div>
|
||||
<div style="height:400px" v-if="!chartShow"></div>
|
||||
<xt-chart :option="option_dh" height="400px" v-else></xt-chart>
|
||||
<div class="table-container">
|
||||
<table class="score-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<div>项目碳排放量</div>
|
||||
<div style="font-size: 12px;">与基准线相比</div>
|
||||
</th>
|
||||
<th>企业分值区间</th>
|
||||
<th>项目/企业等级</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(item, index) in tableData_dh"
|
||||
:key="index"
|
||||
:class="['score-row', { 'current-row': item.isCurrent }]"
|
||||
|
||||
>
|
||||
<td :style="{ color: item.color, fontWeight: 'bold' }">{{ item.pf }}</td>
|
||||
<td :style="{ color: item.color, fontWeight: 'bold' }">{{ item.score }}</td>
|
||||
<td :style="{ color: item.color, fontWeight: 'bold' }">{{ item.level }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</t-card>
|
||||
</t-col>
|
||||
</t-row>
|
||||
<t-dialog
|
||||
:closeBtn="false"
|
||||
closeOnEscKeydown
|
||||
closeOnOverlayClick
|
||||
:footer="false"
|
||||
:header="false"
|
||||
v-model:visible="dialogVisible"
|
||||
>
|
||||
<div v-for="(item, key, index) in descriptions">
|
||||
<div style="font-size:16px; font-weight: bold;">{{ key }}</div>
|
||||
<div >{{ item }}</div>
|
||||
</div>
|
||||
</t-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -77,70 +109,65 @@ const goDh = () => {
|
|||
|
||||
// 添加响应式变量
|
||||
const currentData = ref([35, 20, 10, 10, 10, 8, 7]);
|
||||
const currentData_dh = ref([35, 25, 13, 9, 9, 5, 2, 2]);
|
||||
const dialogVisible = ref(false);
|
||||
const currentIndicator = ref(null);
|
||||
|
||||
// 指标描述数据
|
||||
const indicatorDescriptions = {
|
||||
'技术路径': '评估企业采用的技术方案是否先进、可行，是否符合低碳转型要求。包括技术创新性、成熟度、实施路径清晰度等维度。',
|
||||
'碳排放': '衡量企业碳排放水平和减排潜力。包括碳排放总量、碳强度、减排目标达成率等关键指标。',
|
||||
'企业碳治理': '评估企业碳管理体系和治理能力。包括碳管理制度、管理机构、信息披露、碳资产管理等方面。',
|
||||
'融资计划': '分析转型项目融资方案的合理性和可行性。包括资金需求、融资结构、成本控制、风险防范等要素。',
|
||||
'社会与治理协同效益': '评估项目对社会发展和公司治理的协同促进作用。包括就业创造、社区发展、治理结构优化等。',
|
||||
'数字化与智能化水平': '衡量企业数字化转型和智能化应用程度。包括数字化基础设施、数据应用、智能化改造等方面。',
|
||||
'环境协同效益': '评估项目对环境保护和生态改善的协同效应。包括污染物减排、资源循环利用、生态保护等。'
|
||||
}
|
||||
// 获取指标描述
|
||||
const getIndicatorDescription = (indicatorName) => {
|
||||
return indicatorDescriptions[indicatorName] || '暂无详细描述信息。';
|
||||
}
|
||||
const descriptions = ref({});
|
||||
|
||||
// 处理图表点击事件
|
||||
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 showDq = () => {
|
||||
dialogVisible.value = true;
|
||||
descriptions.value = {
|
||||
'技术路径': '评估企业采用的技术方案是否先进、可行，是否符合低碳转型要求。包括技术创新性、成熟度、实施路径清晰度等维度。',
|
||||
'碳排放': '衡量企业碳排放水平和减排潜力。包括碳排放总量、碳强度、减排目标达成率等关键指标。',
|
||||
'企业碳治理': '评估企业碳管理体系和治理能力。包括碳管理制度、管理机构、信息披露、碳资产管理等方面。',
|
||||
'融资计划': '分析转型项目融资方案的合理性和可行性。包括资金需求、融资结构、成本控制、风险防范等要素。',
|
||||
'社会与治理协同效益': '评估项目对社会发展和公司治理的协同促进作用。包括就业创造、社区发展、治理结构优化等。',
|
||||
'数字化与智能化水平': '衡量企业数字化转型和智能化应用程度。包括数字化基础设施、数据应用、智能化改造等方面。',
|
||||
'环境协同效益': '评估项目对环境保护和生态改善的协同效应。包括污染物减排、资源循环利用、生态保护等。'
|
||||
}
|
||||
}
|
||||
|
||||
// 处理对话框确认
|
||||
const handleConfirm = () => {
|
||||
dialogVisible.value = false;
|
||||
Message.success('已查看指标详情');
|
||||
const showDh = () => {
|
||||
dialogVisible.value = true;
|
||||
descriptions.value = {
|
||||
"减碳量": "核心指标，直接体现转型成效",
|
||||
"技术成熟度": "决定技术可行性与推广价值",
|
||||
"企业碳治理": "反映企业长期减碳意愿与能力",
|
||||
"融资计划": "体现项目落地与资金保障能力",
|
||||
"环境协同效益": "综合评价项目的社会与环境价值",
|
||||
"社会与治理协同效益": "体现企业全面可持续发展的能力",
|
||||
"创新与可持续竞争力": "体现企业是否具备持续引领行业绿色转型的能力",
|
||||
"数字化与智能化水平": "体现企业是否具备持续引领行业绿色转型的能力"
|
||||
}
|
||||
}
|
||||
|
||||
// 处理对话框关闭
|
||||
const handleClose = () => {
|
||||
dialogVisible.value = false;
|
||||
}
|
||||
|
||||
// 计算当前总分
|
||||
const currentScore = computed(() => {
|
||||
return currentData.value.reduce((sum, value) => sum + value, 0);
|
||||
let score = currentData.value.reduce((sum, value) => sum + value, 0);
|
||||
if (score>=80) {
|
||||
option.value.series[0].data[0].areaStyle.color = 'rgba(76, 175, 80, 0.3)';
|
||||
}else if (score>=60) {
|
||||
option.value.series[0].data[0].areaStyle.color = 'rgba(33, 150, 243, 0.3)';
|
||||
} else if (score>=30) {
|
||||
option.value.series[0].data[0].areaStyle.color = 'rgba(255, 152, 0, 0.3)';
|
||||
} else {
|
||||
option.value.series[0].data[0].areaStyle.color = 'rgba(244, 67, 54, 0.3)';
|
||||
}
|
||||
return score;
|
||||
});
|
||||
|
||||
// 根据分数确定等级和颜色
|
||||
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' };
|
||||
const currentScore_dh = computed(() => {
|
||||
let score = currentData_dh.value.reduce((sum, value) => sum + value, 0);
|
||||
if (score>=80) {
|
||||
option_dh.value.series[0].data[0].areaStyle.color = 'rgba(76, 175, 80, 0.3)';
|
||||
}else if (score>=60) {
|
||||
option_dh.value.series[0].data[0].areaStyle.color = 'rgba(33, 150, 243, 0.3)';
|
||||
} else if (score>=30) {
|
||||
option_dh.value.series[0].data[0].areaStyle.color = 'rgba(255, 152, 0, 0.3)';
|
||||
} else {
|
||||
return { level: '较差', color: '#f44336' };
|
||||
option_dh.value.series[0].data[0].areaStyle.color = 'rgba(244, 67, 54, 0.3)';
|
||||
}
|
||||
});
|
||||
return score;
|
||||
})
|
||||
|
||||
const tableData = computed(() => [
|
||||
{
|
||||
|
|
@ -173,6 +200,37 @@ const tableData = computed(() => [
|
|||
}
|
||||
]);
|
||||
|
||||
const tableData_dh = computed(() => [
|
||||
{
|
||||
pf: "低于10%及以上",
|
||||
score: "80~100",
|
||||
level: "领先",
|
||||
color: "rgba(76, 175, 80, 0.7)",
|
||||
isCurrent: currentScore_dh.value >= 80
|
||||
},
|
||||
{
|
||||
pf: "低于5%（含）~0%",
|
||||
score: "60~79",
|
||||
level: "良好",
|
||||
color: "rgba(33, 150, 243, 0.7)",
|
||||
isCurrent: currentScore_dh.value >= 60 && currentScore_dh.value < 80
|
||||
},
|
||||
{
|
||||
pf: "低于0~5%",
|
||||
score: "30~59",
|
||||
level: "一般",
|
||||
color: "rgba(255, 152, 0, 0.7)",
|
||||
isCurrent: currentScore_dh.value >= 30 && currentScore_dh.value < 60
|
||||
},
|
||||
{
|
||||
pf: "高于基准线",
|
||||
score: "0~29",
|
||||
level: "较差",
|
||||
color: "rgba(244, 67, 54, 0.7)",
|
||||
isCurrent: currentScore_dh.value < 30
|
||||
}
|
||||
]);
|
||||
|
||||
// 红色主题雷达图配置
|
||||
const option = ref({
|
||||
title: {
|
||||
|
|
@ -240,19 +298,87 @@ const option = ref({
|
|||
]
|
||||
});
|
||||
|
||||
const option_dh = ref({
|
||||
title: {
|
||||
text: '核算雷达图',
|
||||
textStyle: {
|
||||
color: '#c23531'
|
||||
}
|
||||
},
|
||||
// tooltip: {
|
||||
|
||||
// },
|
||||
radar: {
|
||||
center: ['50%', '55%'],
|
||||
radius: '70%',
|
||||
indicator: [
|
||||
{ name: '减碳量', max: 35 },
|
||||
{ name: '技术成熟度', max: 25 },
|
||||
{ name: '企业碳治理', max: 13 },
|
||||
{ name: '融资计划', max: 9 },
|
||||
{ name: '环境协同效益', max: 9 },
|
||||
{ name: '社会与治理协同效益', max: 5 },
|
||||
{ name: '创新与可持续竞争力', max: 2 },
|
||||
{ name: '数字化与智能化水平', max: 2 }
|
||||
],
|
||||
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: [
|
||||
{
|
||||
type: 'radar',
|
||||
data: [
|
||||
{
|
||||
value: currentData_dh.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.3; // -20% 到 +20%
|
||||
let newValue = value * (1 + fluctuation);
|
||||
const minValue = option.value.radar.indicator[index].max * 0.2; // 最小值
|
||||
const fluctuationRange = maxValue * 0.5; // 波动范围为最大值的10%
|
||||
const fluctuation = (Math.random() - 0.5) * 2 * fluctuationRange;
|
||||
let newValue = value + fluctuation;
|
||||
|
||||
// 确保不超过最大值
|
||||
newValue = Math.min(newValue, maxValue);
|
||||
// 确保不小于0
|
||||
newValue = Math.max(newValue, 0);
|
||||
|
||||
newValue = Math.max(newValue, minValue);
|
||||
return Math.round(newValue * 10) / 10; // 保留一位小数
|
||||
});
|
||||
|
||||
|
|
@ -262,13 +388,41 @@ const updateRadarData = () => {
|
|||
option.value.series[0].data[0].value = newData;
|
||||
};
|
||||
|
||||
// 模拟数据更新函数
|
||||
const updateRadarData_dh = () => {
|
||||
// 生成随机数据，但保持在合理范围内
|
||||
const newData = currentData_dh.value.map((value, index) => {
|
||||
const maxValue = option_dh.value.radar.indicator[index].max;
|
||||
const minValue = option_dh.value.radar.indicator[index].max * 0.2; // 最小值
|
||||
const fluctuationRange = maxValue * 0.5; // 波动范围为最大值的10%
|
||||
const fluctuation = (Math.random() - 0.5) * 2 * fluctuationRange;
|
||||
let newValue = value + fluctuation;
|
||||
|
||||
// 确保不超过最大值
|
||||
newValue = Math.min(newValue, maxValue);
|
||||
// 确保不小于0
|
||||
newValue = Math.max(newValue, minValue);
|
||||
|
||||
return Math.round(newValue * 10) / 10; // 保留一位小数
|
||||
});
|
||||
|
||||
currentData_dh.value = newData;
|
||||
|
||||
// 更新图表数据
|
||||
option_dh.value.series[0].data[0].value = newData;
|
||||
};
|
||||
|
||||
// 定时器引用
|
||||
let timer = null;
|
||||
let timer_dh = null;
|
||||
const chartShow = ref(false);
|
||||
onMounted(() => {
|
||||
// 每4秒更新一次数据
|
||||
setTimeout(() =>{ chartShow.value = true;}, 200);
|
||||
timer = setInterval(updateRadarData, 4000);
|
||||
setTimeout(()=>{
|
||||
timer_dh = setInterval(updateRadarData_dh, 4000);
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
|
|
@ -276,6 +430,9 @@ onUnmounted(() => {
|
|||
if (timer) {
|
||||
clearInterval(timer);
|
||||
}
|
||||
if (timer_dh) {
|
||||
clearInterval(timer_dh);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue