@@ -1402,7 +1432,7 @@
handleShowSignDetail('自提签收数据 - 超时签收任务 - %', billSignforData_status, {
tip: '超时签收任务',
prop: 'clerkOverTimeScale',
- })
+ },'bar')
"
>
@@ -1492,6 +1522,7 @@ import {
postAllocationDataByWarehouseId,
postHandOrderDataByWarehouseId,
postTrunklineCarsDataByWarehouseId,
+ $_aftersalesData,
} from '@/api/wel/index';
import { exportExcelByDom } from '@/utils/export';
import * as echarts from 'echarts';
@@ -1569,14 +1600,28 @@ const details = reactive({
},
/** 异常卸车数据 */
unloadAbnormalDataInfo: {
- abnormalDayRate: '0',
- abnormalMonthRate: '0',
- noDealDayNum: 0,
- noDealMonthNum: 0,
- sendDayNum: 0,
- sendMonthNum: 0,
- unloadDayNum: 0,
- unloadMonthNum: 0,
+ 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: {},
@@ -1657,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');
@@ -1756,15 +1801,51 @@ const initTrunklineCarsData = async () => {
details.loadingObj.trunklineCarsData = false;
}
};
+function accumulateData(targetInfo, dataArray, isMonthly) {
+ console.log('targetInfo :>> ', targetInfo);
+
+ for (let i = 0; i < dataArray.length; i++) {
+ const item = dataArray[i];
+ if (isMonthly) {
+ targetInfo.sendMonthNum += item.totalNum; //发起数
+ targetInfo.noDealMonthNum += item.unCompleteNum; //待处理
+ targetInfo.abnormalMonthRate += item.completeNum; //异常率
+ } else {
+ targetInfo.sendDayNum += item.totalNum; //发起数
+ targetInfo.noDealDayNum += item.unCompleteNum; //待处理
+ targetInfo.abnormalDayRate += item.completeNum; //异常率
+ }
+ }
+}
-/** 卸车异常数据 */
+/**异常数据 */
const initUnloadAbnormalData = async () => {
try {
details.loadingObj.unloadAbnormalData = true;
- const res = await postUnloadAbnormalData({});
+ const res = await $_aftersalesData({});
+ console.log('resw:>> ', res);
+
const { code, data } = res.data;
if (code !== 200) return;
- details.unloadAbnormalDataInfo = data || {};
+ console.log(data, '异常数据');
+ details.unloadAbnormalDataInfo.dayData.data = data.dayData;
+ details.unloadAbnormalDataInfo.monthData.data = data.monthData;
+ // 处理 dayData
+ await accumulateData(details.unloadAbnormalDataInfo.dayData, data.dayData, false);
+ // 处理 monthData
+ await accumulateData(details.unloadAbnormalDataInfo.monthData, data.monthData, true);
+ // 计算异常率
+ 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 {
@@ -2043,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;
@@ -2075,6 +2156,7 @@ const delivery_bill_info = computed(() => {
/** 签收数据 */
const signforData = computed
(() => {
const _obj: any = details.signforDataInfo[signforData_status.value] || {};
+ console.log('_obj :>> ', _obj);
_obj.signScaleNum ? _obj.signScaleNum : (_obj.signScaleNum = _obj.signScale || 0);
_obj.clerkSignforScaleNum
@@ -2120,109 +2202,275 @@ const billSignforData = computed(() => {
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) => {
- if (getObjType(data) !== 'array') return;
-
- const _arr = [];
-
- let _total = 0;
-
+// /** 显示图表 */
+// 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);
+
+ 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;
+ 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;
@@ -2251,7 +2499,6 @@ const handleDetails = async (type, title, optionObj: OptionObjType) => {
case 'trunklineCarsDataColumn':
res = await postTrunklineCarsDataByWarehouseId({});
break;
-
default:
break;
}
@@ -2286,15 +2533,33 @@ const handleShowDeliveryDetail = (
handleShowEcharts(data, title, optionObj);
};
+/** 显示售后异常数据 */
+const handleShowAbnormalData = (title, type: 'dayData' | 'monthData', optionObj: any = {},chartType) => {
+ details.popUpShow.isShow = true;
+ details.title = title;
+ console.log(optionObj, 'optionObj');
+ console.log(type, 'type');
+ console.log(title, 'title');
+
+ if (getObjType(details.unloadAbnormalDataInfo[type]) !== 'object') return;
+
+ 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;
@@ -2302,7 +2567,7 @@ const handleShowSignDetail = (
console.log('data :>> ', data);
- handleShowEcharts(data, title, optionObj);
+ handleShowEcharts(data, title, optionObj,chartType);
};
/** 导出 */
- 异常率
+