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)
    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 : {};
        console.log(this.errorMatrix,'this.errorMatrix');
        
      }
    },
    drawPie(rocVal) {
      let tableData = this.realRes.report["" + 8 + ""];
      let newTableData = this.deepClone(tableData);
      let xArr = newTableData.pop();
      let yArr = newTableData.pop();
      let dataArr = [];
      newTableData.forEach((a, index1) => {
        a.forEach((b, index2) => {
          dataArr.push([index2, index1, 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,
            animation: false,
            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);
    },
    deepClone(obj) {
      if (obj === null) return null;
      let clone = obj instanceof Array ? [] : {};
      for (const key of Object.keys(obj)) {
        clone[key] =
          typeof obj[key] === "object" ? this.deepClone(obj[key]) : obj[key];
      }
      return clone;
    },
  },
};
</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>