tnc-fe/src/components/layouts/stock/WorkTable.vue

<template>

  <div>

    <a-row :gutter="0" style="height: 800px">
      <a-col :span="0" style="height: 100%;" v-if='taskType!=="3"'>
        <a-card title="任务选择" :bordered="false" style="height: 100%">
          <a-directory-tree
            style="height: auto"
            v-model:expandedKeys="expandedKeys"
            v-model:selectedKeys="selectedKeys"
            multiple
            :tree-data="treeData"
            @expand="onExpand"
            @select="onTreeNodeSelect"
          ></a-directory-tree>
        </a-card>
      </a-col>
      <a-col :span="0" style="height: 100%;" v-if='taskType==="3"'>
      </a-col>
      <!--筛选条件-->

       <a-row>
         <a-col :span="24">
           <a-form layout="inline">
             <a-row :gutter="24">

               <a-col :xl="16" :lg="7" :md="8" :sm="24">
                 <a-form-item label="稽核工作日期范围">
                   <a-range-picker @change="handleChange" v-model:value="taskDate"/>
                   <a-radio-group @change="changeReportDate()" style="padding-left: 10px" v-model:value="latestDate" button-style="solid">
                     <a-radio-button value="7">最近7天</a-radio-button>
                     <a-radio-button value="30">最近30天</a-radio-button>
                     <a-radio-button value="180">最近180天</a-radio-button>
                   </a-radio-group>
                 </a-form-item>
               </a-col>
               <a-col   :xl="8" :lg="7" :md="12" :sm="24">
                 <a-form-item label="稽核类型">
                   <a-select placeholder="请选择稽核类型"  @change="changeReportDate()" style='width: 180px' v-model="taskType" >
                     <a-select-option v-for="item in statusList" :value="item.value"    @change="changeReportDate()">
                       {{ item.text }}
                     </a-select-option>
                   </a-select>
                   <!--                  <j-dict-select-tag placeholder="请选择稽核类型" v-model:value="taskType" @change="changeReportDate()" style='width: 180px'  dictCode="sms_check_task_type" />-->
                 </a-form-item>
               </a-col>
             </a-row>
           </a-form>
         </a-col>
         <a-col :span="4" style="padding-top: 10px">
           <a-card>
             <a-statistic
               title="客户总数"
               :value="allCount"
               :precision="0"
               suffix="个"
               :value-style="{ color: '#fa073f' }"
               style="margin-right: 50px"
             >
               <template #prefix>

               </template>
             </a-statistic>
           </a-card>
         </a-col>
        <a-col :span="5" style="padding-top: 10px">
          <a-card>
            <a-statistic
              title="未处理客户数量"
              :value="toImproveUser"
              :precision="0"
              suffix="个"
              :value-style="{ color: '#fa073f' }"
              style="margin-right: 50px"
            >
              <template #prefix>
                <arrow-up-outlined/>
              </template>
            </a-statistic>
          </a-card>
        </a-col>
         <a-col :span="5" style="padding-top: 10px">
           <a-card>
             <a-statistic
               title="未完善客户数量"
               :value="wanshan"
               :precision="0"
               suffix="个"
               :value-style="{ color: '#fa073f' }"
               style="margin-right: 50px"
             >
               <template #prefix>
                 <arrow-up-outlined/>
               </template>
             </a-statistic>
           </a-card>
         </a-col>
        <a-col :span="5" style="padding-top: 10px">
          <a-card>
            <a-statistic
              title="待整改客户数量"
              :value="tobeRectified"
              :precision="0"
              suffix="个"
              :value-style="{ color: '#810320' }"
              style="margin-right: 50px"
            >
              <template #prefix>
                <arrow-up-outlined/>
              </template>
            </a-statistic>
          </a-card>
        </a-col>
        <a-col :span="5" style="padding-top: 10px">
          <a-card>
            <a-statistic
              title="待稽核客户数量"
              :value="toBeAudited"
              :precision="0"
              suffix="个"
              :value-style="{ color: '#0a0a09' }"
              style="margin-right: 50px"
            >
              <template #prefix>
                <arrow-up-outlined/>
              </template>
            </a-statistic>
          </a-card>
        </a-col>
        <a-col :span="4" style="padding-top: 10px">
          <a-card>
            <a-statistic
              title="稽核通过客户数量"
              :value="auditPassed"
              :precision="0"
              suffix="个"
              :value-style="{ color: '#3f8600' }"
              style="margin-right: 50px"
            >
              <template #prefix>
                <arrow-up-outlined/>
              </template>
            </a-statistic>
          </a-card>
        </a-col>

         <a-col :span="5" style="padding-top: 10px">
           <a-card>
             <a-statistic
               title="稽核通过率"
               :value="tgl"
               :precision="0"
               suffix=""
               :value-style="{ color: '#3f8600' }"
               style="margin-right: 50px"
             >
               <template #prefix>
                 <arrow-up-outlined/>
               </template>
             </a-statistic>
           </a-card>
         </a-col>
         <a-col :span="5" style="padding-top: 10px">
           <a-card>
             <a-statistic
               title="一次稽核通过率"
               :value="yctgl"
               :precision="0"
               suffix=""
               :value-style="{ color: '#21b43f' }"
               style="margin-right: 50px"
             >
               <template #prefix>
                 <arrow-up-outlined/>
               </template>
             </a-statistic>
           </a-card>
         </a-col>
         <a-col :span="5" style="padding-top: 10px">
           <a-card>
             <a-statistic
               title="整改完成率"
               :value="zgl"
               :precision="0"
               suffix=""
               :value-style="{ color: '#860074' }"
               style="margin-right: 50px"
             >
               <template #prefix>
                 <arrow-up-outlined/>
               </template>
             </a-statistic>
           </a-card>
         </a-col>
        <a-col :span="24" style="top: 10px">
          <a-card title="稽核概况统计" :bordered="false">
            <div id="statusRefusePie" ref="statusRefusePie" style="width:100%;height:500px"></div>
          </a-card>
        </a-col>
         <a-col :span="24" style="top: 10px">
           <a-card title="稽核整改率" :bordered="false" style='height: 400px'>
             <div id="rectificationRate" ref="rectificationRate" style="width:100%;height:400px"></div>
           </a-card>
         </a-col>
         <a-col :span="24" style="top: 10px">
           <a-card title=" " :bordered="false">
             <h2 style='text-align:center'>稽核异常报表</h2>
             <a-col  >
               <div class="table-page-search-wrapper">
                 <a-form layout="inline" @keyup.enter.native="searchQuery">
                   <a-row :gutter="24">
                     <a-col :xl="5" :lg="7" :md="8" :sm="24">
                       <a-form-item label="客户编号">
                         <j-input placeholder="请输入客户编号" v-model="queryParam.customerNo"  ></j-input>
                       </a-form-item>
                     </a-col>
                     <a-col :xl="5" :lg="7" :md="8" :sm="24">
                       <a-form-item label="用户编号">
                         <j-input placeholder="用户编号"  v-model="queryParam.userNo"  ></j-input>
                       </a-form-item>
                     </a-col>
                     <a-col :xl="5" :lg="7" :md="8" :sm="24">
                       <a-form-item label="整改次数">
                         <a-input-number style='width: 200px' id="inputNumber" v-model="queryParam.count" :min="1" :max="100"  />

                       </a-form-item>
                     </a-col>


                     <a-col :xl="5" :lg="7" :md="8" :sm="24">
                       <a-form-item label="稽核类型">
                         <j-dict-select-tag placeholder="请选择稽核类型"  v-model="queryParam.type"  dictCode="sms_check_task_type" />
                       </a-form-item>
                     </a-col>

                     <template v-if="toggleSearchStatus">


