From 8022a67f3a15006ebdc6b851c1e1c3f0c2fe08ac Mon Sep 17 00:00:00 2001
From: duxiaoning <17621883433@163.com>
Date: Tue, 27 Aug 2024 03:22:53 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=AD=A3=E5=B0=84=E6=8A=A5?=
 =?UTF-8?q?=E5=91=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/qtReport/index.vue             | 564 +++++++++---------
 src/components/rtReport/index.vue             |   6 +-
 .../Feedback/Inspection/Report/index.vue      |   7 +-
 3 files changed, 298 insertions(+), 279 deletions(-)

diff --git a/src/components/qtReport/index.vue b/src/components/qtReport/index.vue
index 28c9fa4..8a009b8 100644
--- a/src/components/qtReport/index.vue
+++ b/src/components/qtReport/index.vue
@@ -1,61 +1,64 @@
 <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 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>
@@ -63,271 +66,282 @@ import ReportTable from "@/components/reportTable";
 import { productTypeMap } from "@/lib/variateMap";
 
 export default {
-    components: {
-        ReportTable,
+  components: {
+    ReportTable,
+  },
+  props: {
+    realRes: {
+      require: true,
     },
-    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)
+      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 newTableData = this.deepClone(tableData);
+      let xArr = newTableData.pop();
+      let yArr = newTableData.pop();
+      let dataArr = [];
+      newTableData.forEach((a, index1) => {
+        a.forEach((b, index2) => {
+          dataArr.push([index1, index2, b.count]);
+        });
+      });
+      let echartOption = {
+        tooltip: {
+          position: "top",
         },
-        pdSubType: {
-            require: true,
+        grid: {
+          height: "70%",
+          top: "10%",
         },
-    },
-    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 : {};
-            }
+        xAxis: {
+          type: "category",
+          data: xArr,
+          splitArea: {
+            show: true,
+          },
+          axisLabel: {
+            interval: 0,
+            formatter: function (value) {
+              // 将 x 轴的文字改为竖版显示
+              var str = value.split("");
+              return str.join("\n");
+            },
+          },
         },
-        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: {
+          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%;
+  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>
diff --git a/src/components/rtReport/index.vue b/src/components/rtReport/index.vue
index 8f5f807..774395d 100644
--- a/src/components/rtReport/index.vue
+++ b/src/components/rtReport/index.vue
@@ -431,7 +431,7 @@ export default {
                     },
                 },
                 yAxis: {
-                    name: "误差",
+                    name: "实测值（" + this.getProductDes() + "）",
                     nameTextStyle: {
                         lineHeight: 30,
                         height: 60,
@@ -531,7 +531,7 @@ export default {
                             let num = converted.geometry.coordinates[0];
                             const p = Math.floor(Math.log(num) / Math.LN10);
                             const n = num * 10 ** -p;
-                            return `${n.toFixed(4)}xe${p}`;
+                            return `${n.toFixed(4)}e${p}`;
                         },
                     },
                 },
@@ -551,7 +551,7 @@ export default {
                             let num = converted.geometry.coordinates[1];
                             const p = Math.floor(Math.log(num) / Math.LN10);
                             const n = num * 10 ** -p;
-                            return `${n.toFixed(4)}xe${p}`;
+                            return `${n.toFixed(4)}e${p}`;
                         },
                     },
                 },
diff --git a/src/views/Daichuli/Feedback/Inspection/Report/index.vue b/src/views/Daichuli/Feedback/Inspection/Report/index.vue
index 8433863..28d5b3c 100644
--- a/src/views/Daichuli/Feedback/Inspection/Report/index.vue
+++ b/src/views/Daichuli/Feedback/Inspection/Report/index.vue
@@ -193,7 +193,12 @@ export default {
       this.pdSubType === productSubTypeVal.ACS_TYPESOFLANDCOVER ||
       this.pdSubType === productSubTypeVal.ACS_VEGETATIONPHENOLOGY
     ) {
-      this.base64Data = this.$refs.reportQT.myCharts.getDataURL();
+      this.base64Data = this.$refs.reportQT.myCharts.getDataURL({
+        type: "png",
+        pixelRatio: 1.5, //放大两倍下载，之后压缩到同等大小展示。解决生成图片在移动端模糊问题
+        backgroundColor: "#fff",
+        excludeComponents: ["toolbox", "dataZoom"],
+      });
     } else {
       this.base64Data = this.$refs.reportRT.myCharts.getDataURL({
         type: "png",