xt_web_td/src/pages/cal/dq.vue

<template>
    <t-row style="height: 100%;">
        <t-col :flex="2" style="height: 100%;min-height: 700px;">
            <t-card style="height: 100%;">
                <t-form label-align="left" label-width="0">
                    <t-form-item style="height: 70px;">
                        <t-upload v-model="file1" :autoUpload="false" :max="1" accept=".docx,.pdf,.txt"
                            tips="企业低碳转型战略与总体规划" />
                    </t-form-item>
                    <t-form-item style="height: 70px;">
                        <t-upload v-model="file2" :autoUpload="false" :max="1" accept=".docx,.pdf,.txt"
                            tips="碳排放数据监测、核查与信息披露报告" />
                    </t-form-item>
                    <t-form-item style="height: 70px;">
                        <t-upload v-model="file3" :autoUpload="false" :max="1" accept=".docx,.pdf,.txt"
                            tips="环境、社会与治理（ESG）尽职调查报告" />
                    </t-form-item>
                    <t-form-item style="height: 70px;">
                        <t-upload v-model="file4" :autoUpload="false" :max="1" accept=".docx,.pdf,.txt"
                            tips="项目融资与可行性研究方案" />
                    </t-form-item>
                    <t-form-item style="height: 70px;">
                        <t-upload v-model="file5" :autoUpload="false" :max="1" accept=".docx,.pdf,.txt"
                            tips="数字化与智能控制系统技术方案" />
                    </t-form-item>
                    <t-form-item style="height: 70px;">
                        <t-upload v-model="file6" :autoUpload="false" :max="1" accept=".docx,.pdf,.txt"
                            tips="企业技术说明及改造方案" />
                    </t-form-item>
                    <t-form-item>
                        <t-button @click="handleCal" :loading="calLoading">开始计算</t-button>
                    </t-form-item>
                </t-form>
            </t-card>
        </t-col>
        <t-col :flex="10" style="height: 100%;">
            <t-card style="font-size: 24px;">
                            <span v-if="score === null">暂无评分数据，请上传相关文件后计算</span>
                            <span v-else>
                                贵企业的双碳贷前得分为
                            <span :style="{
                                color: levelColor,
                                fontWeight: 'bold',
                                fontSize: '32px',
                            }">{{ score }}</span> 分;
                            等级: <span :style="{
                                color: levelColor,
                                fontWeight: 'bold',
                                fontSize: '32px',
                            }">
                                {{ level }}
                            </span>
                            </span>
            </t-card>
            <t-card>
                <t-table :data="tableData" :columns="columns" row-key="id" :hover="true" size="small"
                    :rowspan-and-colspan="colSpan">
                    <template #scoringCriteria="{ row }">
                        <span v-for="(option, optIndex) in row.scoringCriteria" :key="optIndex"
                            style="margin-bottom: 4px;">
                            {{ option.选项 }} ({{ option.得分 }}分)
                        </span>
                    </template>
                </t-table>
            </t-card>
        </t-col>
    </t-row>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue';
import http from "@/api/request.js";
onMounted(() => {
    getStandard();
})
const getStandard = async () => {
    tableData.value = await http.get("/standard/");
}
const tableData = ref([]);
const columns = ref([
    {
        title: '一级指标',
        colKey: 'firstLevel',
    },
    {
        title: '二级指标',
        colKey: 'secondLevel',
    },
    {
        title: '三级指标',
        colKey: 'thirdLevel',
    },
    {
        title: '选项及分值',
        colKey: 'scoringCriteria',
        width: 300
    },
    {
        title: '结果',
        colKey: 'result',
    },
    {
        title: '得分',
        colKey: 'score',
    }
]);

const colSpan = ({ row, column, rowIndex, columnIndex }) => {
    // if (column.colKey === 'firstLevel') {
    //     return {
    //         rowspan: getFirstLevelRowspan(rowIndex),
    //         colspan: 1
    //     };
    // }
    // if (column.colKey === 'secondLevel') {
    //     return {
    //         rowspan: getSecondLevelRowspan(rowIndex),
    //         colspan: 1
    //     };
    // }
    return {
        rowspan: 1,
        colspan: 1
    };
};

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')
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 = () => {
    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;
    http.postForm("/cal/", formData).then(res => {
        calLoading.value = false;
        tableData.value = res.data;
        score.value = res.total_score;
    }).catch(e=>{calLoading.value = false;})
    console.log(formData);
}
</script>