<!--                       <a-col :xl="10" :lg="11" :md="12" :sm="24">-->
<!--                         <a-form-item label="稽核开始时间">-->
<!--                           <j-date :show-time="true" date-format="YYYY-MM-DD" placeholder="请选择开始时间" class="query-group-cust" ></j-date>-->

<!--                         </a-form-item>-->
<!--                         <a-form-item label="稽核结束时间">-->
<!--                           <j-date :show-time="true" date-format="YYYY-MM-DD" placeholder="请选择结束时间" class="query-group-cust" ></j-date>-->
<!--                         </a-form-item>-->
<!--                       </a-col>-->
                     </template>
                     <div class="table-operator" style='float: right'>
                       <!-- 高级查询区域 -->
                       <a-dropdown v-if="selectedRowKeys.length > 0">
                         <a-menu slot="overlay">
                           <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
                         </a-menu>
                         <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
                       </a-dropdown>
<!--                       <a-button type="primary" icon="download" @click="handleExportXls('稽核任务')">导出</a-button>-->
                       <a-button type="primary" @click="searchQuery()" icon="search" >查询</a-button>
                       <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
<!--                       <a @click="handleToggleSearch" style="margin-left: 8px">-->
<!--                         {{ toggleSearchStatus ? '收起' : '展开' }}-->
<!--                         <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>-->
<!--                       </a>-->

                     </div>
                   </a-row>
                 </a-form>

               </div>
             </a-col>


             <div>
               <a-table
                 ref="table"
                 size="middle"
                 :scroll="{x:true}"
                 bordered
                 rowKey="id"
                 :columns="columns"
                 :dataSource="dataSource"
                 :pagination="ipagination"
                 :loading="loading"
                 :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
                 class="j-table-force-nowrap"
                 @change="handleTableChange">

                 <template slot="tooltipSlot" slot-scope="text, record, index">
                   <a-tooltip placement="topLeft" :title="text">
                     <div style="width:150px; overflow:hidden;">{{text}}</div>
                   </a-tooltip>
                 </template>
               </a-table>
             </div>
             <!-- table区域 end -->
             <div style="width: 600px;height:5px;"></div>
           </a-card>
         </a-col>
      </a-row>
    </a-row>


  </div>

  <!-- 查询区域 -->


</template>

<script>


import moment from 'moment';
import {getAction} from "@api/manage";
import * as echarts from 'echarts';
import { JeecgListMixin } from '@/mixins/JeecgListMixin'

