543 lines
15 KiB
Vue
543 lines
15 KiB
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>
|