Skip to content

S
shld-databoard-ui
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