Skip to content

S
shld-databoard-ui
You need to sign in or sign up before continuing.
Commit 716f2107 authored by 王礼鸿 Baimax Wang's avatar 王礼鸿 Baimax Wang
Browse files
Options

订单目标情况

parent f45962b2
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1047 additions and 31 deletions
config/index.js
View file @ 716f2107
...@@ -29,7 +29,14 @@ module.exports = { ...@@ -29,7 +29,14 @@ module.exports = {
assetsPublicPath: '/', assetsPublicPath: '/',
proxyTable: { proxyTable: {
'/api': { '/api': {
target: 'http://localhost:8080', // 测试 target: 'http://127.0.0.1:4523/m1/3446320-0-default', // 测试
changeOrigin: true, // 改变源（是否跨域）
pathRewrite: {
'^/api': '/'
}
},
'/m1/3446320-0-default/api': {
target: 'http://127.0.0.1:4523', // 测试
changeOrigin: true, // 改变源（是否跨域） changeOrigin: true, // 改变源（是否跨域）
pathRewrite: { pathRewrite: {
'^/api': '/' '^/api': '/'
......
package-lock.json
View file @ 716f2107
This diff is collapsed.
package.json
View file @ 716f2107
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
"dependencies": { "dependencies": {
"axios": "^1.4.0", "axios": "^1.4.0",
"echarts": "^5.4.3", "echarts": "^5.4.3",
"element-ui": "^2.15.14",
"jquery": "^3.2.1", "jquery": "^3.2.1",
"js-base64": "^3.7.5", "js-base64": "^3.7.5",
"js-md5": "^0.7.3", "js-md5": "^0.7.3",
......
src/module/api/apiList.js
View file @ 716f2107
...@@ -103,6 +103,7 @@ export const transportTypeOrderFinishPie = (date) => fetch("/api/query/dash_boar ...@@ -103,6 +103,7 @@ export const transportTypeOrderFinishPie = (date) => fetch("/api/query/dash_boar
export const customerOrderFinishPie = (date) => fetch("/api/query/dash_board/action/get_order_finish_data_by_customer_day", {aux: {"cur_day": date}}, "POST") export const customerOrderFinishPie = (date) => fetch("/api/query/dash_board/action/get_order_finish_data_by_customer_day", {aux: {"cur_day": date}}, "POST")
export const getOrderFinishDataByCondition = (aux) => fetch("/api/query/*/action/get_order_finish_data_by_condition", {aux: aux}, "POST") export const getOrderFinishDataByCondition = (aux) => fetch("/api/query/*/action/get_order_finish_data_by_condition", {aux: aux}, "POST")
export const getOrderWeightAndProportionList = (aux) => fetch("/api/query/dash_board/action/get_order_weight_and_proportion_list", {aux: aux}, "POST") export const getOrderWeightAndProportionList = (aux) => fetch("/api/query/dash_board/action/get_order_weight_and_proportion_list", {aux: aux}, "POST")
export const getTargetOrderDataByCondition = (aux) => fetch("/m1/3446320-0-default/api/query/*/action/get_target_order_data_by_condition", {aux: aux}, "POST")
//流失客户 & 新增客户 //流失客户 & 新增客户
export const getOrderLoseAddCustomer = (cur_day) => fetch('/api/query/*/action/get_order_loss_add_customer', { export const getOrderLoseAddCustomer = (cur_day) => fetch('/api/query/*/action/get_order_loss_add_customer', {
......
src/module/databoard/databoard/js/targetAchievementData.js 0 → 100644
View file @ 716f2107
import { getTargetOrderDataByCondition} from '../../../api/apiList';
import {calc_hb_str, calc_zb_str, conver_amont} from "../../../utils/numUtil";
import mockData from "../mockData/target-achievement.json";
export const getData = async (aux,callback) => {
let resList = new Array();
await getTargetOrderDataByCondition(aux).then(function (res) {
resList = res.data;
});
callback(resList);
return resList
}
export const getTargetOrderDataByConditionCount = async (aux,callback) => {
let resData;
await getTargetOrderDataByCondition(aux).then(function (res) {
resData = dataFormatter(res.data);
});
callback(resData);
return resData
}
function generateData(count, res) {
res.push({
title: "吨位(万吨)",
actualValue: conver_amont(count.unit_weight),
targetValue: conver_amont(count.target_unit_weight),
})
res.push({
title: "营业额(万元)",
actualValue: conver_amont(count.sell_settle_amount),
targetValue: conver_amont(count.target_sell_settle_amount),
})
res.push({
title: "净利润(万元)",
actualValue: conver_amont(count.gross_profit_amount),
targetValue: conver_amont(count.target_gross_profit_amount),
})
}
function dataFormatter(data){
let res = [];
for (let i = 0; i < data.length; i++) {
if (data[i].group_name === "总计"){
generateData(data[i], res);
break;
}
}
//mock数据，接口没好的时候用的
if (res.length === 0){
let count = mockData.count;
generateData(count, res);
}
return res;
}
src/module/databoard/databoard/target-achievement.vue 0 → 100644
View file @ 716f2107
<template>
<div class="target-achievement">
<div class="menu">
<input type="button" :class="{'selectedBtn': currentBtn.subdivide === '01'}" value="事业部细分" @click="clickBtn('subdivide','01')">
<input type="button" :class="{'selectedBtn': currentBtn.subdivide === '02'}" value="区域细分" @click="clickBtn('subdivide','02')">
</div>
<div class="menu">
<input type="button" :class="{'selectedBtn': currentBtn.date === 'day'}" value="日统计" @click="clickBtn('date','day')">
<input type="button" :class="{'selectedBtn': currentBtn.date === 'month'}" value="月统计" @click="clickBtn('date','month')">
<input type="button" :class="{'selectedBtn': currentBtn.date === 'year'}" value="年统计" @click="clickBtn('date','year')">
</div>
<div class="list">
<el-table :data="data" height="650" style="font-size: 18px" :header-cell-style="headStyleJs" :cell-style="bodyStyleJs">
<el-table-column
prop="group_name"
label="" width="300">
</el-table-column>
<el-table-column
label="吨位(万吨)">
<el-table-column
prop="unit_weight"
:formatter="cellNumFormatter"
label="实际值">
</el-table-column>
<el-table-column
prop="target_unit_weight"
:formatter="cellNumFormatter"
label="目标值">
</el-table-column>
</el-table-column>
<el-table-column
label="营业额(万元)">
<el-table-column
prop="sell_settle_amount"
:formatter="cellNumFormatter"
label="实际值">
</el-table-column>
<el-table-column
prop="target_sell_settle_amount"
:formatter="cellNumFormatter"
label="目标值">
</el-table-column>
</el-table-column>
<el-table-column
label="净利润(万元)">
<el-table-column
prop="gross_profit_amount"
:formatter="cellNumFormatter"
label="实际值">
</el-table-column>
<el-table-column
prop="target_gross_profit_amount"
:formatter="cellNumFormatter"
label="目标值">
</el-table-column>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import mockData from "./mockData/target-achievement.json";
import {getData} from "./js/targetAchievementData";
import {conver_amont} from "../../utils/numUtil";
export default {
name:"TargetAchievement",
data() {
return {
borderLabel:[
'吨位(万吨)',
'营业额(万元)',
'营业额(万元)',
],
borderField:[
'target_unit_weight',
'target_sell_settle_amount',
],
currentBtn:{
date: this.$route.query.code ? this.$route.query.code : "day",
subdivide: "01",
},
dateTimeChoice:{
day: '昨日',
month: "上月",
year: "去年",
},
rowHeight: "50px",
data: mockData["01"][this.$route.query.code ? this.$route.query.code : "day"]
};
},
methods: {
clickBtn(type,dimension){
this.currentBtn[type] = dimension;
this.getData();
},
getData() {
getData({cur_day: this.today,time_type:this.currentBtn.date,group_type:this.currentBtn.subdivide},
(res) => {
this.data = res;
}
);
},
bodyStyleJs(param){
var {row, rowIndex,column} = param;
let style = {
height: this.rowHeight,
"text-align": "center"
};
if (row.group_name && (row.group_name.indexOf("总计") !== -1 || row.group_name.indexOf("小计") !== -1)){
style["font-weight"] = "bolder";
style["font-size"] = "x-large";
}
if (column && (column.property === "group_name" || this.borderField.includes(column.property))){
style["border-right"] = "1px solid #aaaa";
}
style["background-color"] = (rowIndex % 2 === 1)?"#0E5FFF20":"#0E5FFF30";
return style;
},
headStyleJs(param){
let style = {
"background-color": "var(--global-background-color)",
"text-align": "center",
color: "white"
};
if (!param.column.label || this.borderLabel.includes(param.column.label) || this.borderField.includes(param.column.property)){
style["border-right"] = "1px solid #aaaa";
}
return style;
},
cellNumFormatter(row, column, cellValue, index){
return conver_amont(cellValue);
}
},
mounted() {
this.getData();
},
watch:{
countDown(n,o){
if (n === 1){
this.getData();
}
},
},
props:{
countDown:{
type: Number
}
}
};
</script>
<style scoped>
.target-achievement{
width: 100%;
height: 100%;
}
.menu{
width: 100%;
height: 5%;
display: flex;
align-items: center;
padding-left: 2%;
}
.list{
height: 80%;
width: 100%;
color: white;
padding: 2rem;
}
input[type="button"]{
height: 80%;
margin: 0.5%;
border: none;
font-size: 12px;
border-radius: 25px;
font-weight: bold;
padding: 0 10px;
color: #00c8d6;
background-color: #1234a1;
}
input[type="button"]:hover{
color: #1234a1 !important;
background-color: #00c8d6 !important;
}
.selectedBtn{
color: #1234a1 !important;
background-color: #00c8d6 !important;
}
.el-table{
color: white;
background-color: rgba(0,0,0,0);
border: none;
}
.el-table::-webkit-scrollbar { width: 0 !important }
.list /deep/ td.el-table__cell {
border: none;
}
.list /deep/ th.el-table__cell {
border: none;
}
.list /deep/ .el-table::before {
left: 0;
bottom: 0;
width: 100%;
height: 0;
}
/* // ----------修改elementui表格的默认样式----------- */
.list /deep/ .el-table__body-wrapper::-webkit-scrollbar {
// 整个滚动条
width: 0; // 纵向滚动条的宽度
background: rgba(213, 215, 220, 0.3);
border: none;
}
.list /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
// 滚动条轨道
border: none;
}
.list /deep/ tr:hover>td.el-table__cell{background-color:#0000}
/* // --------------------隐藏table gutter列和内容区右侧的空白 start */
.list /deep/ th.gutter {
display: none;
width: 0;
}
/*
.list /deep/ colgroup col[name="gutter"] {
display: none;
width: 0;
}
*/
.list /deep/ tr{
background-color: #0000;
}
.list /deep/ .el-table--group::after{
display: none;
}
/* // --------------------隐藏table gutter列和内容区右侧的空白 end */
.unSelectedBtn{
color: #00c8d6;
background-color: #1234a1;
}
</style>
src/module/databoard/index.vue
View file @ 716f2107
...@@ -51,36 +51,36 @@ ...@@ -51,36 +51,36 @@
</display-board> </display-board>
<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="每日目标情况" @click.native="routerTo('/target-achievement','day')">
<div <div
style="width: 100%; height: 100%; float:left; padding: 2%; line-height: 33px; display: flex; align-items: center; font-size: 10px;"> 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="targetAchievement.day" name="title" show-head/>
<table-column <table-column
style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;" style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;"
:data="mockData.mrmbqk" name="actualValue" title="实时值" show-head/> :data="targetAchievement.day" name="actualValue" title="实时值" show-head/>
<table-column style="float: left;width: 20%;" :data="mockData.mrmbqk" name="currentValue" title="目标值" <table-column style="float: left;width: 20%;" :data="targetAchievement.day" name="targetValue" title="目标值"
show-head/> show-head/>
</div> </div>
</display-board> </display-board>
<display-board style="width: 32%;" title="月度目标情况"> <display-board style="width: 32%;" title="月度目标情况" @click.native="routerTo('/target-achievement','month')">
<div <div
style="width: 100%; height: 100%; float:left; padding: 2%; line-height: 33px; display: flex; align-items: center; font-size: 10px;"> 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="targetAchievement.month" name="title" show-head/>
<table-column <table-column
style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;" style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;"
:data="mockData.ydmbqk" name="actualValue" title="实时值" show-head/> :data="targetAchievement.month" name="actualValue" title="实时值" show-head/>
<table-column style="float: left;width: 20%;" :data="mockData.ydmbqk" name="currentValue" title="目标值" <table-column style="float: left;width: 20%;" :data="targetAchievement.month" name="targetValue" title="目标值"
show-head/> show-head/>
</div> </div>
</display-board> </display-board>
<display-board style="width: 32%;" title="年度目标情况"> <display-board style="width: 32%;" title="年度目标情况" @click.native="routerTo('/target-achievement','year')">
<div <div
style="width: 100%; height: 100%; float:left; padding: 2%; line-height: 33px; display: flex; align-items: center; font-size: 10px;"> 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="targetAchievement.year" name="title" show-head/>
<table-column <table-column
style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;" style="float: left;width: 45%;font-size: 24px;font-weight: bold;color: #5eeef4;text-align: center;"
:data="mockData.ndmbqk" name="actualValue" title="实时值" show-head/> :data="targetAchievement.year" name="actualValue" title="实时值" show-head/>
<table-column style="float: left;width: 20%;" :data="mockData.ndmbqk" name="currentValue" title="目标值" <table-column style="float: left;width: 20%;" :data="targetAchievement.year" name="targetValue" title="目标值"
show-head/> show-head/>
</div> </div>
</display-board> </display-board>
...@@ -166,6 +166,7 @@ import { ...@@ -166,6 +166,7 @@ import {
import {calc_hb_str, calc_tb_str, conver_amont, conver_num_retain} from "../utils/numUtil"; import {calc_hb_str, calc_tb_str, conver_amont, conver_num_retain} from "../utils/numUtil";
import {getTransportTypeOrderFinishPie, getCustomerOrderFinishPie} from "./databoard/js/indexPieData"; import {getTransportTypeOrderFinishPie, getCustomerOrderFinishPie} from "./databoard/js/indexPieData";
import moment from 'moment' import moment from 'moment'
import {getTargetOrderDataByConditionCount} from "./databoard/js/targetAchievementData";
export default { export default {
components: { components: {
RingPieChart, RingPieChart,
...@@ -495,7 +496,12 @@ export default { ...@@ -495,7 +496,12 @@ export default {
transportTypeOrderFinishPie: [], transportTypeOrderFinishPie: [],
customerOrderFinishPie: [], customerOrderFinishPie: [],
arCompanyList: [], arCompanyList: [],
charts: {} charts: {},
targetAchievement:{
day: null,
month: null,
year: null,
}
} }
}, },
methods: { methods: {
...@@ -572,13 +578,14 @@ export default { ...@@ -572,13 +578,14 @@ export default {
}); });
}, },
refreshData() { refreshData() {
getTransportTypeOrderFinishPie(res => this.transportTypeOrderFinishPie = res, this.today); getTransportTypeOrderFinishPie(res => this.transportTypeOrderFinishPie = res, this.today);
getCustomerOrderFinishPie(res => this.customerOrderFinishPie = res, this.today); getCustomerOrderFinishPie(res => this.customerOrderFinishPie = res, this.today);
this.showBusinessConditionDatas(); this.showBusinessConditionDatas();
this.getArSummaryBar(); this.getArSummaryBar();
this.getArCompanyList(); this.getArCompanyList();
this.getLoseAndAdd(); this.getLoseAndAdd();
this.getOrderBusinessCondition(); this.getOrderBusinessCondition();
this.getTargetOrderDataByConditionCount();
}, },
pieDataValueFormatter(param) { pieDataValueFormatter(param) {
return conver_amont(param) + "万吨"; return conver_amont(param) + "万吨";
...@@ -605,6 +612,11 @@ export default { ...@@ -605,6 +612,11 @@ export default {
this.yl.amount = conver_amont(data.cur_unfinish_sell_settle_amount); this.yl.amount = conver_amont(data.cur_unfinish_sell_settle_amount);
this.yl.weight = conver_amont(data.cur_unfinish_unit_weight); this.yl.weight = conver_amont(data.cur_unfinish_unit_weight);
}) })
},
getTargetOrderDataByConditionCount() {
getTargetOrderDataByConditionCount({cur_day: this.today,time_type:"day",group_type:"01"},(res) => {this.targetAchievement.day = res;})
getTargetOrderDataByConditionCount({cur_day: this.today,time_type:"month",group_type:"01"},(res) => {this.targetAchievement.month = res;})
getTargetOrderDataByConditionCount({cur_day: this.today,time_type:"year",group_type:"01"},(res) => {this.targetAchievement.year = res;})
} }
}, },
mounted() { mounted() {
......
src/module/index/router/index_router.js
View file @ 716f2107
...@@ -9,9 +9,13 @@ import ArMonthlyCompanyBar from "../../databoard/components/chart/ar-monthly-com ...@@ -9,9 +9,13 @@ import ArMonthlyCompanyBar from "../../databoard/components/chart/ar-monthly-com
import TurnoverDetail from "../../databoard/databoard/turnover-detail.vue"; import TurnoverDetail from "../../databoard/databoard/turnover-detail.vue";
import OrderProportion from "../../databoard/databoard/order-proportion.vue"; import OrderProportion from "../../databoard/databoard/order-proportion.vue";
import LostAddCustomer from "../../databoard/databoard/lost-add-customer.vue"; import LostAddCustomer from "../../databoard/databoard/lost-add-customer.vue";
import TargetAchievement from "../../databoard/databoard/target-achievement.vue";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Router) Vue.use(Router)
Vue.use(ElementUI)
export default new Router({ export default new Router({
routes: [ routes: [
...@@ -69,6 +73,11 @@ export default new Router({ ...@@ -69,6 +73,11 @@ export default new Router({
path: '/lost-add-customer', path: '/lost-add-customer',
name: 'lostAddCustomer', name: 'lostAddCustomer',
component: LostAddCustomer component: LostAddCustomer
} },
{
path: '/target-achievement',
name: 'TargetAchievement',
component: TargetAchievement
},
] ]
}) })
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