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="percentage">
              <ReportTable
                :errorMatrix="errorMatrix"
                activeTabs="percentage"
              ></ReportTable>
            </el-tab-pane> -->
            <!-- <el-tab-pane label="精度评价" name="preEval">
              <ReportTable :errorMatrix="errorMatrix" activeTabs="preEval"></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)
      this.drawPie(this.realRes.rocCoordinateValues);
  },
  methods: {
    initParam() {
      if (this.realRes !== undefined) {
        this.pdSubTypeName = productTypeMap(this.pdSubType);
        this.errorMatrix = this.realRes.report["" + 8 + ""]
          ? this.realRes.report["" + 8 + ""]
          : [];
        this.preResults = this.realRes.results ? this.realRes.results : {};
      }
    },
    drawPie(rocVal) {
      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);
      }
      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>