UDI
/
udiwms-vue-frame
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1、单据上传页面逻辑优化

Browse Source
20240912_adapter
qiuyt 2 weeks ago
parent 0dbcb716cb
commit 1d51fad628
1 changed files with 237 additions and 262 deletions
Show Stats Download Patch File Download Diff File

499
src/views/collect/CollectOrderStatsNew.vue
Unescape Escape View File

@ -11,7 +11,7 @@
size="mini" label-width="100px"
>
<el-row >
<el-col :span="8">
<el-col :span="9">
<el-form-item label="时间统计:">
<el-date-picker
@ -30,22 +30,25 @@
</el-form-item>
</el-col>
<el-form-item >
<el-button-group>
<el-button
type="primary"
icon="el-icon-refresh"
@click="onReset"
>重置
</el-button>
<el-button type="primary" icon="el-icon-search" @click="onSubmit(this)"
>查询
</el-button
>
</el-button-group>
<el-col :span="8">
<el-form-item >
<el-button-group>
<el-button
type="primary"
icon="el-icon-refresh"
@click="onReset"
>重置
</el-button>
<el-button type="primary" icon="el-icon-search" @click="onSubmit(this)"
>查询
</el-button
>
</el-button-group>
</el-form-item>
</el-col>
</el-form-item>
</el-row>
</el-form>
</el-row>
@ -69,7 +72,7 @@
</div>
<div class="height-full fr center mr20" @click="linkPage('/dept/use/prescribeDir/inout/split/tag/upload?status=2')">
<span class="header d-block">
已上传医保
已上传单据
</span>
<span class="d-block mt10" :style="{'font-size': '32px','font-weight': 'bolder',color:'#394047'}">
{{ stats.alreadyUploadingCount }}
@ -91,7 +94,7 @@
</div>
<div class="height-full fr center mr20" @click="linkPage('/dept/use/prescribeDir/inout/split/tag/upload?status=1')">
<span class="header d-block">
未上传医保
未上传单据
</span>
<span class="d-block mt10" :style="{'font-size': '32px','font-weight': 'bolder',color:'#394047'}">
@ -113,7 +116,7 @@
</div>
<div class="height-full fr center mr20" @click="linkPage('/dept/use/prescribeDir/inout/split/tag/upload?status=3')">
<span class="header d-block">
上传失败医保
上传失败单据
</span>
<span class="d-block mt10" :style="{'font-size': '32px','font-weight': 'bolder',color:'#394047'}">
{{ stats.uploadingFailCount }}
@ -122,7 +125,7 @@
</el-row>
</el-card>
</div>
<div class="mt10 grid-container grid-container3" style="height: 500px">
<div class="mt10 grid-container" style="height: 480px; display: grid; grid-template-columns: 1fr 2fr;">
<el-card class="grid-item" body-style="padding:0px;height:100%" >
@ -143,35 +146,29 @@
</el-row>
</el-card>
<el-card class="grid-item" body-style="padding:0px;height:100%" >
<el-row >
<div style="width: 100%; height:100%;
justify-content: center;
align-items: center;">
<Echart
:options="statsChart2"
></Echart>
</div>
<el-card class="grid-item" body-style="padding:0px;height:100%">
<el-row>
<div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">
<Echart :options="statsChart3"></Echart>
</div>
</el-row>
</el-card>
<el-card class="grid-item" body-style="padding:0px;height:100%" >
<!-- <el-card class="grid-item" body-style="padding:0px;height:100%" >-->
<el-row >
<div style="width: 100%; height:100%;
justify-content: center;
align-items: center;">
<!-- <el-row >-->
<!-- <div style="width: 100%; height:100%;-->
<!-- justify-content: center;-->
<!-- align-items: center;">-->
<Echart
:options="statsChart3"
></Echart>
</div>
<!-- <Echart-->
<!-- :options="statsChart3"-->
<!-- ></Echart>-->
<!-- </div>-->
</el-row>
</el-card>
<!-- </el-row>-->
<!-- </el-card>-->
</div>
</div>
<!-- 分割线 -->
@ -248,11 +245,19 @@ export default {
buyerCentage: 0,
salesCentage: 0,
codeCount: 0,
buyerScanCount: 0,
salesScanCount: 0,
fifoSplitOneCount:0,
fifoSplitTwoCount:0,
buyerScanCount: 0,
salesScanCount: 0,
buyerScanCountReturn: 0,
salesScanCountReturn: 0,
buyerScanSumCount: 0,
salesScanSumCount: 0,
buyerScanSumCountReturn: 0,
salesScanSumCountReturn: 0,
},
// 待办==================================================
@ -371,11 +376,18 @@ export default {
buyerCentage:res.data.buyerCentage,
salesCentage:res.data.salesCentage,
codeCount:res.data.codeCount,
buyerScanCount: res.data.buyerScanCount,
salesScanCount: res.data.salesScanCount,
fifoSplitOneCount:res.data.fifoSplitOneCount,
fifoSplitTwoCount:res.data.fifoSplitTwoCount,
buyerScanCount: res.data.buyerScanCount,
salesScanCount: res.data.salesScanCount,
buyerScanCountReturn: res.data.buyerScanCountReturn,
salesScanCountReturn: res.data.salesScanCountReturn,
buyerScanSumCount: res.data.buyerScanSumCount,
salesScanSumCount: res.data.salesScanSumCount,
buyerScanSumCountReturn: res.data.buyerScanSumCountReturn,
salesScanSumCountReturn: res.data.salesScanSumCountReturn,
}
this.initStatsChart1();
@ -402,10 +414,19 @@ export default {
},
initStatsChart1(){
const dataArr = [
this.stats.buyerScanCount,this.stats.salesScanCount
this.stats.buyerScanCount,this.stats.buyerScanCountReturn,
this.stats.salesScanCount,this.stats.salesScanCountReturn
];
console.log('dataArr',dataArr);
this.statsChart1 = {
title: {
text: '单据已上传码数',
left: 'center',
textStyle: {
fontSize: 24, // 字体大小设置为 24，可按需调整
fontWeight: 'bold' // 字体设置为粗体
}
},
color: ['#01c6fd'],
grid: {
left: '5%',
@ -421,7 +442,7 @@ export default {
xAxis: [
{
type: 'category',
data: ['医保采购上传码数', '医保销售上传码数'],
data: ['采购入库', '采购退货','销售出库','销售退货'],
axisLine: {
lineStyle: {
color: '#01c6fd'
@ -480,47 +501,43 @@ export default {
]
};
},
initStatsChart2(){
let colors = ["#d30101","#ffca29", "#01c6fd"];
let piedata = {
name: "医保上传率",
type: "pie",
radius: ["40%", "65%", "65%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 4,
borderColor: "rgba(0,0,0,0)",
borderWidth: 2,
initStatsChart2() {
// 定义颜色数组
let colors = ["#d30101", "#ffca29", "#01c6fd"];
// 计算各项数据的值
let notUploadedCount = this.stats.codeCount - (this.stats.salesScanCount + this.stats.buyerScanCount);
let buyerScanCount = this.stats.buyerScanCount;
let salesScanCount = this.stats.salesScanCount;
// 定义进度条所需的数据
let barData = [
{
value: notUploadedCount,
name: "医保未上传码数",
itemStyle: {
color: colors[0]
}
},
{
value: buyerScanCount,
name: "医保采购上传码数",
itemStyle: {
color: colors[1]
}
},
{
value: salesScanCount,
name: "医保销售上传码数",
itemStyle: {
color: colors[2]
}
}
];
color: colors,
data: [
{
value: this.stats.codeCount -(this.stats.salesScanCount+this.stats.buyerScanCount) ,
name: "医保未上传码数",
label: {
shadowColor: colors[0],
},
},
{
value: this.stats.buyerScanCount,
name: "医保采购上传码数",
label: {
shadowColor: colors[1],
},
},
{
value: this.stats.salesScanCount,
name: "医保销售上传码数",
label: {
shadowColor: colors[2],
},
},
],
};
// 配置 ECharts 图表为进度条样式
this.statsChart2 = {
title: {
// zlevel: 0,
text: '医保上传率',
top: "center",
left: "center",
@ -530,220 +547,176 @@ export default {
color: "#000000",
fontSize: 24,
fontWeight: "bold",
lineHeight: 20,
lineHeight: 20
},
name: {
color: "#000000",
lineHeight: 20,
},
},
},
lineHeight: 20
}
}
}
},
tooltip: {
trigger: "item",
backgroundColor: "rgba(0,0,0,.6)",
borderColor: "rgba(147, 235, 248, .8)",
textStyle: {
color: "#000000",
},
color: "#fff"
}
},
legend: {
show: false,
top: "5%",
left: "center",
left: "center"
},
xAxis: {
show: false
},
yAxis: {
type: 'category',
data: barData.map(item => item.name),
axisLabel: {
color: '#000000',
fontSize: 12
},
axisLine: {
show: false
},
axisTick: {
show: false
}
},
series: [
//展示圆点
{
...piedata,
tooltip: {show: true},
name: '医保上传情况',
type: 'bar',
data: barData,
label: {
formatter: " {b|{b}} \n {c|{c}个}",
// position: "outside",
rich: {
b: {
color: "#000000",
fontSize: 12,
lineHeight: 26,
},
c: {
color: "#2b91c2",
fontSize: 14,
},
per: {
color: "#2b91c2",
fontSize: 14,
},
},
},
labelLine: {
length: 10, // 第一段线 长度
length2: 18, // 第二段线 长度
show: true,
position: 'right',
formatter: '{c}个',
color: '#2b91c2',
fontSize: 14
},
emphasis: {
show: true,
},
},
{
...piedata,
tooltip: {show: true},
itemStyle: {},
label: {
backgroundColor: "inherit", //圆点颜色，auto：映射的系列色
height: 0,
width: 0,
lineHeight: 0,
borderRadius: 2.5,
shadowBlur: 8,
shadowColor: "auto",
padding: [2.5, -2.5, 2.5, -2.5],
normal: {
show: true,
position: 'inner',
formatter: "{d}%",
color: "#fff",
},
},
labelLine: {
length: 20, // 第一段线 长度
length2: 36, // 第二段线 长度
show: false,
},
},
],
barWidth: 20
}
]
};
},
initStatsChart3(){
let colors = ["#d30101", "#01c6fd"];
let piedata = {
name: "赋码方式",
type: "pie",
radius: ["42%", "65%", "65%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 4,
borderColor: "rgba(0,0,0,0)",
borderWidth: 2,
},
color: colors,
data: [
{
value: this.stats.fifoSplitOneCount ,
name: "拆零赋码数",
label: {
shadowColor: colors[0],
},
},
{
value: this.stats.fifoSplitTwoCount,
name: "整取赋码数",
label: {
shadowColor: colors[1],
},
},
// 模拟数据，可根据实际情况修改
var data = [
{ name: '销售退货', uploaded: this.stats.salesScanCountReturn, total: this.stats.salesScanSumCountReturn },
{ name: '销售出库', uploaded: this.stats.salesScanSumCount, total: this.stats.salesScanSumCount },
{ name: '采购退货', uploaded: this.stats.buyerScanSumCountReturn, total: this.stats.buyerScanSumCountReturn },
{ name: '采购入库', uploaded: this.stats.buyerScanSumCount, total: this.stats.buyerScanSumCount },
];
],
};
this.statsChart3 = {
// 处理 y 轴数据
var yAxisData = [];
data.forEach(item => {
yAxisData.push(item.name + ' - 未上传');
yAxisData.push(item.name + ' - 已上传');
});
// 处理系列数据并归一化
var seriesData = [];
data.forEach(item => {
const total = item.total;
const uploaded = item.uploaded;
const notUploaded = total - uploaded;
if (total === 0) {
seriesData.push(0);
seriesData.push(0);
} else {
const uploadedPercentage = (uploaded / total) * 100;
const notUploadedPercentage = (notUploaded / total) * 100;
seriesData.push(notUploadedPercentage);
seriesData.push(uploadedPercentage);
}
});
// 配置项
this.statsChart3 = {
title: {
// zlevel: 0,
text: '赋码类型比率',
top: "center",
left: "center",
text: '单据上传率',
left: 'center',
textStyle: {
rich: {
value: {
color: "#000000",
fontSize: 24,
fontWeight: "bold",
lineHeight: 20,
},
name: {
color: "#000000",
lineHeight: 20,
},
},
},
fontSize: 24, // 字体大小设置为 24，可按需调整
fontWeight: 'bold' // 字体设置为粗体
}
},
tooltip: {
trigger: "item",
backgroundColor: "rgba(0,0,0,.6)",
borderColor: "rgba(147, 235, 248, .8)",
textStyle: {
color: "#000000",
},
grid: {
left: '15%',
top: '5%', // 减小顶部空白区域，可根据需求调整
bottom: '5%', // 减小底部空白区域，可根据需求调整
right: '10%' // 可根据需要调整右侧空白区域
},
legend: {
xAxis: {
show: false,
top: "5%",
left: "center",
min: 0,
max: 100 // 固定 x 轴范围
},
yAxis: {
type: 'category',
data: yAxisData,
axisTick: { show: false },
axisLine: { show: false },
axisLabel: { fontSize: 14 },
boundaryGap: [0, 0.1]
},
series: [
//展示圆点
{
...piedata,
tooltip: {show: true},
label: {
formatter: " {b|{b}} \n {c|{c}个}",
// position: "outside",
rich: {
b: {
color: "#000000",
fontSize: 12,
lineHeight: 26,
},
c: {
color: "#2b91c2",
fontSize: 14,
},
per: {
color: "#2b91c2",
fontSize: 14,
},
},
},
labelLine: {
length: 20, // 第一段线 长度
length2: 36, // 第二段线 长度
show: true,
},
emphasis: {
show: true,
type: 'bar',
data: seriesData,
barWidth: 20,
barCategoryGap: '-90%',
itemStyle: {
color: function (params) {
return params.dataIndex % 2 === 0? '#01c6fd' : '#00b611';
}
},
},
{
...piedata,
tooltip: {show: true},
itemStyle: {},
label: {
backgroundColor: "inherit", //圆点颜色，auto：映射的系列色
height: 0,
width: 0,
lineHeight: 0,
borderRadius: 2.5,
shadowBlur: 8,
shadowColor: "auto",
padding: [2.5, -2.5, 2.5, -2.5],
normal: {
show: true,
position: 'inner',
formatter: "{d}%",
color: "#fff",
},
},
labelLine: {
length: 20, // 第一段线 长度
length2: 36, // 第二段线 长度
show: false,
show: true,
position: 'right',
formatter: function (params) {
var index = Math.floor(params.dataIndex / 2);
// 处理 total 为 0 的情况，避免出现 NaN
const total = data[index].total;
const value = params.value;
const percentage = total === 0? '0.00' : value.toFixed(2);
return `${percentage}%`;
}
},
},
],
z: 10
}
]
};
},
formatDate(date) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
},
initDate(){
// 获取当前月份的第一天和最后一天
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1;
// 构建本月第一天的日期
const firstDay = new Date(year, month - 1, 1);
const formattedFirstDay = this.formatDate(firstDay);
// 构建本月最后一天的日期
const lastDay = new Date(year, month, 0);
const formattedLastDay = this.formatDate(lastDay);
// 将格式化后的日期赋值给 actDateRange
this.actDateRange = [formattedFirstDay, formattedLastDay];
}
},
mounted() {
@ -756,6 +729,8 @@ export default {
this.getList()
})
console.log('this.actDateRange',this.actDateRange)
this.initDate()
}
}
</script>

Write Preview
Loading…
Cancel
Save