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

<template>
    <div class="projectInfoPanel">
        <div class="flexBox topPanel">
            <div class="box 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.projectDescribe }}</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>
            </div>
            <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="toReport"
                    ></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">
                        <!-- <img
                            src="../../assets/common/image/others/2.png"
                            width="100%"
                        /> -->
                        <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
                                id="projectInfoPieA"
                                :stateList="stateList"
                                stateName="stateName"
                            ></pie-chart>
                        </div>
                    </div>
                    <div class="chart">
                        <div class="pieTitle">结果动态统计:</div>
                        <div class="pie">
                            <pie-chart
                                id="projectInfoPieB"
                                :stateList="resultList"
                                stateName="resultName"
                            ></pie-chart>
                        </div>
                    </div>
                </div>
                <div>
                    <tableList
                        ref="table"
                        style="margin: 0 30px"
                        :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>
</template>

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

export default {
    name: "projectInfo", // 项目详情
    components: { handleConfigList, tableList, pieChart, 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: "cgInfos",
                    template: true,
                },
            ],
            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,
                },
            },
            // 传感器对象集合
            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() {
            this.$router.push({ path: "/taskInfo" });
        },
        toReport() {
            if (this.info.nowRunState === "30") {
                this.$router.push({
                    path: "/evaluationReport",
                    query: { id: this.id },
                });
            }
        },
        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() {
        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.vehicleImage
                        );

                        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.resultList;
                    } 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;
    }

    .topPanel {
        .box {
            flex: 1;
        }

        .boxB {
            margin: 0 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: 12px;

            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: 12px;

                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>