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

<template>
  <div class="rtReport">
    <div class="realResult">
      <div class="box1">
        <span class="sp1"></span><span class="sp2">真实性检验结果</span>
      </div>
      <div class="resContent">
        <el-table
          :header-cell-style="headerRowClass"
          :cell-style="tableRowClassName"
          style="width: 100%"
          :data="tDatas"
          :stripe="true"
          class="table-head-transparent"
          size="medium"
        >
          <el-table-column
            v-for="(item, index) in Object.keys(tData).slice(0, midValue)"
            :key="index"
            :label="item | truthFunFilter"
            :property="item"
            align="center"
          >
            <template slot-scope="scope">{{ scope.row[item] }}</template>
          </el-table-column>
        </el-table>
        <el-table
          :header-cell-style="headerRowClass"
          :cell-style="tableRowClassName"
          style="width: 100%; margin-top: 16px"
          :data="tDatas"
          :stripe="true"
          class="table-head-transparent"
          size="medium"
        >
          <el-table-column
            v-for="(item, index) in Object.keys(tData).slice(midValue)"
            :key="index"
            :label="item | truthFunFilter"
            :property="item"
            align="center"
          >
            <template slot-scope="scope">{{ scope.row[item] }}</template>
          </el-table-column>
        </el-table>
        <!--<span v-for="(item,index) in resMap" :key="index">{{item.name | truthFunFilter}}：{{item.val}}</span>-->
        <div v-if="meanError.length !== 0 && meanError !== []">
          <el-table
            :header-cell-style="headerRowClass"
            :cell-style="tableRowClassName"
            style="width: 100%"
            :data="meanError"
            :stripe="true"
            size="medium"
          >
            <el-table-column
              prop="3_0"
              label="平均相对误差：相对X轴误差"
              align="center"
              v-if="meanError[0]['3_0'] != null"
            >
            </el-table-column>
            <el-table-column
              prop="3_1"
              label="平均相对误差：相对Y轴误差"
              align="center"
              v-if="meanError[0]['3_1'] != null"
            >
            </el-table-column>
            <el-table-column
              prop="4_0"
              label="平均绝对相对误差：相对X轴误差"
              align="center"
              v-if="meanError[0]['4_0'] != null"
            >
            </el-table-column>
            <el-table-column
              prop="4_1"
              label="平均绝对相对误差：相对Y轴误差"
              align="center"
              v-if="meanError[0]['4_1'] != null"
            >
            </el-table-column>
          </el-table>
        </div>

        <!--<span>相对误差：</span>-->
        <!-- <div v-if="relativeError.length !== 0 && relativeError !== []">
                <el-table
                  :data="relativeError"
                  size="medium"
                  >
                  <el-table-column
                    prop="cre_orthoXRelativeError"
                    label="相对误差：相对X轴误差"
                    align="center">
                  </el-table-column>
                  <el-table-column
                    prop="cre_orthoYRelativeError"
                    label="相对误差：相对Y轴误差"
                    align="center">
                  </el-table-column>
                </el-table>
              </div> -->
      </div>
    </div>
    <div class="errorGraph">
      <div class="box1">
        <span class="sp1"></span
        ><span class="sp2">{{ pdSubTypeName }}误差结果图</span>
      </div>
      <div class="errContent">
        <div id="rtReportEcharts" ref="chart"></div>
        <div class="legend" v-if="pdSubType === 1">
          <div class="line">
            <span class="circle"></span>
            <span>样本点</span>
          </div>
          <div class="line">
            <span class="circle_2"></span>
            <span>选取点</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { productTypeMap } from "@/lib/variateMap";
import { truthFunVal, productSubTypeVal } from "@/lib/contract";

