Skip to content

S
shld-databoard-ui
Commit 907e5cf0 authored by 王礼鸿 Baimax Wang's avatar 王礼鸿 Baimax Wang
Browse files
Options

Merge remote-tracking branch 'origin/ld_databoard_fix' into 230829_wlh_fix 

# Conflicts:
#	src/module/api/apiList.js
#	src/module/databoard/index.vue
parents b889adc7 fe7f1a53
Hide whitespace changes
Inline Side-by-side
Showing with 273 additions and 101 deletions
package-lock.json
View file @ 907e5cf0
...@@ -14,8 +14,10 @@ ...@@ -14,8 +14,10 @@
"js-base64": "^3.7.5", "js-base64": "^3.7.5",
"js-md5": "^0.7.3", "js-md5": "^0.7.3",
"materialize-css": "^0.98.2", "materialize-css": "^0.98.2",
"moment": "^2.29.4",
"vue": "^2.3.3", "vue": "^2.3.3",
"vue-axios": "^3.5.2", "vue-axios": "^3.5.2",
"vue-cookies": "^1.8.3",
"vue-router": "^2.3.1" "vue-router": "^2.3.1"
}, },
"devDependencies": { "devDependencies": {
...@@ -5295,6 +5297,14 @@ ...@@ -5295,6 +5297,14 @@
"mkdirp": "bin/cmd.js" "mkdirp": "bin/cmd.js"
} }
}, },
"node_modules/moment": {
"version": "2.29.4",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
"integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
"engines": {
"node": "*"
}
},
"node_modules/move-concurrently": { "node_modules/move-concurrently": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
...@@ -8889,6 +8899,11 @@ ...@@ -8889,6 +8899,11 @@
"vue": "^3.0.0 || ^2.0.0" "vue": "^3.0.0 || ^2.0.0"
} }
}, },
"node_modules/vue-cookies": {
"version": "1.8.3",
"resolved": "https://registry.npmjs.org/vue-cookies/-/vue-cookies-1.8.3.tgz",
"integrity": "sha512-VBRsyRMVdahBgFfh389TMHPmDdr4URDJNMk4FKSCfuNITs7+jitBDhwyL4RJd3WUsfOYNNjPAkfbehyH9AFuoA=="
},
"node_modules/vue-hot-reload-api": { "node_modules/vue-hot-reload-api": {
"version": "2.3.4", "version": "2.3.4",
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz", "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
...@@ -14358,6 +14373,11 @@ ...@@ -14358,6 +14373,11 @@
"minimist": "^1.2.6" "minimist": "^1.2.6"
} }
}, },
"moment": {
"version": "2.29.4",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
"integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
},
"move-concurrently": { "move-concurrently": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
...@@ -17354,6 +17374,11 @@ ...@@ -17354,6 +17374,11 @@
"integrity": "sha512-GP+dct7UlAWkl1qoP3ppw0z6jcSua5/IrMpjB5O8bh089iIiJ+hdxPYH2NPEpajlYgkW5EVMP95ttXWdas1O0g==", "integrity": "sha512-GP+dct7UlAWkl1qoP3ppw0z6jcSua5/IrMpjB5O8bh089iIiJ+hdxPYH2NPEpajlYgkW5EVMP95ttXWdas1O0g==",
"requires": {} "requires": {}
}, },
"vue-cookies": {
"version": "1.8.3",
"resolved": "https://registry.npmjs.org/vue-cookies/-/vue-cookies-1.8.3.tgz",
"integrity": "sha512-VBRsyRMVdahBgFfh389TMHPmDdr4URDJNMk4FKSCfuNITs7+jitBDhwyL4RJd3WUsfOYNNjPAkfbehyH9AFuoA=="
},
"vue-hot-reload-api": { "vue-hot-reload-api": {
"version": "2.3.4", "version": "2.3.4",
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz", "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
......
package.json
View file @ 907e5cf0
...@@ -16,8 +16,10 @@ ...@@ -16,8 +16,10 @@
"js-base64": "^3.7.5", "js-base64": "^3.7.5",
"js-md5": "^0.7.3", "js-md5": "^0.7.3",
"materialize-css": "^0.98.2", "materialize-css": "^0.98.2",
"moment": "^2.29.4",
"vue": "^2.3.3", "vue": "^2.3.3",
"vue-axios": "^3.5.2", "vue-axios": "^3.5.2",
"vue-cookies": "^1.8.3",
"vue-router": "^2.3.1" "vue-router": "^2.3.1"
}, },
"devDependencies": { "devDependencies": {
......
src/module/api/apiList.js
View file @ 907e5cf0
...@@ -20,6 +20,35 @@ export const userLogin = (username, pass, captchaSign, verificationcode, captcha ...@@ -20,6 +20,35 @@ export const userLogin = (username, pass, captchaSign, verificationcode, captcha
} }
}, 'POST'); }, 'POST');
//首页营业额率值 -汇总
export const getBusinessConditionDatas = (cur_day) => fetch('/api/query/*/action/get_business_condition_datas', {
aux: {
cur_day: cur_day
}
}, 'POST');
//明细页营业额汇月 -汇总
export const getBusinessConditionDataByMonth = (cur_day) => fetch('/api/query/*/action/get_business_condition_datas_by_month', {
aux: {
cur_day: cur_dayS
}
}, 'POST');
//明细页营业额汇年 -汇总
export const getBusinessConditionDatasByYear = (cur_day) => fetch('/api/query/*/action/get_business_condition_datas_by_year', {
aux: {
cur_day: cur_dayS
}
}, 'POST');
// 应收账款汇总 // 应收账款汇总
export const arSummaryBar = () => fetch("/api/query/dash_board/action/get_ar_summary_bar", {}, "POST") export const arSummaryBar = () => fetch("/api/query/dash_board/action/get_ar_summary_bar", {}, "POST")
......
src/module/api/fetch.js
View file @ 907e5cf0
import VueCookies from "vue-cookies";
export default async (url = '', data = {}, type = 'GET', method = 'fetch') => { export default async (url = '', data = {}, type = 'GET', method = 'fetch') => {
let baseUrl = ''; let baseUrl = '';
if (process.env.NODE_ENV == 'development') { if (process.env.NODE_ENV == 'development') {
...@@ -26,7 +28,8 @@ export default async (url = '', data = {}, type = 'GET', method = 'fetch') => { ...@@ -26,7 +28,8 @@ export default async (url = '', data = {}, type = 'GET', method = 'fetch') => {
method: type, method: type,
headers: { headers: {
'Accept': 'application/json', 'Accept': 'application/json',
'Content-Type': 'application/json' 'Content-Type': 'application/json',
'X-XSRF-TOKEN':VueCookies.get("XSRF-TOKEN")
}, },
mode: "cors", mode: "cors",
cache: "force-cache" cache: "force-cache"
......
src/module/databoard/index.vue
View file @ 907e5cf0
...@@ -2,14 +2,18 @@ ...@@ -2,14 +2,18 @@
<div class="main"> <div class="main">
<div class="middle"> <div class="middle">
<display-board class="trade_left" title="营业情况"> <display-board class="trade_left" title="营业情况">
<div style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;"> <div
<contrast-card v-for="data in mockData.yyqk" style="height: 28%;" @click.native="routerTo(paths[data.title])"> style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;">
<title-content-mark style="width: 40%;color: #369afa;float: left;" :title="data.title" :content="data.amount" :mark="data.unit"/> <contrast-card v-for="data in yyqk" style="height: 28%;" @click.native="routerTo(paths[data.title])">
<div style="width: 60%; height: 100%; float:left; padding: 4% 4% 0 12%; line-height: 26px;; display: flex; align-items: center;"> <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: 25%;" :data="data.hb" name="title"/>
<table-column style="float: left;width: 40%;" :data="data.hb" name="amount"/> <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"
<!-- <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; "/>--> :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> </div>
</contrast-card> </contrast-card>
</div> </div>
...@@ -17,19 +21,24 @@ ...@@ -17,19 +21,24 @@
<display-board class="trade_middle" corner_size="large"> <display-board class="trade_middle" corner_size="large">
<div style="height: 36%;display: flex;justify-content: space-evenly;padding-top: 1.5rem"> <div style="height: 36%;display: flex;justify-content: space-evenly;padding-top: 1.5rem">
<simple-card v-for="data in mockData.sr" style="width: 30%;height: 100%"> <simple-card v-for="data in mockData.sr" style="width: 30%;height: 100%">
<title-content-mark style="color: #5eeef4;" :title="data.title" :content="data.value" :mark="'万元'" isCenter isBold/> <title-content-mark style="color: #5eeef4;" :title="data.title" :content="data.value" :mark="'万元'"
isCenter isBold/>
</simple-card> </simple-card>
</div> </div>
<ar-summary-bar ref="arSummaryBar" style="width: 100%; height: 64%;"></ar-summary-bar> <ar-summary-bar ref="arSummaryBar" style="width: 100%; height: 64%;"></ar-summary-bar>
</display-board> </display-board>
<display-board class="trade_right" title="账款情况"> <display-board class="trade_right" title="账款情况">
<div style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;"> <div
style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;">
<contrast-card v-for="data in mockData.zkqk" style="height: 28%;"> <contrast-card v-for="data in mockData.zkqk" style="height: 28%;">
<title-content-mark style="width: 40%;color: #369afa;float: left;" :title="data.title" :content="data.amount" :mark="data.unit"/> <title-content-mark style="width: 40%;color: #369afa;float: left;" :title="data.title"
<div style="width: 60%; height: 100%; float:left; padding: 4% 4% 0 12%; line-height: 26px;; display: flex; align-items: center;"> :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: 25%;" :data="data.hb" name="title"/>
<table-column style="float: left;width: 40%;" :data="data.hb" name="amount"/> <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-function="cellStyleFunction"/>
</div> </div>
</contrast-card> </contrast-card>
</div> </div>
...@@ -42,47 +51,83 @@ ...@@ -42,47 +51,83 @@
<div class="trade_middle" style="border: none;box-shadow: none;"> <div class="trade_middle" style="border: none;box-shadow: none;">
<div style="display: flex; justify-content: space-between; height: 50%;"> <div style="display: flex; justify-content: space-between; height: 50%;">
<display-board style="width: 32%;" title="每日目标情况"> <display-board style="width: 32%;" title="每日目标情况">
<div style="width: 100%; height: 100%; float:left; padding: 2%; line-height: 33px; display: flex; align-items: center; font-size: 10px;"> <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="mockData.mrmbqk" name="title" show-head/> <table-column style="float: left;width: 35%;" :data="mockData.mrmbqk" name="title" show-head/>
<table-column style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;" :data="mockData.mrmbqk" name="actualValue" title="实时值" show-head/> <table-column
<table-column style="float: left;width: 20%;" :data="mockData.mrmbqk" name="currentValue" title="目标值" show-head/> style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;"
:data="mockData.mrmbqk" name="actualValue" title="实时值" show-head/>
<table-column style="float: left;width: 20%;" :data="mockData.mrmbqk" name="currentValue" title="目标值"
show-head/>
</div> </div>
</display-board> </display-board>
<display-board style="width: 32%;" title="月度目标情况"> <display-board style="width: 32%;" title="月度目标情况">
<div style="width: 100%; height: 100%; float:left; padding: 2%; line-height: 33px; display: flex; align-items: center; font-size: 10px;"> <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="mockData.ydmbqk" name="title" show-head/> <table-column style="float: left;width: 35%;" :data="mockData.ydmbqk" name="title" show-head/>
<table-column style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;" :data="mockData.ydmbqk" name="actualValue" title="实时值" show-head/> <table-column
<table-column style="float: left;width: 20%;" :data="mockData.ydmbqk" name="currentValue" title="目标值" show-head/> style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;"
:data="mockData.ydmbqk" name="actualValue" title="实时值" show-head/>
<table-column style="float: left;width: 20%;" :data="mockData.ydmbqk" name="currentValue" title="目标值"
show-head/>
</div> </div>
</display-board> </display-board>
<display-board style="width: 32%;" title="年度目标情况"> <display-board style="width: 32%;" title="年度目标情况">
<div style="width: 100%; height: 100%; float:left; padding: 2%; line-height: 33px; display: flex; align-items: center; font-size: 10px;"> <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="mockData.ndmbqk" name="title" show-head/> <table-column style="float: left;width: 35%;" :data="mockData.ndmbqk" name="title" show-head/>
<table-column style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;" :data="mockData.ndmbqk" name="actualValue" title="实时值" show-head/> <table-column
<table-column style="float: left;width: 20%;" :data="mockData.ndmbqk" name="currentValue" title="目标值" show-head/> style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;"
:data="mockData.ndmbqk" name="actualValue" title="实时值" show-head/>
<table-column style="float: left;width: 20%;" :data="mockData.ndmbqk" name="currentValue" title="目标值"
show-head/>
</div> </div>
</display-board> </display-board>
</div> </div>
<div style="display: flex; justify-content: space-between; height: 50%; padding-top: 2rem;"> <div style="display: flex; justify-content: space-between; height: 50%; padding-top: 2rem;">
<showcase style="width: 18%;" title="当日订单量"> <showcase style="width: 18%;" title="当日订单量">
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;" content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="mockData.drddl.weight" mark="万吨" /> <title-content-mark
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;" content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="mockData.drddl.amount" mark="万元"/> style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="mockData.drddl.weight"
mark="万吨"/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 16px;" mark-style="font-size: 10px;"
:content="mockData.drddl.amount" mark="万元"/>
</showcase> </showcase>
<showcase style="width: 18%;" title="当日完成量"> <showcase style="width: 18%;" title="当日完成量">
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;" content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="mockData.drwcl.weight" mark="万吨" /> <title-content-mark
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;" content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="mockData.drwcl.amount" mark="万元"/> style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="mockData.drwcl.weight"
mark="万吨"/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 16px;" mark-style="font-size: 10px;"
:content="mockData.drwcl.amount" mark="万元"/>
</showcase> </showcase>
<showcase style="width: 18%;" title="余量"> <showcase style="width: 18%;" title="余量">
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;" content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="mockData.yl.weight" mark="万吨" /> <title-content-mark
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;" content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="mockData.yl.amount" mark="万元"/> style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="mockData.yl.weight" mark="万吨"/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 16px;" mark-style="font-size: 10px;"
:content="mockData.yl.amount" mark="万元"/>
</showcase> </showcase>
<showcase style="width: 18%;" title="流失客户"> <showcase style="width: 18%;" title="流失客户">
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;" content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="mockData.lskh.weight" mark="万吨" /> <title-content-mark
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;" content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="mockData.lskh.amount" mark="万元"/> style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="mockData.lskh.weight"
mark="万吨"/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 16px;" mark-style="font-size: 10px;"
:content="mockData.lskh.amount" mark="万元"/>
</showcase> </showcase>
<showcase style="width: 18%;" title="新增客户"> <showcase style="width: 18%;" title="新增客户">
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;" content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="mockData.xzkh.weight" mark="万吨" /> <title-content-mark
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;" content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="mockData.xzkh.amount" mark="万元"/> style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="mockData.xzkh.weight"
mark="万吨"/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 16px;" mark-style="font-size: 10px;"
:content="mockData.xzkh.amount" mark="万元"/>
</showcase> </showcase>
</div> </div>
</div> </div>
...@@ -105,7 +150,8 @@ import WinnersList from "./components/card/winners-list.vue"; ...@@ -105,7 +150,8 @@ import WinnersList from "./components/card/winners-list.vue";
import TitleContentMark from "./components/layout/title-content-mark.vue"; import TitleContentMark from "./components/layout/title-content-mark.vue";
import TableColumn from "./components/table/table-column.vue"; import TableColumn from "./components/table/table-column.vue";
import RingPieChart from "./components/chart/ring-pie-chart.vue"; import RingPieChart from "./components/chart/ring-pie-chart.vue";
import {arSummaryBar, arCompanyList} from "../api/apiList" import {calc_hb_str, calc_tb_str, conver_amont} from "../util/util";
import {arSummaryBar, arCompanyList,getBusinessConditionDatas} from "../api/apiList"
export default { export default {
components: { components: {
...@@ -121,68 +167,63 @@ export default { ...@@ -121,68 +167,63 @@ export default {
}, },
data() { data() {
return { return {
arCompanyList: [ // today: moment().format("yyyy-MM-DD"),
{title: "XX有限公司", column: [{key: "未收款（万元）", value: 0}]}, today: '2023-06-19',
{title: "XX有限公司", column: [{key: "未收款（万元）", value: 0}]}, yyqk: {
{title: "XX有限公司", column: [{key: "未收款（万元）", value: 0}]}, yye: {
{title: "XX有限公司", column: [{key: "未收款（万元）", value: 0}]}, title: "营业额",
{title: "XX有限公司", column: [{key: "未收款（万元）", value: 0}]}, amount: "20,303",
], unit: "万元",
mockData: { hb: [
yyqk: { {
yye: { title: "昨天",
title: "营业额", amount: "21,000",
amount: "20,303", rate: "-3.32%",
unit: "万元", },
hb: [ {
{ title: "上月",
title: "昨天", amount: "20,000",
amount: "21,000", rate: "+4.92%",
rate: "-3.32%", },
}, ],
{ },
title: "上月", cb: {
amount: "20,000", title: "成本",
rate: "+4.92%", amount: "10,303",
}, unit: "万元",
], hb: [
}, {
cb: { title: "昨日",
title: "成本", amount: "11,000",
amount: "10,303", rate: "-2.68%",
unit: "万元", },
hb: [ {
{ title: "上月",
title: "昨日", amount: "10,000",
amount: "11,000", rate: "+5.71%",
rate: "-2.68%", },
}, ],
{
title: "上月",
amount: "10,000",
rate: "+5.71%",
},
],
},
ml: {
title: "毛利",
amount: "10,000",
unit: "万元",
hb: [
{
title: "昨日",
amount: "10,000",
rate: "0.00%",
},
{
title: "上月",
amount: "10,000",
rate: "0.00%",
},
],
},
}, },
zkqk: { ml: {
title: "毛利",
amount: "10,000",
unit: "万元",
hb: [
{
title: "昨日",
amount: "10,000",
rate: "0.00%",
},
{
title: "上月",
amount: "10,000",
rate: "0.00%",
},
],
},
},
mockData: {
zqk: {
yszk: { yszk: {
title: "应收账款", title: "应收账款",
amount: "20,303", amount: "20,303",
...@@ -349,25 +390,26 @@ export default { ...@@ -349,25 +390,26 @@ export default {
{value: 484, name: '水运'}, {value: 484, name: '水运'},
], ],
customer: [ customer: [
{value: 500, name: '上海欧冶物流股份有限公司'}, {value: 500, name: '上海欧冶物流股份有限公司'},
{value: 2500, name: '宝钢运输部'}, {value: 2500, name: '宝钢运输部'},
{value: 1100, name: '宝山钢铁股份有限公司'}, {value: 1100, name: '宝山钢铁股份有限公司'},
] ]
}, },
}, },
paths:{ paths: {
"营业额": "/turnover-detail", "营业额": "/turnover-detail",
"成本": "/turnover-detail", "成本": "/turnover-detail",
"毛利": "/turnover-detail", "毛利": "/turnover-detail",
}, },
charts:{} charts: {}
} }
}, },
methods: { methods: {
cellStyleFunction(data) { cellStyleFunction(data) {
let res = {color: '#5eeef4'}; let res = {color: '#33ff66'};
if(data.indexOf('+') !== -1){ console.log(data+":"+data.indexOf('+'))
res.color = '#fee064' if (data.indexOf('-') !== -1) {
res.color = '#ff3300'
} }
return res; return res;
}, },
...@@ -379,6 +421,31 @@ export default { ...@@ -379,6 +421,31 @@ export default {
routerTo(path){ routerTo(path){
this.$router.push({path: path}); this.$router.push({path: path});
}, },
//营业情况
showBusinessConditionDatas() {
let res = getBusinessConditionDatas(this.today)
res.then(data => {
data = data.data;
//营业额
this.yyqk.yye.amount = conver_amont(data.cur_sell_settle_amount);
this.yyqk.yye.hb[0].amount = conver_amont(data.pre_sell_settle_amount);
this.yyqk.yye.hb[0].rate = calc_hb_str(data.cur_sell_settle_amount, data.pre_sell_settle_amount);
this.yyqk.yye.hb[1].amount = conver_amont(data.pre_month_sell_settle_amount);
this.yyqk.yye.hb[1].rate = calc_tb_str(data.cur_sell_settle_amount, data.pre_month_sell_settle_amount);
//成本
this.yyqk.cb.amount = conver_amont(data.cur_buy_settle_amount);
this.yyqk.cb.hb[0].amount = conver_amont(data.pre_buy_settle_amount);
this.yyqk.cb.hb[0].rate = calc_hb_str(data.cur_buy_settle_amount, data.pre_buy_settle_amount);
this.yyqk.cb.hb[1].amount = conver_amont(data.pre_month_buy_settle_amount);
this.yyqk.cb.hb[1].rate = calc_tb_str(data.cur_buy_settle_amount, data.pre_month_buy_settle_amount);
//毛利
this.yyqk.ml.amount = conver_amont(data.cur_gross_profit_amount);
this.yyqk.ml.hb[0].amount = conver_amont(data.pre_gross_profit_amount);
this.yyqk.ml.hb[0].rate = calc_hb_str(data.cur_gross_profit_amount, data.pre_gross_profit_amount);
this.yyqk.ml.hb[1].amount = conver_amont(data.pre_month_gross_profit_amount);
this.yyqk.ml.hb[1].rate = calc_tb_str(data.cur_gross_profit_amount, data.pre_month_gross_profit_amount);
})
},
// 跳转已开票未收款页面 // 跳转已开票未收款页面
goArBar() { goArBar() {
this.$router.push('/ar_bar') this.$router.push('/ar_bar')
...@@ -408,8 +475,10 @@ export default { ...@@ -408,8 +475,10 @@ export default {
console.log(err); console.log(err);
}); });
} }
}, },
mounted() { mounted() {
this.showBusinessConditionDatas();
setTimeout(() => { setTimeout(() => {
window.addEventListener('resize', this.resizeChart); window.addEventListener('resize', this.resizeChart);
}, 500) }, 500)
......
src/module/util/util.js 0 → 100644
View file @ 907e5cf0
//环比值=（当日营业额-昨日营业额）/昨日营业额*100%计算
export const calc_hb_str = function (cur, pre) {
return conver_num_rate(formater((cur - pre) / pre * 100));
};
//同比值=（当日营业额上个月同一日营业额）/上个月同一日营业额*100%计算
export const calc_tb_str = function (cur, pre) {
return conver_num_rate(formater(cur / pre * 100));
};
//conver amont
export const conver_amont = function (amont) {
return formater(amont / 10000);
};
//Positive and negative
export const conver_num_rate = function (amont) {
if (amont > 0) {
return "+" + amont + "%"
} else {
return "-" + amont + "%"
}
};
//数字金额显示
function formater(data) {
if (!data) return '0.00'
// 将数据分割，保留两位小数
data = data.toFixed(2)
// 获取整数部分
const intPart = Math.trunc(data)
// 整数部分处理，增加,
const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
// 预定义小数部分
let floatPart = '.00'
// 将数据分割为小数部分和整数部分
const newArr = data.toString().split('.')
if (newArr.length === 2) { // 有小数部分
floatPart = newArr[1].toString() // 取得小数部分
return intPartFormat + '.' + floatPart
}
return intPartFormat + floatPart
}
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