feature/工时统计

src/views/report/workhourinfo/prodthours/index.vue

@@ -0,0 +1,319 @@
+<template>
+  <div class="mainContentBox">
+    <avue-crud ref="crudRef1" v-model:search="data1.search" :data="data1.data" :option="data1.option"
+      v-model:page="data1.page" @row-update="updateRow" @row-del="deleteRow" @search-change="dataList"
+      @search-reset="resetChange" @size-change="dataList" @current-change="dataList"
+      @selection-change="selectionChange">
+      <template #header="{ size }">
+        <div id="dailystoragecharts"></div>
+      </template>
+      <template #menu-right="{}">
+        <el-button class="ml-3" @click="exportData('/api/v1/process/census/productWorkHours/export')">
+          <template #icon> <i-ep-download /> </template>导出
+        </el-button>
+      </template>
+    </avue-crud>
+  </div>
+</template>
+<script setup>
+import { ref, getCurrentInstance } from "vue";
+import { useCrud } from "@/hooks/userCrud";
+import { useCommonStoreHook, useDictionaryStore } from "@/store";
+import dictDataUtil from "@/common/configs/dictDataUtil";
+import editSkill from "@/views/base/skill/components/edit-skill.vue";
+import { getBeatInfo } from "@/api/report";
+import * as echarts from "echarts";
+// 数据字典相关
+const { dicts } = useDictionaryStore();
+// const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
+//   useCrud({
+//     src: "/api/v1/process/census/completeOrder",
+//   });
+// ;
+const data1 = ref(
+  useCrud({
+    dataListUrl: "/api/v1/process/census/productWorkHours",
+  })
+);
+
+const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
+  data1.value.Methords;
+
+const { selectionChange, multipleDelete } = data1.value.Methords;
+const { checkBtnPerm, downloadTemplate, exportData } = data1.value.Utils;
+const charts = shallowRef(null);
+const chartsData = ref([]);
+
+// 设置表格列或者其他自定义的option
+data1.value.option = Object.assign(data1.value.option, {
+  selection: true,
+  menu: false,
+  menuWidth: 100,
+  addBtn: false,
+  filterBtn: false,
+  searchShowBtn: false,
+  columnBtn: false,
+  gridBtn: false,
+  editBtn: false,
+  viewBtn: false,
+  delBtn: false,
+  column: [
+    {
+      label: "日期范围",
+      prop: "searchTime",
+      search: true,
+      hide: true,
+      type: "date",
+      format: "YYYY-MM-DD",
+      valueFormat: "YYYY-MM-DD",
+      searchRange: true,
+      startPlaceholder: "开始日期",
+      endPlaceholder: "结束日期",
+    },
+    {
+      label: "订单编码",
+      prop: "orderCode",
+      overHidden: true,
+      search: true,
+      editDisabled: true,
+      hide: true,
+    },
+    {
+      label: "物料编码",
+      prop: "materialCode",
+      overHidden: true,
+      search: true,
+      editDisabled: true,
+      hide: true,
+    },
+    {
+      label: "物料名称",
+      prop: "materialName",
+      overHidden: true,
+      search: true,
+      editDisabled: true,
+      hide: true,
+    },
+    {
+      label: "工单编码",
+      prop: "workOrderCode",
+      width: 140,
+      overHidden: true,
+      search: true,
+      editDisabled: true,
+      hide: true,
+    },
+    {
+      label: "工序code",
+      prop: "operationCode",
+      width: 140,
+      overHidden: true,
+      search: true,
+      editDisabled: true,
+      hide: true,
+    },
+    {
+      label: "报工人员",
+      prop: "userName",
+      width: 140,
+      overHidden: true,
+      search: true,
+      editDisabled: true,
+      hide: true,
+    },
+    //展示
+    {
+      label: "订单编码",
+      prop: "orderCode",
+      search: false,
+    },
+    {
+      label: "订单名称",
+      prop: "orderName",
+      search: false,
+    },
+    {
+      label: "工单编码",
+      prop: "workOrderCode",
+      search: false,
+    },
+    {
+      label: "物料编码",
+      prop: "materialCode",
+      search: false,
+    },
+    {
+      label: "物料名称",
+      prop: "materialName",
+      search: false,
+    },
+    {
+      label: "规格",
+      prop: "spec",
+      search: false,
+    },
+    {
+      label: "完成数量",
+      prop: "num",
+      search: false,
+    },
+    {
+      label: "标准工时",
+      prop: "standardTime",
+      search: false,
+    },
+    {
+      label: "总计用时",
+      prop: "totalTime",
+      search: false,
+    },
+  ],
+});
+
+const getCurrentMonthStartAndEndDates = () => {
+  // 获取当前日期
+  let now = new Date();
+
+  // 获取当前月份的第一天
+  let startDate = new Date(now.getFullYear(), now.getMonth(), 1);
+
+  // 获取当前月份的最后一天
+  let endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+
+  // 格式化日期为'YYYY-MM-DD'格式
+  function formatDate(date) {
+    let year = date.getFullYear();
+    let month = String(date.getMonth() + 1).padStart(2, "0");
+    let day = String(date.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+  }
+
+  // 返回包含开始和结束日期的数组
+  return [formatDate(startDate), formatDate(endDate)];
+};
+const clickSearch = async () => {
+  chartsData.value = data1.value.data;
+  setOption();
+  charts.value.setOption(
+    {
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow",
+        },
+      },
+      legend: {
+        data: ["标准用时", "总共用时"],
+      },
+      xAxis: [
+        {
+          type: "category",
+          axisTick: { show: false },
+          data: chartOption.value.xData,
+        },
+      ],
+      toolbox: {
+        feature: {
+          saveAsImage: {},
+        },
+      },
+      yAxis: [
+        {
+          type: "value",
+        },
+      ],
+      series: chartOption.value.series,
+    },
+    true
+  );
+};
+//设置搜索条件中的时间范围为默认此月
+const setTime = () => {
+  data1.value.search.searchTime = getCurrentMonthStartAndEndDates();
+};
+const labelOption = {
+  show: false,
+  position: "insideBottom",
+  distance: 15,
+  align: "left",
+  verticalAlign: "middle",
+  rotate: 90,
+  formatter: "{c}  {name|{a}}",
+  fontSize: 24,
+  rich: {
+    name: {},
+  },
+};
+const chartOption = ref({
+  xData: [],
+  series: [],
+});
+// const setChartsData = async () => {
+//   const { data } = await getBeatInfo({
+//     ...data1.value.search,
+//     pageSize: 99999,
+//   });
+//   chartsData.value = data.records;
+// };
+const setOption = () => {
+  let array1 = [];
+  let array2 = [];
+  let obj1 = {
+    name: "标准用时",
+    type: "bar",
+    barGap: 0,
+    label: labelOption,
+    emphasis: {
+      focus: "series",
+    },
+    data: [],
+  };
+  let obj2 = {
+    name: "总共用时",
+    type: "bar",
+    barGap: 0,
+    label: labelOption,
+    emphasis: {
+      focus: "series",
+    },
+    data: [],
+  };
+  chartsData.value.forEach((item) => {
+    array1.push(`${item.workOrderCode}:${item.materialName}`);
+    obj1.data.push(item.standardTime);
+    obj2.data.push(item.totalTime);
+  });
+  array2 = [obj1, obj2];
+  chartOption.value.xData = array1;
+  chartOption.value.series = array2;
+};
+
+onMounted(async () => {
+  setTime();
+  charts.value = echarts.init(document.getElementById("dailystoragecharts"));
+  dataList();
+  clickSearch();
+});
+watch(
+  () => data1.value.data,
+  () => {
+    clickSearch();
+  }
+);
+</script>
+<style lang="scss" scoped>
+:deep(.avue-crud__left) {
+  width: 100%;
+}
+
+.cellStyle {
+  color: "#409eff" !important;
+  cursor: "pointer" !important;
+}
+
+#dailystoragecharts {
+  width: 100%;
+  height: 400px;
+  border: 1px solid #ccc;
+}
+</style>

