simulation-front/src/views/workManagement/projectInfo.vue

<template>
    <div class="projectInfoPanel">
        <div
            v-if="
                !$route.path.includes('taskInfo') &&
                !$route.path.includes('evaluationReport')
            "
        >
            <div class="headPanel panel">
                <div class="titlePanel">
                    <div class="titlePanelBor">基本信息</div>
                </div>
                <div class="boxContent">
                    <div class="info">
                        <span>项目ID:</span>
                        <b>{{ info.projectId }}</b>
                    </div>
                    <div class="info">
                        <span>项目名称:</span>
                        <b>{{ info.projectName }}</b>
                    </div>
                    <div class="info">
                        <span>并行度:</span>
                        <b>{{ info.parallelism }}</b>
                    </div>
                    <div class="info">
                        <span>最大仿真时间:</span>
                        <b>{{ info.maxSimulationTime }}</b>
                    </div>
                    <div class="info">
                        <span>是否选择GPU:</span>
                        <b>{{ info.isChoiceGpu }}</b>
                    </div>
                    <div class="info">
                        <span>创建时间:</span>
                        <b>{{ info.startTime }}</b>
                    </div>
                    <div class="info">
                        <span>完成时间:</span>
                        <b>{{ info.finishTime }}</b>
                    </div>
                    <div class="info">
                        <span>完成进度:</span>
                        <b>{{ info.nowRunStateName }}</b>
                    </div>
                    <div class="info">
                        <span>结果等级:</span>
                        <b>{{ info.evaluationLevel }}</b>
                    </div>
                    <div class="info">
                        <span>场景测试包:</span>
                        <b>{{ info.packageName }}</b>
                    </div>
                    <div class="info">
                        <span>项目描述:</span>
                        <b>{{ info.projectDescribe }}</b>
                    </div>
                </div>
            </div>

            <div class="panel">
                <div class="titlePanel">
                    <div class="titlePanelBor">测评得分</div>
                </div>
                <div class="box">
                    <tableList
                        style="margin: 30px 0"
                        :columns="columnsA"
                        :getDataWay="getDataWayA"
                    >
                    </tableList>
                </div>
            </div>

            <div class="flexBox topPanel">
                <div class="box panel boxB">
                    <div class="titlePanel">
                        <div class="titlePanelBor">算法配置</div>
                    </div>
                    <div class="boxContent">
                        <div class="info">
                            <span>算法名称:</span>
                            <b>{{ info.algorithmName }}</b>
                        </div>
                        <div class="info">
                            <span>算法描述:</span>
                            <b>{{ info.algorithmDescribe }}</b>
                        </div>
                    </div>
                </div>
                <div class="box panel">
                    <div class="titlePanel">
                        <div class="titlePanelBor">测试报告</div>
                        <i
                            class="el-icon-download download"
                            v-bind:class="{ cursor: info.nowRunState === '30' }"
                            @click="downReport"
                        ></i>
                    </div>
                    <div class="boxContent boxContentC">
                        <div class="cbox" @click="toReport">
                            <img
                                :src="downImgSrc"
                                width="100%"
                                v-bind:class="{
                                    cursor: info.nowRunState === '30',
                                }"
                            />
                            <div
                                v-bind:class="{
                                    cursor: info.nowRunState === '30',
                                }"
                            >
                                仿真云测试报告
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="centerPanel panel">
                <div class="titlePanel">
                    <div class="titlePanelBor">车辆配置</div>
                </div>
                <div class="box">
                    <div class="boxContentA">
                        <div class="info">
                            <span>车辆名称:</span>
                            <b>{{ info.vehicleName }}</b>
                        </div>
                        <div class="info">
                            <span>车辆描述:</span>
                            <b>{{ info.vehicleDescribe }}</b>
                        </div>
                    </div>
                    <div class="boxContentB">
                        <div class="list">
                            <handle-config-list
                                :showBtns="false"
                                :curOne="curOne"
                                :configList="configList"
                                @curItem="curItem"
                                :needHighline="false"
                            ></handle-config-list>
                        </div>
                        <div class="canvasBox">
                            <canvas-sensor
                                v-if="modelImgSrc"
                                :modelImgSrc="modelImgSrc"
                                :configList="configList"
                            ></canvas-sensor>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bottomPanel panel">
                <div class="titlePanel">
                    <div class="titlePanelBor">任务信息</div>
                </div>
                <div class="box">
                    <div class="boxContentA">
                        <div class="chart">
                            <div class="pieTitle">任务运行状态统计:</div>
                            <div class="pie">
                                <pie-chart-project-info
                                    id="projectInfoPieA"
                                    :stateList="stateList"
                                    stateName="stateName"
                                    seriesName="任务运行状态统计"
                                ></pie-chart-project-info>
                            </div>
                        </div>
                        <div class="chart">
                            <div class="pieTitle">得分统计:</div>
                            <div class="pie">
                                <pie-chart-project-info
                                    id="projectInfoPieB"
                                    :stateList="resultList"
                                    stateName="resultName"
                                    seriesName="得分统计"
                                ></pie-chart-project-info>
                            </div>
                        </div>
                    </div>
                    <div>
                        <tableList
                            ref="table"
                            :columns="columns"
                            :getDataWay="getDataWay"
                            :pagination="pagination"
                        >
                            <el-table-column
                                label="操作"
                                slot="cgInfos"
                                align="center"
                            >
                                <template v-slot="scope">
                                    <i
                                        @click="viewRow(scope.row)"
                                        class="el-icon-view elIcon"
                                        title="查看"
                                    ></i>
                                </template>
                            </el-table-column>
                        </tableList>
                    </div>
                </div>
            </div>
        </div>
        <router-view v-else></router-view>
    </div>
