popularize-admin/admin-pc/src/views/dashboard/Analysis.vue

<template>
  <div class="page-header-index-wide">
    
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="注册用户" :total="cardCount.sll | NumberFormat">
          <a-tooltip title="注册用户" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-area :data-source="chartData.sll" v-if="chartData.sll.length"/>
          </div>
          <template slot="footer">今日注册用户：<span>{{ todaySll }}</span></template>
        </chart-card>
      </a-col>




      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="平台营业额" :total="cardCount.money | NumberFormat">
          <a-tooltip title="平台营业额" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-area :data-source="chartData.moneyData" v-if="chartData.moneyData.length"/>
          </div>
          <template slot="footer">今日营业额：<span>{{ todayMoney }}</span></template>
        </chart-card>
      </a-col>



      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="报名用户数" :total="cardCount.open | NumberFormat">
          <a-tooltip title="用户报名用户数" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-area :data-source="chartData.open" v-if="chartData.open.length"/>
          </div>
          <template slot="footer">今日报名用户数：<span>{{ todayOpen }}</span></template>
        </chart-card>
      </a-col>



      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="主理人数量" :total="cardCount.adminUser | NumberFormat">
          <a-tooltip title="今日主理人数量" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-area :data-source="chartData.adminUser" v-if="chartData.adminUser.length"/>
          </div>
          <template slot="footer">今日主理人数量：<span>{{ todayAdminUser }}</span></template>
        </chart-card>
      </a-col>
<!--      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">-->
<!--        <chart-card :loading="loading" title="报名用户数" :total="cardCount.isll | NumberFormat">-->
<!--          <a-tooltip title="报名用户数" slot="action">-->
<!--            <a-icon type="info-circle-o" />-->
<!--          </a-tooltip>-->
<!--          <div>-->
<!--            <mini-bar :datasource="chartData.isll" :height="50"/>-->
<!--          </div>-->
<!--          <template slot="footer">用户报名用户数：<span>{{ todayISll }}</span></template>-->
<!--        </chart-card>-->
<!--      </a-col>-->
<!--      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">-->
<!--        <chart-card :loading="loading" title="主理人数量" :total="cardCount.ibjl | NumberFormat">-->
<!--          <a-tooltip title="主理人数量" slot="action">-->
<!--            <a-icon type="info-circle-o" />-->
<!--          </a-tooltip>-->
<!--          <div>-->
<!--            <mini-bar :datasource="chartData.ibjl" :height="50"/>-->
<!--          </div>-->
<!--          <template slot="footer">今日主理人数量：<span>{{ todayIBjl }}</span></template>-->
<!--        </chart-card>-->
<!--      </a-col>-->
    </a-row>

<!--    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">-->
<!--      <div class="salesCard">-->
<!--        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">-->









<!--          <a-tab-pane loading="true" tab="注册用户" key="1">-->
<!--            <a-row>-->
<!--              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">-->
<!--                <index-bar title="新增注册用户数量" />-->
<!--              </a-col>-->
<!--            </a-row>-->
<!--          </a-tab-pane>-->














<!--          <a-tab-pane loading="true" tab="平台营业额" key="2">-->
<!--            <a-row>-->
<!--              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">-->
<!--                <index-bar title="营业额总数" />-->
<!--              </a-col>-->
<!--            </a-row>-->
<!--          </a-tab-pane>-->





<!--          <a-tab-pane loading="true" tab="报名用户数" key="3">-->
<!--            <a-row>-->
<!--              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">-->
<!--                <index-bar title="新增报名用户数" />-->
<!--              </a-col>-->
<!--            </a-row>-->
<!--          </a-tab-pane>-->


<!--          <a-tab-pane loading="true" tab="主理人数量" key="4">-->
<!--            <a-row>-->
<!--              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">-->
<!--                <index-bar title="新增主理人数量" />-->
<!--              </a-col>-->
<!--            </a-row>-->
<!--          </a-tab-pane>-->

<!--        </a-tabs>-->

<!--      </div>-->
<!--    </a-card>-->


  </div>
</template>

<script>

