feature/gantt图

src/hooks/userCrud.ts

@@ -29,6 +29,7 @@ interface UseCrudConfig {
 
 export const useCrud = (config?: UseCrudConfig) => {
   const url = ref(config?.src);
+  const pageStr = ref(config?.pageStr ? config?.pageStr : "yes");
   const commonConfig = ref(config);
   /** 表格配置属性 */
   const option = ref({
@@ -104,7 +105,10 @@ export const useCrud = (config?: UseCrudConfig) => {
       handleSearchData();
       try {
         const res = await request({
-          url: commonConfig.value?.dataListUrl ?? `${url.value}/page`,
+          url:
+            pageStr.value == "no"
+              ? (commonConfig.value?.dataListUrl ?? `${url.value}`)
+              : (commonConfig.value?.dataListUrl ?? `${url.value}/page`),
           method: "post",
           data: {
             pageNo: page.value.currentPage,
@@ -133,7 +137,7 @@ export const useCrud = (config?: UseCrudConfig) => {
       handleSearchData();
       try {
         const res = await request({
-          url: `${url.value}/page`,
+          url: pageStr.value == "no" ? `${url.value}` : `${url.value}/page`,
           method: "post",
           data: {
             pageNo: page.value.currentPage,

src/views/report/environment/equipment/index.vue

@@ -41,6 +41,7 @@ const { dicts } = useDictionaryStore();
 const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
   useCrud({
     src: "/api/v1/op/baseOperation",
+    method: "get",
   });
 const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
   Methords; //增删改查

src/views/report/productionScheduling/line/index.vue

@@ -0,0 +1,342 @@
+<template>
+  <div>
+    <avue-crud
+      v-model:search="search"
+      :option="option"
+      @search-change="searchChange"
+      @search-reset="resetChange"
+    />
+    <div class="my-gantt">
+      <div id="gantt_here" class="gantt-container"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { gantt } from "dhtmlx-gantt";
+import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
+import { useCrud } from "@/hooks/userCrud";
+const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
+  useCrud({
+    src: "/api/v1/process/census/queryApsResultGant",
+    pageStr: "no",
+  });
+const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
+  Methords;
+option.value = Object.assign(option.value, {
+  selection: false,
+  menu: true,
+  menuWidth: 100,
+  addBtn: false,
+  filterBtn: false,
+  searchShowBtn: true,
+  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: "name",
+      search: true,
+    },
+    {
+      label: "时间维度",
+      prop: "timeType",
+      search: true,
+      type: "select",
+      searchValue: "0",
+      dicData: [
+        {
+          dictLabel: "小时",
+          dictValue: "0",
+        },
+        {
+          dictLabel: "日",
+          dictValue: "1",
+        },
+        {
+          dictLabel: "月",
+          dictValue: "2",
+        },
+      ],
+      props: {
+        label: "dictLabel",
+        value: "dictValue",
+      },
+    },
+    {
+      label: "订单状态",
+      prop: "type",
+      search: true,
+      type: "select",
+      dicData: [
+        {
+          dictLabel: "订单",
+          dictValue: "0",
+        },
+        {
+          dictLabel: "工单",
+          dictValue: "1",
+        },
+        {
+          dictLabel: "流转卡号",
+          dictValue: "2",
+        },
+        {
+          dictLabel: "工序",
+          dictValue: "3",
+        },
+      ],
+      props: {
+        label: "dictLabel",
+        value: "dictValue",
+      },
+    },
+  ],
+});
+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 demoData = {
+  data: [
+    {
+      id: 11,
+      text: "Project #1",
+      start_date: "28-07-2024",
+      duration: "11",
+      progress: 1,
+      open: true,
+    },
+    {
+      id: 1,
+      text: "Project #2",
+      start_date: "01-07-2024",
+      duration: "18",
+      progress: 0.4,
+      open: true,
+    },
+
+    {
+      id: 2,
+      text: "Task #1",
+      start_date: "02-07-2024",
+      duration: "8",
+      parent: "1",
+      progress: 0.5,
+      open: true,
+    },
+    {
+      id: 3,
+      text: "Task #2",
+      start_date: "11-07-2024",
+      duration: "8",
+      parent: "1",
+      progress: 0.6,
+      open: true,
+    },
+    {
+      id: 4,
+      text: "Task #3",
+      start_date: "13-07-2024",
+      duration: "6",
+      parent: "1",
+      progress: 0.5,
+      open: true,
+    },
+    {
+      id: 5,
+      text: "Task #1.1",
+      start_date: "02-07-2024",
+      duration: "7",
+      parent: "2",
+      color: "red",
+      progress: 0.6,
+      open: true,
+    },
+    {
+      id: 6,
+      text: "Task #1.2",
+      start_date: "03-07-2024",
+      duration: "7",
+      parent: "2",
+      progress: 0.6,
+      open: true,
+    },
+  ],
+};
+const event = ref([]);
+//初始化甘特图
+const initGantt = () => {
+  gantt.config.grid_width = 350;
+  gantt.config.add_column = false; //添加符号
+
+  //时间轴图表中，如果不设置，只有行边框，区分上下的任务，设置之后带有列的边框，整个时间轴变成格子状。
+  gantt.config.autofit = false;
+  gantt.config.row_height = 60;
+  gantt.config.bar_height = 34;
+  // gantt.config.fit_tasks = true //自动延长时间刻度，以适应所有显示的任务
+  gantt.config.auto_types = true; //将包含子任务的任务转换为项目，将没有子任务的项目转换回任务
+  gantt.config.xml_date = '%d-%m-%Y' //甘特图时间格式
+  gantt.config.readonly = true; //是否只读
+  gantt.i18n.setLocale("cn"); //设置语言
+  gantt.plugins({ tooltip: true });
+  gantt.init("gantt_here"); //初始化
+  gantt.templates.tooltip_text = function (start, end, task) {
+    const text = `名称: ${task.text}<br/>总数: ${task.num}<br/>完成进度: ${task.progress * 100}%`;
+    return task?.id?.startsWith?.(NODE_PREFIX)
+      ? `${text}<br/>交期时间: ${this.tooltip_date_format(end)}`
+      : `${text}<br/>计划开始时间: ${this.tooltip_date_format(start)}<br/>计划结束时间: ${this.tooltip_date_format(end)}`; // eslint-disable-line
+  };
+  gantt.parse(demoData); //填充数据
+};
+const setTime = () => {
+  search.value = {
+    searchTime: getCurrentMonthStartAndEndDates(),
+    timeType: "0",
+  };
+};
+function convertDateString1(str) {
+  // 将输入的日期字符串转换为 Date 对象
+  let date = new Date(str);
+  // 获取年、月、日
+  let year = date.getFullYear();
+  let month = date.toLocaleString("en-us", { month: "short" });
+  let day = date.getDate();
+  // 构造新的日期字符串格式
+  let formattedDate = `${date.toDateString().slice(0, 3)} ${month} ${day} ${year} 00:00:00 GMT+0800 (GMT+08:00)`;
+  return formattedDate;
+}
+function convertDateString2(str) {
+  // 将输入的日期字符串转换为 Date 对象
+  let date = new Date(str);
+
+  // 获取年、月、日
+  let year = date.getFullYear();
+  let month = date.toLocaleString("en-us", { month: "short" });
+  let day = date.getDate();
+
+  // 构造新的日期字符串格式
+  let formattedDate = `${date.toDateString().slice(0, 3)} ${month} ${day} ${year} 24:00:00 GMT+0800 (GMT+08:00)`;
+
+  return formattedDate;
+}
+onBeforeMount(() => {});
+onMounted(() => {
+  setTime();
+  initGantt();
+  dataList();
+});
+watch(
+  search,
+  (val) => {
+    switch (val.timeType) {
+      case "0":
+        gantt.config.scale_height = 28 * 4;
+        gantt.config.subscales = [
+          {
+            unit: "year",
+            step: 1,
+            date: "%Y年",
+          },
+          {
+            unit: "month",
+            step: 1,
+            date: "%F",
+          },
+          {
+            unit: "day",
+            step: 1,
+            date: "%d日",
+          },
+        ];
+        gantt.config.scale_unit = "hour";
+        gantt.config.date_scale = "%H时";
+        gantt.render();
+        break;
+      case "1":
+        gantt.config.scale_height = 28 * 4;
+        gantt.config.subscales = [
+          {
+            unit: "year",
+            step: 1,
+            date: "%Y年",
+          },
+          {
+            unit: "month",
+            step: 1,
+            date: "%F",
+          },
+        ];
+        gantt.config.scale_unit = "day";
+        gantt.config.date_scale = "周%D,%d日";
+        gantt.render();
+        break;
+      case "2":
+        gantt.config.subscales = [
+          {
+            unit: "year",
+            step: 1,
+            date: "%Y年",
+          },
+        ];
+        gantt.config.scale_unit = "month";
+        gantt.config.date_scale = "%F";
+        gantt.config.scale_height = 28 * 2;
+        gantt.render();
+        break;
+    }
+    if (search?.value.searchTime) {
+      gantt.config.start_date = convertDateString1(search?.value.searchTime[0]);
+      gantt.config.end_date = convertDateString2(search?.value.searchTime[1]);
+      gantt.config.show_tasks_outside_timescale = true;
+    }
+  },
+
+  { immediate: true, deep: true }
+);
+</script>
+<style scoped lang="scss">
+:deep(.avue-crud__body) {
+  display: none;
+}
+.my-gantt {
+  width: 100%;
+  height: 600px;
+  .gantt-container {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/report/productionScheduling/order/index.vue

@@ -0,0 +1,352 @@
+<template>
+  <div>
+    <avue-crud
+      v-model:search="search"
+      :option="option"
+      @search-change="searchChange"
+      @search-reset="resetChange"
+    />
+    <div class="main-content">
+      <div id="gantt_here" class="gantt-container"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { gantt } from "dhtmlx-gantt";
+import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
+import { useCrud } from "@/hooks/userCrud";
+const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
+  useCrud({
+    src: "/api/v1/process/census/queryApsResultGant",
+    pageStr: "no",
+  });
+const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
+  Methords;
+option.value = Object.assign(option.value, {
+  selection: false,
+  menu: true,
+  menuWidth: 100,
+  addBtn: false,
+  filterBtn: false,
+  searchShowBtn: true,
+  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: "name",
+      search: true,
+    },
+    {
+      label: "时间维度",
+      prop: "timeType",
+      search: true,
+      type: "select",
+      searchValue: "1",
+      dicData: [
+        {
+          dictLabel: "小时",
+          dictValue: "0",
+        },
+        {
+          dictLabel: "日",
+          dictValue: "1",
+        },
+        {
+          dictLabel: "月",
+          dictValue: "2",
+        },
+      ],
+      props: {
+        label: "dictLabel",
+        value: "dictValue",
+      },
+    },
+    {
+      label: "订单状态",
+      prop: "type",
+      search: true,
+      type: "select",
+      dicData: [
+        {
+          dictLabel: "订单",
+          dictValue: "0",
+        },
+        {
+          dictLabel: "工单",
+          dictValue: "1",
+        },
+        {
+          dictLabel: "流转卡号",
+          dictValue: "2",
+        },
+        {
+          dictLabel: "工序",
+          dictValue: "3",
+        },
+      ],
+      props: {
+        label: "dictLabel",
+        value: "dictValue",
+      },
+    },
+  ],
+});
+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 demoData = {
+  data: [
+    {
+      id: 11,
+      text: "Project #1",
+      start_date: "2024-07-01 08:00:00",
+      endTime: "2024-09-30 09:00:00",
+      startTime: "2024-07-30 08:00:00",
+      duration: "11",
+      progress: 0.8,
+      open: true,
+    },
+  ],
+};
+//初始化甘特图
+const initGantt = (type) => {
+  gantt.plugins({ tooltip: true, marker: true, critical_path: true });
+  if (type) {
+    gantt.config.duration_unit = type;
+  }
+  gantt.config.show_today = true;
+  gantt.config.grid_width = 350;
+  gantt.config.add_column = false;
+  gantt.config.duration_step = 1;
+  gantt.config.columns = [
+    {
+      tree: true,
+      name: "text",
+      label: "订单名称",
+      width: "240",
+    },
+    {
+      name: "startTime",
+      label: "开始时间",
+      align: "center",
+      width: "160",
+      template(task) {
+        return task.startTime;
+      },
+    },
+    {
+      name: "endTime",
+      label: "结束时间",
+      align: "center",
+      width: "160",
+      template(task) {
+        return task.endTime;
+      },
+    },
+  ];
+  gantt.templates.progress_text = function (start, end, task) {
+    return (
+      "<span style='text-align:left;'>" +
+      Math.round(task.progress * 100) +
+      "% </span>"
+    );
+  };
+  gantt.config.autofit = false;
+  gantt.config.resize_rows = true;
+  gantt.config.row_height = 60;
+  gantt.config.bar_height = 34;
+  gantt.config.min_column_width = 30;
+  gantt.config.xml_date = "%Y-%m-%d %H:%i:%s"; //甘特图时间格式
+  gantt.config.readonly = true; //是否只读
+  gantt.i18n.setLocale("cn"); //设置语言
+
+  const dateToStr = gantt.date.date_to_str(gantt.config.task_date);
+  const today = new Date(new Date().setHours(0, 0, 0, 0));
+  gantt.addMarker({
+    start_date: today,
+    css: "today",
+    text: "今日",
+    title: `Today: ${dateToStr(today)}`,
+  });
+  gantt.init("gantt_here"); //初始化
+  gantt.templates.tooltip_text = function (start, end, task) {
+    const text = `名称: ${task.text}<br/>总数: ${task.num}<br/>完成进度: ${task.progress * 100}%`;
+    return !task.parent
+      ? `${text}<br/>交期时间: ${task.deliverWhen}`
+      : `${text}<br/>计划开始时间: ${task.startTime}<br/>计划结束时间: ${task.endTime}`; // eslint-disable-line
+  };
+};
+const setTime = () => {
+  search.value = {
+    searchTime: getCurrentMonthStartAndEndDates(),
+    timeType: "1",
+  };
+};
+
+function convertDateString1(str) {
+  // 将输入的日期字符串转换为 Date 对象
+  let date = new Date(str);
+  // 获取年、月、日
+  let year = date.getFullYear();
+  let month = date.toLocaleString("en-us", { month: "short" });
+  let day = date.getDate();
+  // 构造新的日期字符串格式
+  let formattedDate = `${date.toDateString().slice(0, 3)} ${month} ${day} ${year} 00:00:00 GMT+0800 (GMT+08:00)`;
+  return formattedDate;
+}
+function convertDateString2(str) {
+  // 将输入的日期字符串转换为 Date 对象
+  let date = new Date(str);
+
+  // 获取年、月、日
+  let year = date.getFullYear();
+  let month = date.toLocaleString("en-us", { month: "short" });
+  let day = date.getDate();
+
+  // 构造新的日期字符串格式
+  let formattedDate = `${date.toDateString().slice(0, 3)} ${month} ${day} ${year} 24:00:00 GMT+0800 (GMT+08:00)`;
+
+  return formattedDate;
+}
+// watchEffect(() => {
+//   //此api后续弃用
+//   // gantt.parse({ data: data.value });
+//   gantt.parse(demoData);
+// });
+const setGantt = () => {
+  if (search?.value.searchTime) {
+    gantt.config.start_date = convertDateString1(search?.value.searchTime[0]);
+    gantt.config.end_date = convertDateString2(search?.value.searchTime[1]);
+    gantt.config.show_tasks_outside_timescale = true;
+  }
+  switch (search.value.timeType) {
+    case "0":
+      gantt.config.duration_unit = "hour";
+      gantt.config.scale_height = 28 * 4;
+      gantt.config.scales = [
+        { unit: "year", step: 1, format: "%Y年" },
+        { unit: "month", step: 1, format: "%m月" },
+        {
+          unit: "day",
+          step: 1,
+          format: "%d日",
+        },
+        {
+          unit: "hour",
+          step: 1,
+          format: "%H时",
+        },
+      ];
+      gantt.init("gantt_here");
+      gantt.render();
+      gantt.parse({ data: useData.value });
+      break;
+    case "1":
+      gantt.config.scale_height = 28 * 4;
+      gantt.config.scales = [
+        { unit: "year", step: 1, format: "%Y年" },
+        { unit: "month", step: 1, format: "%m月" },
+        {
+          unit: "day",
+          step: 1,
+          format: "%d日",
+        },
+      ];
+      gantt.config.duration_unit = "day";
+
+      gantt.init("gantt_here");
+      gantt.render();
+      gantt.parse({ data: useData.value });
+      break;
+    case "2":
+      // initGantt("month");
+      gantt.config.scale_height = 28 * 4;
+      gantt.config.scales = [
+        { unit: "year", step: 1, format: "%Y年" },
+        { unit: "month", step: 1, format: "%m月" },
+      ];
+      gantt.config.duration_unit = "month";
+      gantt.init("gantt_here");
+      gantt.parse({ data: useData.value });
+      gantt.render();
+      break;
+  }
+};
+const useData = ref([]);
+const setUseData = (data) => {
+  const data1 = [...data];
+  data1.forEach((element) => {
+    element.start_date = element.startTime;
+    if (element.progress != 1) {
+      element.color = "orange";
+    } else {
+      element.color = "green";
+    }
+  });
+  const data2 = JSON.parse(JSON.stringify(data1));
+  useData.value = data2;
+};
+onMounted(() => {
+  setTime();
+  dataList();
+  initGantt();
+});
+watch(
+  () => data.value,
+  () => {
+    if (data.value) {
+      setUseData(data.value);
+      setGantt();
+    }
+  },
+  { immediate: true, deep: true }
+);
+</script>
+<style scoped lang="scss">
+:deep(.avue-crud__body) {
+  display: none;
+}
+.main-content {
+  width: 100%;
+  height: 600px;
+  .gantt-container {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/report/statistics/dailystorage/index.vue

@@ -1,21 +1,46 @@
 <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">
+    <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 #header="{ size }">
         <div id="dailystoragecharts"></div>
       </template>
     </avue-crud>
-    <el-dialog v-model="editDialog.visible" :title="editDialog.title" width="1200px"
-      @close="editDialog.visible = false">
+    <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" />
+        <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"
+        />
       </div>
     </el-dialog>
   </div>
@@ -218,8 +243,8 @@ data2.value.option = Object.assign(data2.value.option, {
       label: "流转卡号",
       prop: "seqNo",
       search: false,
-      width:150,
-      overHidden:true,
+      width: 150,
+      overHidden: true,
     },
     {
       label: "交付日期",