microwave-project-unite/src/components/qtReport/index.vue

<template>
    <div class="qtReport">
        <div class="realResult">
            <div class="box1"><span class="sp1"></span><span class="sp2">真实性检验结果</span></div>
            <div class="resContent">
                <div>
                    <el-tabs v-model="activeTabs">
                        <el-tab-pane label="误差矩阵" name="pixel">
                            <ReportTable
                                :errorMatrix="errorMatrix"
                                activeTabs="pixel"
                            ></ReportTable>
                        </el-tab-pane>
                        <el-tab-pane label="用户精度" name="userPre">
                            <ReportTable
                                :errorMatrix="errorMatrix"
                                :preResults="preResults['用户精度']"
                                activeTabs="userPre"
                            >
                            </ReportTable>
                        </el-tab-pane>
                        <el-tab-pane label="生产者精度" name="producerPre">
                            <ReportTable
                                :errorMatrix="errorMatrix"
                                :preResults="preResults['生产者精度']"
                                activeTabs="producerPre"
                            >
                            </ReportTable>
                        </el-tab-pane>
                        <el-tab-pane label="错分精度" name="errorPre">
                            <ReportTable
                                :errorMatrix="errorMatrix"
                                :preResults="preResults['错分误差']"
                                activeTabs="errorPre"
                            >
                            </ReportTable>
                        </el-tab-pane>
                        <el-tab-pane label="漏分精度" name="LeakagePre">
                            <ReportTable
                                :errorMatrix="errorMatrix"
                                :preResults="preResults['漏分误差']"
                                activeTabs="LeakagePre"
                            >
                            </ReportTable>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </div>
        <div class="groudCoverType">
            <div class="box1">
                <span class="sp1"></span><span class="sp2">{{ pdSubTypeName }}误差结果图</span>
            </div>
            <div class="gctContent">
                <div id="qtReportEchart" ref="chart"></div>
            </div>
        </div>
    </div>
</template>

<script>
import ReportTable from "@/components/reportTable";
import { productTypeMap } from "@/lib/variateMap";