import ACol from "ant-design-vue/es/grid/Col"
import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
import ChartCard from '@/components/ChartCard'
import MiniBar from '@/components/chart/MiniBar'
import MiniArea from '@/components/chart/MiniArea'
import IndexBar from '@/components/chart/IndexBar'
import BarMultid from '@/components/chart/BarMultid'
import DashChartDemo from '@/components/chart/DashChartDemo'
import dayjs from 'dayjs'
const jhjgData = [
  { type: '房管', '1月': 900, '2月': 1120, '3月': 1380, '4月': 1480, '5月': 1450, '6月': 1100, '7月':1300, '8月':900,'9月':1000 ,'10月':1200 ,'11月':600 ,'12月':900 },
  { type: '税务', '1月':1200, '2月': 1500, '3月': 1980, '4月': 2000, '5月': 1000, '6月': 600, '7月':900, '8月':1100,'9月':1300 ,'10月':2000 ,'11月':900 ,'12月':1100 },
  { type: '不动产', '1月':2000, '2月': 1430, '3月': 1300, '4月': 1400, '5月': 900, '6月': 500, '7月':600, '8月':1000,'9月':600 ,'10月':1000 ,'11月':1500 ,'12月':1200 }
]

const jhjgFields=[
  '1月','2月','3月','4月','5月','6月',
  '7月','8月','9月','10月','11月','12月'
]

const xljgData = [
  {type:'一月',"房管":1.12,"税务":1.55,"不动产":1.2},
  {type:'二月',"房管":1.65,"税务":1.32,"不动产":1.42},
  {type:'三月',"房管":1.85,"税务":1.1,"不动产":1.5},

  {type:'四月',"房管":1.33,"税务":1.63,"不动产":1.4},
  {type:'五月',"房管":1.63,"税务":1.8,"不动产":1.7},
  {type:'六月',"房管":1.85,"税务":1.98,"不动产":1.8},

  {type:'七月',"房管":1.98,"税务":1.5,"不动产":1.76},
  {type:'八月',"房管":1.48,"税务":1.2,"不动产":1.3},
  {type:'九月',"房管":1.41,"税务":1.9,"不动产":1.6},

  {type:'十月',"房管":1.1,"税务":1.1,"不动产":1.4},
  {type:'十一月',"房管":1.85,"税务":1.6,"不动产":1.5},
  {type:'十二月',"房管":1.5,"税务":1.4,"不动产":1.3}
]
const xljgFields=["房管","税务","不动产"]

const dataCol1 = [{
  title: '业务号',
  align:"center",
  dataIndex: 'reBizCode'
},{
  title: '业务类型',
  align:"center",
  dataIndex: 'type'
},{
  title: '受理人',
  align:"center",
  dataIndex: 'acceptBy'
},{
  title: '受理时间',
  align:"center",
  dataIndex: 'acceptDate'
},{
  title: '当前节点',
  align:"center",
  dataIndex: 'curNode'
},{
  title: '办理时长',
  align:"center",
  dataIndex: 'flowRate',
  scopedSlots: { customRender: 'flowRate' }
}];
const dataSource1=[
  {reBizCode:"1",type:"转移登记",acceptBy:'张三',acceptDate:"2019-01-22",curNode:"任务分派",flowRate:60},
  {reBizCode:"2",type:"抵押登记",acceptBy:'李四',acceptDate:"2019-01-23",curNode:"领导审核",flowRate:30},
  {reBizCode:"3",type:"转移登记",acceptBy:'王武',acceptDate:"2019-01-25",curNode:"任务处理",flowRate:20},
  {reBizCode:"4",type:"转移登记",acceptBy:'赵楼',acceptDate:"2019-11-22",curNode:"部门审核",flowRate:80},
  {reBizCode:"5",type:"转移登记",acceptBy:'钱就',acceptDate:"2019-12-12",curNode:"任务分派",flowRate:90},
  {reBizCode:"6",type:"转移登记",acceptBy:'孙吧',acceptDate:"2019-03-06",curNode:"任务处理",flowRate:10},
  {reBizCode:"7",type:"抵押登记",acceptBy:'周大',acceptDate:"2019-04-13",curNode:"任务分派",flowRate:100},
  {reBizCode:"8",type:"抵押登记",acceptBy:'吴二',acceptDate:"2019-05-09",curNode:"任务上报",flowRate:50},
  {reBizCode:"9",type:"抵押登记",acceptBy:'郑爽',acceptDate:"2019-07-12",curNode:"任务处理",flowRate:63},
  {reBizCode:"20",type:"抵押登记",acceptBy:'林有',acceptDate:"2019-12-12",curNode:"任务打回",flowRate:59},
  {reBizCode:"11",type:"转移登记",acceptBy:'码云',acceptDate:"2019-09-10",curNode:"任务签收",flowRate:87},
]