</template>

<script>
import handleConfigList from "../modelLibrary/components/handleConfigList.vue";
import tableList from "@/components/grid/TableList";
import pieChartProjectInfo from "@/components/echarts/pieChartProjectInfo";
import canvasSensor from "./components/canvasProjectInfo.vue";
import { mapState } from "vuex";

export default {
    name: "projectInfo", // 项目详情
    components: {
        handleConfigList,
        tableList,
        pieChartProjectInfo,
        canvasSensor,
    },
    data() {
        return {
            id: "",
            info: {},
            columns: [
                {
                    label: "ID",
                    prop: "id",
                },
                {
                    label: "场景名称",
                    prop: "sceneName",
                },
                {
                    label: "运行开始时间",
                    prop: "runStartTimeFmt",
                },
                {
                    label: "运行结束时间",
                    prop: "runEndTimeFmt",
                },
                {
                    label: "运行状态",
                    prop: "runState",
                },
                {
                    label: "运行结果",
                    prop: "runResult",
                },
                {
                    label: "得分",
                    prop: "score",
                },
                {
                    label: "操作",
                    prop: "cgInfos",
                    template: true,
                },
            ],
            columnsA: [
                {
                    label: "测试项目",
                    prop: "projectName",
                },
                {
                    label: "场景数量",
                    prop: "sceneNum",
                },
                {
                    label: "测试权重%",
                    prop: "weight",
                },
                {
                    label: "测试得分",
                    prop: "score",
                },
                {
                    label: "得分率%",
                    prop: "scoreRatio",
                },
            ],
            pagination: {
                //分页使用
                currentPage: 1,
                pageSize: 10,
                position: "right",
                pageSizes: [10, 30, 50, 100, 200],
                layout: "sizes, total, prev, pager, next, jumper",
            },
            getDataWay: {
                //加载表格数据
                dataType: "url",
                type: "post",
                // firstRequest: false,
                data: this.$api.workManagement.selectProjectTaskList,
                param: {
                    id: this.$route.query.id,
                },
            },
            getDataWayA: {
                //加载表格数据
                dataType: "data",
                type: "post",
                firstRequest: false,
                data: [],
                param: {},
            },
            // 传感器对象集合
            configList: {
                camera: [],
                ogt: [],
                lidar: [],
                gps: [],
            },
            // 用于当前选中项的展示
            curOne: {
                name: "",
                index: -1,
            },
            downImgSrc: require("@/assets/common/image/others/noDoc.png"),
            // modelImgSrc: require("@/assets/common/image/others/carTopView.png"), // 车辆图片地址
            modelImgSrc: "", // 车辆图片地址
            stateList: [], // 任务运行状态统计数据
            resultList: [],
        };
    },

    computed: {
        ...mapState(["fileHost", "fileUrl"]),
    },

    methods: {
        viewRow(row) {
            this.$router.push({
                path: "/manualRunProjectList/projectInfo/taskInfo",
                query: {
                    taskId: row.id,
                    id: row.pid,
                },
            });
        },
        toReport() {
            if (this.info.nowRunState === "30") {
                this.$router.push({
                    path: "/manualRunProjectList/projectInfo/evaluationReport",
                    query: { id: this.id },
                });
            }
        },
        downReport() {
            if (this.info.nowRunState != "30") return;
            this.$axios({
                method: "post",
                url: this.$api.workManagement.exportProjectReportById,
                responseType: "blob",
                data: { id: this.id },
            }).then((res) => {
                let blob = new Blob([res]);
                let fileName = "测试报告.pdf";
                if ("download" in document.createElement("a")) {
                    // 非IE下载
                    let emlink = document.createElement("a");
                    emlink.download = fileName;
                    emlink.style.display = "none";
                    emlink.href = URL.createObjectURL(blob);
                    document.body.appendChild(emlink);
                    emlink.click();
                    URL.revokeObjectURL(emlink.href);
                    document.body.removeChild(emlink);
                } else {
                    // IE下载
                    navigator.msSaveBlob(blob, fileName);
                }
            });
        },
        curItem(item) {
            this.curOne = item;
        },
        getImgUrl(addr) {
            let url = "";
            if (process.env.VUE_APP_IS_DEV == "true") {
                url = this.fileHost + this.fileUrl;
            } else {
                url = this.fileUrl;
            }

            let token = localStorage.getItem("Authorization").split(" ")[1];
            let src = `${url}?objectName=${addr}&access_token=${token}`;
            return src;
        },
    },

    mounted() {
        // console.log(this.$route);
        if (this.$route.query.id) {
            this.id = this.$route.query.id;

            if (this.id) {
                this.$axios({
                    method: "post",
                    url: this.$api.workManagement.selectProjectDetailsById,
                    data: {
                        id: this.id,
                    },
                }).then((res) => {
                    if (res.code == 200 && res.info) {
                        this.info = res.info;
                        this.configList.camera =
                            res.info.sensorCameraList || [];
                        this.configList.ogt = res.info.sensorOgtList || [];
                        this.configList.lidar = res.info.sensorLidarList || [];
                        this.configList.gps = res.info.sensorGpsList || [];

                        this.modelImgSrc = this.getImgUrl(
                            res.info.vehicleTopView
                        );

                        if (this.info.nowRunState === "30") {
                            this.downImgSrc = require("@/assets/common/image/others/hasDoc.png");
                        } else {
                            this.downImgSrc = require("@/assets/common/image/others/noDoc.png");
                        }

                        this.stateList = res.info.stateList || [];
                        this.resultList = res.info.resultScoreList || [];
                        // this.resultList = res.info.resultList || [];

                        this.getDataWayA.data = res.info.algorithmScoreList;
                    } else {
                        this.$message.error(res.message || "获取信息失败");
                    }
                });
            }
        }
    },
};
</script>

