项目初始化

datax-ui/src/api/quality/checkreport.js

@@ -15,3 +15,17 @@ export function pageCheckReport(data) {
     params: data
   })
 }
+
+export function getReportBySource() {
+  return request({
+    url: '/data/quality/checkReports/getReportBySource',
+    method: 'get'
+  })
+}
+
+export function getReportByType() {
+  return request({
+    url: '/data/quality/checkReports/getReportByType',
+    method: 'get'
+  })
+}

datax-ui/src/views/quality/analysisreport/index.vue

 <template>
   <div class="app-container">
-    AnalysisReport
+    <el-row :gutter="20">
+      <el-col :span="10">
+        <el-table
+          :data="reportTableData1"
+          :span-method="objectSpanMethod1"
+          border
+          tooltip-effect="dark"
+          style="width: 100%; margin: 15px 0;"
+        >
+          <el-table-column prop="ruleSourceName" label="数据源" align="center" />
+          <el-table-column prop="ruleLevelName" label="规则级别" align="center" />
+          <el-table-column prop="checkErrorCount" label="报错数量" align="center">
+            <template scope="scope">
+              <el-progress :percentage="scope.row.checkErrorCount" :stroke-width="20" :text-inside="true" :color="colorFormat" :format="cellFormat" />
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+      <el-col :span="10" :offset="4">
+        <el-table
+          :data="reportTableData2"
+          :span-method="objectSpanMethod2"
+          border
+          tooltip-effect="dark"
+          style="width: 100%; margin: 15px 0;"
+        >
+          <el-table-column prop="ruleTypeName" label="字典编码" align="center" />
+          <el-table-column prop="ruleName" label="规则类型" align="center" />
+          <el-table-column prop="checkErrorCount" label="报错数量" align="center" />
+        </el-table>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
+import { getReportBySource, getReportByType } from '@/api/quality/checkreport'
+
 export default {
-  name: 'AnalysisReport'
+  name: 'AnalysisReport',
+  data() {
+    return {
+      spanArr1: [],
+      position1: 0,
+      reportTableData1: [],
+      spanArr2: [],
+      position2: 0,
+      reportTableData2: []
+    }
+  },
+  created() {
+    this.getReportBySource()
+    this.getReportByType()
+  },
+  methods: {
+    getReportBySource() {
+      getReportBySource().then(response => {
+        if (response.success) {
+          this.reportTableData1 = response.data
+          this.rowspan1()
+        }
+      })
+    },
+    getReportByType() {
+      getReportByType().then(response => {
+        if (response.success) {
+          this.reportTableData2 = response.data
+          this.rowspan2()
+        }
+      })
+    },
+    rowspan1() {
+      this.reportTableData1.forEach((item, index) => {
+        if (index === 0) {
+          this.spanArr1.push(1)
+          this.position1 = 0
+        } else {
+          if (this.reportTableData1[index].ruleSourceId === this.reportTableData1[index - 1].ruleSourceId) {
+            this.spanArr1[this.position1] += 1
+            this.spanArr1.push(0)
+          } else {
+            this.spanArr1.push(1)
+            this.position1 = index
+          }
+        }
+      })
+    },
+    objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 0) {
+        const _row = this.spanArr1[rowIndex]
+        const _col = _row > 0 ? 1 : 0
+        return {
+          rowspan: _row,
+          colspan: _col
+        }
+      }
+    },
+    rowspan2() {
+      this.reportTableData2.forEach((item, index) => {
+        if (index === 0) {
+          this.spanArr2.push(1)
+          this.position2 = 0
+        } else {
+          if (this.reportTableData2[index].ruleTypeId === this.reportTableData2[index - 1].ruleTypeId) {
+            this.spanArr2[this.position2] += 1
+            this.spanArr2.push(0)
+          } else {
+            this.spanArr2.push(1)
+            this.position2 = index
+          }
+        }
+      })
+    },
+    objectSpanMethod2({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 0) {
+        const _row = this.spanArr2[rowIndex]
+        const _col = _row > 0 ? 1 : 0
+        return {
+          rowspan: _row,
+          colspan: _col
+        }
+      }
+    },
+    colorFormat(percentage) {
+      if (percentage < 5) {
+        return '#67c23a'
+      } else if (percentage < 10) {
+        return '#909399'
+      } else {
+        return '#e6a23c'
+      }
+    },
+    cellFormat(percentage) {
+      return `${percentage}`
+    }
+  }
 }
 </script>