const dataCol2 = [{
  title: '业务号',
  align:"center",
  dataIndex: 'reBizCode'
},{
  title: '受理人',
  align:"center",
  dataIndex: 'acceptBy'
},{
  title: '发起时间',
  align:"center",
  dataIndex: 'acceptDate'
},{
  title: '当前节点',
  align:"center",
  dataIndex: 'curNode'
},{
  title: '超时时间',
  align:"center",
  dataIndex: 'flowRate',
  scopedSlots: { customRender: 'flowRate' }
}];
const dataSource2=[
  {reBizCode:"A001",type:"转移登记",acceptBy:'张四',acceptDate:"2019-01-22",curNode:"任务分派",flowRate:12},
  {reBizCode:"A002",type:"抵押登记",acceptBy:'李吧',acceptDate:"2019-01-23",curNode:"任务签收",flowRate:3},
  {reBizCode:"A003",type:"转移登记",acceptBy:'王三',acceptDate:"2019-01-25",curNode:"任务处理",flowRate:24},
  {reBizCode:"A004",type:"转移登记",acceptBy:'赵二',acceptDate:"2019-11-22",curNode:"部门审核",flowRate:10},
  {reBizCode:"A005",type:"转移登记",acceptBy:'钱大',acceptDate:"2019-12-12",curNode:"任务签收",flowRate:8},
  {reBizCode:"A006",type:"转移登记",acceptBy:'孙就',acceptDate:"2019-03-06",curNode:"任务处理",flowRate:10},
  {reBizCode:"A007",type:"抵押登记",acceptBy:'周晕',acceptDate:"2019-04-13",curNode:"部门审核",flowRate:24},
  {reBizCode:"A008",type:"抵押登记",acceptBy:'吴有',acceptDate:"2019-05-09",curNode:"部门审核",flowRate:30},
  {reBizCode:"A009",type:"抵押登记",acceptBy:'郑武',acceptDate:"2019-07-12",curNode:"任务分派",flowRate:1},
  {reBizCode:"A0010",type:"抵押登记",acceptBy:'林爽',acceptDate:"2019-12-12",curNode:"部门审核",flowRate:16},
  {reBizCode:"A0011",type:"转移登记",acceptBy:'码楼',acceptDate:"2019-09-10",curNode:"部门审核",flowRate:7},
]