export default {
    components: {
        ReportTable,
    },
    props: {
        realRes: {
            require: true,
        },
        pdSubType: {
            require: true,
        },
    },
    data() {
        return {
            activeTabs: "pixel",
            pdSubTypeName: null,
            myCharts: null,
            errorMatrix: null,
            preResults: null,
        };
    },
    created() {
        this.initParam();
    },
    mounted() {
        this.myCharts = this.$echarts.init(this.$refs.chart);
        if (this.realRes.rocCoordinateValues !== undefined)
            console.log("2222222", this.realRes.report["" + 12 + ""]);
        this.drawPie(this.realRes.rocCoordinateValues);
    },
    methods: {
        initParam() {
            if (this.realRes !== undefined) {
                this.pdSubTypeName = productTypeMap(this.pdSubType);
                this.errorMatrix = this.realRes.report["" + 12 + ""]
                    ? this.realRes.report["" + 12 + ""]
                    : [];
                this.preResults = this.realRes.results ? this.realRes.results : {};
            }
        },
        drawPie(rocVal) {
            let tableData = this.realRes.report["" + 12 + ""];
            let xArr = tableData.pop();
            let yArr = tableData.pop();
            let dataArr = [];
            tableData.forEach((a, index1) => {
                a.forEach((b, index2) => {
                    dataArr.push([index1, index2, b.count || "-"]);
                });
            });
            let echartOption = {
                tooltip: {
                    position: "top",
                },
                grid: {
                    height: "70%",
                    top: "10%",
                },
                xAxis: {
                    type: "category",
                    data: xArr,
                    splitArea: {
                        show: true,
                    },
                    axisLabel: {
                        interval: 0,
                        formatter: function (value) {
                            // 将 x 轴的文字改为竖版显示
                            var str = value.split("");
                            return str.join("\n");
                        },
                    },
                },
                yAxis: {
                    type: "category",
                    data: yArr,
                    splitArea: {
                        show: true,
                    },
                },
                visualMap: {
                    min: 0,
                    max: 10,
                    calculable: true,
                    left: "right", // 将 visualMap 组件放置在容器的右侧
                    top: "middle", // 垂直居中
                    orient: "vertical", // 垂直显示
                    inRange: {
                        color: ["#F4FBFD","#073671"], // 定义颜色渐变
                    },
                    // outOfRange: {
                    //     color: "#999", // 数据值在范围外时的颜色
                    // },
                },
                series: [
                    {
                        name: "Punch Card",
                        type: "heatmap",
                        data: dataArr,
                        label: {
                            show: true,
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: "rgba(0, 0, 0, 0.5)",
                            },
                        },
                    },
                ],
            };
            echartOption && this.myCharts.setOption(echartOption);
            return;
            let allData = [];
            for (let i in rocVal) {
                let ad = [];
                ad.push(
                    parseFloat(rocVal[i].cre_falseAlarmX.toFixed(3)),
                    parseFloat(rocVal[i].cre_reCallY.toFixed(3))
                );
                allData.push(ad);
            }
            console.log(allData);
            let option = {
                animation: false,
                tooltip: {
                    formatter: "({c})",
                },
                xAxis: {
                    name: "漏分精度",
                    nameLocation: "middle",
                    nameTextStyle: {
                        lineHeight: 30,
                        height: 60,
                        fontWeight: "bold",
                    },
                    min: 0,
                    max: 1,
                    axisLabel: {
                        formatter: function (value) {
                            return Number(value).toFixed(1);
                        },
                    },
                },
                yAxis: {
                    name: "用户精度",
                    nameTextStyle: {
                        lineHeight: 30,
                        height: 60,
                        fontWeight: "bold",
                    },
                    min: 0,
                    max: 1,
                    axisLabel: {
                        formatter: function (value) {
                            return Number(value).toFixed(1);
                        },
                    },
                },
                series: [
                    {
                        symbolSize: 10,
                        data: allData,
                        type: "scatter",
                    },
                ],
            };
            option && this.myCharts.setOption(option);
        },
    },
};
</script>

<style scoped lang="less">
.qtReport {
    width: 100%;
    height: 100%;
}

.realResult {
    width: 100%;
    height: calc(55% - 5px);
    background-color: white;
    margin-bottom: 5px;
}

.groudCoverType {
    width: 100%;
    height: 45%;
    background-color: white;
}

.resContent {
    //   border: 1px black solid;
    height: calc(100% - 60px);
    width: calc(100% - 20px);
    margin: 10px;
    font-size: 20px;
    overflow-y: scroll;

    .rptitle {
        display: block;
        float: left;
        font-size: 16px;

        span {
            color: #354595;
            font-weight: bold;
        }
    }

    .sampling {
        width: calc(40% - 6px);
        text-align: start;
        margin-left: 6px;
    }

    .pixelDeal {
        width: calc(60% - 6px);
        text-align: end;
        margin-right: 6px;
    }
}

/deep/.resContent .el-tabs__header {
    margin: 0;
}

/deep/.resContent .el-tabs__item {
    padding: 0 13px;
}

.gctContent {
    border: 1px black solid;
    height: calc(100% - 60px);
    width: calc(100% - 20px);
    margin: 10px;
}

#qtReportEchart {
    width: 100%;
    height: 100%;
    position: relative;
}

.box1 {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid rgb(205, 205, 205, 0.5);
}

.sp1 {
    display: inline-block;
    width: 7px;
    height: 26px;
    background-color: #354595;
    vertical-align: top;
    margin-left: 20px;
    margin-top: 8px;
}

.sp2 {
    margin-left: 10px;
    font-size: 20px;
    font-weight: 700;
    color: #354595;
    vertical-align: top;
}
</style>