src/views/report/workhourinfo/sumhours/index.vue

@@ -0,0 +1,255 @@
+<template>
+  <div class="mainContentBox">
+    <avue-crud ref="crudRef1" v-model:search="data1.search" :data="data1.data" :option="data1.option"
+      v-model:page="data1.page" @row-save="createRow" @row-update="updateRow" @row-del="deleteRow"
+      @search-change="searchChange" @search-reset="resetChange" @size-change="dataList" @current-change="dataList"
+      @selection-change="selectionChange" @cell-click="ckickCell">
+      <template #menu="{ row, index, type }">
+        <el-button @click="ckickCell(row)" icon="el-icon-view" text type="primary">查看</el-button>
+      </template>
+      <template #menu-right="{}">
+        <el-button class="ml-3" @click="
+          data1.Utils.exportData(
+            '/api/v1/process/census/peopleWorkHoursTotal/export'
+          )
+          ">
+          <template #icon> <i-ep-download /> </template>导出
+        </el-button>
+      </template>
+    </avue-crud>
+    <el-dialog v-model="editDialog.visible" :title="editDialog.title" width="1200px"
+      @close="editDialog.visible = false">
+      <div class="mainContentBox">
+        <avue-crud ref="crudRef2" v-model:search="data2.search" :data="data2.data" :option="data2.option"
+          v-model:page="data2.page" @row-update="data2.Methords.updateRow" @row-del="data2.Methords.deleteRow"
+          @search-change="data2.Methords.dataList" @search-reset="data2.Methords.resetChange"
+          @size-change="data2.Methords.dataList" @current-change="data2.Methords.dataList"
+          @selection-change="data2.Methords.selectionChange">
+          <template #menu-right="{}">
+            <el-button class="ml-3" @click="
+              data2.Utils.exportData(
+                '/api/v1/process/census/peopleWorkHoursTotalDetails/export'
+              )
+              ">
+              <template #icon> <i-ep-download /> </template>导出
+            </el-button>
+          </template></avue-crud>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import { ref, getCurrentInstance } from "vue";
+import { useCrud } from "@/hooks/userCrud";
+import { useCommonStoreHook, useDictionaryStore } from "@/store";
+import dictDataUtil from "@/common/configs/dictDataUtil";
+import editSkill from "@/views/base/skill/components/edit-skill.vue";
+import { getEchartData } from "@/api/report";
+import * as echarts from "echarts";
+// 数据字典相关
+const { dicts } = useDictionaryStore();
+const editDialog = ref({ visible: false, title: "订单详情" });
+const key = ref(false);
+// const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
+//   useCrud({
+//     src: "/api/v1/process/census/completeOrder",
+//   });
+// ;
+const data1 = ref(
+  useCrud({
+    dataListUrl: "/api/v1/process/census/peopleWorkHoursTotal",
+  })
+);
+const data2 = ref(
+  useCrud({
+    dataListUrl: "/api/v1/process/census/peopleWorkHoursTotalDetails",
+  })
+);
+const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
+  data1.value.Methords;
+
+const { selectionChange, multipleDelete } = data1.value.Methords;
+
+const ckickCell = (row) => {
+  data2.value.search.userName = row.userName;
+  editDialog.value.visible = true;
+};
+// 设置表格列或者其他自定义的option
+data1.value.option = Object.assign(data1.value.option, {
+  selection: false,
+  menu: true,
+  menuWidth: 100,
+  addBtn: false,
+  filterBtn: false,
+  searchShowBtn: false,
+  columnBtn: false,
+  gridBtn: false,
+  editBtn: false,
+  viewBtn: false,
+  delBtn: false,
+  column: [
+    {
+      label: "日期范围",
+      prop: "searchTime",
+      search: true,
+      hide: true,
+      type: "date",
+      format: "YYYY-MM-DD",
+      valueFormat: "YYYY-MM-DD",
+      searchRange: true,
+      startPlaceholder: "开始日期",
+      endPlaceholder: "结束日期",
+    },
+    {
+      label: "操作人员",
+      prop: "userName",
+      overHidden: true,
+      search: true,
+      editDisabled: true,
+      hide: true,
+    },
+    {
+      label: "操作人员",
+      prop: "userName",
+      search: false,
+    },
+    {
+      label: "工序数量",
+      prop: "operationNum",
+      search: false,
+    },
+    {
+      label: "标准工时",
+      prop: "standardTime",
+      search: false,
+    },
+    {
+      label: "总计用时",
+      prop: "totalTime",
+      search: false,
+    },
+    {
+      label: "平均工时",
+      prop: "avgTime",
+      search: false,
+    },
+  ],
+});
+data2.value.option = Object.assign(data2.value.option, {
+  selection: false,
+  addBtn: false,
+  filterBtn: false,
+  searchShowBtn: false,
+  menu: false,
+  addBtn: false,
+  filterBtn: false,
+  searchShowBtn: false,
+  columnBtn: false,
+  gridBtn: false,
+  editBtn: false,
+  viewBtn: false,
+  delBtn: false,
+  column: [
+    {
+      label: "订单名称",
+      prop: "orderName",
+      search: false,
+    },
+    {
+      label: "订单编码",
+      prop: "orderCode",
+      search: false,
+    },
+    {
+      label: "工单编码",
+      prop: "workOrderCode",
+      search: false,
+    },
+
+    {
+      label: "物料名称",
+      prop: "materialName",
+      search: false,
+    },
+
+    {
+      label: "物料编号",
+      prop: "materialCode",
+      search: false,
+    },
+    {
+      label: "规格",
+      prop: "spec",
+      search: false,
+    },
+    {
+      label: "工序名称",
+      prop: "operationName",
+      search: false,
+    },
+
+    {
+      label: "流转卡号",
+      prop: "seqNo",
+      search: false,
+    },
+    {
+      label: "标准工时",
+      prop: "standardTime",
+      search: false,
+    },
+    {
+      label: "总共工时",
+      prop: "totalTime",
+      search: false,
+    },
+  ],
+});
+
+const getCurrentMonthStartAndEndDates = () => {
+  // 获取当前日期
+  let now = new Date();
+
+  // 获取当前月份的第一天
+  let startDate = new Date(now.getFullYear(), now.getMonth(), 1);
+
+  // 获取当前月份的最后一天
+  let endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+
+  // 格式化日期为'YYYY-MM-DD'格式
+  function formatDate(date) {
+    let year = date.getFullYear();
+    let month = String(date.getMonth() + 1).padStart(2, "0");
+    let day = String(date.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+  }
+
+  // 返回包含开始和结束日期的数组
+  return [formatDate(startDate), formatDate(endDate)];
+};
+
+//设置搜索条件中的时间范围为默认此月
+const setTime = () => {
+  data1.value.search.searchTime = getCurrentMonthStartAndEndDates();
+};
+
+onMounted(async () => {
+  setTime();
+  dataList();
+});
+watch(
+  () => editDialog.value.visible,
+  () => {
+    if (editDialog.value.visible == true) {
+      data2.value.Methords.dataList();
+    } else {
+      key.value = !key.value;
+    }
+  }
+);
+</script>
+<style lang="scss" scoped>
+:deep(.avue-crud__left) {
+  width: 100%;
+}
+</style>