jsm-mall-front/src/views/auxiliaryFittings/home/index.vue

<template>
  <div class="dashboard_container">
    <div class="refresh" @click="refreshData">
      <el-radio-group v-model="radio1">
        <el-radio-button :label="1">辅材</el-radio-button>
        <el-radio-button :label="2">配件</el-radio-button>
      </el-radio-group>
      <span>
        <span style="color: #1d82ff">刷新数据</span>
        <i class="el-icon-refresh-left" style="color: #1d82ff"></i>
      </span>
    </div>
    <!-- 辅材 -->
    <template v-if="radio1 == 1">
      <div class="flex">
        <div class="mode" @click="gotopage('auxiliaryPriceManagement', '', '')">
          <div class="title">辅材列表配置统计</div>
          <div class="flex head">
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.allmGoodsNum }}</div>
                <div class="title">总配置数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.onMGoodsNum }}</div>
                <div class="title">有效配置数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.offMGoodsNum }}</div>
                <div class="title">无效配置数量</div>
              </div>
            </div>
          </div>
        </div>
        <div class="mode" @click="gotopage('auxiliaryChargeManagement', '', '')">
          <div class="title">辅材收费标准配置统计</div>
          <div class="flex head">
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.allmChargeGoodsNum }}</div>
                <div class="title">总配置数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.onmChargeGoodsNum }}</div>
                <div class="title">有效配置数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.offmChargeGoodsNum }}</div>
                <div class="title">无效配置数量</div>
              </div>
            </div>
          </div>
        </div>
        <div class="mode">
          <div class="title">辅材采购入库单统计</div>
          <div class="flex head">
            <div class="tab" @click="gotopage('auxiliaryMaterialsStorage', '已保存数量', 'SAVE')">
              <div class="text">
                <div class="num">{{ collectData.savePurchaseNum }}</div>
                <div class="title">已保存数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('auxiliaryMaterialsStorage', '已审核数量', 'OK')">
              <div class="text">
                <div class="num">{{ collectData.okPurchaseNum }}</div>
                <div class="title">已审核数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('auxiliaryMaterialsStorage', '审核失败数量', 'FAIL')">
              <div class="text">
                <div class="num">{{ collectData.failPurchaseNum }}</div>
                <div class="title">审核失败数量</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex">
        <div class="mode">
          <div class="title">辅材采购退货单统计</div>
          <div class="flex head">
            <div class="tab" @click="gotopage('returnAuxiliaryMaterials', '已保存数量', 'SAVE')">
              <div class="text">
                <div class="num">{{ collectData.savePurchaseRetNum }}</div>
                <div class="title">已保存数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('returnAuxiliaryMaterials', '已审核数量', 'OK')">
              <div class="text">
                <div class="num">{{ collectData.okPurchaseRetNum }}</div>
                <div class="title">已审核数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('returnAuxiliaryMaterials', '审核失败数量', 'FAIL')">
              <div class="text">
                <div class="num">{{ collectData.failPurchaseRetNum }}</div>
                <div class="title">审核失败数量</div>
              </div>
            </div>
          </div>
        </div>
        <div class="mode">
          <div class="title">辅材调价单统计</div>
          <div class="flex head">
            <div class="tab" @click="gotopage('auxiliaryAdjustPriceOrder', '已保存数量', 'SAVE')">
              <div class="text">
                <div class="num">{{ collectData.savePriceUpdNum }}</div>
                <div class="title">已保存数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('auxiliaryAdjustPriceOrder', '已保存数量', 'OK')">
              <div class="text">
                <div class="num">{{ collectData.okPriceUpdNum }}</div>
                <div class="title">已审核数量</div>
              </div>
            </div>
          </div>
        </div>
        <div class="mode" @click="gotopage('supplier', '', '')">
          <div class="title">供应商维护统计</div>
          <div class="flex head">
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.allVendNum }}</div>
                <div class="title">总配置数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.onVendNum }}</div>
                <div class="title">有效配置数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.offVendNum }}</div>
                <div class="title">无效配置数量</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex">
        <div class="mode" style="min-width: 66.33%">
          <div class="title">辅材销售订单统计</div>
          <div class="flex head">
            <div class="tab" @click="gotopage('auxiliarySalesOrder', '已保存数量', 'SAVE')">
              <div class="text">
                <div class="num">{{ collectData.saveSalesNum }}</div>
                <div class="title">已保存数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('auxiliarySalesOrder', '已经提交数量', 'SUBMIT')">
              <div class="text">
                <div class="num">{{ collectData.submitSalesNum }}</div>
                <div class="title">已经提交数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('auxiliarySalesOrder', '已支付未提货', 'PAY_NOT_TAKE')">
              <div class="text">
                <div class="num">{{ collectData.payNoTakeSalesNum }}</div>
                <div class="title">已支付未提货</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('auxiliarySalesOrder', '已支付已提货', 'PAY_TAKE')">
              <div class="text">
                <div class="num">{{ collectData.paytakeSalesNum }}</div>
                <div class="title">已支付已提货</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('auxiliarySalesOrder', '取消订单数量', 'CANCEL')">
              <div class="text">
                <div class="num">{{ collectData.cancelSalesNum }}</div>
                <div class="title">取消订单数量</div>
              </div>
            </div>
          </div>
        </div>
        <div class="mode">
          <div class="title">辅材销售退货单统计</div>
          <div class="flex head">
            <div class="tab" @click="gotopage('auxiliarySalesReturnOrder', '已保存数量', 'SAVE')">
              <div class="text">
                <div class="num">{{ collectData.saveSalesRetNum }}</div>
                <div class="title">已保存数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('auxiliarySalesReturnOrder', '已提交数量', 'SUBMIT')">
              <div class="text">
                <div class="num">{{ collectData.submitSalesRetNum }}</div>
                <div class="title">已提交数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('auxiliarySalesReturnOrder', '待审核数量', 'WAIT')">
              <div class="text">
                <div class="num">{{ collectData.waitSalesRetNum }}</div>
                <div class="title">待审核数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('auxiliarySalesReturnOrder', '审核通过数量', 'OK')">
              <div class="text">
                <div class="num">{{ collectData.okSalesRetNum }}</div>
                <div class="title">审核通过数量</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex">
        <div class="mode" @click="gotopage('auxiliaryHandworkFee', '', '')" style="max-width: 33%">
          <div class="title">辅材手工费统计</div>
          <div class="flex head">
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.waitManualNum }}</div>
                <div class="title">待结算</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.okManual }}</div>
                <div class="title">已完成</div>
              </div>
            </div>
          </div>
        </div>
        <div class="mode" @click="gotopage('auxiliaryHandworkFee', '', '')" style="max-width: 33%">
          <div class="title">结算管理-电子支付</div>
          <div class="flex head">
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.waitWechatNumOne || 0 }}</div>
                <div class="title">待结算</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.okWechatNumOne || 0 }}</div>
                <div class="title">已完成</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.ycWechatNumOne || 0 }}</div>
                <div class="title">异常结算</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.lineWechatNumOne || 0 }}</div>
                <div class="title">线下结算</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex">
        <div class="mode" @click="gotopage('auxiliaryMaterialBasicInfo', '', '')">
          <div class="title">工程辅材配件开单-辅材维护统计</div>
          <div class="flex head">
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.allAloneNum }}</div>
                <div class="title">总配置数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.onAloneNum }}</div>
                <div class="title">有效配置数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.offAloneNum }}</div>
                <div class="title">无效配置数量</div>
              </div>
            </div>
          </div>
        </div>
        <div class="mode" @click="gotopage('partsListInfo', '', '')">
          <div class="title">工程辅材配件开单-配件维护统计</div>
          <div class="flex head">
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.allAlonePNum }}</div>
                <div class="title">总配置数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.onAlonePNum }}</div>
                <div class="title">有效配置数量</div>
              </div>
            </div>
            <div class="tab">
              <div class="text">
                <div class="num">{{ collectData.offAlonePNum }}</div>
                <div class="title">无效配置数量</div>
              </div>
            </div>
          </div>
        </div>
        <div class="mode">
          <div class="title">工程辅材配件开单-收款统计</div>
          <div class="flex head">
            <div class="tab" @click="gotopage('projectCollectionManagement', '待审核', 'WAIT')">
              <div class="text">
                <div class="num">{{ collectData.waitPayManagerNum }}</div>
                <div class="title">待审核</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('projectCollectionManagement', '待收款', 'WAIT_PAY')">
              <div class="text">
                <div class="num">{{ collectData.waitPAYPayManagerNum }}</div>
                <div class="title">待收款</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('projectCollectionManagement', '部分收款', 'PART_PAY')">
              <div class="text">
                <div class="num">{{ collectData.partpayPayManagerNum }}</div>
                <div class="title">部分收款</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('projectCollectionManagement', '收款完成', 'PAY')">
              <div class="text">
                <div class="num">{{ collectData.payPayManagerNum }}</div>
                <div class="title">收款完成</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <!-- 配件 -->
    <template v-if="radio1 == 2">
      <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>
        <div class="mode">
          <div class="title">配件采购入库单统计</div>
          <div class="flex head">
            <div class="tab" @click="gotopage('partsStorage', '已保存数量', 'SAVE')">
              <div class="text">
                <div class="num">{{ collectData.savePurchasePNum }}</div>
                <div class="title">已保存数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('partsStorage', '已审核数量', 'OK')">
              <div class="text">
                <div class="num">{{ collectData.okPurchasePNum }}</div>
                <div class="title">已审核数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('partsStorage', '审核失败数量', 'FAIL')">
              <div class="text">
                <div class="num">{{ collectData.failPurchasePNum }}</div>
                <div class="title">审核失败数量</div>
              </div>
            </div>
          </div>
        </div>
        <div class="mode">
          <div class="title">配件采购退货单统计</div>
          <div class="flex head">
            <div class="tab" @click="gotopage('partsReturn', '已保存数量', 'SAVE')">
              <div class="text">
                <div class="num">{{ collectData.savePurchaseRetPNum }}</div>
                <div class="title">已保存数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('partsReturn', '已审核数量', 'OK')">
              <div class="text">
                <div class="num">{{ collectData.okPurchaseRetPNum }}</div>
                <div class="title">已审核数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('partsReturn', '审核失败数量', 'FAIL')">
              <div class="text">
                <div class="num">{{ collectData.failPurchaseRetPNum }}</div>
                <div class="title">审核失败数量</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex">
        <div class="mode" style="min-width: 66.33%">
          <div class="title">配件销售订单统计</div>
          <div class="flex head">
            <div class="tab" @click="gotopage('attachmentSalesOrder', '已保存数量', 'SAVE')">
              <div class="text">
                <div class="num">{{ collectData.saveSalesPNum }}</div>
                <div class="title">已保存数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('attachmentSalesOrder', '已提交数量', 'SUBMIT')">
              <div class="text">
                <div class="num">{{ collectData.submitSalesPgNum }}</div>
                <div class="title">已提交数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('attachmentSalesOrder', '已支付未提交', 'PAY_NOT_TAKE')">
              <div class="text">
                <div class="num">{{ collectData.payNoTakeSalesPgNum }}</div>
                <div class="title">已支付未提交</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('attachmentSalesOrder', '已支付已提交', 'PAY_TAKE')">
              <div class="text">
                <div class="num">{{ collectData.payTakeSalesPgNum }}</div>
                <div class="title">已支付已提交</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('attachmentSalesOrder', '取消订单数量', 'CANCEL')">
              <div class="text">
                <div class="num">{{ collectData.cancelSalesPgNum }}</div>
                <div class="title">取消订单数量</div>
              </div>
            </div>
          </div>
        </div>
        <div class="mode">
          <div class="title">配件新件返还统计</div>
          <div class="flex head">
            <div class="tab" @click="gotopage('attachmentNewReturn', '已保存数量', 'SAVE')">
              <div class="text">
                <div class="num">{{ collectData.saveNewNum }}</div>
                <div class="title">已保存数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('attachmentNewReturn', '已提交数量', 'SUBMIT')">
              <div class="text">
                <div class="num">{{ collectData.submitNewNum }}</div>
                <div class="title">已提交数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('attachmentNewReturn', '审核通过数量', 'OK')">
              <div class="text">
                <div class="num">{{ collectData.okNewNum }}</div>
                <div class="title">审核通过数量</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="flex">
        <div class="mode">
          <div class="title">配件旧件返还统计</div>
          <div class="flex head">
            <div class="tab" @click="gotopage('attachmentOldReturn', '已保存数量', 'SAVE')">
              <div class="text">
                <div class="num">{{ collectData.saveOldNum }}</div>
                <div class="title">已保存数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('attachmentOldReturn', '已提交数量', 'SUBMIT')">
              <div class="text">
                <div class="num">{{ collectData.submitOldNum }}</div>
                <div class="title">已提交数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('attachmentOldReturn', '审核通过数量', 'OK')">
              <div class="text">
                <div class="num">{{ collectData.okOldNum }}</div>
                <div class="title">审核通过数量</div>
              </div>
            </div>
          </div>
        </div>
        <div class="mode">
          <div class="title">配件旧件返厂单统计</div>
          <div class="flex head">
            <div class="tab" @click="gotopage('oldPartsReturnFactory', '已保存数量', 'SAVE')">
              <div class="text">
                <div class="num">{{ collectData.saveOldFactoryNum }}</div>
                <div class="title">已保存数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('oldPartsReturnFactory', '已提交数量', 'SUBMIT')">
              <div class="text">
                <div class="num">{{ collectData.submitOldFactoryNum }}</div>
                <div class="title">已提交数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('oldPartsReturnFactory', '审核通过数量', 'OK')">
              <div class="text">
                <div class="num">{{ collectData.okOldFactoryNum }}</div>
                <div class="title">审核通过数量</div>
              </div>
            </div>
            <div class="tab" @click="gotopage('oldPartsReturnFactory', '审核失败数量', 'FAIL')">
              <div class="text">
                <div class="num">{{ collectData.failOldFactoryNum }}</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: {},
      radio1: 1
    }
  },
  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>