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

src/views/collect/CollectOrderStatsNew.vue

@@ -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-col :span="8">
-
+                  <el-form-item >
-                  <el-button-group>
+
-                    <el-button
+                    <el-button-group>
-                      type="primary"
+                      <el-button
-                      icon="el-icon-refresh"
+                        type="primary"
-                      @click="onReset"
+                        icon="el-icon-refresh"
-                    >重置
+                        @click="onReset"
-                    </el-button>
+                      >重置
-                    <el-button type="primary" icon="el-icon-search" @click="onSubmit(this)"
+                      </el-button>
-                    >查询
+                      <el-button type="primary" icon="el-icon-search" @click="onSubmit(this)"
-                    </el-button
+                      >查询
-                    >
+                      </el-button
-                  </el-button-group>
+                      >
+                    </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-card class="grid-item" body-style="padding:0px;height:100%">
-
+          <el-row>
-          <el-row >
-            <div style="width: 100%; height:100%;
-        justify-content: center;
-        align-items: center;">
-
-              <Echart
-                :options="statsChart2"
-              ></Echart>
-            </div>
 
+              <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 >
+<!--          <el-row >-->
-            <div style="width: 100%; height:100%;
+<!--            <div style="width: 100%; height:100%;-->
-        justify-content: center;
+<!--        justify-content: center;-->
-        align-items: center;">
+<!--        align-items: center;">-->
 
 
-              <Echart
+<!--              <Echart-->
-                :options="statsChart3"
+<!--                :options="statsChart3"-->
-              ></Echart>
+<!--              ></Echart>-->
-            </div>
+<!--            </div>-->
 
-          </el-row>
+<!--          </el-row>-->
-        </el-card>
+<!--        </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(){
+    initStatsChart2() {
-      let colors = ["#d30101","#ffca29", "#01c6fd"];
+      // 定义颜色数组
-      let piedata = {
+      let colors = ["#d30101", "#ffca29", "#01c6fd"];
-        name: "医保上传率",
+
-        type: "pie",
+      // 计算各项数据的值
-        radius: ["40%", "65%", "65%"],
+      let notUploadedCount = this.stats.codeCount - (this.stats.salesScanCount + this.stats.buyerScanCount);
-        avoidLabelOverlap: false,
+      let buyerScanCount = this.stats.buyerScanCount;
-        itemStyle: {
+      let salesScanCount = this.stats.salesScanCount;
-          borderRadius: 4,
+
-          borderColor: "rgba(0,0,0,0)",
+      // 定义进度条所需的数据
-          borderWidth: 2,
+      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,
+      // 配置 ECharts 图表为进度条样式
-        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],
-            },
-          },
-        ],
-      };
       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,
+            name: '医保上传情况',
-            tooltip: {show: true},
+            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: {
+            barWidth: 20
-              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,
-            },
-          },
-        ],
       };
     },
     initStatsChart3(){
-      let colors = ["#d30101", "#01c6fd"];
+// 模拟数据，可根据实际情况修改
-      let piedata = {
+      var data = [
-        name: "赋码方式",
+        { name: '销售退货', uploaded: this.stats.salesScanCountReturn, total: this.stats.salesScanSumCountReturn },
-        type: "pie",
+        { name: '销售出库', uploaded: this.stats.salesScanSumCount, total: this.stats.salesScanSumCount },
-        radius: ["42%", "65%", "65%"],
+        { name: '采购退货', uploaded: this.stats.buyerScanSumCountReturn, total: this.stats.buyerScanSumCountReturn },
-        avoidLabelOverlap: false,
+        { name: '采购入库', uploaded: this.stats.buyerScanSumCount, total: this.stats.buyerScanSumCount },
-        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],
-            },
-          },
 
-        ],
+// 处理 y 轴数据
-      };
+      var yAxisData = [];
-      this.statsChart3 = {
+      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: '单据上传率',
-          text: '赋码类型比率',
+          left: 'center',
-          top: "center",
-          left: "center",
           textStyle: {
-            rich: {
+            fontSize: 24, // 字体大小设置为 24，可按需调整
-              value: {
+            fontWeight: 'bold' // 字体设置为粗体
-                color: "#000000",
+          }
-                fontSize: 24,
-                fontWeight: "bold",
-                lineHeight: 20,
-              },
-              name: {
-                color: "#000000",
-                lineHeight: 20,
-              },
-            },
-          },
         },
-        tooltip: {
+        grid: {
-          trigger: "item",
+          left: '15%',
-          backgroundColor: "rgba(0,0,0,.6)",
+          top: '5%',      // 减小顶部空白区域，可根据需求调整
-          borderColor: "rgba(147, 235, 248, .8)",
+          bottom: '5%',   // 减小底部空白区域，可根据需求调整
-          textStyle: {
+          right: '10%'    // 可根据需要调整右侧空白区域
-            color: "#000000",
-          },
         },
-        legend: {
+        xAxis: {
           show: false,
-          top: "5%",
+          min: 0,
-          left: "center",
+          max: 100 // 固定 x 轴范围
+        },
+        yAxis: {
+          type: 'category',
+          data: yAxisData,
+          axisTick: { show: false },
+          axisLine: { show: false },
+          axisLabel: { fontSize: 14 },
+          boundaryGap: [0, 0.1]
         },
         series: [
-          //展示圆点
           {
-            ...piedata,
+            type: 'bar',
-            tooltip: {show: true},
+            data: seriesData,
-            label: {
+            barWidth: 20,
-              formatter: "   {b|{b}}   \n   {c|{c}个}",
+            barCategoryGap: '-90%',
-              //   position: "outside",
+            itemStyle: {
-              rich: {
+              color: function (params) {
-                b: {
+                return params.dataIndex % 2 === 0? '#01c6fd' : '#00b611';
-                  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,
             },
-          },
-          {
-            ...piedata,
-            tooltip: {show: true},
-            itemStyle: {},
             label: {
-              backgroundColor: "inherit", //圆点颜色，auto：映射的系列色
+              show: true,
-              height: 0,
+              position: 'right',
-              width: 0,
+              formatter: function (params) {
-              lineHeight: 0,
+                var index = Math.floor(params.dataIndex / 2);
-              borderRadius: 2.5,
+                // 处理 total 为 0 的情况，避免出现 NaN
-              shadowBlur: 8,
+                const total = data[index].total;
-              shadowColor: "auto",
+                const value = params.value;
-              padding: [2.5, -2.5, 2.5, -2.5],
+                const percentage = total === 0? '0.00' : value.toFixed(2);
-              normal: {
+                return `${percentage}%`;
-                show: true,
+              }
-                position: 'inner',
-                formatter: "{d}%",
-                color: "#fff",
-              },
-            },
-            labelLine: {
-              length: 20, // 第一段线 长度
-              length2: 36, // 第二段线 长度
-              show: false,
             },
-          },
+            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>