yudao-init/src/views/produce/workOrder/index.vue

<!--
 * @Author: zhp
 * @Date: 2024-04-15 10:49:13
 * @LastEditTime: 2024-06-17 16:32:02
 * @LastEditors: DY
 * @Description:
-->
<template>
  <div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 35px)">
    <el-row :gutter="10">
      <el-col :span="4">
        <div class="app-container" style="padding: 16px; height: auto; text-align: left; border-radius: 8px;">
        <!-- <p style="margin-bottom: 0">数据概览</p> -->
          <div class="view">
            <div style="padding: 10px 0; width: 100%">
              <div class="topDiv">
                <div style="width: 4px; height: 52px; background: #71CC8C; border-radius: 2px;"></div>
                <div class="centerDiv">
                  <span style="font-size: 30px; line-height: 30px; color: rgba(0,0,0,0.85);">{{ inputNum }}</span>
                  <span style="font-size: 14px; color: rgba(0,0,0,0.85);">在制工单数量</span>
                </div>
                <svg-icon icon-class="workProcess" style="width: 26px; height: 26px" />
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="20">
        <div class="app-container" style="padding: 16px; height: auto; text-align: left; border-radius: 8px;">
        <!-- <p style="margin-bottom: 0">数据概览</p> -->
          <div class="view">
            <div style="padding: 10px 0; width: 100%" v-for="(item, index) in factorys" :key="index">
              <div class="topDiv">
                <div style="width: 4px; height: 52px; background: #3A79FF; border-radius: 2px;"></div>
                <div class="centerDiv">
                  <span style="font-size: 30px; line-height: 30px; color: rgba(0,0,0,0.85);">{{ factoryNum[index] }}</span>
                  <span style="font-size: 14px; color: rgba(0,0,0,0.85);">{{item}}</span>
                </div>
                <svg-icon icon-class="factoryWorkOrder" style="width: 26px; height: 26px" />
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- <div class="app-container" style="margin-top: 8px; height: auto;">
      <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
    </div> -->
    <div class="app-container" style="margin-top: 8px;flex-grow: 1;">
      <!-- <search-bar :formConfigs="formConfig2" ref="searchBarForm" style="margin-bottom: 0" /> -->
      <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
      <base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize"
        :table-data="tableData" :max-height="tableH">
        <method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right"
          :method-list="tableBtn" @clickBtn="handleClick" />
      </base-table>
      <pagination
        :limit.sync="listQuery.pageSize"
        :page.sync="listQuery.pageNo"
        :total="listQuery.total"
        @pagination="getDataList"
      />
    </div>
    <add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" :date="listQuery.date" @refreshDataList="successSubmit" @destroy="detailOrUpdateVisible = false" />
  </div>
</template>

<script>
// import { parseTime } from '../../core/mixins/code-filter';
import { getWorkOrderPage, exportExcel, getOverView } from '@/api/produceData/order';
// import inputTable from './inputTable.vue';
import lineChart from './lineChart';
import moment from 'moment'
import tableHeightMixin from "@/mixins/tableHeightMixin";
// import ButtonNav from '@/components/ButtonNav'
import basicPage from '@/mixins/basic-page'
import AddOrUpdate from './add-or-updata';
import { factoryList, factoryArray } from "@/utils/constants";
import { publicFormatter } from "@/utils/dict";

