Skip to content

S
shld-databoard-ui
Commit 9aeec0ea authored by xuzhuo's avatar xuzhuo
Browse files
Options

大屏当日订单量跳转

parent 7f39c7b5
Hide whitespace changes
Inline Side-by-side
Showing with 151 additions and 190 deletions
src/module/databoard/index.vue
View file @ 9aeec0ea
<template> <template>
<div class="container"> <div class="main">
<div class="left-bar"> <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">
<display-board class="trade_left" title="已开票未收款"> <display-board class="trade_left" title="已开票未收款">
<winners-list style="height: 96%;overflow: auto;" :mouseHand="true" @click.native="goArBar" id="ar_company_list" :rows="arCompanyList"/> <winners-list style="height: 96%;overflow: auto;" :mouseHand="true" @click.native="goArBar" id="ar_company_list" :rows="arCompanyList"/>
</display-board> </display-board>
</div> <div class="trade_middle" style="border: none;box-shadow: none;">
<div class="right-container"> <div style="display: flex; justify-content: space-between; height: 50%;">
<div class="right-top"> <display-board style="width: 32%;" title="每日目标情况" :mouseHand="true" @click.native="routerTo('/target-achievement','day')">
<display-board class="trade_middle" title="应收款情况" corner_size="large"> <div
<div style="height: 36%;display: flex;justify-content: space-evenly;padding-top: 1.5rem"> style="width: 100%; height: 100%; float:left; padding: 2%; line-height: 33px; display: flex; align-items: center; font-size: 10px;">
<simple-card v-for="data in arSummary" style="width: 30%;height: 100%"> <table-column style="float: left;width: 35%;" :data="targetAchievement.day" name="title" show-head/>
<title-content-mark style="color: #5eeef4;" :title="data.title" :content="data.value" :mark="'万元'" <table-column
isCenter isBold/> style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;"
</simple-card> :data="targetAchievement.day" name="actualValue" title="实时值" show-head/>
</div> <table-column style="float: left;width: 20%;" :data="targetAchievement.day" name="targetValue" title="目标值"
<ar-summary-bar ref="arSummaryBar" style="width: 100%; height: 64%;"></ar-summary-bar> show-head/>
</display-board> </div>
<display-board class="trade_right" title="账款情况"> </display-board>
<div <display-board style="width: 32%;" title="月度目标情况" :mouseHand="true" @click.native="routerTo('/target-achievement','month')">
style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;"> <div
<contrast-card v-for="data in zkqk" style="height: 28%;"> style="width: 100%; height: 100%; float:left; padding: 2%; line-height: 33px; display: flex; align-items: center; font-size: 10px;">
<title-content-mark style="width: 40%;color: #369afa;float: left;" v-if="data.title == '应收账款'" @click.native="goAccRevSearch" :title="data.title" <table-column style="float: left;width: 35%;" :data="targetAchievement.month" name="title" show-head/>
:content="data.amount" :mark="data.unit"/> <table-column
<title-content-mark v-else style="width: 40%;color: #369afa;float: left;" :title="data.title" style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;"
:content="data.amount" :mark="data.unit"/> :data="targetAchievement.month" name="actualValue" title="实时值" show-head/>
<div <table-column style="float: left;width: 20%;" :data="targetAchievement.month" name="targetValue" title="目标值"
style="width: 60%; height: 100%; float:left; padding: 4% 4% 0 12%; line-height: 26px;; display: flex; align-items: center;"> show-head/>
<table-column style="float: left;width: 25%;" :data="data.hb" name="title"/> </div>
<table-column style="float: left;width: 40%;" :data="data.hb" name="amount"/> </display-board>
<table-column style="float: left;width: 35%;" :data="data.hb" name="rate" <display-board style="width: 32%;" title="年度目标情况" :mouseHand="true" @click.native="routerTo('/target-achievement','year')">
:cell-style-function="cellStyleFunction"/> <div
</div> style="width: 100%; height: 100%; float:left; padding: 2%; line-height: 33px; display: flex; align-items: center; font-size: 10px;">
</contrast-card> <table-column style="float: left;width: 35%;" :data="targetAchievement.year" name="title" show-head/>
</div> <table-column
</display-board> style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;"
</div> :data="targetAchievement.year" name="actualValue" title="实时值" show-head/>
<div class="right-bottom"> <table-column style="float: left;width: 20%;" :data="targetAchievement.year" name="targetValue" title="目标值"
<div class="trade_middle" style="border: none;box-shadow: none;"> show-head/>
<div style="display: flex; justify-content: space-between; height: 50%;"> </div>
<display-board style="width: 32%;" title="每日目标情况" :mouseHand="true" @click.native="routerTo('/target-achievement','day')"> </display-board>
<div </div>
style="width: 100%; height: 100%; float:left; padding: 2%; line-height: 33px; display: flex; align-items: center; font-size: 10px;"> <div style="display: flex; justify-content: space-between; height: 50%; padding-top: 2rem;" >
<table-column style="float: left;width: 35%;" :data="targetAchievement.day" name="title" show-head/> <showcase style="width: 16%;" title="当日订单量">
<table-column <title-content-mark
style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;" style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
:data="targetAchievement.day" name="actualValue" title="实时值" show-head/> content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drddl.weight+ ' 万吨'"
<table-column style="float: left;width: 20%;" :data="targetAchievement.day" name="targetValue" title="目标值" />
show-head/> <title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
</div> content-style="font-size: 14px;" mark-style="font-size: 10px;"
</display-board> :content="drddl.amount+' 万元'" />
<display-board style="width: 32%;" title="月度目标情况" :mouseHand="true" @click.native="routerTo('/target-achievement','month')"> </showcase>
<div <showcase style="width: 16%;" title="当日运单量" :mouseHand="true" @click.native="routerTo('/department-shipment')">
style="width: 100%; height: 100%; float:left; padding: 2%; line-height: 33px; display: flex; align-items: center; font-size: 10px;"> <title-content-mark
<table-column style="float: left;width: 35%;" :data="targetAchievement.month" name="title" show-head/> style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
<table-column content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drydl.count + ' 车'"
style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;" />
:data="targetAchievement.month" name="actualValue" title="实时值" show-head/> <title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
<table-column style="float: left;width: 20%;" :data="targetAchievement.month" name="targetValue" title="目标值" content-style="font-size: 14px;" mark-style="font-size: 10px;"
show-head/> :content="drydl.weight + ' 万吨'" />
</div> </showcase>
</display-board> <showcase style="width: 16%;" title="当日完成量">
<display-board style="width: 32%;" title="年度目标情况" :mouseHand="true" @click.native="routerTo('/target-achievement','year')"> <title-content-mark
<div style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
style="width: 100%; height: 100%; float:left; padding: 2%; line-height: 33px; display: flex; align-items: center; font-size: 10px;"> content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drwcl.weight+ ' 万吨'"
<table-column style="float: left;width: 35%;" :data="targetAchievement.year" name="title" show-head/> />
<table-column <title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;" content-style="font-size: 14px;" mark-style="font-size: 10px;"
:data="targetAchievement.year" name="actualValue" title="实时值" show-head/> :content="drwcl.amount+ ' 万元'" />
<table-column style="float: left;width: 20%;" :data="targetAchievement.year" name="targetValue" title="目标值" </showcase>
show-head/> <showcase style="width: 16%;" title="余量">
</div> <title-content-mark
</display-board> style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
</div> content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="yl.weight+ ' 万吨'" />
<div style="display: flex; justify-content: space-between; height: 50%; padding-top: 2rem;" > <title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
<showcase style="width: 16%;" title="当日订单量"> content-style="font-size: 14px;" mark-style="font-size: 10px;"
<title-content-mark :content="yl.amount+ ' 万元'" />
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;" </showcase>
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drddl.weight+ ' 万吨'" <showcase style="width: 16%;" title="流失客户" :mouseHand="true" @click.native="routerTo('/lost-add-customer',2)">
/> <title-content-mark
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;" 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-style="font-size: 14px;" mark-style="font-size: 10px;" :content="lskh.weight+' 万吨'"
:content="drddl.amount+' 万元'" /> />
</showcase> <title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
<showcase style="width: 16%;" title="当日运单量" :mouseHand="true" @click.native="routerTo('/department-shipment')"> content-style="font-size: 14px;" mark-style="font-size: 10px;"
<title-content-mark :content="lskh.amount+ ' 万元'" />
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;" </showcase>
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drydl.count + ' 车'" <showcase style="width: 16%;" title="新增客户" :mouseHand="true" @click.native="routerTo('/lost-add-customer',1)">
/> <title-content-mark
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;" 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-style="font-size: 14px;" mark-style="font-size: 10px;" :content="xzkh.weight+ ' 万吨'"
:content="drydl.weight + ' 万吨'" /> />
</showcase> <title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
<showcase style="width: 16%;" title="当日完成量"> content-style="font-size: 14px;" mark-style="font-size: 10px;"
<title-content-mark :content="xzkh.amount + ' 万元'" />
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;" </showcase>
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="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>
</div>
</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> </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>
</div> </div>
</template> </template>
...@@ -731,62 +744,10 @@ export default { ...@@ -731,62 +744,10 @@ export default {
} }
}; };
</script> </script>
<style lang="postcss">
<style scoped>
#ar_company_list:hover { #ar_company_list:hover {
background-color: #19EBFF10; background-color: #19EBFF10;
transform: scale(101%); 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> </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