iot/lx_iot_ui.git

<template>
<div>
  <img src="~@/assets/1d2d2cb55d28345f36175c9db26eac9.png" alt="logo" class="logo-image">
<!--  <img src="~@/assets/664d480dfd7ee8d4a2c4c740680e906.png" alt="logo" class="logo-image">-->
</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'
 
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},
]
 
export default {
  name: "IndexBdc",
  components: {
    ATooltip,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    DashChartDemo,
    BarMultid,
    IndexBar
  },
  data() {
    return {
      loading: true,
      cardCount:{
        sll:100,
        bjl:87,
        isll:15,
        ibjl:9
      },
 
      todaySll:60,
      todayBjl:54,
      todayISll:13,
      todayIBjl:7,
 
      chartData:{
        sll:[],
        bjl:[],
        isll:[],
        ibjl:[]
      },
      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:{
    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()
    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;}
}
.logo-image {
  width: 1230px;
  height: 670px;
}
</style>