<template>
    <div style="margin-top: 10px; margin-left: 10px;">
        <a-row>
            <a-col :md="8" :sm="1">
                <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="handleAdd" type="primary" v-has="'cont:btn'" icon="search">查询</a-button>
                            </span>
                        </a-col>
                    </a-row>
                </a-form>
                </div>
                <a-table
                    ref="table"
                    size="middle"
                    bordered
                    rowKey="id"
                    :columns="columns"
                    :dataSource="dataSource">
            <!--        :locale="myLocale"-->

                    <!-- 字符串超长截取省略号显示-->
                    <span slot="action" slot-scope="text, record">
                        <a @click="handleEdit(record)" v-has="'cont:btn'">选中</a>
                    </span>
                </a-table>
            </a-col>
            <a-col :md="16" :sm="2">
                <a-row>
                    <div style="margin-left: 10px;">
                        <div class="quarter-div">
                            <a-row>
                                <a-col :span="12" style="text-align: center;">
                                    <img style="margin-top: 10px;" :src="guaz" />
                                </a-col>
                                <a-col :span="12">
                                    <div style="margin-top: 14px">1</div>
                                    <div>文件总数</div>
                                </a-col>
                            </a-row>
                        </div>
                        <div class="quarter-div">
                            <a-row>
                                <a-col :span="12" style="text-align: center;">
                                    <img style="margin-top: 10px;" :src="guaz" />
                                </a-col>
                                <a-col :span="12">
                                    <div style="margin-top: 14px">2</div>
                                    <div>图片</div>
                                </a-col>
                            </a-row>
                        </div>
                        <div class="quarter-div">
                            <a-row>
                                <a-col :span="12" style="text-align: center;">
                                    <img style="margin-top: 10px;" :src="guaz" />
                                </a-col>
                                <a-col :span="12">
                                    <div style="margin-top: 14px">3</div>
                                    <div>音频</div>
                                </a-col>
                            </a-row>
                        </div>
                        <div class="quarter-div">
                            <a-row>
                                <a-col :span="12" style="text-align: center;">
                                    <img style="margin-top: 10px;" :src="guaz" />
                                </a-col>
                                <a-col :span="12">
                                    <div style="margin-top: 14px">4</div>
                                    <div>数据库文件</div>
                                </a-col>
                            </a-row>
                        </div>
                        <div class="quarter-div">
                            <a-row>
                                <a-col :span="12" style="text-align: center;">
                                    <img style="margin-top: 10px;" :src="guaz" />
                                </a-col>
                                <a-col :span="12">
                                    <div style="margin-top: 14px">5</div>
                                    <div>视频</div>
                                </a-col>
                            </a-row>
                        </div>
                    </div>
                </a-row>
                <a-row>
                    <a-col :md="12" :sm="2">
                        <div id="cleaningVariance" class="cleaningVariance" ref="cleaningVariance" style="width: 620px; height: 450px; float: left"></div>
                    </a-col>
                    <a-col :md="12" :sm="2">
                        <div id="totalNumberCatalogues" class="totalNumberCatalogues" ref="totalNumberCatalogues"  style="width: 620px; height: 450px; float: right"></div>
                    </a-col>
                </a-row>
            </a-col>
        </a-row>
    </div>
  </template>
  
  <script>
    import { shipModelPageList,
        shipModeldeleteById } from '@/api/ship'
    import { taskCreate,
        taskUpdateById,
        taskQueryById,
        taskPageList,
        taskDistributeTask,
        taskDeleteById } from '@/api/task'
   import { getAction } from '@/api/manage'
   import JEllipsis from "@/components/jeecg/JEllipsis";
   import guaz from '@assets/guaz.png'
   export default {
      name: "statistics",
      components: {
        JEllipsis
      },
      data () {
        return {
          description: '任务统计',
          dataSources: [],
          guaz,
          queryParam: {
            pageNum :1,
            pageSize:20
          },
          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' },
            }
          ]
        }
      },
      mounted() { 
         this.getTables()
         this.loadData();
      },
      computed: {

      },
      destroyed: function () { 
      },
      created () {
  
      },
      methods: {
        dataAdd(){
        },
        getselect(){

        },
        loadData() {
            taskPageList(this.queryParam).then((res) => {
                if (res.success) {
                    this.dataSource = res.result.rows||res.result;
                    if(res.result.total)
                    {
                    this.ipagination.total = res.result.total;
                    }
                } else {
                    this.$message.warning(res.message);
                }
            });
        },
        getTables(){
            this.getcleaningVariance();
            this.gettotalNumberCatalogues();
        },
        getcleaningVariance(){
          var myChart = this.$echarts.init(this.$refs.cleaningVariance);
          var option = {
                title: {
                    text: '数据清洗差异统计'
                },
                legend: {},
                tooltip: {},
                dataset: {
                    source: [
                        ['product', '', ],
                        ['平台', 43.3],
                        ['编队', 83.1],
                        ['航空兵', 86.4],
                        ['陆战队', 72.4],
                        ['作战', 72.4],
                        ['反潜', 72.4],
                        ['舰炮', 72.4]
                    ]
                },
                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);
        },
        gettotalNumberCatalogues(){
          var myChart = this.$echarts.init(this.$refs.totalNumberCatalogues);
          var option = {
            title: {
                text: '数据类型存储占比统计',
                left: 'left'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                bottom: 10,
                left: 'center',
            },
            series: [
                {
                name: '占比',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 1048, name: '平台' },
                    { value: 735, name: '编队' },
                    { value: 580, name: '航空兵' },
                    { value: 484, name: '陆战队' },
                    { value: 300, name: '作战' },
                    { value: 735, name: '反潜' },
                    { value: 580, name: '舰炮' }
                ],
                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';

    .quarter-div {
        width: 15%;
        height: 100px;
        float: left;
        margin-right: 26px;
        background: #edf2ff;
        border: 1px solid #d3e5fd;
        border-radius: 10px;
    }
    /deep/ .ant-layout-sider {
        background: #f6f8ff !important;
        border: 1px solid #dfe4f3;
        border-radius: 10px;
        height: calc(100vh - 180px);
        min-width: 200px !important;
        margin-left: 0px;
        margin-right: 50px;
    }
  </style>