// import FileSaver from 'file-saver'
// import * as XLSX from 'xlsx'
export default {
  components: { lineChart, AddOrUpdate },
  mixins: [basicPage, tableHeightMixin],
	data() {
    return {
      factorys: ['瑞昌中建材', '邯郸中建材', '株洲中建材', '佳木斯中建材', '成都中建材', '凯盛光伏', '蚌埠兴科'],
      factoryNum: [0, 0, 0, 0, 0, 0, 0],
      inputNum: 0,
      heightNum: 180,
      factoryList,
      factoryArray,
      listQuery: {
        pageSize: 20,
        pageNo: 1,
        factorys: undefined,
        total: 0,
        time: undefined,
        orderStatus:undefined
      },
      detailOrUpdateVisible:false,
      tableBtn: [
          {
            type: 'detail',
            btnName: '详情',
        },
        // {
        //     type: 'delete',
        //     btnName: '删除',
        //   },
      ].filter((v) => v),
      typeList: [
        {
          name: '芯片',
          id: 0,
        },
        {
          name: '标准组件',
          id: 1,
        },
        {
          name: 'BIPV产品',
          id: 2,
        },
      ],
      formConfig: [
        {
          type: "select",
          label: "工厂名称",
          selectOptions: factoryArray,
          labelField: 'name',
          valueField: 'id',
          param: "factory",
          multiple: true,
					filterable: true
        },
        {
          type: "select",
          label: "工单状态",
          selectOptions: [
            {
              label: '未开始',
              value: 1
            },
            {
              label: '生产中',
              value: 2
            },
            {
              label: '已完成',
              value: 3
            }
          ],
          labelField: "label",
          valueField: "value",
          param: "orderStatus",
          multiple: true,
					filterable: true
        },
        {
          type: "datePicker",
          label: "时间段",
          dateType: "daterange",
          format: "yyyy-MM-dd",
          valueFormat: "yyyy-MM-dd",
          rangeSeparator: "-",
          startPlaceholder: "开始日期",
          endPlaceholder: "结束日期",
          param: "timeSlot",
          defaultSelect: [],
          defaultTime: ["00:00:00", "23:59:59"],
          width: 250,
        },
        {
          type: "button",
          btnName: "查询",
          name: "search",
          color: "primary",
        },
        {
          type: "separate",
        },
        {
          type: "button",
          btnName: "导出",
          name: "export",
          color: "primary",
          plain: true
        },
      ],
      formConfig2: [
        {
          type: 'title',
          label: '工厂信息',
        },
      ],
      formConfig1: [
        {
          type: 'title',
          label: '良品数量',
        },
      ],
      tableProps: [
        {
          prop: 'factory',
          label: '工厂名称',
          filter: (val) => factoryList[val],
          minWidth: 200,
          showOverflowtooltip: true
        },
        {
          prop: 'workOrderNumber',
          label: '工单号',
          minWidth: 120,
          showOverflowtooltip: true
          // filter: (val) => ['玻璃芯片', '标准组件', 'BIPV', '定制组件'][val]
        },
        {
          prop: 'workOrderType',
          label: '工单类型',
          // filter: publicFormatter('workorder_status')
          filter: (val) => ['', '芯片工单', '组件类型', 'bipv类型'][val],
        },
        {
          prop: 'plannedInvestment',
          label: '计划投入',
        },
        {
          prop: 'actualInvestment',
          label: '实际投入',
        },
        {
          prop: 'targetProduction',
          label: '目标产量',
        },
        {
          prop: 'actualProduction',
          label: '实际产量',
        },
        {
          prop: 'productionProgress',
          label: '生产进度',
          filter: (val) => (val * 100) + '%'
        },
        {
          prop: 'orderStatus',
          label: '工单状态',
          // filter: publicFormatter('workorder_status')
          filter: (val) => ['', '未开始', '生产中', '已完成'][val],
        },
        {
          prop: 'startTime',
          label: '开始时间',
          minWidth: 100,
          showOverflowtooltip: true
        },
        {
          prop: 'endTime',
          label: '完成时间',
          minWidth: 100,
          showOverflowtooltip: true
        }
      ],
      tableData: [],
      xAxis: [],
      lineData: {}
      // data: {}
			// proLineList: [],
			// all: {}
		};
  },
	created() {
    const today = new Date()
    const sevenDaysAgo = new Date(today.getTime() - (6 * 24 * 60 * 60 * 1000))
    this.listQuery.time = [moment(sevenDaysAgo).format('yyyy-MM-DD'), moment(today).format('yyyy-MM-DD')]
    this.formConfig[2].defaultSelect = this.listQuery.time
	},
  mounted() {
    this.getOverView()
  },
  methods: {
    getOverView() {
      getOverView().then(res => {
        // this.data = res.data
        if (res.code === 0) {
          for(const i in res.data) {
            if (i === '在制工单数量') {
              this.inputNum = res.data[i]
            } else {
              const index = this.factorys.indexOf(i)
              if (index > -1) {
                this.factoryNum[index] = res.data[i]
              }
            }
          }
        }
      })
    },
    otherMethods(val) {
      this.detailOrUpdateVisible = true;
      // this.addOrEditTitle = "详情";
      this.$nextTick(() => {
        this.$refs.detailOrUpdate.init(val.data.id);
      });
    },
    async getDataList() {
      const res = await getWorkOrderPage(this.listQuery)
      this.tableData = res.data.list
      this.listQuery.total = res.data.total
      if (this.listQuery.total > 0) {
        this.tableData.forEach(item => {
          item.startTime = item.startDate ? item.startDate[0] + '-' + item.startDate[1] + '-' + item.startDate[2] : '--'
          item.endTime = item.endDate ? item.endDate[0] + '-' + item.endDate[1] + '-' + item.endDate[2] : '--'
        })
      }
    },
		buttonClick(val) {
			this.listQuery.factorys = val.factory?.length > 0 ? val.factory : undefined
      this.listQuery.orderStatus = val.orderStatus?.length > 0 ? val.orderStatus : undefined
      this.listQuery.time = val.timeSlot?.length > 0 ? val.timeSlot : undefined
			switch (val.btnName) {
				case 'search':
					this.listQuery.pageNo = 1;
					this.listQuery.pageSize = 20;
          if (this.listQuery.time) {
            this.getDataList();
          } else {
            this.$message.warning('请选择时间范围！')
          }
					break;
				case 'export':
          if (this.listQuery.time) {
            this.handleExport();
          } else {
            this.$message.warning('请选择时间范围！')
          }
					break;
				default:
					console.log(val);
			}
		},
		/** 导出按钮操作 */
    handleExport() {
      this.$modal.confirm('是否确认导出工单数据?').then(() => {
        // 处理查询参数
        // let params = {...this.listQuery};
        // params.current = 1;
        // params.size = 999;
        this.exportLoading = true;
        return exportExcel({
          factorys: this.listQuery.factorys,
          orderStatus: this.listQuery.orderStatus,
          time: this.listQuery.time
        });
      }).then(response => {
        this.$download.excel(response, '工单数据.xls');
        this.exportLoading = false;
      }).catch(() => {})
    },
	},
};
</script>

<style scoped>
.centerDiv {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.topDiv {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  flex: 1;
}
.view {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex: 1;
}
.blueTip::before{
  display: inline-block;
  content: '';
  width: 4px;
  height: 18px;
  background: #0B58FF;
  border-radius: 1px;
  margin-right: 8PX;
  margin-top: 8px;
}
.app-container {
  margin: 0 0px 0;
  background-color: #fff;
  border-radius: 4px;
  padding: 16px 16px 0;
  height: calc(100vh - 40px);
  overflow: auto;
}
</style>