JG-ADMIN-TEMP/src/views/report/statistics/stationbeat/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="clickSearch"
      @current-change="clickSearch"
      @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/beatInfo/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({
    src: "/api/v1/process/census/beatInfo",
  })
);

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: "workOrderCode",
      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: "planNum",
      search: false,
    },
    {
      label: "物料编码",
      prop: "materialCode",
      search: false,
    },
    {
      label: "物料名称",
      prop: "materialName",
      search: false,
    },
    {
      label: "物料规格",
      prop: "materialModel",
      search: false,
    },
    {
      label: "标准用时(秒)",
      prop: "standardWorktime",
      search: false,
    },
    {
      label: "总共用时(秒)",
      prop: "totalTime",
      search: false,
    },
    {
      label: "时差比",
      prop: "totalTime",
      search: false,
      html: true,
      formatter: (val) => {
        return (
          "<span>" +
          (Number(val.totalTime) - Number(val.standardWorktime)) +
          "</span>"
        );
      },
    },
  ],
});

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 () => {
  await setChartsData();
  setOption();
  charts.value.setOption(
    {
      darkMode: true,
      textStyle: {
        color: "#fff",
      },
      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: [],
  };
  let obj3 = {
    name: "时差比",
    type: "bar",
    barGap: 0,
    label: labelOption,
    emphasis: {
      focus: "series",
    },
    data: [],
  };
  chartsData.value.forEach((item) => {
    array1.push(`${item.orderName}:${item.workOrderCode}`);
    obj1.data.push(item.standardWorktime);
    obj2.data.push(item.totalTime);
    obj3.data.push(Number(item.totalTime) - Number(item.standardWorktime));
  });
  array2 = [obj1, obj2, obj3];
  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>