|
|
@@ -0,0 +1,311 @@
|
|
|
+<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/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(
|
|
|
+ {
|
|
|
+ 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();
|
|
|
+});
|
|
|
+</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>
|
dy