正射、误差矩阵图表绘制
陈荣宏
parent
bd87a8cd58
commit
aa4b7b8d05
File diff suppressed because it is too large
Load Diff
|
|
@ -9,6 +9,7 @@
|
|||
"lint": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@turf/turf": "^7.1.0",
|
||||
"animate.css": "^4.1.1",
|
||||
"axios": "^0.20.0",
|
||||
"babel-plugin-component": "^1.1.1",
|
||||
|
|
|
|||
|
|
@ -1,44 +1,61 @@
|
|||
<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 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>
|
||||
</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>
|
||||
|
|
@ -46,197 +63,271 @@ import ReportTable from "@/components/reportTable";
|
|||
import { productTypeMap } from "@/lib/variateMap";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ReportTable,
|
||||
},
|
||||
props: {
|
||||
realRes: {
|
||||
require: true,
|
||||
components: {
|
||||
ReportTable,
|
||||
},
|
||||
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["" + 12 + ""]
|
||||
? this.realRes.report["" + 12 + ""]
|
||||
: [];
|
||||
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})",
|
||||
props: {
|
||||
realRes: {
|
||||
require: true,
|
||||
},
|
||||
xAxis: {
|
||||
name: "漏分精度",
|
||||
nameLocation: "middle",
|
||||
nameTextStyle: {
|
||||
lineHeight: 30,
|
||||
height: 60,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
min: 0,
|
||||
max: 1,
|
||||
axisLabel: {
|
||||
formatter: function (value) {
|
||||
return Number(value).toFixed(1);
|
||||
},
|
||||
},
|
||||
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);
|
||||
},
|
||||
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%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.realResult {
|
||||
width: 100%;
|
||||
height: calc(55% - 5px);
|
||||
background-color: white;
|
||||
margin-bottom: 5px;
|
||||
width: 100%;
|
||||
height: calc(55% - 5px);
|
||||
background-color: white;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.groudCoverType {
|
||||
width: 100%;
|
||||
height: 45%;
|
||||
background-color: white;
|
||||
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;
|
||||
// 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;
|
||||
.rptitle {
|
||||
display: block;
|
||||
float: left;
|
||||
font-size: 16px;
|
||||
|
||||
span {
|
||||
color: #354595;
|
||||
font-weight: bold;
|
||||
span {
|
||||
color: #354595;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sampling {
|
||||
width: calc(40% - 6px);
|
||||
text-align: start;
|
||||
margin-left: 6px;
|
||||
}
|
||||
.sampling {
|
||||
width: calc(40% - 6px);
|
||||
text-align: start;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.pixelDeal {
|
||||
width: calc(60% - 6px);
|
||||
text-align: end;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.pixelDeal {
|
||||
width: calc(60% - 6px);
|
||||
text-align: end;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/.resContent .el-tabs__header {
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/deep/.resContent .el-tabs__item {
|
||||
padding: 0 13px;
|
||||
padding: 0 13px;
|
||||
}
|
||||
|
||||
.gctContent {
|
||||
border: 1px black solid;
|
||||
height: calc(100% - 60px);
|
||||
width: calc(100% - 20px);
|
||||
margin: 10px;
|
||||
border: 1px black solid;
|
||||
height: calc(100% - 60px);
|
||||
width: calc(100% - 20px);
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
#qtReportEchart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.box1 {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid rgb(205, 205, 205, 0.5);
|
||||
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;
|
||||
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;
|
||||
margin-left: 10px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #354595;
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue