You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
379 lines
9.5 KiB
379 lines
9.5 KiB
<template>
|
|
<el-row :gutter="10" class="panel-group">
|
|
<el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
|
|
<div class="card-panel" @click="handleSetLineChartData('newVisitis')">
|
|
<div class="card-panel-icon-wrapper icon-people">
|
|
<svg-icon icon-class="peoples" class-name="card-panel-icon" />
|
|
</div>
|
|
<div class="card-panel-description">
|
|
<div class="card-panel-text">库存总数</div>
|
|
<count-to
|
|
:start-val="0"
|
|
:end-val="totalCount"
|
|
:duration="2600"
|
|
class="card-panel-num"
|
|
/>
|
|
<span class="card-panel-text">个</span>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
|
|
<div class="card-panel" @click="handleSetLineChartData('newVisitis')">
|
|
<div class="card-panel-icon-wrapper icon-people">
|
|
<svg-icon icon-class="shopping" class-name="card-panel-icon" />
|
|
</div>
|
|
<div class="card-panel-description">
|
|
<div class="card-panel-text">暂估汇总</div>
|
|
<count-to
|
|
:start-val="0"
|
|
:end-val="totalCountContract"
|
|
:duration="2600"
|
|
class="card-panel-num"
|
|
/>
|
|
<span class="card-panel-text">份</span>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
|
<div class="card-panel" @click="handleSetLineChartData('messages')">
|
|
<!-- <div class="card-panel-icon-wrapper icon-message">
|
|
<svg-icon icon-class="message" class-name="card-panel-icon" />
|
|
</div> -->
|
|
<div class="card-panel-icon-wrapper icon-money">
|
|
<svg-icon icon-class="money" class-name="card-panel-icon" />
|
|
</div>
|
|
<div class="card-panel-description">
|
|
<div class="card-panel-text">合同金额/元</div>
|
|
<count-to
|
|
:start-val="0"
|
|
:end-val="totalAmount"
|
|
:duration="3000"
|
|
class="card-panel-num"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :xs="12" :sm="12" :lg="5" class="card-panel-col">
|
|
<div class="card-panel" @click="handleSetLineChartData('purchases')">
|
|
<div class="card-panel-icon-wrapper icon-money">
|
|
<svg-icon icon-class="job" class-name="card-panel-icon" />
|
|
</div>
|
|
<div class="card-panel-description">
|
|
<div class="card-panel-text">待开票/元</div>
|
|
<count-to
|
|
:start-val="0"
|
|
:end-val="totalInvoicedAmountAmount"
|
|
:duration="3200"
|
|
class="card-panel-num"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :xs="12" :sm="12" :lg="5" class="card-panel-col">
|
|
<div class="card-panel" @click="handleSetLineChartData('shoppings')">
|
|
<!-- <div class="card-panel-icon-wrapper icon-shopping">
|
|
<svg-icon icon-class="shopping" class-name="card-panel-icon" />
|
|
</div> -->
|
|
<div class="card-panel-icon-wrapper icon-money">
|
|
<svg-icon icon-class="org" class-name="card-panel-icon" />
|
|
</div>
|
|
<div class="card-panel-description">
|
|
<div class="card-panel-text">待回款/元</div>
|
|
<count-to
|
|
:start-val="0"
|
|
:end-val="totalhuikuanAmount"
|
|
:duration="3600"
|
|
class="card-panel-num"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</template>
|
|
|
|
<script>
|
|
import CountTo from "vue-count-to";
|
|
|
|
export default {
|
|
components: {
|
|
CountTo,
|
|
},
|
|
data() {
|
|
return {
|
|
listCards3: [
|
|
{
|
|
image: require("@/assets/customer_images/Money_icon.png"),
|
|
title: "合同总额",
|
|
description: "描述",
|
|
price: "300",
|
|
},
|
|
],
|
|
listCards4: [
|
|
{
|
|
image: require("@/assets/customer_images/kaipiaoxinxi.png"),
|
|
title: "待开票总额",
|
|
price: "400",
|
|
},
|
|
],
|
|
listCards5: [
|
|
{
|
|
image: require("@/assets/customer_images/huikuan.png"),
|
|
title: "待回款总额",
|
|
price: "400",
|
|
},
|
|
],
|
|
listCards1: [
|
|
{
|
|
image: require("@/assets/customer_images/leijixiangmushu.png"), //将图片作为模块加载进去
|
|
title: "项目数",
|
|
description: "描述",
|
|
},
|
|
],
|
|
listCards2: [
|
|
{
|
|
image: require("@/assets/customer_images/hetong.png"),
|
|
title: "合同数",
|
|
description: "描述",
|
|
},
|
|
],
|
|
elementLoadingText: "正在加载...",
|
|
options: [
|
|
{
|
|
value: "0",
|
|
label: "项目列表日志",
|
|
},
|
|
{
|
|
value: "1",
|
|
label: "附件列表日志",
|
|
},
|
|
],
|
|
value: "0",
|
|
newsList: [],
|
|
paginationLog: {
|
|
total: 0,
|
|
page: 1,
|
|
pageSize: 10,
|
|
},
|
|
form: {},
|
|
activeName: "first",
|
|
list: null,
|
|
// headDetails: [
|
|
// { title: '客户编码', value: '' },
|
|
// { title: '客户名称', value: '' },
|
|
// { title: '客户全称', value: '' }
|
|
// ],
|
|
listContracts: null,
|
|
listPaymentAmount: null,
|
|
paymentAmout1: [],
|
|
paymentAmout2: [],
|
|
paymentAmout3: [],
|
|
fileList: [],
|
|
checkCustomer: [],
|
|
customerList: [],
|
|
totalCount: 0,
|
|
totalCountContract: 0,
|
|
totalFileCount: 0,
|
|
listLoading: true,
|
|
formLoading: false,
|
|
propsCustomerId: "",
|
|
listQuery: {
|
|
Sorting: "",
|
|
SkipCount: 0,
|
|
MaxResultCount: 10,
|
|
},
|
|
listQueryImg: {
|
|
CustomerId: "",
|
|
Sorting: "",
|
|
SkipCount: 0,
|
|
MaxResultCount: 10,
|
|
},
|
|
page: 1,
|
|
pageFiles: 1,
|
|
pageImg: 1,
|
|
multipleSelection: [],
|
|
formTitle: "",
|
|
isEdit: false,
|
|
activeNames: ["1"],
|
|
};
|
|
},
|
|
created() {
|
|
this.getList();
|
|
this.getContractList();
|
|
this.getAmount();
|
|
},
|
|
computed: {
|
|
totalAmount() {
|
|
//合同总额
|
|
let totalAmountAll = 0;
|
|
this.paymentAmout3.map((item) => {
|
|
totalAmountAll += item.totalAmount;
|
|
});
|
|
return totalAmountAll;
|
|
},
|
|
totalInvoicedAmountAmount() {
|
|
//待开票金额
|
|
let invoAmount = 0;
|
|
this.paymentAmout1.map((item) => {
|
|
invoAmount += item.invoicedAmount;
|
|
});
|
|
return invoAmount;
|
|
},
|
|
totalhuikuanAmount() {
|
|
//待回款金额
|
|
let hkAmount = 0;
|
|
this.paymentAmout1.map((item) => {
|
|
hkAmount += item.huikuanAmount;
|
|
});
|
|
return hkAmount;
|
|
},
|
|
},
|
|
methods: {
|
|
handleSetLineChartData(type) {
|
|
this.$emit("handleSetLineChartData", type);
|
|
},
|
|
getList(data) {
|
|
//项目总个数
|
|
this.listLoading = true;
|
|
|
|
if (data != undefined) {
|
|
this.listQuery.SkipCount = (this.page - 1) * data.limit;
|
|
} else {
|
|
this.listQuery.SkipCount = (this.page - 1) * 15;
|
|
}
|
|
// this.$axios.gets("/api/abpvnext_master/project/all", this.listQuery).then(response => {
|
|
// this.totalCount = response.totalCount;
|
|
// });
|
|
},
|
|
getContractList() {
|
|
//合同列表
|
|
this.listLoading = true;
|
|
this.listQuery.SkipCount = (this.page - 1) * 10;
|
|
// this.$axios.gets("/api/abpvnext_master/contract/all", this.listQuery).then(response => {
|
|
// this.listContracts = response.items;
|
|
// this.totalCountContract = response.totalCount;//合同总个数
|
|
// this.paymentAmout3=[];
|
|
// this.paymentAmout3=this.listContracts;//合同总金额
|
|
// });
|
|
},
|
|
getAmount() {
|
|
//金额列表
|
|
this.listLoading = true;
|
|
this.listQuery.SkipCount = (this.page - 1) * 10;
|
|
// this.$axios.gets("/api/abpvnext_master/customer/GetAmount", this.listQuery).then(response => {
|
|
// this.paymentAmout1=[];
|
|
// this.paymentAmout1=response.items;
|
|
// });
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.panel-group {
|
|
margin-top: 18px;
|
|
|
|
.card-panel-col {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.card-panel {
|
|
height: 108px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
color: #666;
|
|
background: #fff;
|
|
box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
|
|
border-color: rgba(0, 0, 0, 0.05);
|
|
|
|
&:hover {
|
|
.card-panel-icon-wrapper {
|
|
color: #fff;
|
|
}
|
|
|
|
.icon-people {
|
|
background: #40c9c6;
|
|
}
|
|
|
|
.icon-message {
|
|
background: #36a3f7;
|
|
}
|
|
|
|
.icon-money {
|
|
background: #f4516c;
|
|
}
|
|
|
|
.icon-shopping {
|
|
background: #34bfa3;
|
|
}
|
|
}
|
|
|
|
.icon-people {
|
|
color: #40c9c6;
|
|
}
|
|
|
|
.icon-message {
|
|
color: #36a3f7;
|
|
}
|
|
|
|
.icon-money {
|
|
color: #f4516c;
|
|
}
|
|
|
|
.icon-shopping {
|
|
color: #34bfa3;
|
|
}
|
|
|
|
.card-panel-icon-wrapper {
|
|
float: left;
|
|
margin: 14px 0 0 14px;
|
|
padding: 16px;
|
|
transition: all 0.38s ease-out;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.card-panel-icon {
|
|
float: left;
|
|
font-size: 48px;
|
|
}
|
|
|
|
.card-panel-description {
|
|
float: center;
|
|
font-weight: bold;
|
|
margin: 26px;
|
|
margin-left: 0px;
|
|
|
|
.card-panel-text {
|
|
line-height: 18px;
|
|
color: rgba(0, 0, 0, 0.45);
|
|
font-size: 16px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.card-panel-num {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 550px) {
|
|
.card-panel-description {
|
|
display: none;
|
|
}
|
|
|
|
.card-panel-icon-wrapper {
|
|
float: none !important;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0 !important;
|
|
|
|
.svg-icon {
|
|
display: block;
|
|
margin: 14px auto !important;
|
|
float: none !important;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|