Skip to content

S
shld-databoard-ui
Commit 7f39c7b5 authored by xuzhuo's avatar xuzhuo
Browse files
Options

大屏首页调整

parent 022b176c
Hide whitespace changes
Inline Side-by-side
Showing with 194 additions and 155 deletions
src/module/databoard/index.vue
View file @ 7f39c7b5
<template>
<div class="main">
<div class="middle">
<display-board class="trade_left" title="营业情况">
<div
style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;">
<contrast-card :mouseHand="true" v-for="data in yyqk" style="height: 28%;"
@click.native="routerTo('/turnover-detail',paths[data.title])">
<title-content-mark style="width: 40%;color: #369afa;float: left;" :title="data.title"
:content="data.amount" :mark="data.unit"/>
<div
style="width: 60%; height: 100%; float:left; padding: 4% 4% 0 12%; line-height: 26px;; display: flex; align-items: center;">
<table-column style="float: left;width: 25%;" :data="data.hb" name="title"/>
<table-column style="float: left;width: 40%;" :data="data.hb" name="amount"/>
<table-column style="float: left;width: 35%;" :data="data.hb" name="rate"
:cell-style-function="cellStyleFunction"/>
<!-- <table-column style="float: left;width: 35%;" :data="data.hb" name="rate" cell-style-js="var res = {color: '#5eeef4'}; if(data.indexOf('+') !== -1){res.color = '#fee064'} res; "/>-->
</div>
</contrast-card>
</div>
</display-board>
<display-board class="trade_middle" title="应收款情况" corner_size="large">
<div style="height: 36%;display: flex;justify-content: space-evenly;padding-top: 1.5rem">
<simple-card v-for="data in arSummary" style="width: 30%;height: 100%">
<title-content-mark style="color: #5eeef4;" :title="data.title" :content="data.value" :mark="'万元'"
isCenter isBold/>
</simple-card>
</div>
<ar-summary-bar ref="arSummaryBar" style="width: 100%; height: 64%;"></ar-summary-bar>
</display-board>
<display-board class="trade_right" title="账款情况">
<div
style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;">
<contrast-card v-for="data in zkqk" style="height: 28%;">
<title-content-mark style="width: 40%;color: #369afa;float: left;" v-if="data.title == '应收账款'" @click.native="goAccRevSearch" :title="data.title"
:content="data.amount" :mark="data.unit"/>
<title-content-mark v-else style="width: 40%;color: #369afa;float: left;" :title="data.title"
:content="data.amount" :mark="data.unit"/>
<div
style="width: 60%; height: 100%; float:left; padding: 4% 4% 0 12%; line-height: 26px;; display: flex; align-items: center;">
<table-column style="float: left;width: 25%;" :data="data.hb" name="title"/>
<table-column style="float: left;width: 40%;" :data="data.hb" name="amount"/>
<table-column style="float: left;width: 35%;" :data="data.hb" name="rate"
:cell-style-function="cellStyleFunction"/>
</div>
</contrast-card>
</div>
</display-board>
</div>
<div class="middle">
<div class="container">
<div class="left-bar">
<display-board class="trade_left" title="已开票未收款">
<winners-list style="height: 96%;overflow: auto;" :mouseHand="true" @click.native="goArBar" id="ar_company_list" :rows="arCompanyList"/>
</display-board>
<div class="trade_middle" style="border: none;box-shadow: none;">
<div style="display: flex; justify-content: space-between; height: 50%;">
<display-board style="width: 32%;" title="每日目标情况" :mouseHand="true" @click.native="routerTo('/target-achievement','day')">
<div
style="width: 100%; height: 100%; float:left; padding: 2%; line-height: 33px; display: flex; align-items: center; font-size: 10px;">
<table-column style="float: left;width: 35%;" :data="targetAchievement.day" name="title" show-head/>
<table-column
style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;"
:data="targetAchievement.day" name="actualValue" title="实时值" show-head/>
<table-column style="float: left;width: 20%;" :data="targetAchievement.day" name="targetValue" title="目标值"
show-head/>
</div>
</display-board>
<display-board style="width: 32%;" title="月度目标情况" :mouseHand="true" @click.native="routerTo('/target-achievement','month')">
<div
style="width: 100%; height: 100%; float:left; padding: 2%; line-height: 33px; display: flex; align-items: center; font-size: 10px;">
<table-column style="float: left;width: 35%;" :data="targetAchievement.month" name="title" show-head/>
<table-column
style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;"
:data="targetAchievement.month" name="actualValue" title="实时值" show-head/>
<table-column style="float: left;width: 20%;" :data="targetAchievement.month" name="targetValue" title="目标值"
show-head/>
</div>
</display-board>
<display-board style="width: 32%;" title="年度目标情况" :mouseHand="true" @click.native="routerTo('/target-achievement','year')">
<div
style="width: 100%; height: 100%; float:left; padding: 2%; line-height: 33px; display: flex; align-items: center; font-size: 10px;">
<table-column style="float: left;width: 35%;" :data="targetAchievement.year" name="title" show-head/>
<table-column
style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;"
:data="targetAchievement.year" name="actualValue" title="实时值" show-head/>
<table-column style="float: left;width: 20%;" :data="targetAchievement.year" name="targetValue" title="目标值"
show-head/>
</div>
</display-board>
</div>
<div style="display: flex; justify-content: space-between; height: 50%; padding-top: 2rem;" >
<showcase style="width: 16%;" title="当日订单量">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drddl.weight+ ' 万吨'"
</div>
<div class="right-container">
<div class="right-top">
<display-board class="trade_middle" title="应收款情况" corner_size="large">
<div style="height: 36%;display: flex;justify-content: space-evenly;padding-top: 1.5rem">
<simple-card v-for="data in arSummary" style="width: 30%;height: 100%">
<title-content-mark style="color: #5eeef4;" :title="data.title" :content="data.value" :mark="'万元'"
isCenter isBold/>
</simple-card>
</div>
<ar-summary-bar ref="arSummaryBar" style="width: 100%; height: 64%;"></ar-summary-bar>
</display-board>
<display-board class="trade_right" title="账款情况">
<div
style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;">
<contrast-card v-for="data in zkqk" style="height: 28%;">
<title-content-mark style="width: 40%;color: #369afa;float: left;" v-if="data.title == '应收账款'" @click.native="goAccRevSearch" :title="data.title"
:content="data.amount" :mark="data.unit"/>
<title-content-mark v-else style="width: 40%;color: #369afa;float: left;" :title="data.title"
:content="data.amount" :mark="data.unit"/>
<div
style="width: 60%; height: 100%; float:left; padding: 4% 4% 0 12%; line-height: 26px;; display: flex; align-items: center;">
<table-column style="float: left;width: 25%;" :data="data.hb" name="title"/>
<table-column style="float: left;width: 40%;" :data="data.hb" name="amount"/>
<table-column style="float: left;width: 35%;" :data="data.hb" name="rate"
:cell-style-function="cellStyleFunction"/>
</div>
</contrast-card>
</div>
</display-board>
</div>
<div class="right-bottom">
<div class="trade_middle" style="border: none;box-shadow: none;">
<div style="display: flex; justify-content: space-between; height: 50%;">
<display-board style="width: 32%;" title="每日目标情况" :mouseHand="true" @click.native="routerTo('/target-achievement','day')">
<div
style="width: 100%; height: 100%; float:left; padding: 2%; line-height: 33px; display: flex; align-items: center; font-size: 10px;">
<table-column style="float: left;width: 35%;" :data="targetAchievement.day" name="title" show-head/>
<table-column
style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;"
:data="targetAchievement.day" name="actualValue" title="实时值" show-head/>
<table-column style="float: left;width: 20%;" :data="targetAchievement.day" name="targetValue" title="目标值"
show-head/>
</div>
</display-board>
<display-board style="width: 32%;" title="月度目标情况" :mouseHand="true" @click.native="routerTo('/target-achievement','month')">
<div
style="width: 100%; height: 100%; float:left; padding: 2%; line-height: 33px; display: flex; align-items: center; font-size: 10px;">
<table-column style="float: left;width: 35%;" :data="targetAchievement.month" name="title" show-head/>
<table-column
style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;"
:data="targetAchievement.month" name="actualValue" title="实时值" show-head/>
<table-column style="float: left;width: 20%;" :data="targetAchievement.month" name="targetValue" title="目标值"
show-head/>
</div>
</display-board>
<display-board style="width: 32%;" title="年度目标情况" :mouseHand="true" @click.native="routerTo('/target-achievement','year')">
<div
style="width: 100%; height: 100%; float:left; padding: 2%; line-height: 33px; display: flex; align-items: center; font-size: 10px;">
<table-column style="float: left;width: 35%;" :data="targetAchievement.year" name="title" show-head/>
<table-column
style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;"
:data="targetAchievement.year" name="actualValue" title="实时值" show-head/>
<table-column style="float: left;width: 20%;" :data="targetAchievement.year" name="targetValue" title="目标值"
show-head/>
</div>
</display-board>
</div>
<div style="display: flex; justify-content: space-between; height: 50%; padding-top: 2rem;" >
<showcase style="width: 16%;" title="当日订单量">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drddl.weight+ ' 万吨'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="drddl.amount+' 万元'" />
</showcase>
<showcase style="width: 16%;" title="当日运单量" :mouseHand="true" @click.native="routerTo('/department-shipment')">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drydl.count + ' 车'"
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="drddl.amount+' 万元'" />
</showcase>
<showcase style="width: 16%;" title="当日运单量" :mouseHand="true" @click.native="routerTo('/department-shipment')">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drydl.count + ' 车'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="drydl.weight + ' 万吨'" />
</showcase>
<showcase style="width: 16%;" title="当日完成量">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drwcl.weight+ ' 万吨'"
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="drydl.weight + ' 万吨'" />
</showcase>
<showcase style="width: 16%;" title="当日完成量">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drwcl.weight+ ' 万吨'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="drwcl.amount+ ' 万元'" />
</showcase>
<showcase style="width: 16%;" title="余量">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="yl.weight+ ' 万吨'" />
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="yl.amount+ ' 万元'" />
</showcase>
<showcase style="width: 16%;" title="流失客户" :mouseHand="true" @click.native="routerTo('/lost-add-customer',2)">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="lskh.weight+' 万吨'"
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="drwcl.amount+ ' 万元'" />
</showcase>
<showcase style="width: 16%;" title="余量">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="yl.weight+ ' 万吨'" />
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="yl.amount+ ' 万元'" />
</showcase>
<showcase style="width: 16%;" title="潜在客户" :mouseHand="true" @click.native="routerTo('/lost-add-customer',2)">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="lskh.weight+' 万吨'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="lskh.amount+ ' 万元'" />
</showcase>
<showcase style="width: 16%;" title="新增客户" :mouseHand="true" @click.native="routerTo('/lost-add-customer',1)">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="xzkh.weight+ ' 万吨'"
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="lskh.amount+ ' 万元'" />
</showcase>
<showcase style="width: 16%;" title="新增客户" :mouseHand="true" @click.native="routerTo('/lost-add-customer',1)">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="xzkh.weight+ ' 万吨'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="xzkh.amount + ' 万元'" />
</showcase>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="xzkh.amount + ' 万元'" />
</showcase>
</div>
</div>
<display-board class="trade_right" title="当日订单量占比">
<div
style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;">
<ring-pie-chart ref="transportTypeChart" style="width: 100%;height: 50%;z-index: 999" name="运输类型占比"
:data="transportTypeOrderFinishPie" @click.native="routerTo('/order-proportion')"
:value-formatter="pieDataValueFormatter" :formatter="pieDataFormatter"/>
<ring-pie-chart ref="customerChart" style="width: 100%;height: 50%;" name="公司占比"
:data="customerOrderFinishPie" @click.native="routerTo('/order-proportion')"
:value-formatter="pieDataValueFormatter" :formatter="pieDataFormatter"/>
</div>
</display-board>
</div>
<display-board class="trade_right" title="当日订单量占比">
<div
style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;">
<ring-pie-chart ref="transportTypeChart" style="width: 100%;height: 50%;z-index: 999" name="运输类型占比"
:data="transportTypeOrderFinishPie" @click.native="routerTo('/order-proportion')"
:value-formatter="pieDataValueFormatter" :formatter="pieDataFormatter"/>
<ring-pie-chart ref="customerChart" style="width: 100%;height: 50%;" name="公司占比"
:data="customerOrderFinishPie" @click.native="routerTo('/order-proportion')"
:value-formatter="pieDataValueFormatter" :formatter="pieDataFormatter"/>
</div>
</display-board>
</div>
</div>
</template>
......@@ -678,15 +665,15 @@ export default {
});
},
refreshData() {
getTransportTypeOrderFinishPie(res => this.transportTypeOrderFinishPie = res, this.today);
getCustomerOrderFinishPie(res => this.customerOrderFinishPie = res, this.today);
this.showBusinessConditionDatas();
this.getArSummaryBar();
this.getAccountSituation();
this.getArCompanyList();
this.getLoseAndAdd();
this.getOrderBusinessCondition();
this.getTargetOrderDataByConditionCount();
getTransportTypeOrderFinishPie(res => this.transportTypeOrderFinishPie = res, this.today);
getCustomerOrderFinishPie(res => this.customerOrderFinishPie = res, this.today);
this.showBusinessConditionDatas();
this.getArSummaryBar();
this.getAccountSituation();
this.getArCompanyList();
this.getLoseAndAdd();
this.getOrderBusinessCondition();
this.getTargetOrderDataByConditionCount();
},
pieDataValueFormatter(param) {
return conver_amont(param) + "万吨";
......@@ -744,10 +731,62 @@ export default {
}
};
</script>
<style lang="postcss">
<style scoped>
#ar_company_list:hover {
background-color: #19EBFF10;
transform: scale(101%);
}
.container {
display: flex; /* 使用 Flexbox 布局 */
height: 100vh; /* 视口高度 */
width: 100%;
max-width: 100%;
}
.left-bar {
width: 25%; /* 左侧栏宽度 */
/*background-color: #f0f0f0; !* 背景色 *!*/
/*padding: 10px; !* 内边距 *!*/
justify-content: space-around;
display: flex;
padding: 1rem;
}
.right-container {
flex: 1; /* 剩余空间，右侧的部分 */
display: flex;
flex-direction: column; /* 垂直排列 */
width: 75%; /* 右侧栏宽度 */
}
.right-top {
height: 50%; /* 右上栏高度，设为 50% */
justify-content: space-around;
display: flex;
padding: 1rem;
}
.right-bottom {
height: 50%; /* 右下栏高度，设为 50% */
justify-content: space-around;
display: flex;
padding: 1rem;
}
.trade_left {
width: 100%;
}
.trade_middle {
width: 61%;
}
.trade_right {
width: 33%;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment