From 2103ffa370600e4b1f19243ec7688264c8eaca85 Mon Sep 17 00:00:00 2001
From: wangchengming <15110151257@163.com>
Date: Tue, 17 Jun 2025 10:32:44 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=BB=9F=E8=AE=A1=E5=8F=8A?=
 =?UTF-8?q?=E6=97=A5=E6=9C=9F=E4=B8=8D=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/dashboard/Analysis.vue |  10 +
 src/views/data/dataSearch.vue    |  23 +--
 src/views/data/statistics.vue    | 328 +++++++++++++++++--------------
 src/views/task/statistics.vue    |  32 +--
 4 files changed, 219 insertions(+), 174 deletions(-)

diff --git a/src/views/dashboard/Analysis.vue b/src/views/dashboard/Analysis.vue
index 1521c45..82350d9 100644
--- a/src/views/dashboard/Analysis.vue
+++ b/src/views/dashboard/Analysis.vue
@@ -347,6 +347,9 @@ export default {
         ]
       };
       myChart.setOption(option);
+      window.addEventListener('resize', function () {
+        myChart.resize();
+      });
     },
     getFillMemoryInfo() {
       fillMemoryInfo().then(res => {
@@ -416,6 +419,10 @@ export default {
         ]
       };
       myChart.setOption(option);
+      // 监听窗口大小变化
+      window.addEventListener('resize', function () {
+        myChart.resize();
+      });
     },
     getFillJvmInfo() {
       fillJvmInfo().then(res => {
@@ -484,6 +491,9 @@ export default {
         ]
       };
       myChart.setOption(option);
+      window.addEventListener('resize', function () {
+        myChart.resize();
+      });
     }
   },
 }
