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

<template>
    <div style="margin-left: 10px;">
        <a-row :gutter=20>
            <a-col :md="7">
                
                 <div class="linese"></div>
                <div class="table-page-search-wrapper">
                <a-form layout="inline">
                    <a-row :gutter="30">
                        <a-col :md="18" :sm="10" >
                            <a-form-item label="关键词">
                                <a-input placeholder="请输入搜索关键词" v-model="queryParam.name"></a-input>
                            </a-form-item>
                        </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" v-has="'cont:btn'" icon="search">查询</a-button>
                            </span>
                        </a-col>
                    </a-row>
                </a-form>
                </div>
                <a-table
                    ref="table"
                    size="middle"
                    style="height:calc(100vh - 359px);"
                    bordered
                    rowKey="id"
                    :columns="columns"
                    :dataSource="dataSource"
                    @change="handleTableChange">
                    <span slot="action" slot-scope="text, record">
                        <a @click="handleEdit(record)">选中</a>
                    </span>
                </a-table>
                
            <div class="linese"></div>
            </a-col>
            <a-col :md="17" style="padding-right:20px;">
                    
                <div class="linese"></div>
                <a-row>
                    <div style="margin-left: 10px;">

                        <a-col :span="5" class="quarter-div">
                                <a-col :span="8">
                                    <img src="~@/assets/img/icon-结构化数据条数.png" />
                                </a-col>
                                <a-col :span="16">
                                    <div class="datanum">{{fileNum.totalNumRow}}</div>
                                    <div>结构化数据条数</div>
                                </a-col>
                        </a-col>
                        <a-col :span="5" class="quarter-div">
                                <a-col :span="8">
                                    <img src="~@/assets/img/icon非结构化文件大小.png" />
                                </a-col>
                                <a-col :span="16">
                                    <div class="datanum">{{fileNum.totalFileSize}}GB</div>
                                    <div>非结构化文件(大小)</div>
                                </a-col>
                        </a-col>
                        <a-col :span="4" class="quarter-div">
                                <a-col :span="10">
                                    <img src="~@/assets/img/icon-表数量.png" />
                                </a-col>
                                <a-col :span="14">
                                    <div class="datanum">{{fileNum.tableCount}}</div>
                                    <div>表数量</div>
                                </a-col>
                        </a-col>
                        <a-col :span="4" class="quarter-div">
                                <a-col :span="10">
                                    <img src="~@/assets/img/icon-文件接引数量.png" />
                                </a-col>
                                <a-col :span="14">
                                    <div class="datanum">{{ fileNum.fileLinkCount }}</div>
                                    <div>文件接引数量</div>
                                </a-col>
                        </a-col>
                        <a-col :span="4" class="quarter-div">
                                <a-col :span="10">
                                    <img src="~@/assets/img/icon-文档数量.png" />
                                </a-col>
                                <a-col :span="14">
                                    <div class="datanum">{{ fileNum.docFileCount }}</div>
                                    <div>文档数量</div>
                                </a-col>
                        </a-col>
                    </div>
                </a-row>
                    
                <div class="linese"></div>
                <div class="linese"></div>
                <a-row :gutter="20">
                    <a-col :md="12" :sm="1" style="height:calc(100vh - 420px);">
                        <div class="echartsTitle"><div class="ecicon"></div>数据清洗差异统计</div>
                        <div id="cleaningVariance" ref="cleaningVariance" style="width: 100%; height: calc(100% - 36px);background:rgb(8,34,52);"></div>
                    </a-col>
                    <a-col :md="12" :sm="2" style="height:calc(100vh - 420px);padding-right:20px;">
                        <div class="echartsTitle"><div class="ecicon"></div>数据类型存储占比统计</div>
                        <div id="totalNumberCatalogues" ref="totalNumberCatalogues"  style="width: 100%; height: calc(100% - 36px);background:rgb(8,34,52);"></div>
                    </a-col>
                </a-row>
                <div class="linese"></div>
            </a-col>
        </a-row>
    </div>
  </template>
  
  <script>
   import { shipModelPageList,
        shipModeldeleteById } from '@/api/ship'
    import { getDataAnalysis,
        taskPageList,
        getTaskDataTypeAnalysis } from '@/api/task'
   import { getAction } from '@/api/manage'

   import JEllipsis from "@/components/jeecg/JEllipsis";
   export default {
      name: "statistics",
      components: {
        JEllipsis
      },
      data () {
        return {
          description: '任务统计',
          dataSource: [],
          queryParam: {
            pageNum :1,
            pageSize:20,
            name:""
          },
          columns: [
            {
                title: '#',
                dataIndex: '',
                key:'id',
                width:60,
                align:"id",
                customRender:function (t,r,index) {
                return parseInt(index)+1;
                }
            },
            {
                title: '任务名称',
                align:"name",
                dataIndex: 'name',
            },
            {
                title: '结束时间',
                align:"endTime",
                dataIndex: 'endTime',
            },
            {
                title: '操作',
                dataIndex: 'action',
                align:"center",
                width:180,
                scopedSlots: { customRender: 'action' },
            }
          ],
          fileNum:{
            totalNumRow:0,
            tableCount:0,
            docFileCount:0,
            totalFileSize:0,
            fileLinkCount:0
          },
          cleaningVariancesource:[],
          totalNumberCataloguesData:[]
        }
      },
      mounted() { 
         this.loadData();
      },
      computed: {

      },
      destroyed: function () { 
      },
      created () {
  
      },
      methods: {
        handleTableChange(pagination, filters, sorter) {
            if (Object.keys(sorter).length > 0) {
            this.isorter.column = sorter.field;
            this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
            }
            this.ipagination = pagination;
            this.loadData();
        },
        handleEdit(value){
            this.cleaningVariancesource =[];
            getDataAnalysis({taskId:value.id,startDate:value.startTime,endDate:value.endTime}).then((res) => {
                if (res.success) {
                   res.result.schemaNames.forEach(row => {
                    this.cleaningVariancesource.push([row, parseInt(res.result.numRowMap[row]) ])
                   })
                   this.fileNum.totalNumRow = res.result.totalNumRow
                   this.fileNum.tableCount = res.result.tableCount
                   this.fileNum.docFileCount = res.result.docFileCount
                   this.fileNum.totalFileSize = res.result.totalFileSize
                   this.fileNum.fileLinkCount = res.result.fileLinkCount
                   this.getcleaningVariance();
                } else {
                    this.$message.warning(res.message);
                }
            });
            this.totalNumberCataloguesData =[]
            getTaskDataTypeAnalysis({taskId:value.id,startDate:value.startTime,endDate:value.endTime}).then((res) => {
                if (res.success) {
                   res.result.typeName.forEach(row => {
                    this.totalNumberCataloguesData.push({ value: parseFloat(res.result.numRowMap[row]), name: row })
                   })
                   this.gettotalNumberCatalogues();
                } else {
                    this.$message.warning(res.message);
                }
            });
        },
        loadData() {
            taskPageList(this.queryParam).then((res) => {
                if (res.success) {
                    this.dataSource = res.result.rows||res.result;
                    this.handleEdit(res.result.rows[0]);
                } else {
                    this.$message.warning(res.message);
                }
            });
        },
        getcleaningVariance(){
          var myChart = this.$echarts.init(this.$refs.cleaningVariance);
          var option = {
                legend: {},
                tooltip: {},
                grid:{
                    left:'40px',
                    right:'20px',
                    top:'20px',
                    bottom:'20px'
                },
                dataset: {
                    source: this.cleaningVariancesource
                },
                xAxis: { 
                    type: 'category', 
                    axisLabel:{
                        color: '#fff'
                    },
                    axisLine:{
                        lineStyle:{
                            color: 'rgb(10,45,67)'
                        }
                    },
                    axisLine:{
                        lineStyle:{
                            color: 'rgb(10,45,67)'
                        }
                    },
                },
                yAxis: {
                    axisLabel:{
                        color: '#fff'
                    },
                    splitLine:{
                        lineStyle:{
                            color: 'rgb(10,45,67)'
                        }
                    },
                    axisLine:{
                        lineStyle:{
                            color: 'rgb(10,45,67)'
                        }
                    },
                },
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [{ type: 'bar',barMaxWidth: 20, }],
                color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
            };
           myChart.setOption(option);
        },
        gettotalNumberCatalogues(){
          var myChart = this.$echarts.init(this.$refs.totalNumberCatalogues);
          var option = {
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                name: '占比',
                type: 'pie',
                radius: '80%',
                data: this.totalNumberCataloguesData,
                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>
    .quarter-div {
        height: 100px;
        float: left;
        margin-right: 16px;
        border: 2px solid rgb(11,72,98);
        color: #fff;
        font-size: 16px;
        text-align: center;
        padding: 20px 0;
    }
     .quarter-div div{
        text-align: left;
        line-height: 30px;
     }
     .quarter-div .datanum{
        font-size: 26px;
     }
     
    .quarter-div .ant-col-8,
    .quarter-div .ant-col-10
    {
        text-align: center;
    }
  </style>