|
|
@@ -1,311 +0,0 @@
|
|
|
-<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