export default {
  name: 'SmsCheckWorkLogList',
  mixins:[JeecgListMixin],
  data() {
    return {
      description: '稽核工作日志管理页面',
      taskDate: '',
      taskType:null,
      statusList:
      //1:行短稽核 2：物联网业务稽核 3.复开审批 4.中继线稽核
        [{
          text: '全部',
          value: null,
        },{
          text: '行短稽核',
          value: 1,
        },{
          text: '物联网业务稽核',
          value: 2,
        }, {
          text: '防诈骗方向复开',
          value: 3,
        },{
          text: '中继线稽核',
          value: 4,
        }],
      url: {
        "warningCountGroup": "/smsCheck/customerInfo/status/countGroupCheck",
        "statusRefuse": "/smsCheck/customerInfo/status/refuse",
        "list": "/smsCheck/customerInfo/status/getBillList",
        "taskList": "/smsCheck/task/list",
        "dateList": "/smsCheck/task/year/list",
        //基本信息 规范信息  附件资料 异常稽核统计
        "checkStateCount": "/smsCheck/workLog/check/state/count",
        "abnormalCreateTime": "/smsCheck/workLog/check/abnormal/count"
      },
      // '1': '未完善',
      statusMap: {
        '0': '未处理',
        '1':'未完善',
        '2': '待稽核',
        '4': '待整改',
        "5": '稽核通过',
      },
      abnormalMap: {
        "basicCheckState": "基本信息异常",
        "standardState": "规范信息异常",
        "dataState": "附件资料异常异常"
      },
      dataSource:[
        {
          "id": "1712649352008179713",
          "dataId": "1712660980103651330",
          "dataLogId": "1712661582091132929",
          "taskId": "1712648713974849538",
          "customerNo": "200001817629",
          "customerName": null,
          "smsNumber": null,
          "userNo": "行短稽核任务1",
          "networkAccessTime": "2010-10-11",
          "networkAccessTimeEnd": "2012-10-11",
          "userState": "在用",
          "staffInfo": "张文超(104009353459)(B03619)",
          "staffUsername": "zhangwenchao",
          "staffName": "待处理",
          "number": "5次",
          "field": "法人联系方式",
          "staffNameStart": "2023-10-10 19:23:17",

          "staffNameEnd": "2023-10-12 20:33:17",
          "staffNameTime": "50小时",
          "staffNo": "1000",
          "staffDeptLevel2": "北区电信局(2800000000)",
          "staffDeptLevel2Name": "北区电信局",
          "staffDeptLevel2No": "孙可",
          "staffDeptLevel3": "其他（校园中心）(103013215530)",
          "staffDeptLevel3Name": "其他（校园中心）",
          "staffDeptLevel3No": "103013215530",
          "userOpenState": null,
          "smsNumberPrefix": null,
          "smsNumberUsage": null,
          "accountManager": null,
          "accountManagerPhone": null,
          "customerContacts": '行短稽核任务',
          "customerContactsPhone": null,
          "contractExpireTime": null,
          "smsNumberCertificateExpireTime": null,
          "recordNoticeExpireTime": null,
          "valueAddedLicenceExpireTime": null,
          "businessLicenceExpireTime": null,
          "contractOpenCustomerSame": null,
          "groupPriceApproval": null,
          "dataComplete": null,
          "rectifyReformOver": null,
          "checkState": 500,
          "description": null,
          "delFlag": 0,
          "createBy": "admin",
          "createTime": "2023-10-13 10:00:00",
          "updateBy": null,
          "updateTime": null,
          "sysOrgCode": "A03A02",
          "submitSpecialDate": null,
          "shutdownLabel": null,
          "shutdownLabelDate": null,
          "reopenTime": null,
          "materialLabel": null,
          "nameFindCompliance": null,
          "type": null,
          "checkState_dictText": "待稽核"
        },
        {
          "id": "1712649353086115842",
          "dataId": null,
          "dataLogId": null,
          "taskId": "1712648713974849538",
          "customerNo": "200002340549",
          "customerName": null,
          "smsNumber": null,
          "userNo": "行短稽核任务1",
          "networkAccessTime": "2012-02-14",
          "networkAccessTimeEnd": "2012-10-11",
          "userState": "在用",
          "staffInfo": "毛捷(1004320610)(A00776)",
          "staffUsername": "A00776",
          "staffName": "已处理",
          "number": "5次",
          "field": "客户经理手机号",
          "staffNameStart": "2023-10-10 19:23:17",
          "staffNameEnd": "2023-10-12 15:16:17",
          "staffNameTime": "44小时",
          "staffNo": "2000",
          "staffDeptLevel2": "北区电信局(2800000000)",
          "staffDeptLevel2Name": "北区电信局",
          "staffDeptLevel2No": "赵六",
          "staffDeptLevel3": "北区电信局(2800000000)",
          "staffDeptLevel3Name": "北区电信局",
          "staffDeptLevel3No": "2800000000",
          "userOpenState": null,
          "smsNumberPrefix": null,
          "smsNumberUsage": null,
          "accountManager": null,
          "accountManagerPhone": null,
          "customerContacts": '行短稽核任务',
          "customerContactsPhone": null,
          "contractExpireTime": null,
          "smsNumberCertificateExpireTime": null,
          "recordNoticeExpireTime": null,
          "valueAddedLicenceExpireTime": null,
          "businessLicenceExpireTime": null,
          "contractOpenCustomerSame": null,
          "groupPriceApproval": null,
          "dataComplete": null,
          "rectifyReformOver": null,
          "checkState": 500,
          "description": null,
          "delFlag": 0,
          "createBy": "admin",
          "createTime": "2023-10-13 10:00:00",
          "updateBy": null,
          "updateTime": null,
          "sysOrgCode": "A03A02",
          "submitSpecialDate": null,
          "shutdownLabel": null,
          "shutdownLabelDate": null,
          "reopenTime": null,
          "materialLabel": null,
          "nameFindCompliance": null,
          "type": null,
          "checkState_dictText": "未处理"
        },
        {
          "id": "1712649343284027393",
          "dataId": null,
          "dataLogId": null,
          "taskId": "17126487139748495f38",
          "customerNo": "104003061446",
          "customerName": null,
          "smsNumber": null,
          "userNo": "中继线稽核任务1",
          "networkAccessTime": "2013-08-05",
          "networkAccessTimeEnd": "2012-10-11",
          "userState": "在用",
          "staffInfo": "张文超(104009353459)(B03619)",
          "staffUsername": "zhangwenchao",
          "staffName": "已处理",
          "number": "5次",
          "field": "使用场景",
          "staffNameStart": "2023-10-10 19:23:17",
          "staffNameEnd": "2023-10-12 13:33:00",
          "staffNameTime": "43小时",
          "staffNo": "1500",
          "staffDeptLevel2": "北区电信局(2800000000)",
          "staffDeptLevel2Name": "北区电信局",
          "staffDeptLevel2No": "王武",
          "staffDeptLevel3": "其他（校园中心）(103013215530)",
          "staffDeptLevel3Name": "其他（校园中心）",
          "staffDeptLevel3No": "103013215530",
          "userOpenState": null,
          "smsNumberPrefix": null,
          "smsNumberUsage": null,
          "accountManager": null,
          "accountManagerPhone": null,
          "customerContacts": '中继线稽核',
          "customerContactsPhone": null,
          "contractExpireTime": null,
          "smsNumberCertificateExpireTime": null,
          "recordNoticeExpireTime": null,
          "valueAddedLicenceExpireTime": null,
          "businessLicenceExpireTime": null,
          "contractOpenCustomerSame": null,
          "groupPriceApproval": null,
          "dataComplete": null,
          "rectifyReformOver": null,
          "checkState": 500,
          "description": null,
          "delFlag": 0,
          "createBy": "admin",
          "createTime": "2023-10-13 09:59:58",
          "updateBy": null,
          "updateTime": null,
          "sysOrgCode": "A03A02",
          "submitSpecialDate": null,
          "shutdownLabel": null,
          "shutdownLabelDate": null,
          "reopenTime": null,
          "materialLabel": null,
          "nameFindCompliance": null,
          "type": null,
          "checkState_dictText": "未处理"
        },
        {
          "id": "1712649344286466049",
          "dataId": null,
          "dataLogId": null,
          "taskId": "1712648713974849538",
          "customerNo": "104003061446",
          "customerName": null,
          "smsNumber": null,
          "userNo": "特审复开任务1",
          "networkAccessTime": "2013-04-03",
          "networkAccessTimeEnd": "2012-10-11",
          "userState": "在用",
          "staffInfo": "张文超(104009353459)(B03619)",
          "staffUsername": "zhangwenchao",
          "staffName": "已处理",
          "number": "5次",
          "field": "营业执照有效期是否长期",
          "staffNameStart": "2023-10-10 19:23:17",
          "staffNameEnd": "2023-10-11 20:33:15",
          "staffNameTime": "25小时",
          "staffNo": "2500",
          "staffDeptLevel2": "北区电信局(2800000000)",
          "staffDeptLevel2Name": "北区电信局",
          "staffDeptLevel2No": "李四",
          "staffDeptLevel3": "其他（校园中心）(103013215530)",
          "staffDeptLevel3Name": "其他（校园中心）",
          "staffDeptLevel3No": "103013215530",
          "userOpenState": null,
          "smsNumberPrefix": null,
          "smsNumberUsage": null,
          "accountManager": null,
          "accountManagerPhone": null,
          "customerContacts": '特审复开稽核',
          "customerContactsPhone": null,
          "contractExpireTime": null,
          "smsNumberCertificateExpireTime": null,
          "recordNoticeExpireTime": null,
          "valueAddedLicenceExpireTime": null,
          "businessLicenceExpireTime": null,
          "contractOpenCustomerSame": null,
          "groupPriceApproval": null,
          "dataComplete": null,
          "rectifyReformOver": null,
          "checkState": 300,
          "description": null,
          "delFlag": 0,
          "createBy": "admin",
          "createTime": "2023-10-13 09:59:58",
          "updateBy": null,
          "updateTime": null,
          "sysOrgCode": "A03A02",
          "submitSpecialDate": null,
          "shutdownLabel": null,
          "shutdownLabelDate": null,
          "reopenTime": null,
          "materialLabel": null,
          "nameFindCompliance": null,
          "type": null,
          "checkState_dictText": "未处理"
        },
        {
          "id": "1712649345687363585",
          "dataId": null,
          "dataLogId": null,
          "taskId": "1712648713974849538",
          "customerNo": "104004941911",
          "customerName": null,
          "smsNumber": null,
          "userNo": "特审复开任务1",
          "networkAccessTime": "2012-06-01",
          "networkAccessTimeEnd": "2012-10-11",
          "userState": "在用",
          "staffInfo": "张文超(104009353459)(B03619)",
          "staffUsername": "zhangwenchao",
          "staffName": "处理中",
          "number": "5次",
          "field": "服务号码（全）",
          "staffNameStart": "2023-10-10 19:23:17",
          "staffNameEnd": "2023-10-12 19:33:17",
          "staffNameTime": "10小时",
          "staffNo": "3000",
          "staffDeptLevel2": "北区电信局(2800000000)",
          "staffDeptLevel2Name": "北区电信局",
          "staffDeptLevel2No": "张三",
          "staffDeptLevel3": "其他（校园中心）(103013215530)",
          "staffDeptLevel3Name": "其他（校园中心）",
          "staffDeptLevel3No": "103013215530",
          "userOpenState": null,
          "smsNumberPrefix": null,
          "smsNumberUsage": null,
          "accountManager": null,
          "accountManagerPhone": null,
          "customerContacts": '特审复开稽核',
          "customerContactsPhone": null,
          "contractExpireTime": null,
          "smsNumberCertificateExpireTime": null,
          "recordNoticeExpireTime": null,
          "valueAddedLicenceExpireTime": null,
          "businessLicenceExpireTime": null,
          "contractOpenCustomerSame": null,
          "groupPriceApproval": null,
          "dataComplete": null,
          "rectifyReformOver": null,
          "checkState": 500,
          "description": null,
          "delFlag": 0,
          "createBy": "admin",
          "createTime": "2023-10-13 09:59:58",
          "updateBy": null,
          "updateTime": null,
          "sysOrgCode": "A03A02",
          "submitSpecialDate": null,
          "shutdownLabel": null,
          "shutdownLabelDate": null,
          "reopenTime": null,
          "materialLabel": null,
          "nameFindCompliance": null,
          "type": null,
          "checkState_dictText": "未处理"
        }
      ],
      columns: [

        {
          title:'稽核类型',
          align:"center",
          sorter: true,
          dataIndex: 'type',
          customRender: function (text) {
            //客户信息所属类型：1:行短稽核 2：物联网业务稽核 3.复开审批 4.中继线稽核
            if (text == '1') {
              return "行短稽核";
            } else if (text == "2") {
              return "物联网业务稽核";
            }  else if (text == "3") {
              return "防诈骗方向复开";
            }  else if (text == "4") {
              return "中继线稽核";
            }
          }
        },
        {
          title:'任务名称',
          align:"center",
          dataIndex: 'task_name'
        },
        {
          title:'客户编号',
          align:"center",
          sorter: true,
          dataIndex: 'customer_no'
        },
        {
          title:'用户编号',
          align:"center",
          sorter: true,
          dataIndex: 'user_no',
          scopedSlots: { customRender: 'tooltipSlot' }
        },

        {
          title:'任务开始时间',
          align:"center",
          sorter: true,
          dataIndex: 'task_start_time'
        }, {
          title:'任务结束时间',
          align:"center",
          sorter: true,
          dataIndex: 'task_end_time'
        },
        {
          title: '当前处理人',
          align: "center",
          dataIndex: 'staff_no'
        },
        {
          title:'整改次数',
          align:"center",
          dataIndex: 'c'
        } ,
        {
          title: '当前状态',
          align: "center",
          dataIndex: 'check_state',
          customRender: function(text) {
            //客户信息所属类型：1:行短稽核 2：物联网业务稽核 3.复开审批 4.中继线稽核
            if (text == '0') {
              return "未处理";
            } else if (text == "1") {
              return "未完善";
            } else if (text == "2") {
              return "待稽核";
            } else if (text == "4") {
              return "待整改";
            } else if (text == "5") {
              return "稽核通过";
            }
          }
        }
      ],
      /* table选中keys*/
      selectedRowKeys: [],
      /* table选中records*/
      selectionRows: [],
      /* 查询折叠 */
      toggleSearchStatus:false,
      /* 高级查询条件生效状态 */
      superQueryFlag:false,
      /* 高级查询条件 */
      superQueryParams: '',
      /** 高级查询拼接方式 */
      superQueryMatchType: 'and',
      /* 自动查询 默认开启 */
      autoSearch: true,
      $statusRefusePie: "",
      $abnormalCheckPie: "",
      $abnormalCheckHistogram: "",
      $abnormalCreateTimeTrend: "",
      toImproveUser: 0,
      allCount:0,
      wanshan: 0,
      latestDate: '180',
      toBeAudited: 0,
      tobeRectified: 0,
      auditPassed: 0,
      zgl:0,
      tgl:0,
      yctgl:0,
      treeData: [],
      expandedKeys: ['2022', '2022-10'],
      selectedKeys: {},
      statusAuditPieData: [],
      canvas: {},
      taskId:null,

    }
  },
  created() {
    const waterMarkText = '业务风险管控智能化系统';
    this.canvas = document.createElement('canvas');
    const ctx = this.canvas.getContext('2d');
    this.canvas.width = this.canvas.height = 100;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.globalAlpha = 0.08;
    ctx.font = '20px Microsoft Yahei';
    ctx.translate(50, 50);
    ctx.rotate(-Math.PI / 4);
    ctx.fillText(waterMarkText, 0, 0);

    //初始化日期 默认最近180天
    this.taskDate = [this.getRecentDay(parseInt(this.latestDate)), this.getRecentDay(0)]
    this.warningCountGroup()
    //稽核任务列表（树）
    this.taskList();
    //稽核概况统计
    this.statusRefuse();
    //稽核历史异常分析
    this.checkStateCount(this.url.checkStateCount);
    this.abnormalCreateTime();
    //this.getBillList();
    this.loadData(1);
  },
  computed: {},

  methods: {

    changeReportDate(a, event){
      this.taskDate = [this.getRecentDay(parseInt(this.latestDate)), this.getRecentDay(0)]
      this.statusRefuse(this.taskId);
      this.checkStateCount(this.url.checkStateCount, this.taskId);
      this.abnormalCreateTime(this.taskId);
      this.warningCountGroup()
    },

    handleChange(value,model){

      this.taskDate = [this.getDate(this.taskDate[0]), this.getDate(this.taskDate[1])]

      this.statusRefuse(this.taskId);
      this.warningCountGroup()
    },
    // handleChange2(value,model){
    //   this.taskDate = model
    //   // model 当前value
    //   this.statusRefuse(this.taskId);
    //   this.checkStateCount(this.url.checkStateCount, this.taskId);
    //   this.abnormalCreateTime(this.taskId);
    //
    // },

    getBillList(){
      getAction(this.url.getBillList).then((res) => {
        if (res.success) {
          if (!res.result) {
            this.dataSource = []
          } else {
            this.dataSource = res.result.records;
          }
          if (res.result && res.result.total) {
            this.ipagination.total = res.result.total;
          } else {
            this.ipagination.total = 0;
          }
          //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
        } else {
          this.$message.warning(res.message)
        }
      })
    },

    abnormalCreateTime(infoId) {
      let taskDate = this.taskDate;
      let queryParam = {
        "taskType":this.taskType,
        "startDate": taskDate[0],
        "endDate": taskDate[1],
        "infoId": infoId
      }
      getAction(this.url.abnormalCreateTime, queryParam).then(res => {
        if (res.success) {
          let data = [];
          let resultList = res.resultList;
          for (var i in resultList) {
            let resultListElement = resultList[i];
            let time = resultListElement.createTime;
            let count = parseInt(resultListElement.count);
            data.push([time, count])
          }
          let dateList = data.map(function (item) {
            return item[0];
          });
          let valueList = data.map(function (item) {
            return item[1];
          });
          this.abnormalCreateTimetrend(dateList, valueList)
        }
      }).finally(() => {

      })

    },

    abnormalCreateTimetrend(dateList, valueList) {
      let option = {
        title: {
          text: '稽核异常数量',
          left: 'center',

        },
        lineStyle: {
          color: '#5a6fc0'
        },

        backgroundColor: {
          type: 'pattern',
          image: this.canvas,
          repeat: 'repeat'
        },
        visualMap: [
          {
            show: false,
            type: 'continuous',
            seriesIndex: 0,
            min: 0,
            max: 400
          },
          {
            show: false,
            type: 'continuous',
            seriesIndex: 1,
            dimension: 0,
            min: 0,
            max: dateList.length - 1
          }
        ],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['稽核异常']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: dateList
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '异常数',
            type: 'line',
            stack: 'Total',
            data: valueList
          }
        ]
      };

      // this.$abnormalCreateTimeTrend = echarts.init(document.getElementById('abnormalCreateTimeTrend'))
      // this.$abnormalCreateTimeTrend.setOption(option)

    },


    checkStateCount(url, taskId) {
      let taskDate = this.taskDate;
      let queryParam = {
        "taskType":this.taskType,
        "startDate": taskDate[0],
        "endDate": taskDate[1],
        "infoId": taskId
      }
      getAction(url, queryParam).then(res => {
        if (res.success) {
          let resultList = res.resultList;
          let pieData = [];
          let histogramSource = ['资料驳回分布']
          let dimensions = ['product']

          for (var i in resultList) {
            let resultListElement = resultList[i];
            let name = resultListElement.name;
            let state = resultListElement.state;
            let count = resultListElement.count;
            if (state === "2") {
              var abnormalMapElement = this.abnormalMap[name];
              if (abnormalMapElement != null && abnormalMapElement != undefined) {
                pieData.push({
                  "name": abnormalMapElement,
                  "value": count
                })
                dimensions.push(abnormalMapElement.toString())
                histogramSource.push(parseInt(count));
              }
            }
          }
          this.checkStatePie(pieData);
          this.checkStateHistogram(dimensions, histogramSource)


        }
      }).finally(() => {

      })
    },

    checkStateHistogram(dimensions, source) {

      let option = {
        backgroundColor: {
          type: 'pattern',
          image: this.canvas,
          repeat: 'repeat'
        },
        legend: {},
        tooltip: {},
        dataset: {
          source: [
            dimensions,
            source
          ]
        },
        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'}, {type: 'bar'}]
      };
      // this.$abnormalCheckHistogram = echarts.init(document.getElementById('statusAuditHistogram'))
      // this.$abnormalCheckHistogram.setOption(option)

    },
    warningCountGroup(){
      let taskDate = this.taskDate;
      let queryParam = {
        "taskType":this.taskType,
        "startDate": taskDate[0],
        "endDate": taskDate[1],
      }
      getAction(this.url.warningCountGroup, queryParam).then((res) => {
        if (res.success) {
          if ( res.result){
            this.rectificationRate(res)
          }else {

          }
        }else{
          this.$message.warning(res.message)
        }
      })
    },
    rectificationRate(res){
      var myChart = echarts.init(document.getElementById('rectificationRate'));
      var  option = {
        title: {
          text: '稽核整改率',
          subtext: '整改率',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '稽核整改率',
            type: 'pie',
            radius: '50%',
            data: [
              { value: res.result.his, name: '整改数据量' },
              { value: res.result.sum, name: '未整改数据量' },

            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      if (res.result.zgSum>0 && res.result.his<=res.result.zgSum){
        this.zgl =Math.round(res.result.his / res.result.zgSum  * 10000) / 100 + "%";
      }else {
        this.zgl='0%'
      }
      if (res.result.sum>0   && this.allCount>0){
        this.yctgl = Math.round(res.result.sum /  this.allCount   * 10000) / 100 + "%";
      }else {
        this.yctgl='0%'
      }
      myChart.setOption(option);
    },
    checkStatePie(data) {

      let option = {
        tooltip: {
          trigger: 'item'
        },
        backgroundColor: {
          type: 'pattern',
          image: this.canvas,
          repeat: 'repeat'
        },
        /*title: [
          {
            text: '异常类型占比',
            //subtext: '总计 ' + builderJson.all + " 稽核通过 " + builderJson.charts["稽核通过"],
            left: '25%',
            textAlign: 'center'
          },
        ],*/
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data
          }
        ]
      };
      this.$abnormalCheckPie = echarts.init(document.getElementById('statusAuditPie'))
      this.$abnormalCheckPie.setOption(option)
    },


    //树点击事件
    onTreeNodeSelect(id) {
      if (id && id.length > 0) {
        if (id == "all") {
          this.statusRefuse();
          this.checkStateCount(this.url.checkStateCount);
          this.abnormalCreateTime();
          this.taskId = null;
          return;
        }
        let split = id[0].split("key-");
        if (split.length == 2) {
          let taskId = split[1];
          this.statusRefuse(taskId);
          this.checkStateCount(this.url.checkStateCount, taskId);
          this.abnormalCreateTime(taskId);
          this.taskId = taskId;
        }
      }
    },
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
    },

    taskDateList(taskData) {
      getAction(this.url["dateList"]).then(res => {
          if (res.success) {
            let result = res.result;
            let years = result[0];
            let months = result[1];
            let YearLevel = {}
            let monthLevel = {}

            for (var i in years) {
              let year = years[i].yearTime;
              let children = {
                "title": year,
                "key": year,
                "children": []
              }
              YearLevel[year] = children
            }

            for (var j in months) {
              let month = months[j].monthTime;
              let splitElement = month.split("-")[0];
              let children = {
                "title": month,
                "key": month,
                "children": []
              }
              YearLevel[splitElement].children.push(children)
            }
            let allChildren1 = {
              "title": "行短稽核",
              "key": "hd",
              "children": []
            }

            for (var k in taskData) {
              let taskDatum = taskData[k];
              let taskStartTime = taskDatum.taskStartTime;
              if (taskStartTime != null && taskStartTime != undefined) {
                let children = {
                  "title": taskDatum.taskName + "[" + taskDatum.customerCount + "]",
                  "key": "key" + "-" + taskDatum.id,
                  "isLeaf": true,
                }
                let strings = taskStartTime.split("-");
                let year = strings[0];
                let month = strings[0] + "-" + strings[1];
                for (var z in YearLevel[year].children) {
                  let title = YearLevel[year].children[z].title;
                  if (title == month) {
                    if (taskData[k].type===1){
                      allChildren1=YearLevel[year].children[z].children.push(children);
                      break;
                    }
                    if (taskData[k].type===2){
                      allChildren1=YearLevel[year].children[z].children.push(children);
                      break;
                    }
                    if (taskData[k].type===3){
                      allChildren1=YearLevel[year].children[z].children.push(children);
                      break;
                    }
                    if (taskData[k].type===4){
                      allChildren1=YearLevel[year].children[z].children.push(children);
                      break;
                    }
                    YearLevel[year].children[z].children.push(children);
                    break;
                  }
                }
              }
            }

            let allChildren = {
              "title": "全部任务",
              "key": "all",
              "children": []
            }


            for (var u in YearLevel) {
              this.treeData.push(YearLevel[u])
            }
            this.treeData.push(allChildren)
            this.treeData = this.treeData.reverse();


          }
        }
      )

    },

    //任务列表数据
    taskList() {
      let queryParam = {
        pageNo: 1,
        pageSize: 1000000,
      }
      getAction(this.url["taskList"], queryParam).then(res => {
        if (res.success) {
          let records = res.result.records;
          //稽核任务菜单
          this.taskDateList(records);
        }
      })


    },

    getDate:function (n) {
      let day = moment(n)
        .format("YYYY-MM-DD");
      return day;
    },

    //查询各类型稽核进度
    statusRefuse(taskId) {
      let taskDate = this.taskDate;
      let queryParam = {
        "taskType":this.taskType,
        "startDate": taskDate[0],
        "endDate": taskDate[1],
        "taskId": taskId
      }
      if (taskDate.length = 2) {
        getAction(this.url["statusRefuse"], queryParam).then(res => {
          if (res.success) {
            let builderJson = {};
            let columnDate = {};
            let pieDate = {};
            let all = 0;
            let resultList = res.resultList;
            if (resultList.length == 0) {
              this.allCount = 0;
              this.noHandle = 0;
              this.toImproveUser = 0;
              this.toBeAudited = 0;
              this.tobeRectified = 0;
              this.auditPassed = 0;
              this.tgl='0%';
              this.zgl='0%';
              this.yctgl='0%';
            }
            for (var i in resultList) {
              let resultListElement = resultList[i];
              let status = this.statusMap[resultListElement.checkState];
              if (status != undefined && status != null) {
                all = all + resultListElement.count
                columnDate[status] = resultListElement.count
              }
            }
            builderJson = {
              "all": all,
              "charts": columnDate,
              "ie": 9743
            }
            this.statusRefusePie(builderJson)
          }
        })
      }
    },
    statusRefusePie(builderJson) {
      if (builderJson.charts["稽核通过"] == null || builderJson.charts["稽核通过"] == undefined) {
        builderJson.charts["稽核通过"] = 0;
      }
      if (builderJson.charts["未完善"] == null || builderJson.charts["未完善"] == undefined) {
        builderJson.charts["未完善"] = 0;
      }
      if (builderJson.charts["待稽核"] == null || builderJson.charts["待稽核"] == undefined) {
        builderJson.charts["待稽核"] = 0;
      }
      if (builderJson.charts["待整改"] == null || builderJson.charts["待整改"] == undefined) {
        builderJson.charts["待整改"] = 0;
      }
      if (builderJson.charts["未处理"] == null || builderJson.charts["未处理"] == undefined) {
        builderJson.charts["未处理"] = 0;
      }
      this.toImproveUser = builderJson.charts["未处理"];
      this.wanshan = builderJson.charts["未完善"];

      this.toBeAudited = builderJson.charts["待稽核"];
      this.tobeRectified = builderJson.charts["待整改"];
      this.auditPassed = builderJson.charts["稽核通过"];
      debugger
      this.allCount =this.toImproveUser+this.wanshan+this.toBeAudited+this.tobeRectified+this.auditPassed;
        //this.zgl=  (parseInt(percentage) / 100) * total;
      if ( this.allCount>0){
        this.tgl= Math.round(this.auditPassed /   this.allCount * 10000) / 100 + "%";
      }else {
        this.tgl='0%'
      }

      let option = {
        backgroundColor: {
          type: 'pattern',
          image: this.canvas,
          repeat: 'repeat'
        },
        tooltip: {},
        title: [
          {
            text: '稽核完成进度',
            subtext: '总计 ' + builderJson.all + " 稽核通过 " + builderJson.charts["稽核通过"],
            left: '30%',
            textAlign: 'center'
          },
          {
            text: '稽核类型占比',
            subtext: '总计 ' + builderJson.all,
            left: '70%',
            textAlign: 'center'
          }
        ],
        grid: [
          {
            top: 50,
            width: '50%',
            bottom: '5%',
            left: 10,
            containLabel: true
          },
          {
            top: 50,
            width: '50%',
            bottom: '5%',
            left: 10,
            containLabel: true
          }

        ],

        xAxis: [
          {
            type: 'value',
            max: builderJson.all,
            splitLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'category',
            data: Object.keys(builderJson.charts),
            axisLabel: {
              interval: 0,
              rotate: 30
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            type: 'bar',
            stack: 'chart',
            z: 3,
            label: {
              position: 'right',
              show: true
            },
            data: Object.keys(builderJson.charts).map(function (key) {
              return builderJson.charts[key];
            }),
            itemStyle: {
              normal: {
                //这里是颜色
                color: function (params) {
                  //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = ['#5c6fc4', '#f0be47', '#d2232c', '#81c463', '#BBFFAA', '#749f83', '#ca8622'];
                  return colorList[params.dataIndex]
                }
              }
            }
          },
          {
            type: 'bar',
            stack: 'chart',
            silent: true,
            itemStyle: {
              color: '#eee'
            },
            data: Object.keys(builderJson.charts).map(function (key) {
              return builderJson.all - builderJson.charts[key];
            }),


          },

          {
            type: 'pie',
            radius: [0, '80%'],
            center: ['75%', '55%'],
            data: Object.keys(builderJson.charts).map(function (key) {
              return {
                name: key,
                value: builderJson.charts[key]
              };
            }),
            itemStyle: {
              normal: {
                //这里是颜色
                color: function (params) {
                  //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = ['#5a6fc0', '#f0be47', '#d2232c', '#81c463', '#BBFFAA', '#749f83', '#ca8622'];
                  return colorList[params.dataIndex]
                }
              }
            }
          },


        ]
      };

      this.$statusRefusePie = echarts.init(document.getElementById('statusRefusePie'))
      this.$statusRefusePie.setOption(option)
    },

    getRecentDay: function (n) {
      let day = moment(new Date())
        .subtract(n, "days")
        .format("YYYY-MM-DD");
      return day;
    },

  }
}
</script>
<style scoped>

</style>