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

<template>
    <div class="projectInfoPanel">
        <div v-show="!$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>{{ 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="scorePanel 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="headPanel panel">
                <div class="titlePanel">
                    <div class="titlePanelBor">场景评价</div>
                </div>
                <div class="boxContent">
                    <div class="info">
                        <span>危险度规则:XXX</span>
                        <b>{{ info.projectId }}</b>
                    </div>
                    <div class="info">
                        <span>覆盖率规则:XXX</span>
                        <b>{{ info.projectName }}</b>
                    </div>
                    <div class="info">
                        <span>暴露率规则:XXX</span>
                        <b>{{ info.projectName }}</b>
                    </div>
                    <div class="info">
                        <span>场景数量:10</span>
                        <b>{{ info.projectName }}</b>
                    </div>
                    <div class="info">
                        <span>场景测试包覆盖率:10</span>
                        <b>{{ info.projectName }}</b>
                    </div>
                    <div class="info">
                        <span>场景测试包暴露率:20</span>
                        <b>{{ info.projectName }}</b>
                    </div>
                    </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="true"></handle-config-list>
                        </div>
                        <div class="canvasBox">
                            <!-- <canvas-sensor v-if="modelImgSrc" :modelImgSrc="modelImgSrc" :configList="configList"></canvas-sensor> -->

                            <div class="viewBox">
                                <span v-show="!isOpen" class="view open" @click="showAll(true)" title="显示全部"></span>
                                <span v-show="isOpen" class="view close" @click="showAll(false)" title="关闭全部"></span>
                            </div>

                            <three-show v-loading="loading" @loadingDone="loadingDone" ref="threeShow" :carModel="carModel"
                                :allSensor="allSensor"></three-show>

                            <div v-show="configBox" class="conditions">
                                <el-form ref="formA" :model="formA" :rules="rulesA" label-width="99px" disabled>
                                    <div class="forms">
                                        <el-form-item label="X(mm):" prop="sensorX">
                                            <el-input placeholder="请输入" maxlength="12" v-autoTrim="{
                                                obj: formA,
                                                key: 'sensorX',
                                            }" v-model="formA.sensorX">
                                            </el-input>
                                        </el-form-item>
                                        <el-form-item label="Y(mm):" prop="sensorY">
                                            <el-input placeholder="请输入" maxlength="12" v-autoTrim="{
                                                obj: formA,
                                                key: 'sensorY',
                                            }" v-model="formA.sensorY">
                                            </el-input>
                                        </el-form-item>
                                        <el-form-item label="Z(mm):" prop="sensorZ">
                                            <el-input placeholder="请输入" maxlength="12" v-autoTrim="{
                                                obj: formA,
                                                key: 'sensorZ',
                                            }" v-model="formA.sensorZ">
                                            </el-input>
                                        </el-form-item>
                                        <el-form-item label="横摆角(deg):" prop="sensorH">
                                            <el-input placeholder="请输入" maxlength="12" v-autoTrim="{
                                                obj: formA,
                                                key: 'sensorH',
                                            }" v-model="formA.sensorH">
                                            </el-input>
                                        </el-form-item>
                                        <el-form-item label="俯仰角(deg):" prop="sensorP">
                                            <el-input placeholder="请输入" maxlength="12" v-autoTrim="{
                                                obj: formA,
                                                key: 'sensorP',
                                            }" v-model="formA.sensorP">
                                            </el-input>
                                        </el-form-item>
                                        <el-form-item label="翻滚角(deg):" prop="sensorR">
                                            <el-input placeholder="请输入" maxlength="12" v-autoTrim="{
                                                obj: formA,
                                                key: 'sensorR',
                                            }" v-model="formA.sensorR">
                                            </el-input>
                                        </el-form-item>
                                        <el-form-item label="端口" prop="sensorPort" v-show="curOne.name === 'ogt'">
                                            <el-input placeholder="请输入" maxlength="9" v-autoTrim="{
                                                obj: formA,
                                                key: 'sensorPort',
                                            }" v-model="formA.sensorPort">
                                            </el-input>
                                        </el-form-item>
                                    </div>
                                </el-form>

                                <div class="btnBox">
                                    <el-button type="primary" @click="closeConfig" plain size="small">关闭</el-button>
                                </div>
                            </div>
                        </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-show="$route.path.includes('taskInfo') || $route.path.includes('evaluationReport')"></router-view>
        <!-- <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 threeShow from "./components/threeProjectInfo.vue";
