yudao-dev/src/views/produce/workOrder/detail.vue

<!--
 * @Author: zwq
 * @Date: 2021-11-18 14:16:25
 * @LastEditors: zhp
 * @LastEditTime: 2024-09-11 10:27:13
 * @Description:
-->
<template>
  <!-- <el-drawer
		:visible.sync="visible"
		:show-close="false"
		:wrapper-closable="false"
		class="drawer"
		size="50%"> -->

  <div class="status-timegraph-container" style="background: #f2f4f9; flex: 1; display: flex; flex-direction: column">
    <el-row v-show="workOrderButton.length !== 0" class="" style="
				margin-bottom: 4px;
				border-radius: 8px;
			">
        <workOrderNav :id-list="workOrderButton" @getWorkOrderId="getId">
        </workOrderNav>
    </el-row>
    <el-row class="" style="
				height: 1px;
				flex: .3;
				margin-bottom: 12px;
				background: #fff;
				padding: 16px 16px px;
				border-radius: 8px;
				display: flex;
				flex-direction: column;
			">
      <div class="content">
        <div>
          <h1>工单编码：{{ dataForm.code }}</h1>
        </div>
        <small-title style="margin: 16px 0; padding-left: 8px" :no-padding="true">
          基本信息
        </small-title>
        <div class="formContent">
          <el-row :gutter="20">
            <el-col :span="8">工单名称:{{ dataForm.name }}</el-col>
            <el-col :span="8">工单来源:{{ dataForm.triggerOrigin === 1 ? 'MES' : dataForm.triggerOrigin === 2 ? 'ERP' : ''}}
            </el-col>
            <el-col :span="8">所属订单:
              <span v-for="(item, index) in orderList" :key="index" style="margin-right: 10px">{{ item.orderName
                }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">产品名称:{{ dataForm.productName }}</el-col>
            <el-col :span="8">规 格:{{ dataForm.specifications }}</el-col>
            <el-col :span="8">计划生产数量:{{ dataForm.planQuantity }}</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">预计用时(小时):{{ dataForm.remainingTime }}</el-col>
            <el-col :span="8">计划投入数量:{{ dataForm.planAssignQuantity }}</el-col>
            <el-col :span="8">优先级:{{ fitlerP(dataForm.priority) }}</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">负责人:{{ dataForm.workers }}</el-col>
            <el-col :span="8">关联产线:
              <span v-for="(item, index) in dataForm.productLineNames" :key="index" style="margin-right: 10px">{{ item
                }}</span>
            </el-col>
            <el-col :span="8">物料计算方式:{{ dataForm.materialMethod === 1 ? '产品基础' : dataForm.materialMethod === 2 ? '工艺扩展'
              :
              '' }}</el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">关联工艺:{{ dataForm.processFlowName }}</el-col>
          </el-row>
        </div>
      </div>
    </el-row>
    <el-row class="" style="
				height: 1px;
				flex: 1;
				margin-bottom: 12px;
				background: #fff;
				padding: 16px 16px 32px;
				border-radius: 8px;
				display: flex;
				flex-direction: column;
			">
      <el-tabs v-model="activeName" @tab-click="switchTab">
        <el-tab-pane label="生产信息" name="produce">
          <div class="formContent">
            <el-row :gutter="20">
              <el-col :span="8">工单创建时间:{{ parseTime(dataForm.createTime) }}</el-col>
              <el-col :span="8">计划开始时间:{{ parseTime(dataForm.planStartTime) }}</el-col>
              <el-col :span="8">计划完成时间:{{ parseTime(dataForm.planFinishTime) }}</el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">预计结束时间:{{ parseTime(dataForm.computeFinishTime) }}</el-col>
              <el-col :span="8">实际开始时间:{{ parseTime(dataForm.startProduceTime) }}</el-col>
              <el-col :span="8">实际完成时间:{{ parseTime(dataForm.finishProduceTime) }}</el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">工单状态:{{ fitlerS(dataForm.status) }}</el-col>
              <el-col :span="8">实际投入数量:{{ dataForm.assignQuantity }}</el-col>
              <el-col :span="8">实际生产数量:{{ dataForm.actualQuantity }}</el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">废片数量:{{ dataForm.nokQuantity }}</el-col>
              <el-col :span="8">检测瑕疵数:{{ }}</el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane label="订单信息" name="order">
          <base-table :max-height="tableH" :table-props="tableProps" :page="listQuery.pageNo"
            :limit="listQuery.pageSize" :table-data="orderList">
            <method-btn v-if="!isdetail" slot="handleBtn" :width="120" label="操作" :method-list="tableBtn"
              @clickBtn="handleClick" />
          </base-table>
        </el-tab-pane>
        <el-tab-pane label="预计用料信息" name="material">
          <base-table :max-height="tableH" :table-props="tableProps1" :page="listQuery1.pageNo"
            :limit="listQuery1.pageSize" :table-data="materialList" />
        </el-tab-pane>
        <el-tab-pane label="质量信息" name="quality">
          <base-table :max-height="tableH" :table-props="tablePropsQuality" :table-data="qualityList" :page="1"
            :limit="10" />
        </el-tab-pane>
        <el-tab-pane label="能源信息" name="energy">
          <div class="toggleTabBox">
            <div :class="{ active: activeModule === 'dataList' }" @click="toggleTab('dataList')">数据列表</div>
            <div :class="{ active: activeModule === 'barChart' }" @click="toggleTab('barChart')">柱状图</div>
          </div>
          <div>
            <div v-show="activeModule === 'dataList'">
              <!-- 表格 -->
              <base-table :max-height="tableH" :table-props="tablePropsEnergy" :page="listQueryEnergy.pageNo"
                :limit="listQueryEnergy.pageSize" :table-data="energyList" />
            </div>
            <!-- 图形 -->
            <div v-show="activeModule === 'barChart'">
              <bar-chart ref="orderEnergyChart" :chartData="chartData" />
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>

    </el-row>

    <!-- 对话框(添加 / 修改) -->
    <!-- <base-dialog dialogTitle="添加设备" :dialogVisible="open" width="500px" @close="open = false" @cancel="open = false"
      @confirm="submitForm">
      <el-select v-if="open" style="width: 100%" filterable clearable v-model="queryParams.equipmentId"
        placeholder="请选择一个设备">
        <el-option v-for="eq in eqList" :key="eq.id" :value="eq.id" :label="eq.name"></el-option>
      </el-select>
    </base-dialog> -->
  </div>
</template>

<script>
// import basicAdd from '../../core/mixins/basic-add';
import { getCoreWO, getMaterialBomPage, getConOrderList, getCoreWOListById } from "@/api/base/coreWorkOrder";
import tableHeightMixin from '@/mixins/tableHeightMixin';
import { getOrderEnergyData } from "@/api/monitoring/orderEnergy";
// import { orderList } from "@/api/base/orderManage";
import {
  getStatisticalDataPage,
} from '@/api/monitoring/statisticalData';
import { getProcessFlowList } from '@/api/base/orderManage'
import SmallTitle from './SmallTitle';
import { publicFormatter } from "@/utils/dict";
import { parseTime } from '@/utils/ruoyi'
import workOrderNav  from './workOrderNav.vue'
import BarChart from "./barChart"
const tableBtn = [
	{
		type: 'edit',
		btnName: '编辑',
	},
	{
		type: 'delete',
		btnName: '删除',
	},
];
const tableProps = [
	{
		prop: 'orderName',
		label: '订单名称',
	},
	{
		prop: 'orderCode',
		label: '订单编码',
	},
	{
		prop: 'priority',
		label: '优先级',
		filter: (val) => ['', '低', '正常', '高'][val]
	},
	{
		prop: 'planAssignmentQuantity',
		label: '计划分配数量',
	},
	{
		prop: 'actualAssignmentQuantity',
		label: '实际分配数量',
	}
];

const tableProps1 = [
	{
		prop: 'materialName',
		label: '物料名称'
	},
	{
		prop: 'unit',
		label: '单位',
		filter: publicFormatter('unit_dict')
	},
	{
		prop: 'num',
		label: '剩余生产预计消耗'
	},
];
const tablePropsEnergy = [
  {
    prop: 'objName',
    label: '对象名称'
  },
  {
    prop: 'objCode',
    label: '对象编码',
    // filter: publicFormatter('unit_dict')
  },
  {
    prop: 'energyType',
    label: '能源类型',
    // filter: publicFormatter('unit_dict')
  },
  {
    prop: 'startNum',
    label: '工单开始值',
    // filter: publicFormatter('unit_dict')
  },
  {
    prop: 'endNum',
    label: '工单结束值/当前值'
  },
  {
    prop: 'useNum',
    label: '使用量'
  },
];
export default {
  mixins: [tableHeightMixin],
  components: { SmallTitle, workOrderNav, BarChart },
  computed: {
    tablePropsQuality() {
      return [
        {
          // width: 128,
          prop: 'workOrderName',
          label: '工单名称',
        },
        {
          // width: 128,
          prop: 'productionName',
          label: '产品',
        },
        {
          // width: 160,
          prop: 'inspectionContent',
          label: '检测内容',
        },
        ...this.dynamicProps,
        {
          // width: 128,
          prop: 'sumScrap',
          label: '未检测总数',
        },
        {
          // width: 128,
          prop: 'scrapRatio',
          label: '比例(%)',
          // subcomponent: {
          // 	name: 'TextOnly',
          // 	props: {
          // 		injectData: {
          // 			type: Object,
          // 			default: () => ({}),
          // 		},
          // 	},
          // 	data() {
          // 		return {
          // 			text: '比例',
          // 		};
          // 	},
          // 	methods: {
          // 		handleEmit(payload) {
          // 			console.log('handleEmit', payload);
          // 		},
          // 	},
          // 	render(h) {
          // 		return h('el-button', { props: { type: 'text' } }, this.text);
          // 	},
          // },
        },
      ];
    },
  },
	data() {
		return {
			tableBtn,
      tableProps,
      heightNum: 236,
      tablePropsEnergy,
      tableProps1,
      activeModule:'dataList',
      workOrderId:undefined,
			addOrUpdateVisible: false,
			urlOptions: {
				infoURL: getCoreWO
			},
			listQuery: {
				pageSize: 10,
				pageNo: 1,
				total: 0,
      },
      listQueryEnergy: {
        pageSize: 10,
        pageNo: 1,
        total: 0,
      },
      activeName:'produce',
			listQuery1: {
				pageSize: 10,
				pageNo: 1,
				total: 0,
			},
			dataForm: {},
			orderList: [],
      materialList: [],
      energyList: [],
      qualityList: [],
      chartData:[],
      dynamicProps:[],
			// orderArray: [],
			visible: false,
			isdetail: false,
			workOrderButton: [],
			processFlowList: []
		};
  },
  watch: {
    workOrderId(newValue, oldValue) {
      this.activeName = 'produce'
      this.init(newValue)
      this.dataForm.id = newValue
    }
  },
	created() {
		this.getDict()
	},
	mounted() {
		if (this.$route.query.woIdString && this.$route.query.woIdString !== 'undefined') {
      const idList = this.$route.query.woIdString.split(',')
      console.log(idList);

			getCoreWOListById(idList).then(res => {
				this.workOrderButton = res.data.map(work => {
					return {
						id: work.id,
						name: work.name
					}
        })
        // console.log(this.workOrderButton);
				this.init(this.workOrderButton[0].id, true)
			})
		}  else {
			this.init(this.$route.query.id, true)
		}
	},
  methods: {
    getId(val) {
      this.workOrderId = val
    },
   async switchTab(val) {
      if (this.activeName === 'order') {
        getConOrderList({
          workOrderId: this.dataForm.id,
        }).then((response) => {
          this.orderList = response.data;
          // this.listQuery.total = response.data.total;
        });
      }else if (this.activeName === 'material') {
        getConOrderList({
          workOrderId: this.dataForm.id,
        }).then((response) => {
          this.materialList = response.data;
          // this.listQuery.total = response.data.total;
        });
      } else if (this.activeName === 'energy') {
        getOrderEnergyData({
          workOrderId: this.dataForm.id,
        }).then((response) => {
          this.energyList = response.data
          this.chartData = response.data
          // this.listQuery.total = response.data.total;
        });
      } else if (this.activeName === 'quality') {
        const {
          data: { data, otherList, otherMap, nameData },
        } = await getStatisticalDataPage({
          workOrderIdList:[this.dataForm,id]
        })
        // console.log(this.queryParams);
        this.dynamicProps = this.filterNameData(nameData)
        this.qualityList = this.filterData(data);
      }
    },
		getDict() {
			// 工艺
      getProcessFlowList().then(res => {
        this.processFlowList = res.data || []
      })
    },
    filterNameData(nameData) {
      const ndSet = new Set();
      nameData.forEach((nd) => {
        ndSet.add(nd.name);
      });
      return Array.from(ndSet.values())
        .sort()
        .map((name) => ({
          prop: name,
          label: name,
        }));
    },
    filterData(data) {
      return data.map((item) => {
        const { data: innerData } = item;
        const keyValuePairs = {};
        innerData.map((d) => {
          keyValuePairs[d.dynamicName] = d.dynamicValue;
        });
        return {
          inspectionContent: item.inspectionContent,
          ...keyValuePairs,
          sumInput: item.sumInput,
          productionName: item.productionName,
          workOrderId: item.workOrderId,
          scrapRatio: item.scrapRatio,
        };
      });
    },
		fitlerP(val) {
			if (val) {
				if (val === 1) {
					return '低'
				} else if (val ===  2) {
					return '正常'
				} else {
					return '高'
				}
			}
		},
		fitlerS(val) {
			if (val) {
				if (val === 1) {
					return '等待'
				} else if (val ===  2) {
					return '激活'
				} else if (val ===  3) {
					return '暂停'
				} else if (val ===  4) {
					return '完成'
				} else {
					return '作废'
				}
			}
		},
		initData() {
			this.orderList.splice(0);
			this.materialList.splice(0);
		},
		handleClick(raw) {
			if (raw.type === 'delete') {
				this.$confirm(
					`确定对${
						raw.data.attrName
							? '[名称=' + raw.data.attrName + ']'
							: '[序号=' + raw.data._pageIndex + ']'
					}进行删除操作?`,
					'提示',
					{
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
					}
				)
					.then(() => {
						deleteCoreProductAttr(raw.data.id).then(({ data }) => {
							this.$message({
								message: '操作成功',
								type: 'success',
								duration: 1500,
								onClose: () => {
									this.getList();
								},
							});
						});
					})
					.catch(() => {});
			} else {
				this.addNew(raw.data.id);
			}
    },
    toggleTab(val) {
      this.activeModule = val
      if (this.activeModule === 'barChart') {
        this.$nextTick((res) => {
          this.$refs.orderEnergyChart.getChart()
        })
      }
    },
		getList() {
			// 获取订单列表
			// 获取预使用原料列表
			// if (this.dataForm.planProductId) {
			// 	getMaterialBomPage({
			// 		productId: this.dataForm.planProductId,
			// 	}).then((response) => {
			// 		this.materialList = response.data;
			// 		// this.listQuery.total = response.data.length;
			// 	});
			// }
			// 获取订单相关信息
			// orderList({
			// 	workOrderId: this.dataForm.id
			// }).then((response) => {
			// 	this.orderArray = response.data;
			// });
		},
		init(id, isdetail) {
			this.initData();
			this.isdetail = isdetail || false;
			this.dataForm.id = id || undefined;
			this.visible = true;

			this.$nextTick(() => {

				if (this.dataForm.id) {
					// 获取工单详情
					this.urlOptions.infoURL(id).then(response => {
            this.dataForm = response.data
						// 工艺名称
						if (this.dataForm.processFlowId) {
							this.processFlowList.filter(item => {
								if (item.id === this.dataForm.processFlowId) {
									this.dataForm.processFlowName = item.name
								}
							})
						}
						// 获取订单列表和用料列表
						// this.getList();
          });
				} else {
					if (this.urlOptions.isGetCode) {
            this.getCode()
          }
				}
			});
		},
		goEdit() {
			this.isdetail = false;
		},
		// 新增 / 修改
		addNew(id) {
			this.addOrUpdateVisible = true;
			this.$nextTick(() => {
				this.$refs.addOrUpdate.init(id);
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.drawer >>> .el-drawer {
	border-radius: 8px 0 0 8px;
	display: flex;
	flex-direction: column;
}

.drawer >>> .el-form-item__label {
	padding: 0;
}

.drawer >>> .el-drawer__header {
	margin: 0;
	padding: 32px 32px 24px;
	border-bottom: 1px solid #dcdfe6;
}
.drawer >>> .el-drawer__body {
	flex: 1;
	height: 1px;
	display: flex;
	flex-direction: column;
}

.drawer >>> .content {
	padding: 10px 24px;
	flex: 1;
	display: flex;
	flex-direction: column;
	/* height: 100%; */
}

.drawer >>> .visual-part {
	flex: 1 auto;
	max-height: 76vh;
	overflow: hidden;
	overflow-y: scroll;
	padding-right: 10px; /* 调整滚动条样式 */
}

.drawer >>> .el-form,
.drawer >>> .attr-list {
	padding: 0 16px;
}

.drawer-body__footer {
	display: flex;
	justify-content: flex-end;
	padding: 18px;
}
.formContent {
	font-size: 16px;
	line-height: 1.5;
	margin-bottom: 10px;
	width: 100%;
}
.action_btn {
  float: right;
  margin: 5px 15px;
  font-size: 14px;
}
.add {
	color: #0b58ff;
}
.container{
  /* background-color: #fff; */
  border-radius: 8px;
  padding: 16px 16px 0 16px;
  margin: 8px 0 8px 0px;
}
     .toggleTabBox {
       display: inline-block;

       div {
         display: inline-block;
         padding: 0 8px 4px;
         color: rgba(102, 102, 102, 0.5);
         border-bottom: 2px solid rgba(242, 244, 249, 1);
         cursor: pointer;
       }

       .active {
         color: rgba(0, 0, 0, 0.85);
         border-bottom-color: #0B58FF;
       }
     }
</style>