|
|
@@ -0,0 +1,438 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <!--查询表单-->
|
|
|
+ <el-card class="operate-container" shadow="never">
|
|
|
+ <el-form :inline="true" class="demo-form-inline">
|
|
|
+ <el-form-item label="所属产线">
|
|
|
+ <el-select
|
|
|
+ v-model="searchObj.zoneId"
|
|
|
+ clearable
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in zoneList"
|
|
|
+ :key="index"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="分配设备">
|
|
|
+ <el-input v-model="searchObj.resourceName" placeholder="设备名称" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="生产时间">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="searchObj.startDate"
|
|
|
+ placeholder="开始时间"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="-">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="searchObj.endDate"
|
|
|
+ placeholder="结束时间"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="生产月份">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="searchObj.month"
|
|
|
+ type="month"
|
|
|
+ placeholder="选择月"
|
|
|
+ value-format="yyyy-MM"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="生产年份">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="searchObj.years"
|
|
|
+ type="year"
|
|
|
+ placeholder="选择年"
|
|
|
+ value-format="yyyy"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-button type="primary" icon="el-icon-search" @click="fetch()"
|
|
|
+ >查询</el-button
|
|
|
+ >
|
|
|
+ <el-button type="default" @click="resetData()">清空</el-button>
|
|
|
+ </el-form>
|
|
|
+ </el-card>
|
|
|
+ <!-- 列表数据 -->
|
|
|
+ <el-table
|
|
|
+ :key="tableKey"
|
|
|
+ ref="table"
|
|
|
+ :data="tableData"
|
|
|
+ border
|
|
|
+ fit
|
|
|
+ style="width: 100%"
|
|
|
+ @selection-change="onSelectChange"
|
|
|
+ @cell-click="cellClick"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ :label="$t('common.serialNo')"
|
|
|
+ width="55px"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ (page - 1) * limit + scope.$index + 1 }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="设备资源生产表" :resizable="false" align="center">
|
|
|
+ <!--产线-->
|
|
|
+ <el-table-column
|
|
|
+ prop="zoneName"
|
|
|
+ :label="$t('statisticalAnalysis.table.deviceResource.zoneName')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <!--分配设备-->
|
|
|
+ <el-table-column
|
|
|
+ prop="resourceName"
|
|
|
+ :label="$t('statisticalAnalysis.table.deviceResource.resourceName')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <!--总数量-->
|
|
|
+ <el-table-column
|
|
|
+ prop="totalNum"
|
|
|
+ :label="$t('statisticalAnalysis.table.deviceResource.totalNum')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <!--日期-->
|
|
|
+ <el-table-column
|
|
|
+ prop="time"
|
|
|
+ :label="$t('statisticalAnalysis.table.deviceResource.time')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <!--操作-->
|
|
|
+ <el-table-column label="操作" width="210" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="text" @click="fetchDataById(scope.row)"
|
|
|
+ >查看详情</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <!-- 分页组件 -->
|
|
|
+ <el-pagination
|
|
|
+ :current-page="page"
|
|
|
+ :total="total"
|
|
|
+ :page-size="limit"
|
|
|
+ :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
|
|
|
+ style="padding: 30px 0; text-align: center"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ @size-change="changePageSize"
|
|
|
+ @current-change="changeCurrentPage"
|
|
|
+ />
|
|
|
+
|
|
|
+ <el-dialog title="产品加工详情" :close-on-click-modal="false" :visible.sync="dialogVisible" style="width: 110%; margin-top: 20px">
|
|
|
+ <el-table
|
|
|
+ :key="tableKey"
|
|
|
+ :span-method="objectSpanMethod"
|
|
|
+ ref="table"
|
|
|
+ :data="formData"
|
|
|
+ border
|
|
|
+ fit
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <!--订单号-->
|
|
|
+ <el-table-column
|
|
|
+ prop="orderNo"
|
|
|
+ :label="$t('statisticalAnalysis.table.deviceResourceDetail.orderNo')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ width="140"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <!--产线名称-->
|
|
|
+ <el-table-column
|
|
|
+ prop="zoneName"
|
|
|
+ :label="$t('statisticalAnalysis.table.deviceResourceDetail.zoneName')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ width="145"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <!--分配设备名称-->
|
|
|
+ <el-table-column
|
|
|
+ prop="resourceName"
|
|
|
+ :label="$t('statisticalAnalysis.table.deviceResourceDetail.resourceName')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ width="160"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <!--产品名称-->
|
|
|
+ <el-table-column
|
|
|
+ prop="bomName"
|
|
|
+ :label="$t('statisticalAnalysis.table.deviceResourceDetail.bomName')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ width="130"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <!--工序-->
|
|
|
+ <el-table-column
|
|
|
+ prop="procedureNo"
|
|
|
+ :label="$t('statisticalAnalysis.table.deviceResourceDetail.procedureNo')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <!--开始时间-->
|
|
|
+ <el-table-column
|
|
|
+ prop="startTime"
|
|
|
+ :label="$t('statisticalAnalysis.table.deviceResourceDetail.startTime')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ width="160"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <!--结束时间-->
|
|
|
+ <el-table-column
|
|
|
+ prop="endTime"
|
|
|
+ :label="$t('statisticalAnalysis.table.deviceResourceDetail.endTime')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ width="160"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <!-- 分页组件 -->
|
|
|
+ <el-pagination
|
|
|
+ :current-page="page2"
|
|
|
+ :total="total2"
|
|
|
+ :page-size="limit2"
|
|
|
+ :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
|
|
|
+ style="padding: 30px 0; text-align: center"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ @size-change="changePageSize2"
|
|
|
+ @current-change="changeCurrentPage2"
|
|
|
+ />
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// 【产品加工汇总】-API
|
|
|
+import productlineAvailabilityApi from "@/api/statisticalAnalysis/productlineAvailability";
|
|
|
+// 【弹出框】elementui组件
|
|
|
+import elDragDialog from "@/directive/el-drag-dialog";
|
|
|
+import Pagination from "@/components/Pagination";
|
|
|
+import areaMgrApi from "@/api/resourceProductMgr/areaMgr";
|
|
|
+export default {
|
|
|
+ name: "productStatistics",
|
|
|
+ directives: {
|
|
|
+ elDragDialog,
|
|
|
+ },
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableData: [], // 讲师列表
|
|
|
+ formData: [],
|
|
|
+ total: 0, // 总记录数
|
|
|
+ page: 1, // 当前页码
|
|
|
+ limit: 10, // 每页记录数
|
|
|
+ page2: 1, // 当前页码
|
|
|
+ limit2: 10, // 每页记录数
|
|
|
+ total2: 0, // 总记录数
|
|
|
+ searchObj: {}, // 查询条件
|
|
|
+ dialogVisible: false, //是否弹框
|
|
|
+ zoneList: [],
|
|
|
+ row2: {}
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ // 实例已经在内存中创建好，此时data和methods已将ok,如果要操作data中的数据或是调用methods中的方法，最早只能在created中操作
|
|
|
+ created() {
|
|
|
+ // 加载列表数据
|
|
|
+ this.fetch();
|
|
|
+ this.getZoneList();
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ loadingId: {
|
|
|
+ handler(val, oldVal) {
|
|
|
+ // 加载列表数据
|
|
|
+ this.fetch();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ loadingDate: {
|
|
|
+ handler(val, oldVal) {
|
|
|
+ // 加载列表数据
|
|
|
+ this.fetch();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ view(row) {
|
|
|
+ this.$refs.view.setOperatorDetailPerformance(row);
|
|
|
+ this.operatorViewVisible = true;
|
|
|
+ },
|
|
|
+ fetch() {
|
|
|
+ let index = 0;
|
|
|
+ if(this.searchObj.startDate) index++;
|
|
|
+ if(this.searchObj.month) index++;
|
|
|
+ if(this.searchObj.years) index++;
|
|
|
+
|
|
|
+ if(index>1) {
|
|
|
+ this.$message({
|
|
|
+ message: "时间，月份，年份只能选择一个",
|
|
|
+ type: "warning"
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.tableKey = !this.tableKey;
|
|
|
+ productlineAvailabilityApi
|
|
|
+ .deviceResourceSum(this.page, this.limit, this.searchObj)
|
|
|
+ .then((response) => {
|
|
|
+ const res = response.data;
|
|
|
+ this.tableData = (res.data || []).records;
|
|
|
+ this.total = (res.data || []).total;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //根据id查询
|
|
|
+ fetchDataById(row) {
|
|
|
+ //弹出框
|
|
|
+ this.row2 = row
|
|
|
+ this.dialogVisible = true;
|
|
|
+ const obj = {
|
|
|
+ resourceId: row.resourceId,
|
|
|
+ zoneId: row.zoneId,
|
|
|
+ startDate: this.searchObj.startDate,
|
|
|
+ endDate: this.searchObj.endDate,
|
|
|
+ month: this.searchObj.month,
|
|
|
+ years: this.searchObj.years
|
|
|
+ }
|
|
|
+ this.tableKey = !this.tableKey;
|
|
|
+ productlineAvailabilityApi
|
|
|
+ .deviceResourceDetail(this.page2,this.limit2,obj)
|
|
|
+ .then((response) => {
|
|
|
+ const res = response.data;
|
|
|
+ this.formData = (res.data || []).records;
|
|
|
+ this.total2 = (res.data || []).total;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 每页记录数改变，size：回调参数，表示当前选中的“每页条数”
|
|
|
+ changePageSize(size) {
|
|
|
+ this.limit = size;
|
|
|
+ this.fetch();
|
|
|
+ },
|
|
|
+ // 改变页码，page：回调参数，表示当前选中的“页码”
|
|
|
+ changeCurrentPage(page) {
|
|
|
+ this.page = page;
|
|
|
+ this.fetch();
|
|
|
+ },
|
|
|
+ changePageSize2(size) {
|
|
|
+ this.limit2 = size;
|
|
|
+ console.log("执行")
|
|
|
+ this.fetchDataById(this.row2);
|
|
|
+ },
|
|
|
+ changeCurrentPage2(page) {
|
|
|
+ this.page2 = page;
|
|
|
+ console.log("执行")
|
|
|
+ this.fetchDataById(this.row2);
|
|
|
+ },
|
|
|
+ //清空
|
|
|
+ resetData() {
|
|
|
+ this.searchObj = {};
|
|
|
+ this.fetch();
|
|
|
+ },
|
|
|
+ cellClick(row, column) {
|
|
|
+ if (column["columnKey"] === "operation") {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let flag = false;
|
|
|
+ this.selection.forEach((item) => {
|
|
|
+ if (item.id === row.id) {
|
|
|
+ flag = true;
|
|
|
+ this.$refs.table.toggleRowSelection(row);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ if (!flag) {
|
|
|
+ this.$refs.table.toggleRowSelection(row, true);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onSelectChange(selection) {
|
|
|
+ this.selection = selection;
|
|
|
+ },
|
|
|
+ getZoneList() {
|
|
|
+ areaMgrApi.getList({ status: 1 }).then((res) => {
|
|
|
+ res = res.data;
|
|
|
+ if (res.isSuccess) {
|
|
|
+ if(res.data){
|
|
|
+ this.zoneList = res.data.filter(item => item.name.indexOf('保障') ==-1)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //导出
|
|
|
+ exportData() {
|
|
|
+ productlineAvailabilityApi.expectprocedureSum().then((res) => {
|
|
|
+ if (!res) return;
|
|
|
+ const blob = new Blob([res.data], {
|
|
|
+ type: "application/vnd.ms-excel;",
|
|
|
+ });
|
|
|
+ const a = document.createElement("a");
|
|
|
+ // 生成文件路径
|
|
|
+ let href = window.URL.createObjectURL(blob);
|
|
|
+ a.href = href;
|
|
|
+ // 文件名中有中文 则对文件名进行转码
|
|
|
+ a.download = decodeURIComponent("产品加工汇总");
|
|
|
+ // 利用a标签做下载
|
|
|
+ document.body.appendChild(a);
|
|
|
+ a.click();
|
|
|
+ document.body.removeChild(a);
|
|
|
+ window.URL.revokeObjectURL(href);
|
|
|
+ this.allloading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //
|
|
|
+ objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
|
|
+ if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
|
|
|
+ const _row = this.flitterData(this.formData).one[rowIndex];
|
|
|
+ const _col = _row > 0 ? 1 : 0;
|
|
|
+ return {
|
|
|
+ rowspan: _row,
|
|
|
+ colspan: _col,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**合并表格的第一列，处理表格数据 */
|
|
|
+ flitterData(arr) {
|
|
|
+ let spanOneArr = [];
|
|
|
+ let concatOne = 0;
|
|
|
+ arr.forEach((item, index) => {
|
|
|
+ if (index === 0) {
|
|
|
+ spanOneArr.push(1);
|
|
|
+ } else {
|
|
|
+ //注意这里的quarterly是表格绑定的字段，根据自己的需求来改
|
|
|
+ if (item.quarterly === arr[index - 1].quarterly) {
|
|
|
+ //第一列需合并相同内容的判断条件
|
|
|
+ spanOneArr[concatOne] += 1;
|
|
|
+ spanOneArr.push(0);
|
|
|
+ } else {
|
|
|
+ spanOneArr.push(1);
|
|
|
+ concatOne = index;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return {
|
|
|
+ one: spanOneArr,
|
|
|
+ };
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.rowBtn {
|
|
|
+ margin: 0 5px;
|
|
|
+ color: #1890ff;
|
|
|
+}
|
|
|
+
|
|
|
+.rowBtn:hover {
|
|
|
+ opacity: 0.7;
|
|
|
+}
|
|
|
+</style>
|
lxb