KJ135
/
microwave-project-unite
mirror of http://172.16.0.12:5000/WBJY/microwave-project-unite.git
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

正射、误差矩阵图表绘制

tykong-cidian
陈荣宏 2024-08-27 01:09:39 +08:00
parent bd87a8cd58
commit aa4b7b8d05
4 changed files with 17420 additions and 10323 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26030
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -9,6 +9,7 @@
"lint": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint" "lint": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"@turf/turf": "^7.1.0",
"animate.css": "^4.1.1", "animate.css": "^4.1.1",
"axios": "^0.20.0", "axios": "^0.20.0",
"babel-plugin-component": "^1.1.1", "babel-plugin-component": "^1.1.1",

465
src/components/qtReport/index.vue
View File

@ -1,44 +1,61 @@
<template> <template>
<div class="qtReport"> <div class="qtReport">
<div class="realResult"> <div class="realResult">
<div class="box1"> <div class="box1"><span class="sp1"></span><span class="sp2">真实性检验结果</span></div>
<span class="sp1"></span><span class="sp2">真实性检验结果</span> <div class="resContent">
</div> <div>
<div class="resContent"> <el-tabs v-model="activeTabs">
<div> <el-tab-pane label="误差矩阵" name="pixel">
<el-tabs v-model="activeTabs"> <ReportTable
<el-tab-pane label="误差矩阵" name="pixel"> :errorMatrix="errorMatrix"
<ReportTable :errorMatrix="errorMatrix" activeTabs="pixel"></ReportTable> activeTabs="pixel"
</el-tab-pane> ></ReportTable>
<el-tab-pane label="用户精度" name="userPre"> </el-tab-pane>
<ReportTable :errorMatrix="errorMatrix" :preResults="preResults['用户精度']" activeTabs="userPre"> <el-tab-pane label="用户精度" name="userPre">
</ReportTable> <ReportTable
</el-tab-pane> :errorMatrix="errorMatrix"
<el-tab-pane label="生产者精度" name="producerPre"> :preResults="preResults['用户精度']"
<ReportTable :errorMatrix="errorMatrix" :preResults="preResults['生产者精度']" activeTabs="producerPre"> activeTabs="userPre"
</ReportTable> >
</el-tab-pane> </ReportTable>
<el-tab-pane label="错分精度" name="errorPre"> </el-tab-pane>
<ReportTable :errorMatrix="errorMatrix" :preResults="preResults['错分误差']" activeTabs="errorPre"> <el-tab-pane label="生产者精度" name="producerPre">
</ReportTable> <ReportTable
</el-tab-pane> :errorMatrix="errorMatrix"
<el-tab-pane label="漏分精度" name="LeakagePre"> :preResults="preResults['生产者精度']"
<ReportTable :errorMatrix="errorMatrix" :preResults="preResults['漏分误差']" activeTabs="LeakagePre"> activeTabs="producerPre"
</ReportTable> >
</el-tab-pane> </ReportTable>
</el-tabs> </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> </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> </template>
<script> <script>
@ -46,197 +63,271 @@ import ReportTable from "@/components/reportTable";
import { productTypeMap } from "@/lib/variateMap"; import { productTypeMap } from "@/lib/variateMap";
export default { export default {
components: { components: {
ReportTable, ReportTable,
},
props: {
realRes: {
require: true,
}, },
pdSubType: { props: {
require: true, realRes: {
}, 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})",
}, },
xAxis: { pdSubType: {
name: "漏分精度", require: true,
nameLocation: "middle", },
nameTextStyle: { },
lineHeight: 30, data() {
height: 60, return {
fontWeight: "bold", activeTabs: "pixel",
}, pdSubTypeName: null,
min: 0, myCharts: null,
max: 1, errorMatrix: null,
axisLabel: { preResults: null,
formatter: function (value) { };
return Number(value).toFixed(1); },
}, 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> </script>
<style scoped lang="less"> <style scoped lang="less">
.qtReport { .qtReport {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.realResult { .realResult {
width: 100%; width: 100%;
height: calc(55% - 5px); height: calc(55% - 5px);
background-color: white; background-color: white;
margin-bottom: 5px; margin-bottom: 5px;
} }
.groudCoverType { .groudCoverType {
width: 100%; width: 100%;
height: 45%; height: 45%;
background-color: white; background-color: white;
} }
.resContent { .resContent {
// border: 1px black solid; // border: 1px black solid;
height: calc(100% - 60px); height: calc(100% - 60px);
width: calc(100% - 20px); width: calc(100% - 20px);
margin: 10px; margin: 10px;
font-size: 20px; font-size: 20px;
overflow-y: scroll; overflow-y: scroll;
.rptitle { .rptitle {
display: block; display: block;
float: left; float: left;
font-size: 16px; font-size: 16px;
span { span {
color: #354595; color: #354595;
font-weight: bold; font-weight: bold;
}
} }
}
.sampling { .sampling {
width: calc(40% - 6px); width: calc(40% - 6px);
text-align: start; text-align: start;
margin-left: 6px; margin-left: 6px;
} }
.pixelDeal { .pixelDeal {
width: calc(60% - 6px); width: calc(60% - 6px);
text-align: end; text-align: end;
margin-right: 6px; margin-right: 6px;
} }
} }
/deep/.resContent .el-tabs__header { /deep/.resContent .el-tabs__header {
margin: 0; margin: 0;
} }
/deep/.resContent .el-tabs__item { /deep/.resContent .el-tabs__item {
padding: 0 13px; padding: 0 13px;
} }
.gctContent { .gctContent {
border: 1px black solid; border: 1px black solid;
height: calc(100% - 60px); height: calc(100% - 60px);
width: calc(100% - 20px); width: calc(100% - 20px);
margin: 10px; margin: 10px;
} }
#qtReportEchart { #qtReportEchart {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
} }
.box1 { .box1 {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
border-bottom: 1px solid rgb(205, 205, 205, 0.5); border-bottom: 1px solid rgb(205, 205, 205, 0.5);
} }
.sp1 { .sp1 {
display: inline-block; display: inline-block;
width: 7px; width: 7px;
height: 26px; height: 26px;
background-color: #354595; background-color: #354595;
vertical-align: top; vertical-align: top;
margin-left: 20px; margin-left: 20px;
margin-top: 8px; margin-top: 8px;
} }
.sp2 { .sp2 {
margin-left: 10px; margin-left: 10px;
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
color: #354595; color: #354595;
vertical-align: top; vertical-align: top;
} }
</style> </style>

1247
src/components/rtReport/index.vue
View File

File diff suppressed because it is too large Load Diff