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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 522
      src/views/desk/DataBoard.vue

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

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

Write Preview
Loading…
Cancel
Save