月度报表、计件工资

src/views/mes/monthProductionSut/index.vue

@@ -13,150 +13,199 @@
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
       </el-form-item>
     </el-form>
-<!--    <el-row :gutter="10" class="mb8">-->
+
-<!--      <el-col :span="1.5">-->
+    <el-tabs type="border-card" @tab-click="handleTabClick">
-<!--        <el-button-->
+      <el-tab-pane label="当月产线产量汇总" >
-<!--          type="warning"-->
+        <el-table :data="tableData" border style="width: 100%" :header-cell-style="getHeaderCellStyle" :summary-method="getSummaries" show-summary>
-<!--          plain-->
+          <el-table-column prop="equipment_name" label="产线" fixed="left" width="150"></el-table-column>
-<!--          icon="el-icon-download"-->
+          <el-table-column prop="category" label="类别" fixed="left" width="150"></el-table-column>
-<!--          size="mini"-->
+          <el-table-column prop="total_monthly_summary" label="当月汇总" fixed="left" width="150"></el-table-column>
-<!--          @click="handleExport"-->
+          <el-table-column v-for="day in days" :key="day" :prop="day" :label="`${day.replace('day', '')}`" :width="150" align="center" :formatter="formatNullToZero">
-<!--          v-hasPermi="['mes:prepare:export']"-->
-<!--        >导出</el-button>-->
-<!--      </el-col>-->
-<!--      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
-<!--    </el-row>-->
-
-
-    <el-table :data="tableData" border style="width: 100%">
-      <el-table-column
-        prop="equipment_name"
-        label="产线"
-        fixed="left"
-        width="150">
-      </el-table-column>
-      <el-table-column
-        prop="category"
-        label="类别"
-        fixed="left"
-        width="150">
-      </el-table-column>
-      <el-table-column
-        prop="total_monthly_summary"
-        label="当月汇总"
-        fixed="left"
-        width="150">
-      </el-table-column>
-      <el-table-column
-        v-for="day in days"
-        :key="day"
-        :prop="day"
-        :label="`${day.replace('day', '')}`"
-        :width="150"
-        align="center"
-        :formatter="formatNullToZero">
           </el-table-column>
         </el-table>
-
         <div id="main" style="width: 100%; height: 820px; background: #fff"></div>
+      </el-tab-pane>
 
+      <el-tab-pane label="当月产线品类汇总" >
+        <el-table :data="tableDatas" border style="width: 100%" :header-cell-style="getHeaderCellStyle" :summary-method="getSummaries" show-summary>
+          <el-table-column prop="category" label="类别" fixed="left" width="150"></el-table-column>
+          <el-table-column prop="total_monthly_summarys" label="当月汇总" fixed="left" width="150"></el-table-column>
+          <el-table-column v-for="day in days" :key="day" :prop="day" :label="`${day.replace('day', '')}`" :width="150" align="center" :formatter="formatNullToZero">
+          </el-table-column>
+        </el-table>
+        <div id="mains" style="width: 100%; height: 820px; background: #fff"></div>
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 
 <script>
-import { getmonthProductionSut} from "@/api/mes/reportWork";
+import { getmonthProductionSut } from "@/api/mes/reportWork";
-import * as echarts from 'echarts'
+import * as echarts from 'echarts';
 
 export default {
   name: "Index",
 
   data() {
     return {
-      // 遮罩层
       loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
       showSearch: true,
-      // 总条数
-      total: 0,
-      // 日期范围
-
-      // 备料单表格数据
       tableData: [],
+      tableDatas: [],
       days: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 查询参数
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        monthValue:''
+        monthValue: ''
-      },
+      },
-      // 表单参数
+      charts: null,
-      form: {},
+      chartss: null,
-      // 表单校验
+      legendData: [],
-      rules: {
+      seriesData: [],
-        monthValue: [
+      legendDatas: [],
-          { required: true, message: '生产时间不能为空', trigger: 'change' }
+      seriesDatas: []
-        ]
-      },
-      charts: "",
-      legendData:[],
-      seriesData:[]
     };
   },
 
   created() {
 
+  },
+  mounted() {
+    // Set current month initially
     const currentMonth = new Date().toISOString().substr(0, 7);
     this.queryParams.monthValue = currentMonth;
     this.getList();
   },
   methods: {
-    indexMethod(index) {
+    pad(number) {
-      return index + 1;
+      return number.toString().padStart(2, '0');
+    },
+
+    getHeaderCellStyle({rowIndex, columnIndex}) {
+      if (rowIndex === 0 && columnIndex === 0) {
+        return 'background-color: #afccfd; color: #000000;'; // 蓝色
+      } else if (rowIndex === 0 && columnIndex === 1) {
+        return 'background-color: #c0e33c; color: #000000;'; // 绿色
+      } else if (rowIndex === 0 && columnIndex === 2) {
+        return 'background-color: #fbc57b; color: #000000;'; // 橙色
+      } else {
+        return 'color: #000000; background: #ffffff;';
+      }
+    },
+
+    getSummaries(param) {
+      const {columns, data} = param;
+      const sums = [];
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = '合计';
+          return;
+        }
+        const values = data.map(item => Number(item[column.property]));
+        if (!values.every(value => isNaN(value))) {
+          sums[index] = values.reduce((prev, curr) => {
+            const value = Number(curr);
+            if (!isNaN(value)) {
+              return prev + curr;
+            } else {
+              return prev;
+            }
+          }, 0);
+          sums[index] += '';
+          if (sums[index] > 1000000) {
+            sums[index] = '';
+          }
+        } else {
+          sums[index] = '';
+        }
+      });
+
+      return sums;
+    },
+    async handleTabClick(tab,event){
+      // if (tab.index==1){
+        await this.$nextTick();
+      this.drawLine("main")
+      this.drawLine_two("mains")
+      // }
     },
