JG-ADMIN-TEMP/src/views/report/statistics/dailystorage/index.vue

<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 #header="{ size }">
        <div id="dailystoragecharts"></div>
      </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"
        />
      </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 { form, data, option, search, page, toDeleteIds, Methords, Utils } =
//   useCrud({
//     src: "/api/v1/process/census/completeOrder",
//   });
// ;
const data1 = ref(
  useCrud({
    src: "/api/v1/process/census/completeOrder",
  })
);
const data2 = ref(
  useCrud({
    src: "/api/v1/process/census/completeSeq",
  })
);
const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
  data1.value.Methords;

const { selectionChange, multipleDelete } = data1.value.Methords;
const charts = shallowRef(null);
const chartKey = ref(false);
const chartsData = shallowRef([]);
const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex == 2) {
    // return "color:'#409eff';cursor:'pointer'";
    return "cellStyle";
  }
};
const ckickCell = (row, column, cell, event) => {
  if (column.label === "订单名称") {
    data2.value.search.completeTime = row.completeTime;
    data2.value.search.orderCode = row.orderCode;
    editDialog.value.visible = true;
  }
};
// 设置表格列或者其他自定义的option
data1.value.option = Object.assign(data1.value.option, {
  selection: false,
  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: "ERP订单号",
      prop: "erpCode",
      overHidden: true,
      search: true,
      editDisabled: true,
      hide: true,
    },
    {
      label: "产品规格",
      prop: "materialModel",
      overHidden: true,
      search: true,
      editDisabled: true,
      hide: true,
    },
    {
      label: "订单编码",
      prop: "orderCode",
      overHidden: true,
      search: true,
      editDisabled: true,
    },
    {
      label: "订单名称",
      prop: "orderName",
      width: 140,
      overHidden: true,
      search: true,
      editDisabled: true,
      hide: true,
    },
    {
      label: "项目编码",
      prop: "projectCode",
      width: 140,
      overHidden: true,
      search: true,
      editDisabled: true,
      hide: true,
    },
    {
      label: "订单名称",
      prop: "orderName",
      search: false,
      slot: true,
      html: true,
      formatter: (val) => {
        return (
          '<span style="color:#409eff;cursor:pointer">' +
          val.orderName +
          "</span>"
        );
      },
    },
    {
      label: "ERP订单号",
      prop: "erpCode",
      search: false,
    },
    {
      label: "交付日期",
      prop: "deliverTime",
      search: false,
    },
    {
      label: "完工日期",
      prop: "completeTime",
      search: false,
    },
    {
      label: "项目编码",
      prop: "projectCode",
      search: false,
    },
    {
      label: "产品编码",
      prop: "materialCode",
      search: false,
    },
    {
      label: "产品名称",
      prop: "materialName",
      search: false,
    },
    {
      label: "产品规格",
      prop: "materialModel",
      search: false,
    },
    {
      label: "计划总共用时(秒)",
      prop: "planTotalTime",
      search: false,
    },
    {
      label: "实际总共用时(秒)",
      prop: "realTotalTime",
      search: false,
    },
    {
      label: "总入库数量",
      prop: "total",
      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: "seqNo",
      search: false,
      width: 150,
      overHidden: true,
    },
    {
      label: "交付日期",
      prop: "deliverTime",
      search: false,
    },
    {
      label: "完工日期",
      prop: "completeTime",
      search: false,
    },
    {
      label: "项目编码",
      prop: "projectCode",
      search: false,
    },
    {
      label: "产品编码",
      prop: "materialCode",
      search: false,
    },
    {
      label: "产品名称",
      prop: "materialName",
      search: false,
    },
    {
      label: "产品规格",
      prop: "materialModel",
      search: false,
    },
    {
      label: "计划总共用时",
      prop: "planTotalTime",
      search: false,
    },
    {
      label: "实际总共用时",
      prop: "realTotalTime",
      search: false,
    },
    {
      label: "总入库数量",
      prop: "total",
      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 chartSeriesData = shallowRef([]);
const setChartSeries = () => {
  let array = [];
  for (let j = 0; j < chartsData.value.orderData.length; j++) {
    array.push({
      name: chartsData.value.orderData[j].orderName,
      type: "bar",
      barGap: 0,
      label: labelOption,
      emphasis: {
        focus: "series",
      },
      data: chartsData.value.orderData[j].total,
    });
  }
  chartSeriesData.value = array;
};
const echartOption = ref({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {
    // data: chartsData.value.orderCodes,
    data: [],
  },
  xAxis: [
    {
      type: "category",
      axisTick: { show: false },
      // data: chartsData.value.dateList,
      data: [],
    },
  ],
  yAxis: [
    {
      type: "value",
    },
  ],
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  series: [],
  // series: chartSeriesData.value,
});
const clickSearch = async () => {
  await setChartsData();
  await setChartSeries();
  echartOption.value.legend.data = chartsData.value.orderCodes;
  echartOption.value.xAxis[0].data = chartsData.value.dateList;
  echartOption.value.series = chartSeriesData.value;
  charts.value.setOption(echartOption.value, 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 setChartsData = async () => {
  const { data } = await getEchartData(data1.value.search);
  chartsData.value = data;
};

onMounted(async () => {
  setTime();
  charts.value = echarts.init(document.getElementById("dailystoragecharts"));
  dataList();
});
watch(
  () => editDialog.value.visible,
  () => {
    if (editDialog.value.visible == true) {
      data2.value.Methords.dataList();
    }
  }
);
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>