diff --git a/src/views/data/dataSearch.vue b/src/views/data/dataSearch.vue
index 0559be6..a1e77f0 100644
--- a/src/views/data/dataSearch.vue
+++ b/src/views/data/dataSearch.vue
@@ -162,12 +162,12 @@ export default {
         if (res.success) {
           this.allTask = res.result
           if (res.result.length > 0) {
-            this.activeTaskId = res.result[0].id 
+            this.activeTaskId = res.result[0].id
             const start = moment(res.result[0].startTime)
-            const end = moment(res.result[0].endTime) 
-            this.defaultTime.push(start, end) 
+            const end = moment(res.result[0].endTime)
+            this.defaultTime.push(start, end)
             this.tableParams.startTime = start.format(this.dateFormat);
-            this.tableParams.endTime = end.format(this.dateFormat) 
+            this.tableParams.endTime = end.format(this.dateFormat)
           }
         } else {
           this.$message.warning(res.message);
@@ -175,13 +175,14 @@ export default {
       })
     },
     handleTaskChange(value) {
-      var curTask = this.allTask.filter(item => item.id == value) 
-      const start = moment(curTask.startTime)
-      const end = moment(curTask.endTime)
-      this.defaultTime.push(start, end)
-      this.tableParams.startTime = start.format(this.dateFormat);
-      this.tableParams.endTime = end.format(this.dateFormat)
-
+      var curTask = this.allTask.filter(item => item.id == value)[0]
+      if (curTask) { 
+        const start = moment(curTask.startTime)
+        const end = moment(curTask.endTime)
+        this.defaultTime.push(start, end)
+        this.tableParams.startTime = start.format(this.dateFormat);
+        this.tableParams.endTime = end.format(this.dateFormat)
+      } 
     },
     calculateScrollY() {
       // 获取父容器高度（需减去表格内其他元素的高度，如分页栏）
diff --git a/src/views/data/statistics.vue b/src/views/data/statistics.vue
index f2aa2f3..245b561 100644
--- a/src/views/data/statistics.vue
+++ b/src/views/data/statistics.vue
@@ -3,96 +3,108 @@
         <a-row :gutter="20">
             <a-col :md="12" :sm="1" style="height:calc(50vh - 125px);">
                 <div class="linese"></div>
-                <div class="echartsTitle"><div class="ecicon"></div>数据清洗差异统计</div>
-                <div id="cleaningVariance" class="cleaningVariance" ref="cleaningVariance" style="width: 100%;background:#e6e9f1; height: calc(100% - 70px);"></div>
+                <div class="echartsTitle">
+                    <div class="ecicon"></div>数据清洗差异统计
+                </div>
+                <div id="cleaningVariance" class="cleaningVariance" ref="cleaningVariance"
+                    style="width: 100%;background:#e6e9f1; height: calc(100% - 70px);"></div>
                 <div class="linese"></div>
             </a-col>
             <a-col :md="12" :sm="2" style="height:calc(50vh - 125px);">
                 <div class="linese"></div>
-                <div class="echartsTitle"><div class="ecicon"></div>数据编目总量统计</div>
-                <div id="totalNumberCatalogues" class="totalNumberCatalogues" ref="totalNumberCatalogues"  style="width: 100%;background:#e6e9f1; height: calc(100% - 70px); "></div>
+                <div class="echartsTitle">
+                    <div class="ecicon"></div>数据编目总量统计
+                </div>
+                <div id="totalNumberCatalogues" class="totalNumberCatalogues" ref="totalNumberCatalogues"
+                    style="width: 100%;background:#e6e9f1; height: calc(100% - 70px); "></div>
                 <div class="linese"></div>
             </a-col>
             <a-col :md="12" :sm="3" style="height:calc(50vh - 125px);">
                 <div class="linese"></div>
-                <div class="echartsTitle"><div class="ecicon"></div>数据类型存储占比统计</div>
-                <div id="catalogingStorage" class="catalogingStorage" ref="catalogingStorage" style="width: 100%;background:#e6e9f1; height: calc(100% - 70px);"></div>
+                <div class="echartsTitle">
+                    <div class="ecicon"></div>数据类型存储占比统计
+                </div>
+                <div id="catalogingStorage" class="catalogingStorage" ref="catalogingStorage"
+                    style="width: 100%;background:#e6e9f1; height: calc(100% - 70px);"></div>
                 <div class="linese"></div>
             </a-col>
             <a-col :md="12" :sm="4" style="height:calc(50vh - 125px);">
                 <div class="linese"></div>
-                <div class="echartsTitle"><div class="ecicon"></div>数据编目存储占比统计</div>
-                <div id="typeStorage" class="typeStorage" ref="typeStorage" style="width: 100%;background:#e6e9f1; height: calc(100% - 70px);"></div>
+                <div class="echartsTitle">
+                    <div class="ecicon"></div>数据编目存储占比统计
+                </div>
+                <div id="typeStorage" class="typeStorage" ref="typeStorage"
+                    style="width: 100%;background:#e6e9f1; height: calc(100% - 70px);"></div>
                 <div class="linese"></div>
             </a-col>
         </a-row>
     </div>
-  </template>
-  
-  <script>
-   import { getAction } from '@/api/manage'
-   import JEllipsis from "@/components/jeecg/JEllipsis";
-    export default {
-      name: "statistics",
-      components: {
+</template>
+
+<script>
+import { getAction } from '@/api/manage'
+import JEllipsis from "@/components/jeecg/JEllipsis";
+export default {
+    name: "statistics",
+    components: {
         JEllipsis
-      },
-      data () {
+    },
+    data() {
         return {
-          description: '数据统计',
-          cleaningVarianceData:[],
-          totalNumberCataloguesData:[],
-          catalogingStorageData:[],
-          typeStorage:[]
+            description: '数据统计',
+            cleaningVarianceData: [],
+            totalNumberCataloguesData: [],
+            catalogingStorageData: [],
+            typeStorage: []
         }
-      },
-      mounted() { 
-            this.getTables()
-      },
-      computed: {
-      },
-      destroyed: function () { 
-      },
-      created () {
-  
-      },
-      methods: {
-        dataAdd(){
+    },
+    mounted() {
+        this.getTables()
+    },
+    computed: {
+    },
+    destroyed: function () {
+    },
+    created() {
+
+    },
+    methods: {
+        dataAdd() {
         },
-        getselect(){
+        getselect() {
 
         },
-        getTables(){
-            this.cleaningVarianceData =[['product', '贴源库', '集成库']];
-            getAction("/dataAnalysis/getClnDiffStats",{}).then((res)=>{
-                if(res.success){
+        getTables() {
+            this.cleaningVarianceData = [['product', '贴源库', '集成库']];
+            getAction("/dataAnalysis/getClnDiffStats", {}).then((res) => {
+                if (res.success) {
                     res.result.schemaNames.forEach(row => {
-                        this.cleaningVarianceData.push([row, parseInt(res.result.numRowOriMap[row]),parseInt(res.result.numRowStaMap[row]) ])
+                        this.cleaningVarianceData.push([row, parseInt(res.result.numRowOriMap[row]), parseInt(res.result.numRowStaMap[row])])
                     })
                     this.getcleaningVariance();
                 }
             });
-            this.totalNumberCataloguesData =[];
-            getAction("/dataAnalysis/getTagStats",{}).then((res)=>{
-                if(res.success){
+            this.totalNumberCataloguesData = [];
+            getAction("/dataAnalysis/getTagStats", {}).then((res) => {
+                if (res.success) {
                     res.result.tagNames.forEach(row => {
-                        this.totalNumberCataloguesData.push([row, parseInt(res.result.tagNumRow[row]) ])
+                        this.totalNumberCataloguesData.push([row, parseInt(res.result.tagNumRow[row])])
                     })
                     this.gettotalNumberCatalogues();
                 }
             });
-            this.catalogingStorageData =[];
-            getAction("/dataAnalysis/getDataTypeAnalysis",{}).then((res)=>{
-                if(res.success){
+            this.catalogingStorageData = [];
+            getAction("/dataAnalysis/getDataTypeAnalysis", {}).then((res) => {
+                if (res.success) {
                     res.result.typeName.forEach(row => {
                         this.catalogingStorageData.push({ value: parseInt(res.result.numRowMap[row]), name: row })
                     })
                     this.getcatalogingStorage();
                 }
             });
-            this.typeStorage =[]
-            getAction("/dataAnalysis/getTagNumRowStats",{}).then((res)=>{
-                if(res.success){
+            this.typeStorage = []
+            getAction("/dataAnalysis/getTagNumRowStats", {}).then((res) => {
+                if (res.success) {
                     res.result.tagNames.forEach(row => {
                         this.typeStorage.push({ value: parseInt(res.result.tagNumRow[row]), name: row })
                     })
@@ -100,45 +112,45 @@
                 }
             });
         },
-        getcleaningVariance(){
-          var myChart = this.$echarts.init(this.$refs.cleaningVariance);
-          var option = {
+        getcleaningVariance() {
+            var myChart = this.$echarts.init(this.$refs.cleaningVariance);
+            var option = {
                 tooltip: {},
-                grid:{
-                    left:'80px',
-                    right:'20px',
-                    top:'20px',
-                    bottom:'30px'
+                grid: {
+                    left: '80px',
+                    right: '20px',
+                    top: '20px',
+                    bottom: '30px'
                 },
-                xAxis: { 
-                    type: 'category' ,
-                    
-                    axisLabel:{
+                xAxis: {
+                    type: 'category',
+
+                    axisLabel: {
                         color: '#6C758B'
                     },
-                    splitLine:{
-                        lineStyle:{
+                    splitLine: {
+                        lineStyle: {
                             color: '#6C758B'
                         }
                     },
-                    axisLine:{
-                        lineStyle:{
+                    axisLine: {
+                        lineStyle: {
                             color: '#6C758B'
                         }
                     },
                 },
                 yAxis: {
-                    
-                    axisLabel:{
+
+                    axisLabel: {
                         color: '#6C758B'
                     },
-                    splitLine:{
-                        lineStyle:{
+                    splitLine: {
+                        lineStyle: {
                             color: '#6C758B'
                         }
                     },
-                    axisLine:{
-                        lineStyle:{
+                    axisLine: {
+                        lineStyle: {
                             color: '#6C758B'
                         }
                     },
@@ -148,117 +160,129 @@
                 },
                 // Declare several bar series, each will be mapped
                 // to a column of dataset.source by default.
-                series: [{ type: 'bar',barMaxWidth: 20,  }, { type: 'bar',barMaxWidth: 20,  }],
-                color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
+                series: [{ type: 'bar', barMaxWidth: 20, }, { type: 'bar', barMaxWidth: 20, }],
+                color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
             };
-           myChart.setOption(option);
+            myChart.setOption(option);
+            window.addEventListener('resize', function () {
+                myChart.resize();
+            });
         },
-        gettotalNumberCatalogues(){
-          var myChart = this.$echarts.init(this.$refs.totalNumberCatalogues);
-          var option = {
+        gettotalNumberCatalogues() {
+            var myChart = this.$echarts.init(this.$refs.totalNumberCatalogues);
+            var option = {
                 tooltip: {},
                 dataset: {
                     source: this.totalNumberCataloguesData
                 },
-                grid:{
-                    left:'40px',
-                    right:'20px',
-                    top:'20px',
-                    bottom:'30px'
+                grid: {
+                    left: '40px',
+                    right: '20px',
+                    top: '20px',
+                    bottom: '30px'
                 },
-                xAxis: { 
-                    type: 'category' ,
-                    
-                    axisLabel:{
+                xAxis: {
+                    type: 'category',
+
+                    axisLabel: {
                         color: '#6C758B'
                     },
-                    splitLine:{
-                        lineStyle:{
+                    splitLine: {
+                        lineStyle: {
                             color: '#6C758B'
                         }
                     },
-                    axisLine:{
-                        lineStyle:{
+                    axisLine: {
+                        lineStyle: {
                             color: '#6C758B'
                         }
                     },
                 },
                 yAxis: {
-                    
-                    axisLabel:{
+
+                    axisLabel: {
                         color: '#6C758B'
                     },
-                    splitLine:{
-                        lineStyle:{
+                    splitLine: {
+                        lineStyle: {
                             color: '#6C758B'
                         }
                     },
-                    axisLine:{
-                        lineStyle:{
+                    axisLine: {
+                        lineStyle: {
                             color: '#6C758B'
                         }
                     },
                 },
                 // Declare several bar series, each will be mapped
                 // to a column of dataset.source by default.
-                series: [{ type: 'bar',barMaxWidth: 30,  }],
-                color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
-            };
-           myChart.setOption(option);
-        },
-        getcatalogingStorage(){
-          var myChart = this.$echarts.init(this.$refs.catalogingStorage);
-          var option = {
-            tooltip: {
-                trigger: 'item'
-            },
-            series: [
-                {
-                name: 'MB',
-                type: 'pie',
-                radius: '70%',
-                data: this.catalogingStorageData,
-                emphasis: {
-                    itemStyle: {
-                    shadowBlur: 10,
-                    shadowOffsetX: 0,
-                    shadowColor: 'rgba(0, 0, 0, 0.5)'
-                    }
-                }
-                }
-            ],
-            color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
+                series: [{ type: 'bar', barMaxWidth: 30, }],
+                color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
             };
             myChart.setOption(option);
+            window.addEventListener('resize', function () {
+                myChart.resize();
+            });
         },
-        gettypeStorage(){
-          var myChart = this.$echarts.init(this.$refs.typeStorage);
-          var option = {
-            tooltip: {
-                trigger: 'item'
-            },
-            series: [
-                {
-                name: '占比',
-                type: 'pie',
-                radius: '70%',
-                data: this.typeStorage,
-                emphasis: {
-                    itemStyle: {
-                    shadowBlur: 10,
-                    shadowOffsetX: 0,
-                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+        getcatalogingStorage() {
+            var myChart = this.$echarts.init(this.$refs.catalogingStorage);
+            var option = {
+                tooltip: {
+                    trigger: 'item'
+                },
+                series: [
+                    {
+                        name: 'MB',
+                        type: 'pie',
+                        radius: '70%',
+                        data: this.catalogingStorageData,
+                        emphasis: {
+                            itemStyle: {
+                                shadowBlur: 10,
+                                shadowOffsetX: 0,
+                                shadowColor: 'rgba(0, 0, 0, 0.5)'
+                            }
+                        }
                     }
-                }
-                }
-            ],
-            color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
+                ],
+                color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
             };
             myChart.setOption(option);
+            window.addEventListener('resize', function () {
+                myChart.resize();
+            });
+        },
+        gettypeStorage() {
+            var myChart = this.$echarts.init(this.$refs.typeStorage);
+            var option = {
+                tooltip: {
+                    trigger: 'item'
+                },
+                series: [
+                    {
+                        name: '占比',
+                        type: 'pie',
+                        radius: '70%',
+                        data: this.typeStorage,
+                        emphasis: {
+                            itemStyle: {
+                                shadowBlur: 10,
+                                shadowOffsetX: 0,
+                                shadowColor: 'rgba(0, 0, 0, 0.5)'
+                            }
+                        }
+                    }
+                ],
+                color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
+            };
+            myChart.setOption(option);
+            window.addEventListener('resize', function () {
+                myChart.resize();
+            });
         },
-      }
     }
-  </script>
-  <style scoped>
-    @import '~@assets/less/common.less';
-  </style>
\ No newline at end of file
+}
+</script>
+<style scoped>
+@import '~@assets/less/common.less';
+</style>
\ No newline at end of file
diff --git a/src/views/task/statistics.vue b/src/views/task/statistics.vue
index ffd980b..d18ccd4 100644
--- a/src/views/task/statistics.vue
+++ b/src/views/task/statistics.vue
@@ -13,15 +13,15 @@
                             </a-col>
                             <a-col :md="6" :sm="10">
                                 <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
-                                    <a-button @click="loadData" type="primary"  icon="search">查询</a-button>
+                                    <a-button @click="loadData" type="primary" icon="search">查询</a-button>
                                 </span>
                             </a-col>
                         </a-row>
                     </a-form>
                 </div>
-                <a-table ref="table" size="middle" style="height:calc(100vh - 343px);background:#e6e9f1;padding: 10px;" bordered rowKey="id" 
-                :custom-row="handleCustomRow"
-                :columns="columns" :dataSource="dataSource" @change="handleTableChange">
+                <a-table ref="table" size="middle" style="height:calc(100vh - 343px);background:#e6e9f1;padding: 10px;"
+                    bordered rowKey="id" :custom-row="handleCustomRow" :columns="columns" :dataSource="dataSource"
+                    @change="handleTableChange">
                     <span slot="action" slot-scope="text, record">
                         <a @click="handleEdit(record)">选中</a>
                     </span>
@@ -83,18 +83,20 @@
 
                 <div class="linese"></div>
                 <div class="linese"></div>
-                <a-row :gutter="20" >
+                <a-row :gutter="20">
                     <a-col :md="12" :sm="1" style="height:calc(100vh - 422px);">
                         <div class="echartsTitle">
                             <div class="ecicon"></div>数据总量统计
                         </div>
-                        <div id="cleaningVariance" ref="cleaningVariance" style="width: 100%; height: calc(100% - 31px);background:#e6e9f1;"></div>
+                        <div id="cleaningVariance" ref="cleaningVariance"
+                            style="width: 100%; height: calc(100% - 31px);background:#e6e9f1;"></div>
                     </a-col>
                     <a-col :md="12" :sm="2" style="height:calc(100vh - 422px);padding-right:20px;">
                         <div class="echartsTitle">
                             <div class="ecicon"></div>数据类型存储占比统计
                         </div>
-                        <div id="totalNumberCatalogues" ref="totalNumberCatalogues" style="width: 100%; height: calc(100% - 31px);background:#e6e9f1;"></div>
+                        <div id="totalNumberCatalogues" ref="totalNumberCatalogues"
+                            style="width: 100%; height: calc(100% - 31px);background:#e6e9f1;"></div>
                     </a-col>
                 </a-row>
                 <div class="linese"></div>
@@ -167,7 +169,7 @@ export default {
             },
             cleaningVariancesource: [],
             totalNumberCataloguesData: [],
-            selectedRowId :null
+            selectedRowId: null
         }
     },
     mounted() {
@@ -189,7 +191,7 @@ export default {
                     this.selectedRowId = record.id;
                 },
                 class: {
-                'row-highlight': this.selectedRowId === record.id
+                    'row-highlight': this.selectedRowId === record.id
                 }
             };
         },
@@ -262,7 +264,7 @@ export default {
                     },
                     axisLine: {
                         lineStyle: {
-                            color:'#6C758B'
+                            color: '#6C758B'
                         }
                     },
                     axisLine: {
@@ -292,6 +294,9 @@ export default {
                 color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
             };
             myChart.setOption(option);
+            window.addEventListener('resize', function () {
+                myChart.resize();
+            });
         },
         gettotalNumberCatalogues() {
             var myChart = this.$echarts.init(this.$refs.totalNumberCatalogues);
@@ -317,6 +322,9 @@ export default {
                 color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
             };
             myChart.setOption(option);
+            window.addEventListener('resize', function () {
+                myChart.resize();
+            });
         },
     }
 }
@@ -341,10 +349,12 @@ export default {
 .quarter-div .datanum {
     font-size: 26px;
 }
+
 /* 高亮样式 */
 /deep/.row-highlight {
-  background-color: #ffffff !important;
+    background-color: #ffffff !important;
 }
+
 .quarter-div .ant-col-8,
 .quarter-div .ant-col-10 {
     text-align: center;