JG-ADMIN-TEMP/src/views/report/statistics/workeveryday/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"
    >
      <template #menu="{ row, index, type }">
        <el-button
          @click="ckickCell(row)"
          icon="el-icon-view"
          text
          type="primary"
          >查看</el-button
        >
      </template>
      <template #header="">
        <div id="dailystoragecharts"></div>
      </template>
      <template #menu-right="{}">
        <el-button
          class="ml-3"
          @click="
            data1.Utils.exportData(
              '/api/v1/process/census/completeOrder/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">
        <div id="dailystoragecharts2"></div>
      </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 { getOperationList, getOperationInfo } from "@/api/report";
import * as echarts from "echarts";
// 数据字典相关
const { dicts } = useDictionaryStore();
const editDialog = ref({ visible: false, title: "订单详情" });
const charts = shallowRef(null);
const charts2 = shallowRef(null);
const chartsSearch = ref({});
const key = ref(false);
// 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/completeOperation",
  })
);
const data2 = ref(
  useCrud({
    src: "/api/v1/process/census/operationList",
  })
);
const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
  data1.value.Methords;

const { selectionChange, multipleDelete } = data1.value.Methords;
const chartsData1 = ref({});
const chartsData2 = ref({});
const chartSeriesData1 = ref([]);
const labelOption = {
  show: false,
  position: "insideBottom",
  distance: 15,
  align: "left",
  verticalAlign: "middle",
  rotate: 90,
  formatter: "{c}  {name|{a}}",
  fontSize: 24,
  rich: {
    name: {},
  },
};

const echartOption1 = ref({
  title: {
    text: "工序完成数量",
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {
    // data: chartsData.value.orderCodes,
    data: ["工序完成数量"],
  },
  xAxis: [
    {
      type: "value",
    },
  ],
  yAxis: [
    {
      type: "category",
      axisTick: { show: false },
      data: [],
    },
  ],
  // series: chartSeriesData1.value,
  series: [
    {
      name: "工序完成数量",
      type: "bar",
      barGap: 0,
      label: labelOption,
      emphasis: {
        focus: "series",
      },
      // data: chartsData1.value.total,
    },
  ],
});
const echartOption2 = ref({
  title: {
    text: "生产趋势图",
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {
    data: [],
  },
  xAxis: [
    {
      type: "category",
      axisTick: { show: false },
      data: [],
    },
  ],
  yAxis: [
    {
      type: "value",
    },
  ],
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  series: [
    {
      name: "工序完成数量",
      type: "line",
      barGap: 0,
      label: labelOption,
      emphasis: {
        focus: "series",
      },
      data: [],
    },
  ],
});

const ckickCell = (row) => {
  editDialog.value.visible = true;
  editDialog.value.title = row.orderName;
  nextTick(async () => {
    charts2.value = echarts.init(
      document.getElementById("dailystoragecharts2")
    );
    chartsSearch.value.operationCode = row.operationCode;
    chartsSearch.value.orderCode = row.orderCode;
    chartsSearch.value.searchTime = data1.value.search.searchTime;
    echartOption2.value.title.text = row.orderName + ": 生产趋势图";
    await setChartsData2();
    echartOption2.value.xAxis[0].data = chartsData2.value.dateList;
    echartOption2.value.series[0].data = chartsData2.value.total;
    charts2.value.setOption(echartOption2.value, true);
  });
};
const setChartsData1 = async () => {
  const { data } = await getOperationList({
    ...data1.value.search,
    pageSize: 99999,
  });
  chartsData1.value = data;
};
const setChartsData2 = async () => {
  const { data } = await getOperationInfo({
    ...chartsSearch.value,
  });
  chartsData2.value = data;
};
// 设置表格列或者其他自定义的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: "orderCode",
      overHidden: true,
      search: true,
      editDisabled: true,
      hide: true,
    },
    {
      label: "订单名称",
      prop: "orderName",
      overHidden: true,
      search: true,
      editDisabled: true,
      hide: true,
    },
    {
      label: "项目编码",
      prop: "projectCode",
      overHidden: true,
      search: true,
      editDisabled: true,
      hide: true,
    },
    {
      label: "产品规格",
      prop: "materialModel",
      width: 140,
      overHidden: true,
      search: true,
      editDisabled: true,
      hide: true,
    },
    {
      label: "订单名称",
      prop: "orderName",
      search: false,
    },
    {
      label: "订单编码",
      prop: "orderCode",
      search: false,
    },
    {
      label: "项目编码",
      prop: "projectCode",
      search: false,
    },
    {
      label: "物料编码",
      prop: "materialCode",
      search: true,
    },
    {
      label: "物料名称",
      prop: "materialName",
      search: true,
    },
    {
      label: "物料规格",
      prop: "materialModel",
      search: false,
    },
    {
      label: "工序编码",
      prop: "operationCode",
      search: false,
    },
    {
      label: "工序名称",
      prop: "operationName",
      search: true,
    },
    {
      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 setTime = () => {
  data1.value.search.searchTime = getCurrentMonthStartAndEndDates();
};

onMounted(async () => {
  setTime();
  charts.value = echarts.init(document.getElementById("dailystoragecharts"));
  dataList();
  await setChartsData1();
  echartOption1.value.yAxis[0].data = chartsData1.value.operationList;
  echartOption1.value.series[0].data = chartsData1.value.total;
  charts.value.setOption(echartOption1.value, true);
});
watch(
  () => data1.value.data,
  async () => {
    await setChartsData1();
    echartOption1.value.yAxis[0].data = chartsData1.value.operationList;
    echartOption1.value.series[0].data = chartsData1.value.total;
    console.log(echartOption1.value);
    charts.value.setOption(echartOption1.value, true);
  }
);
</script>
<style lang="scss" scoped>
:deep(.avue-crud__left) {
  width: 100%;
}

#dailystoragecharts {
  width: 100%;
  height: 400px;
  border: 1px solid #ccc;
}

#dailystoragecharts2 {
  width: 100%;
  height: 400px;
  border: 1px solid #ccc;
}
</style>