import { getAction,putAction } from '@/api/manage'
export default {
  name: "IndexBdc",
  components: {
    ATooltip,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    DashChartDemo,
    BarMultid,
    IndexBar
  },
  data() {
    return {
      loading: true,
      analysisData : {},
      cardCount:{
        sll:100,
        bjl:87,
        isll:15,
        ibjl:9,
        adminUser : 0,//主理人
        money : 0,//营业额
        open: 0,//报名
      },

      todaySll:0,
      todayBjl:54,
      todayISll:13,
      todayIBjl:7,
      todayAdminUser : 0,//主理人
      todayMoney : 0,//营业额
      todayOpen : 0,//报名

      chartData:{
        sll:[],
        bjl:[],
        isll:[],
        ibjl:[],
        adminUser : [],//主理人
        moneyData : [],//营业额 money
        open: [],//报名
      },
      jhjgFields,
      jhjgData,

      xljgData,
      xljgFields,

      diskInfo:[
        {name:"C盘",restPPT:7},
        {name:"D盘",restPPT:5}
      ],

      registerTypeList:[{
        text:"业务受理"
      },{
        text:"业务管理"
      },{
        text:"文件管理"
      },{
        text:"信息查询"
      }],

      dataSource1:[],
      dataSource2:[],
      columns:dataCol1,
      columns2:dataCol2,
      ipagination1:{
        current: 1,
        pageSize: 5,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,

      },
      ipagination2:{
        current: 1,
        pageSize: 5,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      indexRegisterType:"转移登记",
      indexBottomTab:"1"

    }
  },
  methods:{
    loadData (){
      try {
        // 获取系统消息
        getAction("/sys/annountCement/listByUser").then((res) => {
          if (res.success) {
            // this.analysisData = res.result
            console.log("统计数据", res)
            const beginDay = new Date().getTime()

            // 主理人数量
            this.todayAdminUser = res.result.openIdAdminUserToday
            this.cardCount.adminUser = res.result.openIdAdminUserTotal
            // this.chartData.adminUser = res.result.openIdAdminUserData

            let adminUserData = []
            for(let k in res.result.openIdAdminUserData){
              adminUserData.push({
                x: dayjs(new Date(beginDay + 1000 * 60 * 60 * 24 * 1)).format('YYYY-MM-DD'),
                y : res.result.openIdAdminUserData[k]
              })
            }
            this.chartData.adminUser = adminUserData

            console.log('this.chartData.adminUser', this.chartData.adminUser);
            
            
            
            // 注册数量
            this.todaySll = res.result.openIdUserToday
            this.cardCount.sll = res.result.openIdUserTotal
            // this.chartData.sll = res.result.openIdUserData
            
            for(let k in res.result.openIdUserData){
              this.chartData.sll.push({
                x: dayjs(new Date(beginDay + 1000 * 60 * 60 * 24 * 1)).format('YYYY-MM-DD'),
                y : res.result.openIdUserData[k]
              })
            }
            
            // 营业额
            this.todayMoney = res.result.openIdMoneyUserToday
            this.cardCount.money = res.result.openIdMoneyUserTotal
            // this.chartData.money = res.result.openIdMoneyUserData
            for(let k in res.result.openIdMoneyData){
              this.chartData.moneyData.push({
                x: dayjs(new Date(beginDay + 1000 * 60 * 60 * 24 * 1)).format('YYYY-MM-DD'),
                y : res.result.openIdMoneyData[k]
              })
            }
            
            // 报名 openIdOpenUserToday
            this.todayOpen = res.result.openIdOpenUserToday
            this.cardCount.open = res.result.openIdOpenUserTotal
            // this.chartData.open = res.result.openIdOpenUserData
            for(let k in res.result.openIdOpenUserData){
              this.chartData.open.push({
                x: dayjs(new Date(beginDay + 1000 * 60 * 60 * 24 * 1)).format('YYYY-MM-DD'),
                y : res.result.openIdOpenUserData[k]
              })
            }
          }
        }).catch(error => {
          console.error("统计查询报错",error);//这行打印permissionName is undefined
          this.stopTimer = true;
          console.log("清理timer");
        });
      } catch (err) {
        this.stopTimer = true;
        console.error("统计过程报错",err);
      }
    },
    goPage(){
      this.$message.success("根据业务自行处理跳转页面!")
    },
    changeRegisterType(e){
      this.indexRegisterType = e.target.value
      if(this.indexBottomTab=="1"){
        this.loadDataSource1()
      }else{
        this.loadDataSource2()
      }
    },
    tableChange1(pagination){
      this.ipagination1.current = pagination.current
      this.ipagination1.pageSize = pagination.pageSize
      this.queryTimeoutInfo()
    },
    tableChange2(pagination){
      this.ipagination2.current = pagination.current
      this.ipagination2.pageSize = pagination.pageSize
      this.queryNodeTimeoutInfo()
    },
    getFlowRateNumber(value){
      return Number(value)
    },
    getPercentFormat(value){
      if(value==100){
        return "超时"
      }else{
        return value+"%"
      }
    },
    getPercentColor(value){
      let p = Number(value)
      if(p>=90 && p<100){
        return 'rgb(244, 240, 89)'
      }else if(p>=100){
        return 'red'
      }else{
        return 'rgb(16, 142, 233)'
      }
    },

    loadDataSource1(){
      this.dataSource1 = dataSource1.filter(item=>{
        if(!this.indexRegisterType){
          return true
        }
        return item.type==this.indexRegisterType
      })
    },
    loadDataSource2(){
      this.dataSource2 = dataSource2.filter(item=>{
        if(!this.indexRegisterType){
          return true
        }
        return item.type==this.indexRegisterType
      })
    }
  },
  created() {
    // this.loadDataSource1()
    // this.loadDataSource2()
    this.loadData()
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
  }
}
</script>

<style lang="less" scoped>
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

.item-group {
  padding: 20px 0 8px 24px;
  font-size: 0;
  a {
    color: rgba(0, 0, 0, 0.65);
    display: inline-block;
    font-size: 14px;
    margin-bottom: 13px;
    width: 25%;
  }
}

.item-group {
  .more-btn {
    margin-bottom: 13px;
    text-align: center;
  }
}

.list-content-item {
  color: rgba(0, 0, 0, .45);
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin-left: 40px;
}

@media only screen and (min-width: 1600px) {
  .list-content-item{
    margin-left:60px;
  }
}

@media only screen and (max-width: 1300px) {
  .list-content-item{
    margin-left:20px;
  }
  .width-hidden4{
    display:none
  }
}
.list-content-item{
  span{line-height: 20px;}
}
.list-content-item{
  p{margin-top: 4px;margin-bottom:0;line-height:22px;}
}
.anty-list-cust {
  .ant-list-item-meta{flex: 0.3 !important;}
}
.anty-list-cust {
  .ant-list-item-content{flex:1 !important; justify-content:flex-start !important;margin-left: 20px;}
}


</style>