jsm-mall-front/src/views/partsManagement/accessoriesHome/index.vue

<template>
  <div class="dashboard_container">
    <template>
      <div class="flex">
        <div class="mode" @click="gotopage('attachmentProfile', '', '')">
          <div class="title">配件资料配置统计</div>
          <div class="flex head">
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.allpGoodsNum }}</div>
                <div class="title">总配置数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.onPGoodsNum }}</div>
                <div class="title">有效配置数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.offPGoodsNum }}</div>
                <div class="title">无效配置数量</div>
              </div>
            </div>
          </div>
        </div>
        <!-- -----------new--------- -->
        <div class="mode" @click="gotopage('center-parts-shop-in-stock')">
          <div class="title">网点新件入库统计</div>
          <div class="flex head">
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.savePurchasePNum }}</div>
                <div class="title">总数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.okPurchasePNum }}</div>
                <div class="title">未验收数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.failPurchasePNum }}</div>
                <div class="title">已验收数量</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex">
        <!-- ---------------new---------------- -->
        <div class="mode" @click="gotopage('website-parts-shop-sales')">
          <div class="title">配件销售单统计</div>
          <div class="flex head">
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.allpGoodsNum }}</div>
                <div class="title">总存数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.onPGoodsNum }}</div>
                <div class="title">提交数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.offPGoodsNum }}</div>
                <div class="title">已支付数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.allpGoodsNum }}</div>
                <div class="title">已取消数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.onPGoodsNum }}</div>
                <div class="title">已完成数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.offPGoodsNum }}</div>
                <div class="title">订单异常数量</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex">
        <!-- ---------------new---------------- -->
        <div class="mode" @click="gotopage('website-new-parts-worker-refund')">
          <div class="title">师傅新件返还统计</div>
          <div class="flex head">
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.allpGoodsNum }}</div>
                <div class="title">总存数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.onPGoodsNum }}</div>
                <div class="title">提交数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.offPGoodsNum }}</div>
                <div class="title">驳回数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.allpGoodsNum }}</div>
                <div class="title">通过数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.onPGoodsNum }}</div>
                <div class="title">待复核数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.offPGoodsNum }}</div>
                <div class="title">已复核数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.onPGoodsNum }}</div>
                <div class="title">未返还数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.offPGoodsNum }}</div>
                <div class="title">已返还数量</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex">
        <!-- ---------------new---------------- -->
        <div class="mode" @click="gotopage('website-old-parts-worker-refund')">
          <div class="title">师傅旧件返还统计</div>
          <div class="flex head">
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.allpGoodsNum }}</div>
                <div class="title">总存数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.onPGoodsNum }}</div>
                <div class="title">提交数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.offPGoodsNum }}</div>
                <div class="title">驳回数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.allpGoodsNum }}</div>
                <div class="title">通过数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.onPGoodsNum }}</div>
                <div class="title">待复核数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.offPGoodsNum }}</div>
                <div class="title">已复核数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.onPGoodsNum }}</div>
                <div class="title">未返还数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.offPGoodsNum }}</div>
                <div class="title">已返还数量</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex">
        <!-- ---------------new---------------- -->
        <div class="mode" @click="gotopage('website-new-parts-to-sales')">
          <div class="title">新件转销售统计</div>
          <div class="flex head">
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.allpGoodsNum }}</div>
                <div class="title">总存数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.onPGoodsNum }}</div>
                <div class="title">提交数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.offPGoodsNum }}</div>
                <div class="title">驳回数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.allpGoodsNum }}</div>
                <div class="title">通过数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.onPGoodsNum }}</div>
                <div class="title">待复核数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.offPGoodsNum }}</div>
                <div class="title">已复核数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.onPGoodsNum }}</div>
                <div class="title">未返还数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.offPGoodsNum }}</div>
                <div class="title">已返还数量</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex">
        <!-- ---------------new---------------- -->
        <div class="mode" @click="gotopage('website-outside-new-parts-to-sales')">
          <div class="title">保外新件转销售统计</div>
          <div class="flex head">
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.allpGoodsNum }}</div>
                <div class="title">总存数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.onPGoodsNum }}</div>
                <div class="title">提交数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.offPGoodsNum }}</div>
                <div class="title">驳回数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.allpGoodsNum }}</div>
                <div class="title">通过数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.onPGoodsNum }}</div>
                <div class="title">待复核数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.offPGoodsNum }}</div>
                <div class="title">已复核数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.onPGoodsNum }}</div>
                <div class="title">未返还数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.offPGoodsNum }}</div>
                <div class="title">已返还数量</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { dataCountMaterialCount } from '@/api/dataCount.js'
export default {
  data() {
    return {
      collectData: {}
    }
  },
  created() {
    this.refreshData()
  },
  methods: {
    refreshData() {
      dataCountMaterialCount().then(res => {
        this.collectData = res.data
      })
    },
    gotopage(name, pageName = '', pageCode = '', pageType = '-') {
      if (pageCode) {
        this.$router.push({
          name: name,
          params: {
            pageName: pageName,
            pageType: pageType,
            pageCode: pageCode
          }
        })
      } else {
        this.$router.push({
          name: name
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.dashboard_container {
  background: #f5f5f5;
  padding: 20px;
  min-height: calc(100vh - 86px);
  box-sizing: border-box;

  .refresh {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // text-align: right;
    margin-bottom: 10px;

    span {
      cursor: pointer;
    }

    i {
      font-weight: bold;
      margin-left: 4px;
      cursor: pointer;
    }
  }

  .flex {
    display: flex;
    margin-bottom: 10px;
  }

  .flex_asb {
    display: flex;
    justify-content: space-between;
  }

  .mode {
    flex: 1;
    padding: 10px;
    margin-right: 10px;
    background-color: #ffffff;
    border-radius: 10px;

    .title {
      font-weight: bold;
    }

    .head {
      padding-top: 12px !important;
      margin: 0 !important;
      margin-bottom: 0 !important;
    }

    .opacity {
      opacity: 0;
    }

    .tab {
      display: flex;
      align-items: center;
      flex: 1;
      cursor: pointer;

      .text {
        margin: 0 10px;

        .title {
          color: #999999;
          font-size: 12px;
          margin-top: 8px;
        }

        .num {
          font-size: 22px;
          font-weight: bold;
        }
      }

      .img {
        width: 46px;
        height: 46px;
        margin-left: 20px;
      }
    }

    .child {
      border-right: 1px solid #dddddd;

      .text {
        .title {
          margin-top: 8px;
          margin-bottom: 0;
        }
      }
    }

    .child:last-child {
      border-right: none;
    }
  }

  .mode:last-child {
    margin-right: 0;
  }

  .container_bottom {
    width: 100%;
    height: 350px;
    padding: 10px;
    background-color: #ffffff;
    margin-top: 10px;
    border-radius: 10px;
  }
}
</style>