|
|
@@ -0,0 +1,337 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <!--左侧树侧形结构-->
|
|
|
+ <el-form>
|
|
|
+ <el-form-item>
|
|
|
+ <!-- <el-input v-model="searchInfo" placeholder="搜索" clearable style="width: 180px;" /> -->
|
|
|
+ <!-- <el-button type="primary" icon="search" @click="onSubmit" title="搜索">查询</el-button> -->
|
|
|
+ <el-button type="primary" icon="search" class="bt" @click="analyzeMonthlyOverloss">AI 超节损分析（月度）</el-button>
|
|
|
+ <!-- <el-button type="primary" icon="edit" class="bt" @click="handleShowAdd">新增</el-button> -->
|
|
|
+ <!-- <el-button type="primary" icon="delete" class="bt" @click="handleDelete">删除</el-button> -->
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-container>
|
|
|
+ <layout-sider :resize-directions="['right']" :width="220" style="margin-right: 10px;">
|
|
|
+ <div class="JKWTree-tree" style="height: 70vh;">
|
|
|
+ <h3>工单超节损核算</h3>
|
|
|
+ <el-tree :data="treeData" highlight-current @node-click="handleNodeClick" />
|
|
|
+ </div>
|
|
|
+ </layout-sider>
|
|
|
+ <el-container>
|
|
|
+
|
|
|
+ <el-main>
|
|
|
+ <div class="gva-table-box">
|
|
|
+
|
|
|
+ <el-table ref="multipleTable" style="width: 100%;height: 65vh"
|
|
|
+ :row-style="{ height: '20px' }" :header-cell-style="{ padding: '0px' }"
|
|
|
+ :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
|
|
|
+ border tooltip-effect="dark" :data="tableData1" row-key="ID"
|
|
|
+ highlight-current-row="true"
|
|
|
+ :cell-class-name="tableDataCellClass"
|
|
|
+ @selection-change="cjsSelectionChange" :show-overflow-tooltip="true">
|
|
|
+ <el-table-column type="selection" width="55" />
|
|
|
+ <el-table-column align="left" sortable label="工单编号" prop="Gd_gdbh" width="110" fixed />
|
|
|
+ <el-table-column align="left" label="印件号" prop="jjcp_yjno" width="70" />
|
|
|
+ <el-table-column align="left" label="联数" prop="yj_ls" width="70" />
|
|
|
+ <el-table-column align="left" sortable label="印件代号" prop="yjdh" width="110" />
|
|
|
+ <el-table-column align="left" sortable label="产品名称" prop="成品名称" width="250" />
|
|
|
+ <el-table-column align="left" label="实际投料" prop="实际投料" width="90" />
|
|
|
+ <el-table-column align="left" label="计量单位" prop="计量单位" width="85" />
|
|
|
+ <el-table-column align="left" label="入仓数量" prop="warehousing_num" width="90" />
|
|
|
+ <el-table-column align="left" sortable label="目标合格率" prop="target_rate" width="120" />
|
|
|
+ <el-table-column align="left" sortable label="实际合格率" prop="real_rate" width="120" />
|
|
|
+ <el-table-column align="left" sortable label="奖罚金额合计" prop="reward_money" width="140" />
|
|
|
+ <el-table-column align="left" sortable label="废品合计" prop="废品合计" width="120" />
|
|
|
+ <el-table-column align="left" sortable label="工单无形损" prop="工单无形损" width="120" />
|
|
|
+ <el-table-column align="left" label="材料废" prop="材料废" width="80" />
|
|
|
+ <el-table-column align="left" label="处发废" prop="外发废" width="80" />
|
|
|
+ <el-table-column align="left" label="工单计划损耗" prop="工单计划损耗" width="110" />
|
|
|
+ <el-table-column align="left" label="工单制程废" prop="zcfp" width="100" />
|
|
|
+ <el-table-column align="left" label="工单检验废" prop="工单质检废" width="100" />
|
|
|
+ </el-table>
|
|
|
+ <!-- 分页 -->
|
|
|
+ <div class="gva-pagination">
|
|
|
+ <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
|
|
+ :current-page="page"
|
|
|
+ :page-sizes="[10, 30, 50, 100]"
|
|
|
+ :page-size="pageSize"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper" :total="total">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-main>
|
|
|
+ </el-container>
|
|
|
+ </el-container>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 弹窗部分 -->
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+</script>
|
|
|
+<script setup>
|
|
|
+import {Layout,LayoutContent,LayoutHeader,LayoutSider} from '@arco-design/web-vue'
|
|
|
+import {ElMessage,ElMessageBox,dayjs} from 'element-plus'
|
|
|
+import {reactive,ref,nextTick,onMounted} from 'vue'
|
|
|
+import { getSide,
|
|
|
+ getTable,oversizedloss
|
|
|
+} from '@/api/mes/job'
|
|
|
+import {useUserStore} from '@/pinia/modules/user'
|
|
|
+defineOptions({name: '06PackingDocuments'})
|
|
|
+
|
|
|
+//获取登录用户信息
|
|
|
+const userStore = useUserStore()
|
|
|
+const _username = ref('')
|
|
|
+_username.value = userStore.userInfo.userName + '/' + userStore.userInfo.nickName
|
|
|
+console.log('用户名称：',userStore.userInfo.nickName)
|
|
|
+
|
|
|
+//全局获取当前日期
|
|
|
+const today = new Date();
|
|
|
+const year = today.getFullYear();
|
|
|
+const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需要补零
|
|
|
+const day = String(today.getDate()).padStart(2, '0');
|
|
|
+const hours = String(today.getHours()).padStart(2, '0');
|
|
|
+const minutes = String(today.getMinutes()).padStart(2, '0');
|
|
|
+const seconds = String(today.getSeconds()).padStart(2, '0');
|
|
|
+const currentDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|
|
+const currentDates = `${year}-${month}-${day}`;
|
|
|
+
|
|
|
+
|
|
|
+//=========== 左侧树侧形结构 ===========
|
|
|
+// 侧边栏数据
|
|
|
+const treeData = ref([])
|
|
|
+const getSideData = async() => {
|
|
|
+ const res = await getSide()
|
|
|
+ if (res.code === 0) {
|
|
|
+ const { data } = res
|
|
|
+ const transformedData = []
|
|
|
+
|
|
|
+ for (const [key, value] of Object.entries(data)) {
|
|
|
+ const [date, total] = key.split('-') // 提取日期和数量
|
|
|
+ const transformedItem = {
|
|
|
+ label: `${date}(工单数:${total})`,
|
|
|
+ date: date,
|
|
|
+ // children: value.map((item) => ({
|
|
|
+ // label: `${item['客户编号']}【${item['客户名称']}】(工单数:${item.total})`,
|
|
|
+ // date: date,
|
|
|
+ // code: item?.['客户编号'],
|
|
|
+ // })),
|
|
|
+ }
|
|
|
+ transformedData.push(transformedItem)
|
|
|
+ }
|
|
|
+ treeData.value = transformedData
|
|
|
+ }
|
|
|
+}
|
|
|
+getSideData()
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+//=========== 点击左侧树形获取数据 ===========
|
|
|
+const tableData1 = ref([])
|
|
|
+const _date = ref('')
|
|
|
+const handleNodeClick = async (node) => {
|
|
|
+ console.log(node.date)
|
|
|
+ _date.value = node.date
|
|
|
+ const res = await getTable({ date: node.date, limit: 9999, page: 1 });
|
|
|
+ console.log(res); // 调试数据
|
|
|
+
|
|
|
+ tableData1.value = res.data.map((item) => ({
|
|
|
+ ...item,
|
|
|
+ csgd:
|
|
|
+ parseFloat(item['target_rate']) - parseFloat(item['real_rate']) > 0
|
|
|
+ ? '√'
|
|
|
+ : '',
|
|
|
+ date: node.date,
|
|
|
+ 考核: String(item['考核']) === '是' ? '参与' : '否' // 确保数据类型一致
|
|
|
+ }));
|
|
|
+}
|
|
|
+
|
|
|
+//上方表格字体颜色
|
|
|
+function cellClassName({ row, column, rowIndex, columnIndex }) {
|
|
|
+ if(column.property === '考核' && row.考核 === '参与'){
|
|
|
+ return 'red-cell'
|
|
|
+ }
|
|
|
+ // if ([8,12,].includes(columnIndex)) {
|
|
|
+ // return 'red-cell'
|
|
|
+ // }
|
|
|
+ return ''
|
|
|
+}
|
|
|
+
|
|
|
+const analyzeMonthlyOverloss = async () => {
|
|
|
+ if (tableData1.value.length === 0) {
|
|
|
+ ElMessage({ type: 'warning', message: '请选择具体的月份' });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 显示原始数据用于调试
|
|
|
+ // console.log('原始数据：', tableData1.value);
|
|
|
+
|
|
|
+ // 字段对应中文名称映射
|
|
|
+ const fieldMap = {
|
|
|
+ Gd_gdbh: '工单编号',
|
|
|
+ jjcp_yjno: '印件号',
|
|
|
+ yj_ls: '联数',
|
|
|
+ yjdh: '印件代号',
|
|
|
+ '成品名称': '产品名称',
|
|
|
+ '实际投料': '实际投料',
|
|
|
+ '计量单位': '计量单位',
|
|
|
+ warehousing_num: '入仓数量',
|
|
|
+ target_rate: '目标合格率',
|
|
|
+ real_rate: '实际合格率',
|
|
|
+ reward_money: '奖罚金额合计',
|
|
|
+ '废品合计': '废品合计',
|
|
|
+ '工单无形损': '工单无形损',
|
|
|
+ '材料废': '材料废',
|
|
|
+ '外发废': '处发废',
|
|
|
+ '工单计划损耗': '工单计划损耗',
|
|
|
+ zcfp: '工单制程废',
|
|
|
+ '工单质检废': '工单检验废',
|
|
|
+ };
|
|
|
+
|
|
|
+ // 创建要发送的数据结构
|
|
|
+ const requestData = {
|
|
|
+ content: tableData1.value.map(row => {
|
|
|
+ const formattedRow = {};
|
|
|
+ Object.keys(fieldMap).forEach(key => {
|
|
|
+ formattedRow[fieldMap[key]] = row[key] ?? '';
|
|
|
+ });
|
|
|
+ return formattedRow;
|
|
|
+ })
|
|
|
+ };
|
|
|
+
|
|
|
+ console.log('提交内容：', requestData);
|
|
|
+
|
|
|
+ const res = await oversizedloss({ content: requestData.content,date:_date.value });
|
|
|
+ console.log('接口响应：', res);
|
|
|
+
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+//搜索框
|
|
|
+const searchInfo = ref('')
|
|
|
+
|
|
|
+//搜索按钮
|
|
|
+const onSubmit = async (row) => {
|
|
|
+ console.log("搜索按钮")
|
|
|
+}
|
|
|
+
|
|
|
+//表格
|
|
|
+const tableData = reactive([])
|
|
|
+
|
|
|
+//单击表格行
|
|
|
+const Clickonthetable = async (row) => {
|
|
|
+ console.log(row)
|
|
|
+}
|
|
|
+
|
|
|
+//双击表格行
|
|
|
+const Doubleclickonthetable = async (row) => {
|
|
|
+ console.log(row)
|
|
|
+}
|
|
|
+
|
|
|
+//复选框 表格
|
|
|
+const cjsSelectionChange = async (row) => {
|
|
|
+ console.log(row)
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+//分页
|
|
|
+const total = ref(0)
|
|
|
+const page = ref(1)
|
|
|
+const limit = ref(10)
|
|
|
+const handleCurrentChange = (val) => {
|
|
|
+ page.value = val;
|
|
|
+ //调用接口↓↓↓↓
|
|
|
+
|
|
|
+};
|
|
|
+
|
|
|
+// 修改页面容量 点击多少条/页
|
|
|
+const handleSizeChange = (val) => {
|
|
|
+ pageSize.value = val;
|
|
|
+ //调用接口↓↓↓↓
|
|
|
+
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+:deep(.plan-usage-low div) {
|
|
|
+ color: red !important;
|
|
|
+}
|
|
|
+
|
|
|
+.JKWTree-container {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+
|
|
|
+.JKWTree-tree {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ /*background-color: rgba(241, 224, 224, 0.99);*/
|
|
|
+ padding: 10px;
|
|
|
+ margin-right: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.JKWTree-tree h3 {
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 700;
|
|
|
+ margin: 10px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.JKWTree-content {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-table__body .warning-row) {
|
|
|
+ background: #FFFF80 !important;
|
|
|
+}
|
|
|
+
|
|
|
+/* 选中某行时的背景色 */
|
|
|
+:deep(.el-table__body tr.current-row)>td {
|
|
|
+ background: #ff80ff !important;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-table .bg-yellow) {
|
|
|
+ background: yellow;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style scoped>
|
|
|
+:deep(.el-table td .cell) {
|
|
|
+ line-height: 25px !important;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-tabs__header) {
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.search {
|
|
|
+ margin-left: 0px !important;
|
|
|
+ margin-right: 10px !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bt {
|
|
|
+ margin-left: 2px !important;
|
|
|
+ padding: 3px !important;
|
|
|
+ font-size: 12px;
|
|
|
+
|
|
|
+}
|
|
|
+:deep(.red-cell div) {
|
|
|
+ color: #ff0000 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.el-tabs__header {
|
|
|
+ margin: 0px !important;
|
|
|
+}
|
|
|
+
|
|
|
+.gva-table-box {
|
|
|
+ padding: 0px !important;
|
|
|
+}
|
|
|
+
|
|
|
+.mab {
|
|
|
+ margin-bottom: 5px;
|
|
|
+}
|
|
|
+</style>
|
