dvcp_v2_wxcp_app/src/apps/AppHandSnapshot/Statistics.vue

<template>
  <div class="statistics">
    <div class="gird-select">
      <img src="./components/img/gird-icon.png" alt="">
      <span>全部网格</span>
      <img src="./components/img/down-icon.png" alt="">
    </div>
    <div class="info-content">
      <div class="title">今日概况</div>
      <div class="el-row">
        <div class="item" v-for="(item, index) in contents" :key="index">
          <h2>{{item.num}}</h2>
          <p>{{item.label}}</p>
        </div>
      </div>
    </div>
    <div class="info-content">
      <div class="title">业务透视</div>
      <div class="business">
        <div class="left">
          <div class="item">
            <p>受理率</p>
            <h2>83.3%</h2>
          </div>
          <div class="item">
            <p>办结率</p>
            <h2>83.3%</h2>
          </div>
        </div>
        <div class="right">
          <div class="img">
            <img src="./components/img/line-img.png" alt="">
            <img src="./components/img/line-img.png" alt="">
          </div>
          <div class="num">
            <div class="item bg1">
              <h2>累计反馈</h2>
              <p>30</p>
            </div>
            <div class="item bg2">
              <h2>累计受理</h2>
              <p>30</p>
            </div>
            <div class="item bg3">
              <h2>累计办理</h2>
              <p>30</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="info-content">
      <div class="title" @click="toPercentageDetail">分类统计
        <img src="./components/img/right-icon.png" alt="">
      </div>
      <div class="percentage">
        <div class="item">
          <div class="mini-title">小区管理</div>
          <div class="info">
            <div class="line-bg"><div class="active-bg"></div></div>共11条 | 已办结9 <img src="./components/img/right-icon.png" alt="">
          </div>
        </div>
        <div class="item">
          <div class="mini-title">小区管理</div>
          <div class="info">
            <div class="line-bg" style="width:50%;"><div class="active-bg"></div></div>共11条 | 已办结9 <img src="./components/img/right-icon.png" alt="">
          </div>
        </div>
        <div class="item">
          <div class="mini-title">小区管理</div>
          <div class="info">
            <div class="line-bg" style="width:40%;"><div class="active-bg"></div></div>共11条 | 已办结9 <img src="./components/img/right-icon.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="info-content">
      <div class="title">成员明细
        <img src="./components/img/right-icon.png" alt="">
      </div>
    </div>
    <div class="pad-b120"></div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      contents: [
        {
          label: '待受理',
          num: 5
        },
        {
          label: '办理中',
          num: 5
        },
        {
          label: '今日上报',
          num: 5
        },
        {
          label: '今日办结',
          num: 5
        }
      ]
    }
  },
  onLoad() {
    
  },
  onShow() {},
  methods: {
    getList() {
      this.$http
        .post('/app/appvisitvondolence/list', null, {
          params: {
            size: this.size,
            current: this.current,
            createUserId: this.currentTabs == 1 ? this.user.id : '',
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
            this.pages = res.data.pages
          }
        })
    },

    goDetail(item) {
      uni.navigateTo({ url: `./Detail?id=${item.id}` })
    },

    change(index) {
      this.currentTabs = index
      this.getList()
    },

    toPercentageDetail() {
      uni.navigateTo({url: './PercentageDetail'})
    }
  },
}
</script>

<style scoped lang="scss">
.statistics {
  background-color: #F3F7F8;
  padding: 30px 30px 0;
  .gird-select{
    width: 100%;
    background: #FFF;
    border-radius: 16px;
    margin: 0 0 24px;
    text-align: center;
    padding: 24px 0;
    img{
      width: 32px;
      height: 32px;
      vertical-align: middle;
    }
    span{
      display: inline-block;
      font-size: 34px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333;
      line-height: 48px;
      margin: 0 10px;
    }
  }
  .info-content{
    width: 100%;
    background: #FFF;
    border-radius: 16px;
    margin-bottom: 24px;
    .title{
      font-size: 32px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333;
      line-height: 48px;
      padding: 24px 16px 24px 24px;
      img{
        float: right;
        width: 40px;
        height: 40px;
      }
    }
    .el-row{
      display: flex;
      padding: 32px 0 60px 0;
      .item{
        flex: 1;
        text-align: center;
        h2{
          font-size: 64px;
          font-family: DINAlternate-Bold, DINAlternate;
          font-weight: bold;
          color: #3B424A;
          line-height: 64px;
          margin-bottom: 8px;
        }
        p{
          font-size: 28px;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #999;
          line-height: 40px;
        }
      }
    }
    .business{
      display: flex;
      padding: 40px 0 30px 0;
      .left{
        width: 240px;
        padding: 20px 0 78px 64px;
        .item{
          margin-bottom: 58px;
        }
        h2{
          font-size: 58px;
          font-family: DINAlternate-Bold, DINAlternate;
          font-weight: bold;
          color: #3B424A;
          line-height: 64px;
        }
        p{
          font-size: 28px;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #666;
          line-height: 48px;
        }
      }
      .right{
        width: calc(100% - 240px);
        display: flex;
        .img{
          width: 140px;
          margin-top: 42px;
          img{
            width: 140px;
            height: 144px;
            margin-bottom: 20px;
          }
        }
        .num{
          width: calc(100% - 140px);
          text-align: center;
          .item{
            height: 130px;
            border-radius: 6px;
            background-size: 100% 100%;
            margin-bottom: 4px;
            color: #2F7EE5;
            h2{
              font-size: 26px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              line-height: 48px;
              padding-top: 20px;
            }
            p{
              font-size: 40px;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
            }
          }
          .bg1{
            width: 304px;
            background-image: url('./components/img/bg-1.png');
          }
          .bg2{
            width: 266px;
            background-image: url('./components/img/bg-2.png');
            margin-left: 16px;
          }
          .bg3{
            width: 240px;
            background-image: url('./components/img/bg-3.png');
            margin-left: 32px;
          }
        }
      }
    }
    .percentage{
      padding: 16px 0 0 26px;
      .item{
        width: 100%;
        padding-bottom: 32px;
        .mini-title{
          font-size: 30px;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #333;
          line-height: 48px;
          margin-bottom: 14px;
        }
        .info{
          width: 100%;
          font-size: 28px;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #999;
          line-height: 48px;
          .line-bg{
            display: inline-block;
            width: 63%;
            height: 14px;
            background: #D7D8D9;
            border-radius: 8px;
            margin-right: 12px;
            .active-bg{
              width: 80%;
              height: 100%;
              background: #257FF1;
              border-radius: 8px;
            }
          }
          img{
            width: 32px;
            height: 32px;
            vertical-align: middle;
          }
        }
      }
    }
  }
  .pad-b120{
    background-color: #F3F7F8;
    padding-bottom: 120px;
  }
}
</style>