<style lang='less' scoped>
.projectInfoPanel {
    padding: 18px;

    .panel {
        border: 1px solid #dfdfdf;
        padding: 12px 24px;
        box-shadow: 0 4px 9px #dcdcdc;
        border-radius: 3px;
    }

    .titlePanel {
        padding-bottom: 6px;
        border-bottom: 1px dotted @gray;
    }

    .headPanel {
        margin-bottom: 25px;

        .box {
            flex: 1;
        }

        .boxContent {
            display: flex;
            flex-wrap: wrap;
            padding: 18px 15px;
        }

        .info {
            display: flex;
            width: 345px;
            margin: 0 12px 22px 0;
            word-break: break-all;

            span {
                display: block;
                width: 105px;
                color: @gray;
            }

            b {
                flex: 1;
                font-weight: normal;
            }
        }
    }

    .topPanel {
        .box {
            flex: 1;
        }

        .boxB {
            margin-right: 18px;
        }

        .titlePanel {
            position: relative;

            .download {
                position: absolute;
                top: 0;
                right: 0;
                color: @themeColor;
                font-size: 18px;
                // cursor: pointer;
            }
        }

        .boxContent {
            padding: 18px 15px;
        }

        .info {
            display: flex;
            margin-bottom: 22px;
            word-break: break-all;

            span {
                display: block;
                width: 75px;
                color: @gray;
            }

            b {
                flex: 1;
                font-weight: normal;
            }
        }

        .boxContentC {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;

            .cbox {
                text-align: center;
                color: @themeColor;
                // cursor: pointer;

                > div {
                    margin-top: 18px;
                }
            }
        }
    }

    .centerPanel {
        margin: 25px 0;

        .boxContentA {
            padding: 18px 15px;

            .info {
                display: flex;
                margin-bottom: 22px;
                word-break: break-all;

                span {
                    display: block;
                    width: 75px;
                    color: @gray;
                }

                b {
                    flex: 1;
                    font-weight: normal;
                }
            }
        }

        .boxContentB {
            display: flex;
            justify-content: space-around;
            padding-top: 30px;

            .canvasBox {
                flex: 1;
            }
        }
    }

    .bottomPanel {
        .boxContentA {
            display: flex;
            justify-content: space-around;
            padding: 45px 0;
        }

        .chart {
            width: 50%;

            .pieTitle {
                padding: 0 0 30px;
                text-align: center;
                font-size: 16px;
                font-weight: bold;
            }

            .pie {
                height: calc(40vh);
            }
        }
    }
}
</style>