一键企业画像表格布局

jialh

2024-12-17 78f3e26529acd1f7bf963887816076e781afdd2c

一键企业画像表格布局

 src/view/echarts/radar.vue

@@ -1,16 +1,16 @@
<template>
    <div class="radar-container">
        <!-- <div class="echarts-box"> -->
        <div class="search-box">
            <p class="tit">公司尽调画像</p>
            <textarea v-model="message" placeholder="请输入公司名称（必填）"></textarea>
            <button onclick="document.getElementById('file').click()">请上传尽调报告</button>
            <input type="file" id="file" accept=".doc,.docx" @change="getFiles($event)" style="display: none" />
            <p class="file-tit">已选择文件: <span v-if="selectedFile"> {{ selectedFile.name }}</span></p>
            <button @click="generateChart" :disabled="disableButton"
                :class="{ 'disabled-button': disableButton }">一键生成</button>
        </div>
        <div class="echarts-box">
            <div class="search-box">
                <p class="tit">公司尽调画像</p>
                <textarea v-model="message" placeholder="请输入公司名称（必填）"></textarea>
                <button onclick="document.getElementById('file').click()">请上传尽调报告</button>
                <input type="file" id="file" accept=".doc,.docx" @change="getFiles($event)" style="display: none" />
                <p class="file-tit">已选择文件: <span v-if="selectedFile"> {{ selectedFile.name }}</span></p>
                <button @click="generateChart" :disabled="disableButton"
                    :class="{ 'disabled-button': disableButton }">一键生成</button>
            </div>

            <div class="radar-box" v-show="!loadingSub">
                <div class="ent-structure" ref="ent-structure">
                    <div class="ent-radar" ref="ent-radar"></div>
@@ -23,49 +23,52 @@
                <Spin style="margin-top: 6px;margin-left: 20px" />
                <Spin style="margin-left: 20px" size="large" />
            </div>
            <div class="xlsx-box" v-if="hasScores">
                <table border="1" style="border-collapse: collapse; width: 100%;">
                    <thead>
                        <tr>
                            <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
                            <td v-for="(cell, cellIndex) in row" :key="cellIndex" :rowspan="cell.rowspan"
                                :colspan="cell.colspan">
                                <!-- 动态绑定得分 -->
                                <template v-if="cell.key === '得分'">
                                    {{ getScore(cell.value) }}
                                </template>
                                <!-- 动态绑定大类评分 -->
                                <template v-else-if="cell.key === '大类评分'">
                                    {{ getCategoryScore(cell.value) }}
                                </template>
                                <!-- 动态绑定总分 -->
                                <template v-else-if="cell.key === '总分'">
                                    {{ totalScore }}
                                </template>
                                <!-- 动态绑定其他可变字段 -->
                                <template v-else-if="cell.dynamic">
                                    {{ getDynamicValue(cell.dynamicKey) }}
                                </template>
                                <template v-else>
                                    {{ cell.value }}
                                </template>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

            <!-- <div class="no-data" v-if="!hasRadarData && !loadingSub">

        <!-- <div class="no-data" v-if="!hasRadarData && !loadingSub">
            <img src="../../assets/images/less.png" alt="">
            <p>暂无数据</p>
        </div> -->

        </div>
        <div class="xlsx-box" v-show="hasScores">
            <table border="1" style="border-collapse: collapse; width: 100%;">
                <thead>
                    <tr>
                        <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
                        <td v-for="(cell, cellIndex) in row" :key="cellIndex" :rowspan="cell.rowspan"
                            :colspan="cell.colspan">
                            <!-- 动态绑定得分 -->
                            <template v-if="cell.key === '得分'">
                                {{ getScore(cell.value) }}
                            </template>
                            <!-- 动态绑定大类评分 -->
                            <template v-else-if="cell.key === '大类评分'">
                                {{ getCategoryScore(cell.value) }}
                            </template>
                            <!-- 动态绑定总分 -->
                            <template v-else-if="cell.key === '总分'">
                                {{ totalScore }}
                            </template>
                            <!-- 动态绑定其他可变字段 -->
                            <template v-else-if="cell.dynamic">
                                {{ getDynamicValue(cell.dynamicKey) }}
                            </template>
                            <template v-else>
                                {{ cell.value }}
                            </template>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- </div> -->

</template>

@@ -80,7 +83,7 @@
            // disableButton: false,
            message: '',
            hasRadarData: false,
            hasScores:false,
            hasScores: false,
            radarData: [],
            Echarts: null,
            childLength: [],
@@ -110,8 +113,6 @@
                    { value: '销售额', rowspan: 1, colspan: 1 },
                    { value: '越多越好', rowspan: 1, colspan: 1 },
                    { value: '10', rowspan: 1, colspan: 1 },
                    // { value: '0', rowspan: 1, colspan: 1 },
                    // { value: '0', rowspan: 11, colspan: 1 },
                    { key: '得分', value: '销售额', rowspan: 1, colspan: 1 }, // 动态得分
                    { key: '得分', value: '大类评分1', rowspan: 11, colspan: 1 }, // 动态大类评分
                    { key: '得分', value: '总分', rowspan: 38, colspan: 1 },
@@ -901,20 +902,19 @@
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #f4f4f4;
    // display: flex;
}

.echarts-box {
    width: 100%;
    // height: 100%;
    min-height: 100%;
    background-color: #f4f4f4;
    display: flex;
}

.echarts-box {
 flex: 1;
 background: #fff;
}

.xlsx-box {
    background-color: #f4f4f4;

    // background-color: #f4f4f4;
    table {
        margin: 20px 0;
        width: 100%;
@@ -1035,7 +1035,7 @@


.radar-box {
    // width: auto;
    height: 800px;
    flex: 1;
    min-width: 800px;
}