import { mapState } from "vuex";

export default {
    name: "projectInfo", // 项目详情
    components: {
        handleConfigList,
        tableList,
        pieChartProjectInfo,
        // canvasSensor,
        threeShow: () => import('./components/threeProjectInfo.vue'),
    },
    data() {
        return {
            id: "",
            projectType: "", // 1手动 2自动
            info: {},
            evaluationLevel: "",
            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,
                    projectType: this.$route.query.projectType,
                },
            },
            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: "", // 车辆图片地址
            carModel: "",
            stateList: [], // 任务运行状态统计数据
            resultList: [],
            // 所有传感器的集合
            allSensor: {},
            configBox: false, // 配置项box
            formA: {
                sensorX: "", // 传感器横向偏移量（x轴）
                sensorY: "", // 传感器横向偏移量（y轴）
                sensorZ: "", // 传感器横向偏移量（z轴）
                sensorH: "", // 横摆角
                sensorP: "", // 俯仰角
                sensorR: "", // 横滚角
                sensorPort: "", // 端口
            },
            isOpen: false, // 是否已展示全部传感器
            rulesA: {},
            loading: true,
        };
    },

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

    methods: {
        viewRow(row) {
            let path = "/manualRunProjectList/projectInfo/taskInfo";
            if (this.projectType === "2") {
                path =
                    "/autoRunProjectList/autoRunSubProjectList/projectInfo/taskInfo";
            }

            // 修改任务详情的tabname
            this.$store.commit("getTaskInfoTabname", row.sceneName);
            localStorage.setItem("taskInfoTabname", row.sceneName);

            this.$router.push({
                path,
                query: {
                    taskId: row.id,
                    id: row.pid,
                    projectType: this.projectType,
                },
            });
        },
        toReport() {
            let path = "/manualRunProjectList/projectInfo/evaluationReport";
            if (this.projectType === "2") {
                path =
                    "/autoRunProjectList/autoRunSubProjectList/projectInfo/evaluationReport";
            }

            if (this.info.nowRunState === "30") {
                this.$router.push({
                    path,
                    query: { id: this.id, projectType: this.projectType },
                });
            }
        },
        downReport() {
            if (this.info.nowRunState != "30") return;
            this.$axios({
                method: "post",
                url: this.$api.workManagement.exportProjectReportById,
                responseType: "blob",
                data: { id: this.id, projectType: this.projectType },
            }).then((res) => {
                let blob = new Blob([res]);
                let fileName = `${this.info.algorithmName || ""}测试报告.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;

            let formA = this.configList[item.name][item.index];

            this.isOpen = false;

            this.formA.sensorX = formA.sensorX;
            this.formA.sensorY = formA.sensorY;
            this.formA.sensorZ = formA.sensorZ;
            this.formA.sensorH = formA.sensorH;
            this.formA.sensorP = formA.sensorP;
            this.formA.sensorR = formA.sensorR;
            if (this.curOne.name === "ogt") {
                this.formA.sensorPort = formA.sensorPort;
            }

            setTimeout(() => {
                this.$refs.threeShow.reset(
                    this.curOne.name,
                    this.curOne.index
                );
            }, 0);

            this.configBox = true;
        },
        closeConfig() {
            this.configBox = false;
        },
        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;
        },
        // 处理测试等级展示
        evaluationLevelInfoShow(evaluationLevel) {
            switch (evaluationLevel) {
                case "G":
                    return "优秀(G)";
                case "A":
                    return "良好(A)";
                case "M":
                    return "一般(M)";
                case "P":
                    return "较差(P)";
                default: return evaluationLevel
            }
        },
        // 获取所有传感器
        getAllSensor() {
            return this.$axios({
                method: "post",
                url: this.$api.modelLibrary.getMySensorList,
                data: {},
            }).then((res) => {
                if (res.code == 200 && res.info) {
                    this.allSensor = res.info;
                } else {
                    this.$message.error(
                        res.message || "获取传感器列表信息失败"
                    );
                }
            });
        },
        loadingDone(done) {
            if (done === 'carDone') this.loading = false;
        },
        // 显示全部传感器
        showAll(needOpen) {
            if (needOpen) {
                this.$refs.threeShow.showAll(this.configList);

                this.closeConfig();
            } else {
                if (this.curOne.index < 0) {
                    this.$refs.threeShow.reset(null, -1, true);
                } else {
                    this.curItem(this.curOne, false, false);
                }
            }

            this.isOpen = needOpen;
        },
        closeConfig() {
            this.configBox = false;
        },
    },

    // watch: {
    //     $route(to, from) {
    //         if (to.name === "projectInfo") {
    //             this.$nextTick(() => {
    //                 if (this.$refs.threeShow) {
    //                     this.$refs.threeShow.initCar(this.carModel);
    //                     this.$refs.threeShow.showAll(this.configList);
    //                 }
    //             });
    //         }
    //     },
    // },

    async mounted() {
        await this.getAllSensor();

        if (this.$route.query.id) {
            this.id = this.$route.query.id;
            this.projectType = this.$route.query.projectType || "1";

            this.$axios({
                method: "post",
                url: this.$api.workManagement.selectProjectDetailsById,
                data: {
                    id: this.id,
                    projectType: this.projectType,
                },
            }).then((res) => {
                if (res.code == 200 && res.info) {
                    this.info = res.info;
                    // this.evaluationLevel = this.evaluationLevelInfoShow(
                    //     res.info.evaluationLevel
                    // );
                    this.evaluationLevel = res.info.evaluationLevel;
                    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);
                    // this.carModel = this.getImgUrl(res.info.vehicleFrontView);
                    this.carModel = this.getImgUrl(res.info.vehicleTopView);

                    if (this.$refs.threeShow) {
                        setTimeout(() => {
                            // this.$refs.threeShow.showAll(this.configList);
                            this.showAll(true);
                        }, 3000)
                    }

                    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.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;
                min-width: 105px;
                color: @gray;
            }

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

    .scorePanel {
        margin-bottom: 25px;
    }

    .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 {
                position: relative;
                flex: 1;
            }

            .viewBox {
                position: absolute;
                left: 2px;
                top: 2px;
                width: 40px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                background-color: #ffffff;
                opacity: 0.75;

                .view {
                    display: block;
                    width: 30px;
                    height: 15px;
                    margin: 12px auto 0;
                    // font-size: 18px;
                    cursor: pointer;
                    // color: @themeColor;
                }

                .open {
                    background: url("../../assets/common/image/others/open.png") center no-repeat;
                    background-size: contain;
                }

                .close {
                    width: 26px;
                    height: 13px;
                    margin-top: 15px;
                    background: url("../../assets/common/image/others/close.png") center no-repeat;
                    background-size: contain;
                }
            }

            .conditions {
                position: absolute;
                right: 2px;
                top: 2px;
                width: 219px;
                height: 372px;
                padding: 10px;
                background-color: #ffffff;

                .btnBox {
                    padding: 0 0 10px;
                    text-align: center;
                }

                .forms /deep/ .el-form-item__label {
                    // width: 120px !important;
                    padding-right: 10px;
                    line-height: 22px;
                    font-size: 12px;
                }

                .forms /deep/ .el-form-item__content {
                    // margin-left: 120px !important;
                    line-height: 22px;
                    font-size: 12px;
                }

                .el-input {
                    width: 100px;
                    font-size: 12px;
                }

                .forms /deep/ .el-input__inner {
                    height: 22px;
                }
            }
        }
    }

    .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>