From 06d8786a410707695f8851a8a5e6c4f785c07e49 Mon Sep 17 00:00:00 2001
From: caoqianming <caoqianming@foxmail.com>
Date: Thu, 6 Nov 2025 16:10:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A1=B5=E9=9D=A2=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/cal/dq.vue    |  54 ++++---
 src/pages/cal/index.vue | 326 ++++++++++++++++++++++++++++++++++++----
 2 files changed, 329 insertions(+), 51 deletions(-)

diff --git a/src/pages/cal/dq.vue b/src/pages/cal/dq.vue
index b8e3905..9828ac0 100644
--- a/src/pages/cal/dq.vue
+++ b/src/pages/cal/dq.vue
@@ -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>
 
diff --git a/src/pages/cal/index.vue b/src/pages/cal/index.vue
index 0b3eba8..7e2ae42 100644
--- a/src/pages/cal/index.vue
+++ b/src/pages/cal/index.vue
@@ -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>
\ No newline at end of file