zfire-newmall-admin/src/views/auxiliaryFittings/home/index.vue

<template>
	<div class="dashboard_container">
		<div class="refresh" @click="refreshData">
			<span style="color: #1d82ff;">刷新数据</span>
			<i class="el-icon-refresh-left" style="color: #1d82ff;"></i>
		</div>
		<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" @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>
    <div class="flex">
			<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 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 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>
    <div class="flex">
			<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" 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>
    <div class="flex">
			<div class="mode" >
				<div class="title">辅材销售退货单统计</div>
				<div class="flex head">
					<div class="tab" @click="gotopage('auxiliarySalesReturnOrder','取消订单数量','CANCEL')">
						<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 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','待审核数量','WAIT')">
						<div class="text">
							<div class="num">{{collectData.aaaaa}}</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','待审核数量','WAIT')">
						<div class="text">
							<div class="num">{{collectData.aaaaa}}</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 class="mode"  @click="gotopage('settleAccountWeixinPay','','')">
				<div class="title">微信支付结算统计</div>
				<div class="flex head">
					<div class="tab">
						<div class="text">
							<div class="num">{{collectData.waitWechatNum}}</div>
							<div class="title">待结算</div>
						</div>
					</div>
					<div class="tab">
						<div class="text">
							<div class="num">{{collectData.waitingWechatNum}}</div>
							<div class="title">可提现</div>
						</div>
					</div>
					<div class="tab">
						<div class="text">
							<div class="num">{{collectData.ingWechatNum}}</div>
							<div class="title">提现中</div>
						</div>
					</div>
					<div class="tab">
						<div class="text">
							<div class="num">{{collectData.overWechatNum}}</div>
							<div class="title">已提现</div>
						</div>
					</div>
				</div>
			</div>
		</div>
    <div class="flex">
			<div class="mode"  @click="gotopage('settleAccountOfflinePay','','')">
				<div class="title">线下支付结算统计</div>
				<div class="flex head">
					<div class="tab">
						<div class="text">
							<div class="num">{{collectData.waitWechatLineNum}}</div>
							<div class="title">待结算</div>
						</div>
					</div>
					<div class="tab">
						<div class="text">
							<div class="num">{{collectData.overWechatLineNum}}</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('projectAttachmentManage','未付款','NO')">
						<div class="text">
							<div class="num">{{collectData.noSalesManagerPNum}}</div>
							<div class="title">未付款</div>
						</div>
					</div>
					<div class="tab" @click="gotopage('projectAttachmentManage','部分付款','WAIT')">
						<div class="text">
							<div class="num">{{collectData.waitSalesManagerPNum}}</div>
							<div class="title">部分付款</div>
						</div>
					</div>
					<div class="tab" @click="gotopage('projectAttachmentManage','已完成','OK')">
						<div class="text">
							<div class="num">{{collectData.okSalesManagerPNum}}</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('projectAuxiliaryManage','未付款','NO')">
						<div class="text">
							<div class="num">{{collectData.noSalesManagerNum}}</div>
							<div class="title">未付款</div>
						</div>
					</div>
					<div class="tab" @click="gotopage('projectAuxiliaryManage','部分付款','WAIT')">
						<div class="text">
							<div class="num">{{collectData.waitSalesManagerNum}}</div>
							<div class="title">部分付款</div>
						</div>
					</div>
					<div class="tab" @click="gotopage('projectAuxiliaryManage','已完成','OK')">
						<div class="text">
							<div class="num">{{collectData.okSalesManagerNum}}</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"  style="max-width:33%">
				<div class="title">销售提现统计</div>
				<div class="flex head">
					<div class="tab" @click="gotopage('salesWithdraw','待发放','0')">
						<div class="text">
							<div class="num">{{collectData.waitWithdrawalNum}}</div>
							<div class="title">待发放</div>
						</div>
					</div>
					<div class="tab" @click="gotopage('salesWithdraw','已发放','1')">
						<div class="text">
							<div class="num">{{collectData.okWithdrawalNum}}</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>
	</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){
        if(pageCode){
          this.$router.push({
            name: name,
            params: {
              pageName: pageName,
              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 {
			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>