export default {
  props: {
    realRes: {
      require: true,
    },
    pdSubType: {
      require: true,
    },
  },
  filters: {
    truthFunFilter(truthFun) {
      const truthFunMap = {
        0: "平均误差",
        1: "平均绝对误差",
        2: "相对误差",
        3: "平均相对误差",
        4: "平均绝对相对误差",
        5: "均方根误差",
        6: "平面中误差",
        7: "相关系数",
        8: "误差矩阵",
        9: "总体分类精度",
        10: "Kappa系数",
      };
      return truthFunMap[truthFun];
    },
  },
  data() {
    return {
      resMap: [],
      myCharts: null,
      relativeError: [],
      meanError: [],
      pdSubTypeName: "",
      tData: {},
      tDatas: null,
      midValue: 10,
    };
  },
  created() {
    this.initParam();
  },
  mounted() {
    this.myCharts = this.$echarts.init(this.$refs.chart);
    if (this.pdSubType === 1) {
      this.drawOtgEchart(this.realRes.otgVal);
      let da = {};
      let dae = {};
      for (let i = 0; i < this.resMap.length; i++) {
        const o = this.resMap[i];
        if (typeof o.val === "number" || typeof o.val === "string") {
          da[o.name] = o.val;
        } else if (Number(o.name) === truthFunVal.ACM_MEANRELATIVEERROR) {
          dae[o.name + "_0"] = o.val.X轴平均相对误差;
          dae[o.name + "_1"] = o.val.Y轴平均相对误差;
        } else if (
          Number(o.name) === truthFunVal.ACM_MEANABSOLUTERELATIVEERROR
        ) {
          dae[o.name + "_0"] = o.val.X轴平均相对绝对误差;
          dae[o.name + "_1"] = o.val.Y轴平均相对绝对误差;
        }
      }
      if (Object.keys(dae).length !== 0) {
        this.meanError = [dae];
      }
      this.tData = da;
      this.tDatas = [da];
    } else {
      this.drawPie(this.realRes.errorImageValue);
      let da = {};
      this.midValue =
        this.resMap.length - 1 >= 3
          ? Math.ceil((this.resMap.length - 1) / 2)
          : this.resMap.length;

      for (let i = 0; i < this.resMap.length; i++) {
        const o = this.resMap[i];
        if (
          Number(o.name) === truthFunVal.ACM_RELATIVEERROR ||
          Number(o.name) === truthFunVal.ACM_REALVALLIST
        )
          continue; //跳过执行相对误差与真值列表
        da[o.name] =
          typeof o.val === "number" || typeof o.val === "string"
            ? o.val
            : o.val[0];
      }
      this.tDatas = [da];
      this.tData = da;
    }
  },
  methods: {
    headerRowClass() {
      return "background: #E4E9F1;text-align:center";
    },
    tableRowClassName({ rowIndex }) {
      if ((rowIndex + 1) % 2 !== 0) {
        return "background:#F5F7FA;text-align:center";
      } else {
        return "background:#FFFFFF;text-align:center";
      }
    },
    getProductDes() {
      let prodDes = null;
      switch (this.pdSubType) {
        case 46:
          prodDes = "高程值，单位：米";
          break;
        case 51:
          prodDes = "后向散射系数,单位：dB";
          break;
        case 52:
          prodDes = "延迟相位值";
          break;
        case 53:
          prodDes = "形变量，单位：米";
          break;
        case 38:
          prodDes = "土壤含水量";
          break;
        case 49:
          prodDes = "土壤盐碱度";
          break;
        case 50:
          prodDes = "地表粗糙度";
          break;
        case 48:
          prodDes = "植被高度值，单位：米";
          break;
        case 43:
          prodDes = "叶面积指数";
          break;
      }
      return prodDes;
    },
    initParam() {
      // console.log('报告信息',this.realRes)
      if (this.realRes !== undefined) {
        this.pdSubTypeName = productTypeMap(this.pdSubType);
        const rr = this.realRes.report;
        if (this.pdSubType === productSubTypeVal.ACS_ORTHOPHOTO) {
          for (var i in rr) {
            let rVal = rr[i];
            switch (Number(i)) {
              case truthFunVal.ACM_RELATIVEERROR: //相对误差
                this.relativeError = rVal;
                break;
              case truthFunVal.ACM_MEANRELATIVEERROR: //平均相对误差
                const objMap1 = {
                  cre_orthoXMeanRelativeError: "X轴平均相对误差",
                  cre_orthoYMeanRelativeError: "Y轴平均相对误差",
                };
                rVal = Object.fromEntries(
                  Object.entries(rVal).map(([k, v]) => [objMap1[k] || k, v])
                );
                this.resMap.push({ name: i, val: rVal });
                break;
              case truthFunVal.ACM_MEANABSOLUTERELATIVEERROR: //平均绝对相对误差
                const objMap2 = {
                  cre_orthoXMeanAbsoluteRelativeError: "X轴平均相对绝对误差",
                  cre_orthoYMeanAbsoluteRelativeError: "Y轴平均相对绝对误差",
                };
                rVal = Object.fromEntries(
                  Object.entries(rVal).map(([k, v]) => [objMap2[k] || k, v])
                );
                this.resMap.push({ name: i, val: rVal });
                break;
              default:
                this.resMap.push({ name: i, val: rVal });
            }
          }
        } else {
          for (var i in rr) {
            let rVal = rr[i];
            this.resMap.push({ name: i, val: rVal });
          }
        }
      }
    },
    drawPie(errorVala) {
      let data = [];
      let xArr = [];
      for (let i in errorVala) {
        const a = [errorVala[i].cre_imageValue, errorVala[i].cre_deviation];
        xArr.push(errorVala[i].cre_imageValue);
        data.push(a);
      }
      const x_limit = Math.abs(Math.max(...xArr) / xArr.length);
      //多项式回归
      // var myRegression = this.$ecstat.regression("polynomial", data, 3);
      let myRegression = this.$ecstat.regression("linear", data);

      myRegression.points.sort(function (a, b) {
        return a[0] - b[0];
      });
      var option = {
        animation: false,
        xAxis: {
          name: "像元值（" + this.getProductDes() + "）",
          nameLocation: "middle",
          min: (Math.min(...xArr) - x_limit).toFixed(5),
          max: (Math.max(...xArr) + x_limit).toFixed(5),
          nameTextStyle: {
            lineHeight: 30,
            height: 60,
            fontWeight: "bold",
          },
        },
        yAxis: {
          name: "误差",
          nameTextStyle: {
            lineHeight: 30,
            height: 60,
            fontWeight: "bold",
          },
        },
        series: [
          {
            symbolSize: 10,
            type: "scatter",
            data: data,
          },
          {
            type: "line",
            smooth: true,
            showSymbol: false,
            data: myRegression.points,
            itemStyle: {
              normal: {
                color: "#91cc75",
                lineStyle: {
                  width: 3,
                },
              },
            },
          },
        ],
      };
      option && this.myCharts.setOption(option);
    },
    drawOtgEchart(otgVal) {
      let xl = [];
      let yl = [];
      let allData = [];
      for (let i in otgVal) {
        xl.push(otgVal[i].x);
        yl.push(otgVal[i].y);

        let ad = [];
        ad.push(otgVal[i].x, otgVal[i].y);
        allData.push(ad);
        const j = Number(i) + 1;
        if (Number.isInteger(j / 2)) {
          allData.push("-");
        }
      }
      let xMax = Math.max(...xl),
        xMin = Math.min(...xl);
      let yMax = Math.max(...yl),
        yMin = Math.min(...yl);
      const avgxVal = (xMax - xMin) / 8;
      const avgyVal = (yMax - yMin) / 8;
      let option = {
        grid: {
          left: "14%",
        },
        animation: false,
        xAxis: {
          name: "经度（°）",
          nameLocation: "middle",
          nameTextStyle: {
            lineHeight: 30,
            height: 60,
            fontWeight: "bold",
          },
          min: Number(xMin - avgxVal * 2).toFixed(4),
          max: Number(xMax + avgxVal * 2).toFixed(4),
          axisLabel: {
            formatter: function (value) {
              return Number(value);
            },
          },
        },
        yAxis: {
          name: "纬度（°）",
          nameTextStyle: {
            lineHeight: 30,
            height: 60,
            fontWeight: "bold",
          },
          min: Number(yMin - avgyVal * 2).toFixed(4),
          max: Number(yMax + avgyVal * 2).toFixed(4),
          axisLabel: {
            formatter: function (value) {
              return Number(value);
            },
          },
        },
        series: [
          {
            symbolSize: 8,
            data: allData,
            type: "line",
            itemStyle: {
              color: function (params) {
                if ((params.dataIndex + 1) % 3 === 2) return "#0000CD";
              },
            },
          },
        ],
      };
      option && this.myCharts.setOption(option);
    },
  },
};
</script>
  
<style scoped lang="less">
.rtReport {
  width: 100%;
  height: 100%;
}
.realResult {
  width: 100%;
  height: calc(55% - 5px);
  background-color: white;
  margin-bottom: 5px;
}
.errorGraph {
  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;
  span {
    display: block;
    margin: 10px;
  }
}
.errContent {
  border: 1px black solid;
  height: calc(100% - 60px);
  width: calc(100% - 20px);
  margin: 10px;
  position: relative;
}
#rtReportEcharts {
  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;
}

.legend {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: transparent;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  .line {
    height: 20px;
    line-height: 20px;
    margin: 0 5px;
    .circle {
      display: inline-block;
      width: 7px;
      height: 7px;
      border: 1px solid rgb(194, 53, 49);
      border-radius: 50%;
      margin-right: 5px;
    }
    .circle_2 {
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      margin-right: 5px;
      border: 1px solid #0000cd;
    }
  }
}
</style>