IDCDatasync-vue/src/views/data/statistics.vue

<template>
    <div style="margin-top: 10px; margin-left: 10px;">
        <a-row>
            <a-col :md="12" :sm="1">
                <div id="cleaningVariance" class="cleaningVariance" ref="cleaningVariance" style="width: 820px; height: 450px; float: left"></div>
            </a-col>
            <a-col :md="12" :sm="2">
                <div id="totalNumberCatalogues" class="totalNumberCatalogues" ref="totalNumberCatalogues"  style="width: 820px; height: 450px; float: right"></div>
            </a-col>
        </a-row>
        <a-row>
            <a-col :md="12" :sm="3">
                <div id="catalogingStorage" class="catalogingStorage" ref="catalogingStorage" style="width: 820px; height: 450px;float: left"></div>
            </a-col>
            <a-col :md="12" :sm="4">
                <div id="typeStorage" class="typeStorage" ref="typeStorage" style="width: 820px; height: 450px;float: right"></div>
            </a-col>
        </a-row>
    </div>
  </template>
  
  <script>
   import { getAction } from '@/api/manage'
   import JEllipsis from "@/components/jeecg/JEllipsis";
    export default {
      name: "statistics",
      components: {
        JEllipsis
      },
      data () {
        return {
          description: '数据统计',
          cleaningVarianceData:[],
          totalNumberCataloguesData:[],
          catalogingStorageData:[],
          typeStorage:[]
        }
      },
      mounted() { 
        this.getTables()
      },
      computed: {
      },
      destroyed: function () { 
      },
      created () {
  
      },
      methods: {
        dataAdd(){
        },
        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.getcleaningVariance();
                }
            });
            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.gettotalNumberCatalogues();
                }
            });
            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){
                    res.result.tagNames.forEach(row => {
                        this.typeStorage.push({ value: parseInt(res.result.tagNumRow[row]), name: row })
                    })
                    this.gettypeStorage();
                }
            });
        },
        getcleaningVariance(){
          var myChart = this.$echarts.init(this.$refs.cleaningVariance);
          var option = {
                title: {
                    text: '数据清洗差异统计'
                },
                legend: {
                    bottom: 10,
                    left: 'center'
                },
                tooltip: {},
                dataset: {
                    source: this.cleaningVarianceData
                },
                xAxis: { type: 'category' },
                yAxis: {},
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [{ type: 'bar' }, { type: 'bar' }],
                color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
            };
           myChart.setOption(option);
        },
        gettotalNumberCatalogues(){
          var myChart = this.$echarts.init(this.$refs.totalNumberCatalogues);
          var option = {
                title: {
                    text: '数据编目总量统计'
                },
                legend: {
                    bottom: 10,
                    left: 'center'},
                tooltip: {},
                dataset: {
                    source: this.totalNumberCataloguesData
                },
                xAxis: { type: 'category' },
                yAxis: {},
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [{ type: 'bar' }],
                color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
            };
           myChart.setOption(option);
        },
        getcatalogingStorage(){
          var myChart = this.$echarts.init(this.$refs.catalogingStorage);
          var option = {
            title: {
                text: '数据类型存储占比统计',
                left: 'left'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                bottom: 10,
                left: 'center',
            },
            series: [
                {
                name: '占比',
                type: 'pie',
                radius: '50%',
                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']
            };
            myChart.setOption(option);
        },
        gettypeStorage(){
          var myChart = this.$echarts.init(this.$refs.typeStorage);
          var option = {
            title: {
                text: '数据编目存储占比统计',
                left: 'left'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                bottom: 10,
                left: 'center',
            },
            series: [
                {
                name: '占比',
                type: 'pie',
                radius: '50%',
                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);
        },
      }
    }
  </script>
  <style scoped>
    @import '~@assets/less/common.less';
  </style>