java_project
/
logpm_page
4
1
Fork 0
Code Issues Pull Requests Activity
Browse Source

数据看板

dev
qb 4 months ago
parent
5f11ea6778
commit
1855736383
1 changed files with 394 additions and 212 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 606
      src/views/desk/DataBoard.vue

606
src/views/desk/DataBoard.vue
Unescape View File

@ -45,8 +45,8 @@
class="align_center"
@click="
() =>
handleDetails('openOrderColumn', '开单数据详情 - 总计 - 单', {
tip: '总单数',
handleDetails('openOrderColumn', '开单数据详情 - 总计 - 件', {
tip: '总件数',
prop: 'totalCount',
})
"
@ -983,14 +983,14 @@
<div class="align_center">
<div
:class="{ button: true, active: signforData_status === '1' }"
@click="() => (signforData_status = '1')"
:class="{ button: true, active: signforData_status === 'daySignData' }"
@click="() => (signforData_status = 'daySignData')"
>
当天
</div>
<div
:class="{ button: true, active: signforData_status === '2' }"
@click="() => (signforData_status = '2')"
:class="{ button: true, active: signforData_status === 'monthSignData' }"
@click="() => (signforData_status = 'monthSignData')"
>
当月
</div>
@ -999,8 +999,16 @@
<div class="border pd10 flex-c-sb">
<div class="text_center">
<div class="data_box mb10">
<div class="data mr5px">{{ signforData.signNum || 0 }}</div>
<div
class="data_box mb10"
@click="
handleShowSignDetail('签收数据 - 已签收 - 件', signforData_status, {
tip: '已签收',
prop: 'signNum',
})
"
>
<div class="data mr5px underline">{{ signforData.signNum || 0 }}</div>
<div class="">件</div>
</div>
<div class="">
@ -1009,8 +1017,16 @@
</div>
<div class="text_center">
<div class="data_box orange mb10">
<div class="data mr5px">{{ signforData.unSignNum || 0 }}</div>
<div
class="data_box orange mb10"
@click="
handleShowSignDetail('签收数据 - 未签收 - 件', signforData_status, {
tip: '未签收',
prop: 'unSignNum',
})
"
>
<div class="data mr5px underline">{{ signforData.unSignNum || 0 }}</div>
<div class="">件</div>
</div>
<div class="">
@ -1019,8 +1035,16 @@
</div>
<div class="text_center">
<div class="data_box blue mb10">
<div class="data mr5px">
<div
class="data_box blue mb10"
@click="
handleShowSignDetail('签收数据 - 签收率 - %', signforData_status, {
tip: '签收率',
prop: 'signScale',
})
"
>
<div class="data mr5px underline">
{{ signforData.signScale || 0 }}
</div>
<div class="">%</div>
@ -1031,8 +1055,16 @@
</div>
<div class="text_center">
<div class="data_box purple mb10">
<div class="data mr5px">{{ signforData.clerkSignNum || 0 }}</div>
<div
class="data_box purple mb10"
@click="
handleShowSignDetail('签收数据 - 文员签收任务 - 个', signforData_status, {
tip: '文员签收任务',
prop: 'clerkSignNum',
})
"
>
<div class="data mr5px underline">{{ signforData.clerkSignNum || 0 }}</div>
<div class="">个</div>
</div>
<div class="">
@ -1041,8 +1073,16 @@
</div>
<div class="text_center">
<div class="data_box purple mb10">
<div class="data mr5px">
<div
class="data_box purple mb10"
@click="
handleShowSignDetail('签收数据 - 文员签收率 - %', signforData_status, {
tip: '文员签收率',
prop: 'clerkSignforScale',
})
"
>
<div class="data mr5px underline">
{{ signforData.clerkSignforScale || 0 }}
</div>
<div class="">%</div>
@ -1053,8 +1093,18 @@
</div>
<div class="text_center">
<div class="data_box red mb10">
<div class="data mr5px">{{ signforData.clerkOverTimeSignfoNum || 0 }}</div>
<div
class="data_box red mb10"
@click="
handleShowSignDetail('签收数据 - 超时签收任务 - 个', signforData_status, {
tip: '超时签收任务',
prop: 'clerkOverTimeSignfoNum',
})
"
>
<div class="data mr5px underline">
{{ signforData.clerkOverTimeSignfoNum || 0 }}
</div>
<div class="">个</div>
</div>
<div class="">
@ -1062,8 +1112,16 @@
</div>
</div>
<div class="text_center" v-if="signforData_status !== '1'">
<div class="data_box red mb10">
<div class="text_center" v-if="signforData_status !== 'daySignData'">
<div
class="data_box red mb10"
@click="
handleShowSignDetail('签收数据 - 签收超时率 - %', signforData_status, {
tip: '签收超时率',
prop: 'clerkOverTimeScale',
})
"
>
<div class="data mr5px">
{{ signforData.clerkOverTimeScale ? signforData.clerkOverTimeScale : 0 }}
</div>
@ -1202,14 +1260,20 @@
<div class="align_center">
<div
:class="{ button: true, active: billSignforData_status === '3' }"
@click="() => (billSignforData_status = '3')"
:class="{
button: true,
active: billSignforData_status === 'dayBillLadingSignData',
}"
@click="() => (billSignforData_status = 'dayBillLadingSignData')"
>
当天
</div>
<div
:class="{ button: true, active: billSignforData_status === '4' }"
@click="() => (billSignforData_status = '4')"
:class="{
button: true,
active: billSignforData_status === 'monthBillLadingSignData',
}"
@click="() => (billSignforData_status = 'monthBillLadingSignData')"
>
当月
</div>
@ -1218,8 +1282,16 @@
<div class="border pd10 flex-c-sb">
<div class="text_center">
<div class="data_box mb10">
<div class="data mr5px">{{ billSignforData.signNum || 0 }}</div>
<div
class="data_box mb10"
@click="
handleShowSignDetail('自提签收数据 - 已签收 - 件', billSignforData_status, {
tip: '已签收件数',
prop: 'totalRoadNum',
})
"
>
<div class="data mr5px underline">{{ billSignforData.signNum || 0 }}</div>
<div class="">件</div>
</div>
<div class="">
@ -1228,8 +1300,16 @@
</div>
<div class="text_center">
<div class="data_box orange mb10">
<div class="data mr5px">{{ billSignforData.unSignNum || 0 }}</div>
<div
class="data_box orange mb10"
@click="
handleShowSignDetail('自提签收数据 - 未签收 - 件', billSignforData_status, {
tip: '未签收件数',
prop: 'unSignNum',
})
"
>
<div class="data mr5px underline">{{ billSignforData.unSignNum || 0 }}</div>
<div class="">件</div>
</div>
<div class="">
@ -1238,8 +1318,16 @@
</div>
<div class="text_center">
<div class="data_box blue mb10">
<div class="data mr5px">
<div
class="data_box blue mb10"
@click="
handleShowSignDetail('自提签收数据 - 签收率 - %', billSignforData_status, {
tip: '签收率',
prop: 'signScale',
})
"
>
<div class="data mr5px underline">
{{ billSignforData.signScale ? billSignforData.signScale : 0 }}
</div>
<div class="">%</div>
@ -1250,8 +1338,16 @@
</div>
<div class="text_center">
<div class="data_box purple mb10">
<div class="data mr5px">{{ billSignforData.clerkSignNum || 0 }}</div>
<div
class="data_box purple mb10"
@click="
handleShowSignDetail('自提签收数据 - 文员签收任务 - 个', billSignforData_status, {
tip: '文员签收任务',
prop: 'clerkSignNum',
})
"
>
<div class="data mr5px underline">{{ billSignforData.clerkSignNum || 0 }}</div>
<div class="">个</div>
</div>
<div class="">
@ -1260,8 +1356,16 @@
</div>
<div class="text_center">
<div class="data_box purple mb10">
<div class="data mr5px">
<div
class="data_box purple mb10"
@click="
handleShowSignDetail('自提签收数据 - 文员签收率 - %', billSignforData_status, {
tip: '文员签收率',
prop: 'clerkSignforScale',
})
"
>
<div class="data mr5px underline">
{{ billSignforData.clerkSignforScale ? billSignforData.clerkSignforScale : 0 }}
</div>
<div class="">%</div>
@ -1272,8 +1376,18 @@
</div>
<div class="text_center">
<div class="data_box red mb10">
<div class="data mr5px">{{ billSignforData.clerkOverTimeSignfoNum || 0 }}</div>
<div
class="data_box red mb10"
@click="
handleShowSignDetail('自提签收数据 - 超时签收任务 - %', billSignforData_status, {
tip: '超时签收任务',
prop: 'clerkOverTimeSignfoNum',
})
"
>
<div class="data mr5px underline">
{{ billSignforData.clerkOverTimeSignfoNum || 0 }}
</div>
<div class="">个</div>
</div>
<div class="">
@ -1281,9 +1395,17 @@
</div>
</div>
<div class="text_center" v-if="billSignforData_status !== '3'">
<div class="data_box red mb10">
<div class="data mr5px">
<div class="text_center" v-if="billSignforData_status !== 'dayBillLadingSignData'">
<div
class="data_box red mb10"
@click="
handleShowSignDetail('自提签收数据 - 超时签收任务 - %', billSignforData_status, {
tip: '超时签收任务',
prop: 'clerkOverTimeScale',
})
"
>
<div class="data mr5px underline">
{{ billSignforData.clerkOverTimeScale ? billSignforData.clerkOverTimeScale : 0 }}
</div>
<div class="">%</div>
@ -1459,7 +1581,16 @@ const details = reactive({
/** 配送数据 */
deliveryDataInfo: {},
/** 签收数据 */
signforDataInfo: [],
signforDataInfo: {
/** 当日签收数据 */
daySignData: {},
/** 当月签收数据 */
monthSignData: {},
/** 当日自提签收数据 */
dayBillLadingSignData: {},
/** 当月自提签收数据 */
monthBillLadingSignData: {},
},
loadingObj: {
/** 开单数据 */
openOrderData: false,
@ -1529,10 +1660,12 @@ const delivery_status = ref<
const abnormal_status = ref<'day' | 'month'>('day');
/** 签收数据状态 */
const signforData_status = ref<'1' | '2'>('1');
const signforData_status = ref<'daySignData' | 'monthSignData'>('daySignData');
/** 自提签收数据状态 */
const billSignforData_status = ref<'3' | '4'>('3');
const billSignforData_status = ref<'dayBillLadingSignData' | 'monthBillLadingSignData'>(
'dayBillLadingSignData'
);
/** 请求开单数据 */
const initOpenOrderData = async () => {
@ -1782,15 +1915,112 @@ const initDeliveryData = async () => {
/** 签收数据 */
const initSignforData = async () => {
const _keyArr = [
'signNum',
'unSignNum',
'signScale',
'clerkSignNum',
'clerkSignforScale',
'clerkOverTimeSignfoNum',
'clerkOverTimeScale',
];
const _obj = {
daySignData: { data: [] },
monthSignData: { data: [] },
dayBillLadingSignData: { data: [] },
monthBillLadingSignData: { data: [] },
};
try {
details.loadingObj.signforData = true;
const res = await postSignforData({});
const { code, data } = res.data;
if (code !== 200) return;
if (code !== 200 || getObjType(data) !== 'object') return;
const { monthData, dayData } = data;
// 初始化值
for (let i = 0; i < _keyArr.length; i++) {
const value = _keyArr[i];
for (let key in _obj) {
const item = _obj[key];
item[value] = 0;
}
}
// 当月签收数据
if (getObjType(monthData) === 'array') {
for (let i = 0; i < monthData.length; i++) {
const value = monthData[i];
for (let j = 0; j < _keyArr.length; j++) {
const key = _keyArr[j];
const _val = isNumber(value[key]) ? Number(value[key]) : 0;
// 签收数据
if (Number(value.type) === 1) {
_obj.monthSignData[key] = computeNumber(_obj.monthSignData[key], '+', _val).result;
}
// 自提签收数据
else {
_obj.monthBillLadingSignData[key] = computeNumber(
_obj.monthBillLadingSignData[key],
'+',
_val
).result;
}
}
// 签收数据
Number(value.type) === 1
? _obj.monthSignData.data.push(value)
: // 自提签收数据
_obj.monthBillLadingSignData.data.push(value);
}
}
// 当日数据
if (getObjType(dayData) === 'array') {
for (let i = 0; i < dayData.length; i++) {
const value = dayData[i];
for (let j = 0; j < _keyArr.length; j++) {
const key = _keyArr[j];
const _val = isNumber(value[key]) ? Number(value[key]) : 0;
// 签收数据
if (Number(value.type) === 1) {
_obj.daySignData[key] = computeNumber(_obj.daySignData[key], '+', _val).result;
}
// 自提签收数据
else {
_obj.dayBillLadingSignData[key] = computeNumber(
_obj.dayBillLadingSignData[key],
'+',
_val
).result;
}
}
// 签收数据
Number(value.type) === 1
? _obj.daySignData.data.push(value)
: // 自提签收数据
_obj.dayBillLadingSignData.data.push(value);
}
}
details.signforDataInfo = data || [];
} catch (error) {
console.log('error :>> ', error);
} finally {
details.signforDataInfo = _obj;
details.loadingObj.signforData = false;
}
};
@ -1843,13 +2073,8 @@ const delivery_bill_info = computed(() => {
});
/** 签收数据 */
const signforData = computed(() => {
let _obj: any = {};
for (let i = 0; i < details.signforDataInfo.length; i++) {
const value = details.signforDataInfo[i];
if (value.type + '' === signforData_status.value) _obj = value;
}
const signforData = computed<any>(() => {
const _obj: any = details.signforDataInfo[signforData_status.value] || {};
_obj.signScaleNum ? _obj.signScaleNum : (_obj.signScaleNum = _obj.signScale || 0);
_obj.clerkSignforScaleNum
@ -1872,12 +2097,7 @@ const signforData = computed(() => {
/** 签收数据 -- 自提 */
const billSignforData = computed<any>(() => {
let _obj = {};
for (let i = 0; i < details.signforDataInfo.length; i++) {
const value = details.signforDataInfo[i];
if (value.type + '' === billSignforData_status.value) _obj = value;
}
const _obj: any = details.signforDataInfo[billSignforData_status.value] || {};
_obj.signScaleNum ? _obj.signScaleNum : (_obj.signScaleNum = _obj.signScale || 0);
_obj.clerkSignforScaleNum
@ -1898,173 +2118,53 @@ const billSignforData = computed<any>(() => {
return _obj;
});
/** 请求详情 */
const handleDetails = async (type, title, optionObj: any = {}) => {
details.popUpShow.isShow = true;
details.loadingObj.loading = true;
details.title = title;
try {
let res: any = { data: {} };
switch (type) {
// 开单数据
case 'openOrderColumn':
res = await postOpenOrderDataByWarehouseId({});
break;
// 库位数据
case 'allocationDataColumn':
res = await postAllocationDataByWarehouseId({});
break;
// 在库数据
case 'handOrderDataColumn':
res = await postHandOrderDataByWarehouseId({});
break;
// 干线车次数据
case 'trunklineCarsDataColumn':
res = await postTrunklineCarsDataByWarehouseId({});
break;
default:
break;
}
const { code, data } = res.data;
if (code !== 200 || getObjType(data) !== 'array') return;
const _arr = [];
for (let i = 0; i < data.length; i++) {
const value = data[i];
type OptionObjType = { prop: string; tip: string };
let isContinue = false;
/** 获取百分比 */
const getProportion = (value: number, total: number) => {
if (total === 0) return '0%';
if (!isNumber(value)) return '0%';
return computeNumber(Number(value), '/', total).next('*', 100).result.toFixed(2) + '%';
};
for (let j = 0; j < _arr.length; j++) {
const item = _arr[j];
if (item.value > value[optionObj.prop]) continue;
_arr.splice(j, 0, {
name: value.warehouseName + ' - ' + value[optionObj.prop],
value: value[optionObj.prop],
});
isContinue = true;
break;
}
if (isContinue) continue;
/** 显示图表 */
const handleShowEcharts = (data: any[], title: string, optionObj: OptionObjType) => {
if (getObjType(data) !== 'array') return;
_arr.push({
name: value.warehouseName + ' - ' + value[optionObj.prop],
value: value[optionObj.prop],
});
}
const _arr = [];
nextTick(() => {
// 初始化Echarts
const chartDom = document.getElementById('echartBox');
const myChart = echarts.init(chartDom);
let _total = 0;
const option = {
title: {
text: title,
// subtext: 'Fake Data',
left: 'center',
},
tooltip: {
trigger: 'item',
},
legend: {
orient: 'vertical',
left: 'left',
},
series: [
{
name: optionObj.tip,
// 数据显示类型 -- 扇形
type: 'pie',
// radius: '50%',
// 数据
data: _arr,
// 激活样式
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
label: {
show: true,
fontSize: 20,
fontWeight: 'bold',
},
},
// 扇区显示
radius: ['30%', '70%'],
avoidLabelOverlap: false,
// 扇区间隔
padAngle: 2,
// 最小显示角度
minShowLabelAngle: 5,
// 距离左侧的距离
left: '20%',
},
],
};
for (let i = 0; i < data.length; i++) {
const value = data[i];
option && myChart.setOption(option);
});
value[optionObj.prop] = isNumber(value[optionObj.prop]) ? Number(value[optionObj.prop]) : 0;
// details.tableData = data;
// details.renderData = data;
} catch (error) {
console.log('error :>> ', error);
} finally {
details.loadingObj.loading = false;
_total = computeNumber(_total, '+', value[optionObj.prop]).result;
}
};
/** 显示配送详情 */
const handleShowDeliveryDetail = (
title,
type:
| 'tradeMatching'
| 'outsourceTradeMatching'
| 'municipalAllocation'
| 'outsourceMunicipalAllocation'
| 'billLading',
optionObj: any = {}
) => {
details.popUpShow.isShow = true;
details.title = title;
if (getObjType(details.deliveryDataInfo[type]) !== 'object') return;
const { data } = details.deliveryDataInfo[type];
const _arr = [];
for (let i = 0; i < data.length; i++) {
const value = data[i];
if (getObjType(_arr) === 'array') {
for (let i = 0; i < data.length; i++) {
const value = data[i];
let isContinue = false;
let isContinue = false;
for (let j = 0; j < _arr.length; j++) {
const item = _arr[j];
if (item.value > value[optionObj.prop]) continue;
for (let j = 0; j < _arr.length; j++) {
const item = _arr[j];
if (item.value > value[optionObj.prop]) continue;
_arr.splice(j, 0, {
name: value.warehouseName + ' - ' + value[optionObj.prop],
value: value[optionObj.prop],
});
isContinue = true;
break;
}
if (isContinue) continue;
_arr.push({
name: value.warehouseName + ' - ' + value[optionObj.prop],
_arr.splice(j, 0, {
name: value.warehouseName + ' - ' + getProportion(value[optionObj.prop], _total),
value: value[optionObj.prop],
});
isContinue = true;
break;
}
if (isContinue) continue;
_arr.push({
name: value.warehouseName + ' - ' + getProportion(value[optionObj.prop], _total),
value: value[optionObj.prop],
});
}
nextTick(() => {
@ -2076,7 +2176,7 @@ const handleShowDeliveryDetail = (
title: {
text: title,
// subtext: 'Fake Data',
left: 'center',
left: 'right',
},
tooltip: {
trigger: 'item',
@ -2108,11 +2208,11 @@ const handleShowDeliveryDetail = (
},
// 扇区显示
radius: ['30%', '70%'],
avoidLabelOverlap: false,
// avoidLabelOverlap: false,
// 扇区间隔
padAngle: 2,
// padAngle: 2,
// 最小显示角度
minShowLabelAngle: 5,
// minShowLabelAngle: 5,
// 距离左侧的距离
left: '20%',
},
@ -2123,6 +2223,88 @@ const handleShowDeliveryDetail = (
});
};
/** 请求详情 */
const handleDetails = async (type, title, optionObj: OptionObjType) => {
details.popUpShow.isShow = true;
details.loadingObj.loading = true;
details.title = title;
try {
let res: any = { data: {} };
switch (type) {
// 开单数据
case 'openOrderColumn':
res = await postOpenOrderDataByWarehouseId({});
break;
// 库位数据
case 'allocationDataColumn':
res = await postAllocationDataByWarehouseId({});
break;
// 在库数据
case 'handOrderDataColumn':
res = await postHandOrderDataByWarehouseId({});
break;
// 干线车次数据
case 'trunklineCarsDataColumn':
res = await postTrunklineCarsDataByWarehouseId({});
break;
default:
break;
}
const { code, data } = res.data;
if (code !== 200 || getObjType(data) !== 'array') return;
handleShowEcharts(data, title, optionObj);
} catch (error) {
console.log('error :>> ', error);
} finally {
details.loadingObj.loading = false;
}
};
/** 显示配送详情 */
const handleShowDeliveryDetail = (
title,
type:
| 'tradeMatching'
| 'outsourceTradeMatching'
| 'municipalAllocation'
| 'outsourceMunicipalAllocation'
| 'billLading',
optionObj: any = {}
) => {
details.popUpShow.isShow = true;
details.title = title;
if (getObjType(details.deliveryDataInfo[type]) !== 'object') return;
const { data } = details.deliveryDataInfo[type];
handleShowEcharts(data, title, optionObj);
};
/** 显示签收详情 */
const handleShowSignDetail = (
title,
type: 'daySignData' | 'monthSignData' | 'dayBillLadingSignData' | 'monthBillLadingSignData',
optionObj: any = {}
) => {
details.popUpShow.isShow = true;
details.title = title;
if (getObjType(details.signforDataInfo[type]) !== 'object') return;
const { data } = details.signforDataInfo[type];
console.log('data :>> ', data);
handleShowEcharts(data, title, optionObj);
};
/** 导出 */
const handleExport = () => {
exportExcelByDom(exportColumnListNode.value.$el, `${details.title} - ${dateNow()}.xlsx`);

Write Preview
Loading…
Cancel
Save