-    /** 查询备料单列表 */
     getList() {
-      this.seriesData=[];
+      this.seriesData = [];
-      this.legendData=[];
+      this.legendData = [];
+      this.seriesDatas = [];
+      this.legendDatas = [];
+      this.charts = null;
       this.loading = true;
+      const [year, month] = this.queryParams.monthValue.split('-').map(Number);
+      const daysInMonth = new Date(year, month, 0).getDate();
+      this.days = [];
+      for (let day = 1; day <= daysInMonth; day++) {
+        const formattedDate = `${year}-${this.pad(month)}-${this.pad(day)}`;
+        this.days.push(formattedDate);
+      }
       getmonthProductionSut(this.queryParams).then(response => {
-        // this.prepareList = response.rows;
+        const data = response.data.mapList_one || [];
-        const data = response.data;
+        const datas = response.data.mapList_two || [];
-        // this.total = response.total;
         this.loading = false;
+
+        // Process data for mapList_one
         if (data.length > 0) {
-          // 获取所有键
-          const allKeys = Object.keys(data[0]);
-          // 使用正则表达式过滤出符合日期格式的键
-          this.days = allKeys.filter(key => /^\d{4}-\d{2}-\d{2}$/.test(key)).sort();
-          // 计算每行的日期列数据总和，并设置到 'total_monthly_summary' 字段
           data.forEach(row => {
             let totalSummary = 0;
-           const dailyValues = []; // 用于存放每天的值
+            const dailyValues = [];
             this.days.forEach(day => {
               const value = row[day] || 0;
               totalSummary += value;
-             dailyValues.push(value); // 将每天的值按顺序存入 dailyValues 数组中
+              dailyValues.push(value);
-              totalSummary += (row[day] || 0);
             });
             row.total_monthly_summary = totalSummary;
             this.legendData.push(row.equipment_name);
             this.seriesData.push({
-              name: row.equipment_name, // 使用机器名或其他标识作为系列名称
+              name: row.equipment_name,
+              type: 'line',
+              stack: 'Total',
+              data: dailyValues,
+              itemStyle: {
+                color: this.getRandomColor(),
+                lineStyle: {
+                  color: this.getRandomColor(),
+                },
+              },
+            });
+          });
+        } else {
+          // No data for mapList_one
+          this.legendData.push('无数据');
+          this.seriesData.push({
+            name: '无数据',
+            type: 'line',
+            data: [],
+            itemStyle: {
+              color: '#CCCCCC',
+              lineStyle: {
+                color: '#CCCCCC',
+              },
+            },
+          });
+        }
+        if (datas.length > 0) {
+          datas.forEach(row => {
+            let totalSummary = 0;
+            const dailyValues = [];
+            this.days.forEach(day => {
+              const value = row[day] || 0;
+              totalSummary += value;
+              dailyValues.push(value);
+            });
+            row.total_monthly_summarys = totalSummary;
+            this.legendDatas.push(row.category);
+            this.seriesDatas.push({
+              name: row.category,
               type: 'line',
               stack: 'Total',
               data: dailyValues,
               itemStyle: {
-                color: this.getRandomColor(), // 随机颜色
+                color: this.getRandomColor(),
                 lineStyle: {
                   color: this.getRandomColor(),
                 },
@@ -164,17 +213,23 @@ export default {
             });
           });
         }
+
         this.tableData = data;
-        // 更新折线图数据
+        this.tableDatas = datas;
-        this.drawLine("main");
 
-      }).catch(() => {
+        // 默认绘制第一个标签页的折线图
+        this.drawLine("main");
+        this.drawLine_two("mains");
+      }).catch(error => {
         this.loading = false;
+        console.error("Error fetching data:", error);
       });
     },
+
     formatNullToZero(row, column, cellValue) {
       return cellValue === null || cellValue === undefined ? 0 : cellValue;
     },
+
     getRandomColor() {
       const letters = '0123456789ABCDEF';
       let color = '#';
@@ -183,37 +238,51 @@ export default {
       }
       return color;
     },
-    // 取消按钮
+
-    cancel() {
+    drawLine(id) {
-      this.open = false;
+      this.charts = echarts.init(document.getElementById(id));
-      this.reset();
+      this.charts.clear()
+      const options = {
+        title: {
+          text: '产量趋势'
         },
-    // 表单重置
+        tooltip: {
-    reset() {
+          trigger: 'axis'
-      this.form = {};
-      this.resetForm("form");
         },
-    /** 搜索按钮操作 */
+        legend: {
-    handleQuery() {
+          data: this.legendData
-      this.queryParams.pageNum = 1
-      this.getList()
         },
-
+        grid: {
-    /** 导出按钮操作 */
+          left: '3%',
-    handleExport() {
+          right: '4%',
-      this.download('mes/reportWork/getDailyReportExport', {
+          bottom: '3%',
-        ...this.queryParams
+          containLabel: true
-      }, `dailyReport${new Date().getTime()}.xlsx`)
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {}
+          }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: this.days
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: this.seriesData || []  // Use empty array if seriesData is falsy
+      };
+      this.charts.setOption(options);
     },
 
-
+    drawLine_two(id) {
-    drawLine(id) {
+      if (this.chartss){
-      // 初始化折线图
+        this.chartss.dispose()
-      this.charts = echarts.init(document.getElementById(id));
+      }
-
+      this.chartss = echarts.init(document.getElementById(id));
-
+      this.chartss.clear()
-      // 设置折线图数据和样式
+      this.chartss.setOption({
-      this.charts.setOption({
         title: {
           text: '产量趋势'
         },
@@ -221,7 +290,7 @@ export default {
           trigger: 'axis'
         },
         legend: {
-          data: this.legendData
+          data: this.legendDatas
         },
         grid: {
           left: '3%',
@@ -242,9 +311,28 @@ export default {
         yAxis: {
           type: 'value',
         },
-        series: this.seriesData
+        series: this.seriesDatas
       });
     },
+
+    cancel() {
+      this.reset();
+    },
+
+    reset() {
+      this.queryParams.monthValue = '';
+      this.getList();
+    },
+
+    handleQuery() {
+      this.getList();
+    }
   }
 };
 </script>
+
+<style scoped>
+.app-container {
+  padding: 20px;
+}
+</style>

src/views/mes/unitpriceReport/index.vue

@@ -42,7 +42,25 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-
+      <el-form-item label="员工姓名" prop="nickName">
+        <el-input
+          v-model="queryParams.equipmentName"
+          placeholder="请输入员工姓名"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="创建时间">
+        <el-date-picker
+          v-model="dateRange"
+          style="width: 240px"
+          value-format="yyyy-MM-dd"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        ></el-date-picker>
+      </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -77,40 +95,43 @@
       <el-table-column label="操作者"  width="110" align="center" prop="nickName" />
       <el-table-column label="子工序名称" width="110" align="center" prop="childprocessName" />
       <el-table-column label="工序单价" width="110" align="center" prop="attr1" />
+      <el-table-column label="工时" width="110" align="center" prop="attr2" />
+      <el-table-column label="工时工资" width="100" align="center" prop="realWages" />
       <el-table-column label="件数（PC）" width="100" align="center" prop="totalQuantity" />
       <el-table-column label="薪酬（元）" width="110" align="center" prop="result" />
-      <el-table-column label="人数" align="center" prop="headCount" />
+      <el-table-column label="创建时间" width="110" align="center" prop="createTime" />
-<!--      <el-table-column label="平均工资（元）" width="110" align="center" prop="avgResult" />-->
+<!--      <el-table-column label="人数" align="center" prop="headCount" />-->
-      <el-table-column label="实际工资（元）" width="110" align="center" prop="realWages" />
+<!--&lt;!&ndash;      <el-table-column label="平均工资（元）" width="110" align="center" prop="avgResult" />&ndash;&gt;-->
-      <el-table-column label="备注" align="center" prop="remark">
+<!--      <el-table-column label="实际工资（元）" width="110" align="center" prop="realWages" />-->
-        <template slot-scope="scope">
+<!--      <el-table-column label="备注" align="center" prop="remark">-->
-          <dict-tag :options="dict.type.unit_price" :value="scope.row.remark"/>
-        </template>
-      </el-table-column>
-<!--      <el-table-column label="实际工资" align="center" prop="realWages">-->
 <!--        <template slot-scope="scope">-->
-<!--          <el-input type="text" size="small" v-model="scope.row.realWages" @change="handleEdit(scope.$index,scope.row)"></el-input>-->
+<!--          <dict-tag :options="dict.type.unit_price" :value="scope.row.remark"/>-->
 <!--        </template>-->
 <!--      </el-table-column>-->
-<!--      <el-table-column label="实际工资" align="center" prop="realWages" />-->
+<!--&lt;!&ndash;      <el-table-column label="实际工资" align="center" prop="realWages">&ndash;&gt;-->
-      <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width">
+<!--&lt;!&ndash;        <template slot-scope="scope">&ndash;&gt;-->
-        <template slot-scope="scope">
+<!--&lt;!&ndash;          <el-input type="text" size="small" v-model="scope.row.realWages" @change="handleEdit(scope.$index,scope.row)"></el-input>&ndash;&gt;-->
-          <el-button
+<!--&lt;!&ndash;        </template>&ndash;&gt;-->
-            size="mini"
+<!--&lt;!&ndash;      </el-table-column>&ndash;&gt;-->
-            type="text"
+<!--&lt;!&ndash;      <el-table-column label="实际工资" align="center" prop="realWages" />&ndash;&gt;-->
-            icon="el-icon-edit"p
+<!--      <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width">-->
-            @click="handleUpdate(scope.row)"
+<!--        <template slot-scope="scope">-->
-            v-hasPermi="['unitPriceReport:report:edit']"
-          >工资修改</el-button>
 <!--          <el-button-->
 <!--            size="mini"-->
 <!--            type="text"-->
-<!--            icon="el-icon-delete"-->
+<!--            icon="el-icon-edit"p-->
-<!--            @click="handleDelete(scope.row)"-->
+<!--            @click="handleUpdate(scope.row)"-->
-<!--            v-hasPermi="['system:unitPrice:remove']"-->
+<!--            v-hasPermi="['unitPriceReport:report:edit']"-->
-<!--          >删除</el-button>-->
+<!--          >工资修改</el-button>-->
-        </template>
+<!--&lt;!&ndash;          <el-button&ndash;&gt;-->
-      </el-table-column>
+<!--&lt;!&ndash;            size="mini"&ndash;&gt;-->
+<!--&lt;!&ndash;            type="text"&ndash;&gt;-->
+<!--&lt;!&ndash;            icon="el-icon-delete"&ndash;&gt;-->
+<!--&lt;!&ndash;            @click="handleDelete(scope.row)"&ndash;&gt;-->
+<!--&lt;!&ndash;            v-hasPermi="['system:unitPrice:remove']"&ndash;&gt;-->
+<!--&lt;!&ndash;          >删除</el-button>&ndash;&gt;-->
+<!--        </template>-->
+<!--      </el-table-column>-->
     </el-table>
 
 
@@ -217,6 +238,8 @@ export default {
       // 是否显示弹出层
       open: false,
       value: '',
+      // 日期范围
+      dateRange: [],
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -262,7 +285,7 @@ export default {
     /** 查询unitPrice列表 */
     getList() {
       this.loading = true;
-      listUnitPriceReport(this.queryParams).then(response => {
+      listUnitPriceReport(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
         this.unitPriceList = response.rows;
         this.total = response.total;
         this.loading = false;
@@ -328,11 +351,6 @@ export default {
       getReport(picId).then(response => {
         this.form = response.data.MesUnitpriceReport;
         this.open = true;
-        if (response.data.attr2 === null || response.data.attr2 === undefined) {
-          this.form.attr2 = row.result;
-        } else {
-          this.form.attr2 = response.data.attr2;
-        }
         this.MesUnitPriceInfo=response.data.MesUnitPriceInfo;
       });
     },