|
|
|
|
@ -772,14 +772,14 @@
|
|
|
|
|
|
|
|
|
|
<div class="align_center"> |
|
|
|
|
<div |
|
|
|
|
:class="{ button: true, active: abnormal_status === 'day' }" |
|
|
|
|
@click="() => (abnormal_status = 'day')" |
|
|
|
|
:class="{ button: true, active: abnormal_status === 'dayData' }" |
|
|
|
|
@click="() => (abnormal_status = 'dayData')" |
|
|
|
|
> |
|
|
|
|
当天 |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
:class="{ button: true, active: abnormal_status === 'month' }" |
|
|
|
|
@click="() => (abnormal_status = 'month')" |
|
|
|
|
:class="{ button: true, active: abnormal_status === 'monthData' }" |
|
|
|
|
@click="() => (abnormal_status = 'monthData')" |
|
|
|
|
> |
|
|
|
|
当月 |
|
|
|
|
</div> |
|
|
|
|
@ -793,7 +793,17 @@
|
|
|
|
|
<span>发起数</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="mt10"> |
|
|
|
|
<span class="data mr5px">{{ abnormal_Info.sendNum }}</span> |
|
|
|
|
<span |
|
|
|
|
class="data mr5px underline" |
|
|
|
|
@click=" |
|
|
|
|
() => |
|
|
|
|
handleShowAbnormalData('异常数据', abnormal_status, { |
|
|
|
|
tip: '发起数', |
|
|
|
|
prop: 'totalNum', |
|
|
|
|
}) |
|
|
|
|
" |
|
|
|
|
>{{ abnormal_Info.sendNum }}</span |
|
|
|
|
> |
|
|
|
|
<span class="">单</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -808,9 +818,9 @@
|
|
|
|
|
class="data mr5px underline" |
|
|
|
|
@click=" |
|
|
|
|
() => |
|
|
|
|
handleShowAbnormalData('异常数据', noDealNum, { |
|
|
|
|
tip: '总单数', |
|
|
|
|
prop: 'noDealNum', |
|
|
|
|
handleShowAbnormalData('异常数据', abnormal_status, { |
|
|
|
|
tip: '待处理', |
|
|
|
|
prop: 'unCompleteNum', |
|
|
|
|
}) |
|
|
|
|
" |
|
|
|
|
>{{ abnormal_Info.noDealNum }}</span |
|
|
|
|
@ -821,11 +831,21 @@
|
|
|
|
|
|
|
|
|
|
<div class="abnormal_item red"> |
|
|
|
|
<div class="align_center"> |
|
|
|
|
<img class="dataIcon mr5px" src="@/static/icon_money_day.png" alt="" /> |
|
|
|
|
<span>异常率</span> |
|
|
|
|
<img class="dataIcon mr5px " src="@/static/icon_money_day.png" alt="" /> |
|
|
|
|
<span>处理率</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="mt10"> |
|
|
|
|
<span class="data mr5px">{{ abnormal_Info.abnormalRate }}</span> |
|
|
|
|
<span |
|
|
|
|
class="data mr5px underline" |
|
|
|
|
@click=" |
|
|
|
|
() => |
|
|
|
|
handleShowAbnormalData('异常数据-处理率-%', abnormal_status, { |
|
|
|
|
tip: '处理率', |
|
|
|
|
prop: 'processingRate', |
|
|
|
|
},'bar') |
|
|
|
|
" |
|
|
|
|
>{{ abnormal_Info.abnormalRate }}</span |
|
|
|
|
> |
|
|
|
|
<span class="">%</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -1044,14 +1064,14 @@
|
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="text_center"> |
|
|
|
|
<div class="text_center" v-if="signforData_status !== 'daySignData'"> |
|
|
|
|
<div |
|
|
|
|
class="data_box blue mb10" |
|
|
|
|
@click=" |
|
|
|
|
handleShowSignDetail('签收数据 - 签收率 - %', signforData_status, { |
|
|
|
|
tip: '签收率', |
|
|
|
|
prop: 'signScale', |
|
|
|
|
}) |
|
|
|
|
},'bar') |
|
|
|
|
" |
|
|
|
|
> |
|
|
|
|
<div class="data mr5px underline"> |
|
|
|
|
@ -1086,8 +1106,8 @@
|
|
|
|
|
<div |
|
|
|
|
class="data_box purple mb10" |
|
|
|
|
@click=" |
|
|
|
|
handleShowSignDetail('签收数据 - 文员签收率 - %', signforData_status, { |
|
|
|
|
tip: '文员签收率', |
|
|
|
|
handleShowSignDetail('签收数据 - 文员签收数 - 件', signforData_status, { |
|
|
|
|
tip: '文员签收数', |
|
|
|
|
prop: 'clerkSignforScale', |
|
|
|
|
}) |
|
|
|
|
" |
|
|
|
|
@ -1095,10 +1115,10 @@
|
|
|
|
|
<div class="data mr5px underline"> |
|
|
|
|
{{ signforData.clerkSignforScale || 0 }} |
|
|
|
|
</div> |
|
|
|
|
<div class="">%</div> |
|
|
|
|
<div class="">件</div> |
|
|
|
|
</div> |
|
|
|
|
<div class=""> |
|
|
|
|
<span>文员签收率</span> |
|
|
|
|
<span>文员签收件</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
@ -1129,7 +1149,7 @@
|
|
|
|
|
handleShowSignDetail('签收数据 - 签收超时率 - %', signforData_status, { |
|
|
|
|
tip: '签收超时率', |
|
|
|
|
prop: 'clerkOverTimeScale', |
|
|
|
|
}) |
|
|
|
|
},'bar') |
|
|
|
|
" |
|
|
|
|
> |
|
|
|
|
<div class="data mr5px"> |
|
|
|
|
@ -1327,14 +1347,14 @@
|
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="text_center"> |
|
|
|
|
<div class="text_center" v-if="billSignforData_status !== 'dayBillLadingSignData'"> |
|
|
|
|
<div |
|
|
|
|
class="data_box blue mb10" |
|
|
|
|
@click=" |
|
|
|
|
handleShowSignDetail('自提签收数据 - 签收率 - %', billSignforData_status, { |
|
|
|
|
tip: '签收率', |
|
|
|
|
prop: 'signScale', |
|
|
|
|
}) |
|
|
|
|
},'bar') |
|
|
|
|
" |
|
|
|
|
> |
|
|
|
|
<div class="data mr5px underline"> |
|
|
|
|
@ -1369,7 +1389,7 @@
|
|
|
|
|
<div |
|
|
|
|
class="data_box purple mb10" |
|
|
|
|
@click=" |
|
|
|
|
handleShowSignDetail('自提签收数据 - 文员签收率 - %', billSignforData_status, { |
|
|
|
|
handleShowSignDetail('自提签收数据 - 文员签收数 - 件', billSignforData_status, { |
|
|
|
|
tip: '文员签收率', |
|
|
|
|
prop: 'clerkSignforScale', |
|
|
|
|
}) |
|
|
|
|
@ -1378,10 +1398,10 @@
|
|
|
|
|
<div class="data mr5px underline"> |
|
|
|
|
{{ billSignforData.clerkSignforScale ? billSignforData.clerkSignforScale : 0 }} |
|
|
|
|
</div> |
|
|
|
|
<div class="">%</div> |
|
|
|
|
<div class="">件</div> |
|
|
|
|
</div> |
|
|
|
|
<div class=""> |
|
|
|
|
<span>文员签收率</span> |
|
|
|
|
<span>文员签收数</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
@ -1412,7 +1432,7 @@
|
|
|
|
|
handleShowSignDetail('自提签收数据 - 超时签收任务 - %', billSignforData_status, { |
|
|
|
|
tip: '超时签收任务', |
|
|
|
|
prop: 'clerkOverTimeScale', |
|
|
|
|
}) |
|
|
|
|
},'bar') |
|
|
|
|
" |
|
|
|
|
> |
|
|
|
|
<div class="data mr5px underline"> |
|
|
|
|
@ -1432,7 +1452,7 @@
|
|
|
|
|
<!-- 详情数据 --> |
|
|
|
|
<el-dialog |
|
|
|
|
v-model="details.popUpShow.isShow" |
|
|
|
|
width="80%" |
|
|
|
|
width="96%" |
|
|
|
|
:append-to-body="false" |
|
|
|
|
:destroy-on-close="true" |
|
|
|
|
draggable |
|
|
|
|
@ -1580,16 +1600,28 @@ const details = reactive({
|
|
|
|
|
}, |
|
|
|
|
/** 异常卸车数据 */ |
|
|
|
|
unloadAbnormalDataInfo: { |
|
|
|
|
abnormalDayRate: 0, |
|
|
|
|
abnormalMonthRate: 0, |
|
|
|
|
noDealDayNum: 0, |
|
|
|
|
noDealMonthNum: 0, |
|
|
|
|
sendDayNum: 0, |
|
|
|
|
sendMonthNum: 0, |
|
|
|
|
unloadDayNum: 0, |
|
|
|
|
unloadMonthNum: 0, |
|
|
|
|
dayData: [], |
|
|
|
|
monthData: [], |
|
|
|
|
dayData: { |
|
|
|
|
abnormalDayRate: 0, |
|
|
|
|
abnormalMonthRate: 0, |
|
|
|
|
noDealDayNum: 0, |
|
|
|
|
noDealMonthNum: 0, |
|
|
|
|
sendDayNum: 0, |
|
|
|
|
sendMonthNum: 0, |
|
|
|
|
unloadDayNum: 0, |
|
|
|
|
unloadMonthNum: 0, |
|
|
|
|
data: [], |
|
|
|
|
}, |
|
|
|
|
monthData: { |
|
|
|
|
abnormalDayRate: 0, |
|
|
|
|
abnormalMonthRate: 0, |
|
|
|
|
noDealDayNum: 0, |
|
|
|
|
noDealMonthNum: 0, |
|
|
|
|
sendDayNum: 0, |
|
|
|
|
sendMonthNum: 0, |
|
|
|
|
unloadDayNum: 0, |
|
|
|
|
unloadMonthNum: 0, |
|
|
|
|
data: [], |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
/** 配送数据 */ |
|
|
|
|
deliveryDataInfo: {}, |
|
|
|
|
@ -1670,7 +1702,7 @@ const delivery_status = ref<
|
|
|
|
|
>('tradeMatching'); |
|
|
|
|
|
|
|
|
|
/** 异常数据状态 */ |
|
|
|
|
const abnormal_status = ref<'day' | 'month'>('day'); |
|
|
|
|
const abnormal_status = ref<'dayData' | 'monthData'>('dayData'); |
|
|
|
|
|
|
|
|
|
/** 签收数据状态 */ |
|
|
|
|
const signforData_status = ref<'daySignData' | 'monthSignData'>('daySignData'); |
|
|
|
|
@ -1770,6 +1802,8 @@ const initTrunklineCarsData = async () => {
|
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
function accumulateData(targetInfo, dataArray, isMonthly) { |
|
|
|
|
console.log('targetInfo :>> ', targetInfo); |
|
|
|
|
|
|
|
|
|
for (let i = 0; i < dataArray.length; i++) { |
|
|
|
|
const item = dataArray[i]; |
|
|
|
|
if (isMonthly) { |
|
|
|
|
@ -1786,7 +1820,6 @@ function accumulateData(targetInfo, dataArray, isMonthly) {
|
|
|
|
|
|
|
|
|
|
/**异常数据 */ |
|
|
|
|
const initUnloadAbnormalData = async () => { |
|
|
|
|
return |
|
|
|
|
try { |
|
|
|
|
details.loadingObj.unloadAbnormalData = true; |
|
|
|
|
const res = await $_aftersalesData({}); |
|
|
|
|
@ -1795,22 +1828,24 @@ const initUnloadAbnormalData = async () => {
|
|
|
|
|
const { code, data } = res.data; |
|
|
|
|
if (code !== 200) return; |
|
|
|
|
console.log(data, '异常数据'); |
|
|
|
|
|
|
|
|
|
details.unloadAbnormalDataInfo.dayData.data = data.dayData; |
|
|
|
|
details.unloadAbnormalDataInfo.monthData.data = data.monthData; |
|
|
|
|
// 处理 dayData |
|
|
|
|
await accumulateData(details.unloadAbnormalDataInfo, data.dayData, false); |
|
|
|
|
|
|
|
|
|
await accumulateData(details.unloadAbnormalDataInfo.dayData, data.dayData, false); |
|
|
|
|
// 处理 monthData |
|
|
|
|
await accumulateData(details.unloadAbnormalDataInfo, data.monthData, true); |
|
|
|
|
|
|
|
|
|
await accumulateData(details.unloadAbnormalDataInfo.monthData, data.monthData, true); |
|
|
|
|
// 计算异常率 |
|
|
|
|
details.unloadAbnormalDataInfo.abnormalMonthRate = |
|
|
|
|
(details.unloadAbnormalDataInfo.abnormalMonthRate / |
|
|
|
|
details.unloadAbnormalDataInfo.sendMonthNum) * |
|
|
|
|
100; |
|
|
|
|
|
|
|
|
|
details.unloadAbnormalDataInfo.abnormalDayRate = |
|
|
|
|
(details.unloadAbnormalDataInfo.abnormalDayRate / details.unloadAbnormalDataInfo.sendDayNum) * |
|
|
|
|
100; |
|
|
|
|
details.unloadAbnormalDataInfo.dayData.abnormalMonthRate = |
|
|
|
|
(details.unloadAbnormalDataInfo.dayData.abnormalMonthRate / |
|
|
|
|
details.unloadAbnormalDataInfo.dayData.sendMonthNum) * |
|
|
|
|
100 || 0; |
|
|
|
|
|
|
|
|
|
details.unloadAbnormalDataInfo.monthData.abnormalDayRate = |
|
|
|
|
(details.unloadAbnormalDataInfo.monthData.abnormalDayRate / |
|
|
|
|
details.unloadAbnormalDataInfo.monthData.sendDayNum) * |
|
|
|
|
100 || 0; |
|
|
|
|
// details.unloadAbnormalDataInfo.dayData.data[0].noDealNum=10 |
|
|
|
|
// details.unloadAbnormalDataInfo.dayData.data[2].noDealNum=15 |
|
|
|
|
} catch (error) { |
|
|
|
|
console.log('error :>> ', error); |
|
|
|
|
} finally { |
|
|
|
|
@ -2089,16 +2124,16 @@ handleRefresh();
|
|
|
|
|
/** 异常数据 */ |
|
|
|
|
const abnormal_Info = computed(() => { |
|
|
|
|
const _obj = |
|
|
|
|
abnormal_status.value === 'day' |
|
|
|
|
abnormal_status.value === 'dayData' |
|
|
|
|
? { |
|
|
|
|
sendNum: details.unloadAbnormalDataInfo.sendDayNum, |
|
|
|
|
noDealNum: details.unloadAbnormalDataInfo.noDealDayNum, |
|
|
|
|
abnormalRate: details.unloadAbnormalDataInfo.abnormalDayRate, |
|
|
|
|
sendNum: details.unloadAbnormalDataInfo.dayData.sendDayNum, |
|
|
|
|
noDealNum: details.unloadAbnormalDataInfo.dayData.noDealDayNum, |
|
|
|
|
abnormalRate: details.unloadAbnormalDataInfo.dayData.abnormalDayRate, |
|
|
|
|
} |
|
|
|
|
: { |
|
|
|
|
sendNum: details.unloadAbnormalDataInfo.sendMonthNum, |
|
|
|
|
noDealNum: details.unloadAbnormalDataInfo.noDealMonthNum, |
|
|
|
|
abnormalRate: details.unloadAbnormalDataInfo.abnormalMonthRate, |
|
|
|
|
sendNum: details.unloadAbnormalDataInfo.monthData.sendMonthNum, |
|
|
|
|
noDealNum: details.unloadAbnormalDataInfo.monthData.noDealMonthNum, |
|
|
|
|
abnormalRate: details.unloadAbnormalDataInfo.monthData.abnormalMonthRate, |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
return _obj; |
|
|
|
|
@ -2121,6 +2156,7 @@ const delivery_bill_info = computed(() => {
|
|
|
|
|
/** 签收数据 */ |
|
|
|
|
const signforData = computed<any>(() => { |
|
|
|
|
const _obj: any = details.signforDataInfo[signforData_status.value] || {}; |
|
|
|
|
console.log('_obj :>> ', _obj); |
|
|
|
|
|
|
|
|
|
_obj.signScaleNum ? _obj.signScaleNum : (_obj.signScaleNum = _obj.signScale || 0); |
|
|
|
|
_obj.clerkSignforScaleNum |
|
|
|
|
@ -2166,109 +2202,275 @@ const billSignforData = computed<any>(() => {
|
|
|
|
|
|
|
|
|
|
type OptionObjType = { prop: string; tip: string }; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 定义两种颜色 |
|
|
|
|
const colors = ['#008CBA', '#808080']; // 蓝色和灰色 |
|
|
|
|
// /** 获取百分比 */ |
|
|
|
|
// 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) + '%'; |
|
|
|
|
// }; |
|
|
|
|
/** 获取百分比 */ |
|
|
|
|
const getProportion = (value: number, total: number) => { |
|
|
|
|
if (total === 0) return '0%'; |
|
|
|
|
const getProportion = (value: number) => { |
|
|
|
|
if (!isNumber(value)) return '0%'; |
|
|
|
|
return computeNumber(Number(value), '/', total).next('*', 100).result.toFixed(2) + '%'; |
|
|
|
|
return (value * 100).toFixed(2) + '%'; |
|
|
|
|
}; |
|
|
|
|
// /** 显示图表 */ |
|
|
|
|
// const handleShowEcharts = (data: any[], title: string, optionObj: OptionObjType) => { |
|
|
|
|
// console.log('data :>> ', data); |
|
|
|
|
// console.log('title :>> ', title); |
|
|
|
|
|
|
|
|
|
// console.log('optionObj :>> ', optionObj); |
|
|
|
|
|
|
|
|
|
// if (getObjType(data) !== 'array') return; |
|
|
|
|
|
|
|
|
|
// const _arr = []; |
|
|
|
|
|
|
|
|
|
// let _total = 0; |
|
|
|
|
|
|
|
|
|
// for (let i = 0; i < data.length; i++) { |
|
|
|
|
// const value = data[i]; |
|
|
|
|
|
|
|
|
|
// 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++) { |
|
|
|
|
// const value = data[i]; |
|
|
|
|
|
|
|
|
|
// let isContinue = false; |
|
|
|
|
|
|
|
|
|
// 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 + ' - ' + 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(() => { |
|
|
|
|
// // 初始化Echarts |
|
|
|
|
// const chartDom = document.getElementById('echartBox'); |
|
|
|
|
// const myChart = echarts.init(chartDom); |
|
|
|
|
|
|
|
|
|
// const option = { |
|
|
|
|
// title: { |
|
|
|
|
// text: title, |
|
|
|
|
// // subtext: 'Fake Data', |
|
|
|
|
// left: 'right', |
|
|
|
|
// }, |
|
|
|
|
// tooltip: { |
|
|
|
|
// trigger: 'item', |
|
|
|
|
// }, |
|
|
|
|
// legend: { |
|
|
|
|
// orient: 'vertical', |
|
|
|
|
// left: 'left', |
|
|
|
|
// }, |
|
|
|
|
// series: [ |
|
|
|
|
// { |
|
|
|
|
// name: optionObj.tip, |
|
|
|
|
// // 数据显示类型 -- 扇形 |
|
|
|
|
// type: 'bar', |
|
|
|
|
// // 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); |
|
|
|
|
// }); |
|
|
|
|
// }; |
|
|
|
|
// 定义显示图表的函数，接受数据、标题、选项对象和图表类型（默认为饼图） |
|
|
|
|
const handleShowEcharts = (data: any[], title: string, optionObj: OptionObjType, chartType: string = 'pie') => { |
|
|
|
|
console.log('data :>> ', data); |
|
|
|
|
console.log('title :>> ', title); |
|
|
|
|
console.log('optionObj :>> ', optionObj); |
|
|
|
|
|
|
|
|
|
/** 显示图表 */ |
|
|
|
|
const handleShowEcharts = (data: any[], title: string, optionObj: OptionObjType) => { |
|
|
|
|
if (getObjType(data) !== 'array') return; |
|
|
|
|
|
|
|
|
|
const _arr = []; |
|
|
|
|
if (getObjType(data) !== 'array') return; // 检查传入的数据是否为数组，如果不是则返回 |
|
|
|
|
|
|
|
|
|
let _total = 0; |
|
|
|
|
const _arr = []; // 初始化一个空数组，用于存储处理后的数据 |
|
|
|
|
let _total = 0; // 初始化一个变量，用于存储数据的总和 |
|
|
|
|
|
|
|
|
|
// 遍历传入的数据数组，计算总和并转换数值 |
|
|
|
|
for (let i = 0; i < data.length; i++) { |
|
|
|
|
const value = data[i]; |
|
|
|
|
|
|
|
|
|
value[optionObj.prop] = isNumber(value[optionObj.prop]) ? Number(value[optionObj.prop]) : 0; |
|
|
|
|
|
|
|
|
|
_total = computeNumber(_total, '+', value[optionObj.prop]).result; |
|
|
|
|
const value = data[i]; // 获取当前数据项 |
|
|
|
|
value[optionObj.prop] = isNumber(value[optionObj.prop]) ? Number(value[optionObj.prop]) : 0; // 确保当前数据项的值为数字，如果不是则设为 0 |
|
|
|
|
_total = computeNumber(_total, '+', value[optionObj.prop]).result; // 累加当前数据项的值到总和 |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 遍历传入的数据数组，对数据进行排序 |
|
|
|
|
for (let i = 0; i < data.length; i++) { |
|
|
|
|
const value = data[i]; |
|
|
|
|
|
|
|
|
|
let isContinue = false; |
|
|
|
|
const value = data[i]; // 获取当前数据项 |
|
|
|
|
let isContinue = false; // 初始化一个标志变量，用于判断是否已插入当前数据项 |
|
|
|
|
|
|
|
|
|
// 遍历 _arr 数组，找到合适的位置插入当前数据项 |
|
|
|
|
for (let j = 0; j < _arr.length; j++) { |
|
|
|
|
const item = _arr[j]; |
|
|
|
|
if (item.value > value[optionObj.prop]) continue; |
|
|
|
|
const item = _arr[j]; // 获取当前 _arr 中的数据项 |
|
|
|
|
if (item.value > value[optionObj.prop]) continue; // 如果当前 _arr 中的数据项值大于当前数据项的值，继续下一个循环 |
|
|
|
|
|
|
|
|
|
_arr.splice(j, 0, { |
|
|
|
|
name: value.warehouseName + ' - ' + getProportion(value[optionObj.prop], _total), |
|
|
|
|
value: value[optionObj.prop], |
|
|
|
|
_arr.splice(j, 0, { // 在当前位置插入当前数据项 |
|
|
|
|
name: value.warehouseName, // 数据项的名称 |
|
|
|
|
value: value[optionObj.prop], // 数据项的值 |
|
|
|
|
}); |
|
|
|
|
isContinue = true; |
|
|
|
|
break; |
|
|
|
|
isContinue = true; // 设置标志变量为 true，表示已插入当前数据项 |
|
|
|
|
break; // 跳出内层循环 |
|
|
|
|
} |
|
|
|
|
if (isContinue) continue; |
|
|
|
|
if (isContinue) continue; // 如果已插入当前数据项，跳过插入到数组末尾的操作 |
|
|
|
|
|
|
|
|
|
_arr.push({ |
|
|
|
|
name: value.warehouseName + ' - ' + getProportion(value[optionObj.prop], _total), |
|
|
|
|
value: value[optionObj.prop], |
|
|
|
|
_arr.push({ // 如果未插入，将当前数据项添加到数组末尾 |
|
|
|
|
name: value.warehouseName, // 数据项的名称 |
|
|
|
|
value: value[optionObj.prop], // 数据项的值 |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
nextTick(() => { |
|
|
|
|
// 初始化Echarts |
|
|
|
|
nextTick(() => { // 确保 DOM 更新完成后再进行图表初始化 |
|
|
|
|
// 获取图表容器元素 |
|
|
|
|
const chartDom = document.getElementById('echartBox'); |
|
|
|
|
const myChart = echarts.init(chartDom); |
|
|
|
|
if (!chartDom) return; // 如果未找到图表容器元素，则返回 |
|
|
|
|
|
|
|
|
|
const myChart = echarts.init(chartDom); // 初始化 ECharts 实例 |
|
|
|
|
|
|
|
|
|
const option = { |
|
|
|
|
title: { |
|
|
|
|
text: title, |
|
|
|
|
// subtext: 'Fake Data', |
|
|
|
|
left: 'right', |
|
|
|
|
text: title, // 设置图表标题 |
|
|
|
|
left: 'right', // 标题位置 |
|
|
|
|
}, |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'item', |
|
|
|
|
trigger: 'item', // 设置提示框触发方式为数据项 |
|
|
|
|
formatter: (params) => { |
|
|
|
|
if (chartType === 'pie') { |
|
|
|
|
return `${params.name}: ${params.value} (${params.percent}%)`; // 如果是饼图，格式化提示信息为名称、值和百分比 |
|
|
|
|
} else { |
|
|
|
|
return `${params.name}: ${getProportion(params.value)}`; // 如果是柱状图，格式化提示信息为名称和值的百分比形式 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
legend: { |
|
|
|
|
orient: 'vertical', |
|
|
|
|
left: 'left', |
|
|
|
|
orient: 'vertical', // 图例布局方向 |
|
|
|
|
left: 'left', // 图例位置 |
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: optionObj.tip, |
|
|
|
|
// 数据显示类型 -- 扇形 |
|
|
|
|
type: 'pie', |
|
|
|
|
// radius: '50%', |
|
|
|
|
// 数据 |
|
|
|
|
data: _arr, |
|
|
|
|
// 激活样式 |
|
|
|
|
emphasis: { |
|
|
|
|
...(chartType === 'bar' && { // 如果是柱状图，添加柱状图的配置 |
|
|
|
|
xAxis: { |
|
|
|
|
type: 'category', // x 轴类型为类别 |
|
|
|
|
data: _arr.map(item => item.name), // x 轴数据为类别名称 |
|
|
|
|
axisLabel: { |
|
|
|
|
interval: 0, // 确保所有标签都显示 |
|
|
|
|
rotate: 45, // 旋转标签以避免重叠 |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
yAxis: { |
|
|
|
|
type: 'value', // y 轴类型为数值 |
|
|
|
|
axisLabel: { |
|
|
|
|
formatter: (value) => { |
|
|
|
|
return getProportion(value); // 将 y 轴标签格式化为百分比形式 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: optionObj.tip, // 系列名称 |
|
|
|
|
type: 'bar', // 系列类型为柱状图 |
|
|
|
|
data: _arr.map(item => ({ // 系列数据 |
|
|
|
|
name: item.name, // 数据项名称 |
|
|
|
|
value: item.value, // 数据项值 |
|
|
|
|
})), |
|
|
|
|
itemStyle: { |
|
|
|
|
shadowBlur: 10, |
|
|
|
|
shadowOffsetX: 0, |
|
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)', |
|
|
|
|
color: (params) => { |
|
|
|
|
// 根据数据项的索引选择颜色 |
|
|
|
|
return colors[params.dataIndex % 2]; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
label: { |
|
|
|
|
show: true, |
|
|
|
|
fontSize: 20, |
|
|
|
|
fontWeight: 'bold', |
|
|
|
|
emphasis: { |
|
|
|
|
itemStyle: { |
|
|
|
|
shadowBlur: 10, // 高亮时的阴影模糊度 |
|
|
|
|
shadowOffsetX: 0, // 高亮时的阴影水平偏移 |
|
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)', // 高亮时的阴影颜色 |
|
|
|
|
}, |
|
|
|
|
label: { |
|
|
|
|
show: true, // 显示高亮标签 |
|
|
|
|
fontSize: 20, // 高亮标签字体大小 |
|
|
|
|
fontWeight: 'bold', // 高亮标签字体粗细 |
|
|
|
|
formatter: (params) => { |
|
|
|
|
return getProportion(params.value); // 高亮标签格式化为百分比形式 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
barGap: '30%', // 柱子之间的间隔 |
|
|
|
|
barWidth: '40%', // 柱子的宽度 |
|
|
|
|
left: '20%', // 柱状图的左偏移 |
|
|
|
|
}, |
|
|
|
|
// 扇区显示 |
|
|
|
|
radius: ['30%', '70%'], |
|
|
|
|
// avoidLabelOverlap: false, |
|
|
|
|
// 扇区间隔 |
|
|
|
|
// padAngle: 2, |
|
|
|
|
// 最小显示角度 |
|
|
|
|
// minShowLabelAngle: 5, |
|
|
|
|
// 距离左侧的距离 |
|
|
|
|
left: '20%', |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
], |
|
|
|
|
}), |
|
|
|
|
...(chartType === 'pie' && { // 如果是饼图，添加饼图的配置 |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: optionObj.tip, // 系列名称 |
|
|
|
|
type: 'pie', // 系列类型为饼图 |
|
|
|
|
data: _arr.map((item) => ({ // 系列数据 |
|
|
|
|
name: item.name + ' - ' + getProportion(item.value / _total), // 数据项名称，附加百分比 |
|
|
|
|
value: item.value, // 数据项值 |
|
|
|
|
})), |
|
|
|
|
emphasis: { |
|
|
|
|
itemStyle: { |
|
|
|
|
shadowBlur: 10, // 高亮时的阴影模糊度 |
|
|
|
|
shadowOffsetX: 0, // 高亮时的阴影水平偏移 |
|
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)', // 高亮时的阴影颜色 |
|
|
|
|
}, |
|
|
|
|
label: { |
|
|
|
|
show: true, // 显示高亮标签 |
|
|
|
|
fontSize: 20, // 高亮标签字体大小 |
|
|
|
|
fontWeight: 'bold', // 高亮标签字体粗细 |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
radius: ['30%', '70%'], // 饼图的内半径和外半径 |
|
|
|
|
left: '20%', // 饼图的左偏移 |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}), |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
option && myChart.setOption(option); |
|
|
|
|
option && myChart.setOption(option); // 如果 option 存在，设置图表配置 |
|
|
|
|
}); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/** 请求详情 */ |
|
|
|
|
const handleDetails = async (type, title, optionObj: OptionObjType) => { |
|
|
|
|
details.popUpShow.isShow = true; |
|
|
|
|
@ -2332,8 +2534,7 @@ const handleShowDeliveryDetail = (
|
|
|
|
|
handleShowEcharts(data, title, optionObj); |
|
|
|
|
}; |
|
|
|
|
/** 显示售后异常数据 */ |
|
|
|
|
|
|
|
|
|
const handleShowAbnormalData = (title, type: 'noDealNum', optionObj: any = {}) => { |
|
|
|
|
const handleShowAbnormalData = (title, type: 'dayData' | 'monthData', optionObj: any = {},chartType) => { |
|
|
|
|
details.popUpShow.isShow = true; |
|
|
|
|
details.title = title; |
|
|
|
|
console.log(optionObj, 'optionObj'); |
|
|
|
|
@ -2342,21 +2543,23 @@ const handleShowAbnormalData = (title, type: 'noDealNum', optionObj: any = {}) =
|
|
|
|
|
|
|
|
|
|
if (getObjType(details.unloadAbnormalDataInfo[type]) !== 'object') return; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const { data } = details.deliveryDataInfo[type]; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
handleShowEcharts(data, title, optionObj); |
|
|
|
|
const { data } = details.unloadAbnormalDataInfo[type]; |
|
|
|
|
handleShowEcharts(data, title, optionObj,chartType); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
/** 显示签收详情 */ |
|
|
|
|
const handleShowSignDetail = ( |
|
|
|
|
title, |
|
|
|
|
type: 'daySignData' | 'monthSignData' | 'dayBillLadingSignData' | 'monthBillLadingSignData', |
|
|
|
|
optionObj: any = {} |
|
|
|
|
optionObj: any = {}, |
|
|
|
|
chartType |
|
|
|
|
) => { |
|
|
|
|
details.popUpShow.isShow = true; |
|
|
|
|
details.title = title; |
|
|
|
|
console.log(type, 'typeaaa'); |
|
|
|
|
console.log(title, 'titleaaa'); |
|
|
|
|
console.log(optionObj, 'optionObjaaa'); |
|
|
|
|
console.log(details.signforDataInfo[type], 'details.signforDataInfo[type]'); |
|
|
|
|
|
|
|
|
|
if (getObjType(details.signforDataInfo[type]) !== 'object') return; |
|
|
|
|
|
|
|
|
|
@ -2364,7 +2567,7 @@ const handleShowSignDetail = (
|
|
|
|
|
|
|
|
|
|
console.log('data :>> ', data); |
|
|
|
|
|
|
|
|
|
handleShowEcharts(data, title, optionObj); |
|
|
|
|
handleShowEcharts(data, title, optionObj,chartType); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
/** 导出 */ |
|
|
|
|
@ -2389,6 +2592,7 @@ onMounted(async () => {
|
|
|
|
|
// 弹窗 |
|
|
|
|
:deep(.el-overlay) { |
|
|
|
|
position: absolute; |
|
|
|
|
height: 100vh; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
:deep(.el-overlay-dialog) { |
|
|
|
|
|
