|
|
@@ -7,8 +7,8 @@
|
|
|
<el-form ref="elSearchFormRef" class="demo-form-inline" :rules="searchRule" >
|
|
|
<el-form-item>
|
|
|
<!-- <el-input v-model="searchInfo" placeholder="搜索工单编号" clearable style="width: 200px;margin: 5px"></el-input>
|
|
|
- <el-button type="primary" class="bt" icon="download" @click="hzToExcel" >导出到Excel(汇总)</el-button>
|
|
|
<el-button type="primary" class="bt" icon="download" @click="mxToExcel" >导出到Excel(明细)</el-button> -->
|
|
|
+ <!-- <el-button type="primary" class="bt" icon="download" @click="dlToExcel" >月度电量导出</el-button> -->
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
|
|
|
@@ -19,10 +19,9 @@
|
|
|
|
|
|
<layout>
|
|
|
<!-- 左侧树侧形结构-->
|
|
|
- <layout-sider :resize-directions="['right']" :width="190" style="margin-right: 10px;">
|
|
|
+ <layout-sider :resize-directions="['right']" :width="220" style="margin-right: 10px;">
|
|
|
<div class="JKWTree-tree" style="height: 200px">
|
|
|
- <!-- <h3>客户编号</h3> -->
|
|
|
- <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" @node-expand="handleNodeExpand">
|
|
|
+ <el-tree :data="treeData" :props="defaultProps" class="treecolor" @node-click="handleNodeClick" @node-expand="handleNodeExpand">
|
|
|
</el-tree>
|
|
|
</div>
|
|
|
</layout-sider>
|
|
|
@@ -32,60 +31,71 @@
|
|
|
<el-main>
|
|
|
<div class="gva-table-box">
|
|
|
<!-- 表格数据 -->
|
|
|
- <el-table ref="multipleTable" style="width: 100%;height: 78vh" tooltip-effect="dark"
|
|
|
+ <el-table ref="multipleTable" style="width: 100%;height: 40vh" tooltip-effect="dark"
|
|
|
:row-style="{ height: '25px' }" :header-cell-style="{ padding: '0px' }"
|
|
|
:cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
|
|
|
- :data="hztableData" border row-key="ID"
|
|
|
+ :data="hztableData" border row-key="订单编号"
|
|
|
size="small"
|
|
|
:cell-class-name="gxbgCellClass"
|
|
|
- highlight-current-row="true" @row-dblclick="updateCompanyFunc"
|
|
|
- @row-click="tableRowClick" :show-overflow-tooltip="true"
|
|
|
- @selection-change="handleSelectionChange">
|
|
|
- <el-table-column sortable align="center" label="订单编号" prop="订单编号" width="120" />
|
|
|
- <el-table-column sortable align="center" label="生产款号" prop="生产款号" width="120" />
|
|
|
- <el-table-column sortable align="center" label="款式" prop="款式" width="120" />
|
|
|
- <el-table-column sortable align="center" label="日期" prop="日期" width="120" />
|
|
|
- <el-table-column sortable align="center" label="电表ID" prop="电表ID" width="120" />
|
|
|
- <el-table-column align="center" label="总电量" prop="总电量" width="110" />
|
|
|
- <el-table-column align="center" label="尖电量" prop="尖电量" width="110" />
|
|
|
- <el-table-column align="center" label="峰电量" prop="峰电量" width="110" />
|
|
|
- <el-table-column align="center" label="平电量" prop="平电量" width="110" />
|
|
|
- <el-table-column align="center" label="谷电量" prop="谷电量" width="110" />
|
|
|
- <el-table-column align="center" label="起始总电量" prop="起始总电量" width="110" />
|
|
|
- <el-table-column align="center" label="结束总电量" prop="结束总电量" width="110" />
|
|
|
- <el-table-column align="center" label="开始时间" prop="开始时间" width="200" />
|
|
|
- <el-table-column align="center" label="结束时间" prop="结束时间" width="200" />
|
|
|
+ highlight-current-row="true" :show-overflow-tooltip="true"
|
|
|
+ @row-click="handleRowClick">
|
|
|
+ <el-table-column align="center" label="订单编号" prop="订单编号" width="110" />
|
|
|
+ <el-table-column align="center" label="款号" prop="款号" width="110" />
|
|
|
+ <el-table-column align="center" label="使用总电量" prop="使用总电量" width="110" />
|
|
|
+ <el-table-column align="center" label="生产小时数" prop="匹配小时数" width="110" />
|
|
|
+ <el-table-column align="center" label="订单时间段" prop="订单时间段" width="340" />
|
|
|
+ <el-table-column align="center" label="总完工数量" prop="总报工数量" width="110" />
|
|
|
</el-table>
|
|
|
-
|
|
|
<!-- 分页 -->
|
|
|
<div class="gva-pagination">
|
|
|
<el-pagination layout="total" :current-page="page" :page-size="pageSize"
|
|
|
:total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+
|
|
|
|
|
|
-<!--
|
|
|
<div class="gva-table-box">
|
|
|
- <el-table ref="multipleTable" style="width: 100%;height: 45vh" tooltip-effect="dark"
|
|
|
+ <el-table ref="multipleTable" style="width: 100%;height: 42vh" tooltip-effect="dark"
|
|
|
:row-style="{ height: '25px' }" :header-cell-style="{ padding: '0px' }"
|
|
|
:cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
|
|
|
- :data="mxtableData" border row-key="ID"
|
|
|
+ :data="mxtableData" border row-key="订单编号"
|
|
|
size="small"
|
|
|
:cell-class-name="gxbgCellClass"
|
|
|
- highlight-current-row="true" @row-dblclick="updateCompanyFunc"
|
|
|
- @row-click="tableRowClick" :show-overflow-tooltip="true"
|
|
|
- @selection-change="handleSelectionChange">
|
|
|
- <el-table-column sortable align="center" label="机台编号" prop="机台编号" width="120" />
|
|
|
- <el-table-column sortable align="center" label="开工时间" prop="开工时间" width="120" />
|
|
|
- <el-table-column sortable align="center" label="主电表" prop="主电表" width="200" />
|
|
|
- <el-table-column sortable align="center" label="辅电表" prop="辅电表" width="100" />
|
|
|
+ highlight-current-row="true" :show-overflow-tooltip="true">
|
|
|
+ <el-table-column sortable align="center" label="订单编号" prop="订单编号" width="120" />
|
|
|
+ <el-table-column sortable align="center" label="款号" prop="款号" width="120" />
|
|
|
+ <el-table-column sortable align="center" label="报工时间" prop="报工时间" width="200" />
|
|
|
+ <el-table-column sortable align="center" label="电量" prop="电量" width="100" />
|
|
|
+ <el-table-column sortable align="center" label="订单时间段" prop="电表时间段" width="340" />
|
|
|
+ <el-table-column sortable align="center" label="完工数量" prop="报工数量" width="100" />
|
|
|
</el-table>
|
|
|
|
|
|
<div class="gva-pagination">
|
|
|
<el-pagination layout="total" :current-page="page" :page-size="pageSize"
|
|
|
:total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
|
|
|
</div>
|
|
|
- </div> -->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-dialog v-model="ondlexcel" title="月度电量导出" destroy-on-close style="height: 30%;width: 20%;">
|
|
|
+ <el-form-item label="选择年月" label-width="100px">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="dlrq"
|
|
|
+ type="month"
|
|
|
+ placeholder="选择年月"
|
|
|
+ :default-value="new Date()"
|
|
|
+ @change="dlonchange_data"
|
|
|
+ style="width: 200px;"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer" style="text-align: right;">
|
|
|
+ <el-button @click="dlcloseDialog">取消</el-button>
|
|
|
+ <el-button type="primary" @click="dlonDialog">确定</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
|
|
|
</el-main>
|
|
|
</layout-content>
|
|
|
@@ -95,86 +105,229 @@
|
|
|
</template>
|
|
|
<script setup>
|
|
|
// 全量引入格式化工具 请按需保留
|
|
|
- import { Layout, LayoutSider, LayoutContent } from '@arco-design/web-vue';
|
|
|
-
|
|
|
- import {ref, reactive} from 'vue'
|
|
|
- import { exportExcelFile } from '@/utils/excel'
|
|
|
- import {ElMessage} from "element-plus";
|
|
|
-// import { Meter,StatisticEleDay,} from '@/api/mes/job'
|
|
|
- defineOptions({name: 'Company'})
|
|
|
+import { Layout, LayoutSider, LayoutContent } from '@arco-design/web-vue';
|
|
|
+import {ref, reactive} from 'vue'
|
|
|
+import * as XLSX from 'xlsx'
|
|
|
+import FileSaver from 'file-saver'
|
|
|
+import { exportExcelFile } from '@/utils/excel'
|
|
|
+import {ElMessage} from "element-plus";
|
|
|
+import { Meter,StatisticEleDay,Excel_StatisticEle,OrderElectricitySummary,OrderElectricityDetail} from '@/api/mes/job'
|
|
|
+defineOptions({name: 'Company'})
|
|
|
|
|
|
-// const today = new Date();
|
|
|
-// const year = today.getFullYear();
|
|
|
-// const month = String(today.getMonth() + 1).padStart(2, '0');
|
|
|
+ const today = new Date();
|
|
|
+const year = today.getFullYear();
|
|
|
+const month = String(today.getMonth() + 1).padStart(2, '0');
|
|
|
|
|
|
-// // =========== 获取左侧树形结构 ===========
|
|
|
-// const treeData = ref([])
|
|
|
-// // 获取树形数据
|
|
|
-// const getTree = async () => {
|
|
|
-// try {
|
|
|
-// // 调用API获取数据
|
|
|
-// const response = await Meter()
|
|
|
-// const data = response.data
|
|
|
+// =========== 获取左侧树形结构 ===========
|
|
|
+const treeData = ref([])
|
|
|
+// 存储当前选中的节点信息
|
|
|
+const currentNode = ref(null)
|
|
|
+// 获取树形数据
|
|
|
+const getTree = async () => {
|
|
|
+ try {
|
|
|
+ // 调用API获取数据
|
|
|
+ const response = await Meter()
|
|
|
+ const data = response.data
|
|
|
|
|
|
-// // 转换数据为el-tree需要的格式
|
|
|
-// if (data && data.length > 0) {
|
|
|
-// // 生成从当前月份到一月的所有月份
|
|
|
-// const months = [];
|
|
|
-// const currentYear = today.getFullYear();
|
|
|
-// const currentMonth = today.getMonth() + 1; // 1-12
|
|
|
-
|
|
|
-// for (let i = currentMonth; i >= 1; i--) {
|
|
|
-// months.push({
|
|
|
-// year: currentYear,
|
|
|
-// month: i,
|
|
|
-// label: `${currentYear}年${i}月`
|
|
|
-// });
|
|
|
-// }
|
|
|
+ // 转换数据为el-tree需要的格式，直接使用电表数据，不按年月分组
|
|
|
+ if (data && data.length > 0) {
|
|
|
+ // 获取当前年月作为默认rq值
|
|
|
+ const currentYear = today.getFullYear();
|
|
|
+ const currentMonth = String(today.getMonth() + 1).padStart(2, '0');
|
|
|
+ const defaultRqValue = `${currentYear}${currentMonth}`;
|
|
|
|
|
|
-// // 为每个月创建树节点
|
|
|
-// treeData.value = months.map(monthItem => {
|
|
|
-// const formattedMonth = String(monthItem.month).padStart(2, '0');
|
|
|
-// const rqValue = `${monthItem.year}${formattedMonth}`;
|
|
|
-// return {
|
|
|
-// label: monthItem.label,
|
|
|
-// children: data.map(item => {
|
|
|
-// return {
|
|
|
-// label: item.collectorid || '未知电表',
|
|
|
-// mid: item.mid,
|
|
|
-// rq: rqValue
|
|
|
-// }
|
|
|
-// })
|
|
|
-// }
|
|
|
-// });
|
|
|
-// } else {
|
|
|
-// treeData.value = []
|
|
|
-// }
|
|
|
-// } catch (error) {
|
|
|
-// ElMessage.error('获取数据失败')
|
|
|
-// console.error('获取树形数据失败:', error)
|
|
|
-// }
|
|
|
-// }
|
|
|
+ // 直接使用电表数据作为树节点
|
|
|
+ treeData.value = data.map(item => ({
|
|
|
+ label: item.collectorid + '【' + item.description + '】',
|
|
|
+ mid: item.mid,
|
|
|
+ rq: defaultRqValue
|
|
|
+ }));
|
|
|
+ } else {
|
|
|
+ treeData.value = []
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ ElMessage.error('获取数据失败')
|
|
|
+ console.error('获取树形数据失败:', error)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 调用函数获取数据
|
|
|
+getTree()
|
|
|
|
|
|
-// // 调用函数获取数据
|
|
|
-// getTree()
|
|
|
+
|
|
|
+const hztableData = ref([])
|
|
|
+
|
|
|
+const mxtableData = ref([])
|
|
|
|
|
|
+const handleNodeClick = async (node) => {
|
|
|
+ // 存储当前选中的节点信息
|
|
|
+ currentNode.value = node;
|
|
|
+
|
|
|
+ // 取消所有节点的颜色
|
|
|
+ const allNodes = document.querySelectorAll('.treecolor .el-tree-node');
|
|
|
+ allNodes.forEach(item => {
|
|
|
+ if (item.querySelector('.el-tree-node__label')) {
|
|
|
+ item.querySelector('.el-tree-node__label').style.color = '';
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // 获取点击的节点 给当前点击的节点改变颜色【红色】
|
|
|
+ const clickedNodeId = node['$treeNodeId'];
|
|
|
+ const clickedNode = document.querySelector(`.treecolor .el-tree-node[data-key="${clickedNodeId}"]`);
|
|
|
+ if (clickedNode && clickedNode.querySelector('.el-tree-node__label')) {
|
|
|
+ clickedNode.querySelector('.el-tree-node__label').style.color = 'red';
|
|
|
+ }
|
|
|
+ console.log('点击节点:', node)
|
|
|
|
|
|
-// const hztableData = ref([])
|
|
|
+ try {
|
|
|
+ // 提取班组信息并格式化sczl_bh参数
|
|
|
+ const description = node.label.split('【')[1]?.split('】')[0] || '';
|
|
|
+ // 格式化班组号，确保是两位数格式（如1转为01，2转为02等）
|
|
|
+ let sczl_bh = description;
|
|
|
+ // 修改正则表达式，匹配数字部分，不限于车缝班组
|
|
|
+ const match = description.match(/(.*?)(\d+)(.*)/);
|
|
|
+ if (match) {
|
|
|
+ const prefix = match[1];
|
|
|
+ const numberPart = match[2];
|
|
|
+ const suffix = match[3];
|
|
|
+ // 如果数字是一位数，则在前面补0
|
|
|
+ const formattedNumber = numberPart.length === 1 ? `0${numberPart}` : numberPart;
|
|
|
+ sczl_bh = `${prefix}${formattedNumber}${suffix}`;
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log('格式化后的sczl_bh:', sczl_bh);
|
|
|
+
|
|
|
+ // 使用正确的参数调用接口
|
|
|
+ const params = {
|
|
|
+ mid: node.mid,
|
|
|
+ sczl_bh: sczl_bh
|
|
|
+ };
|
|
|
+ // 调用汇总数据接口
|
|
|
+ const summaryRes = await OrderElectricitySummary(params);
|
|
|
+ console.log('汇总数据:', summaryRes);
|
|
|
+ hztableData.value = summaryRes.data;
|
|
|
+
|
|
|
+ } catch (error) {
|
|
|
+ ElMessage.error('获取数据失败');
|
|
|
+ console.error('获取数据失败:', error);
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
-// const handleNodeClick = async (node) => {
|
|
|
-// console.log('点击节点:', node)
|
|
|
-// if (!node.children) {
|
|
|
-// const res = await StatisticEleDay({mid: node.mid,collectorid: node.label,riqi: node.rq})
|
|
|
-// console.log('获取数据:', res)
|
|
|
-// if(res.code === 0){
|
|
|
-// hztableData.value = res.data
|
|
|
+
|
|
|
+// 处理上方表格行点击事件，获取对应订单的明细数据
|
|
|
+const handleRowClick = async (row) => {
|
|
|
+ console.log('点击表格行:', row);
|
|
|
+
|
|
|
+ // 使用订单编号、sczl_bh和mid调用明细数据接口
|
|
|
+ const params = {
|
|
|
+ order: row['订单编号'],
|
|
|
+ sczl_bh: row['sczl_bh'],
|
|
|
+ mid: currentNode.value?.mid || ''
|
|
|
+ };
|
|
|
+
|
|
|
+ // 调用明细数据接口
|
|
|
+ const detailRes = await OrderElectricityDetail(params);
|
|
|
+ console.log('获取的明细数据:', detailRes);
|
|
|
+ mxtableData.value = detailRes.data;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+// 通用的导出Excel函数
|
|
|
+const exportToExcel = (data, filename = '导出数据.xlsx', sheetName = 'Sheet1') => {
|
|
|
+ try {
|
|
|
+ // 创建工作簿和工作表
|
|
|
+ const wb = XLSX.utils.book_new();
|
|
|
+
|
|
|
+ // 如果data是DOM元素（表格）
|
|
|
+ if (typeof data === 'object' && data.nodeType === 1) {
|
|
|
+ const worksheet = XLSX.utils.table_to_sheet(data, { raw: true });
|
|
|
+ convertColumnsToNumber(worksheet);
|
|
|
+ XLSX.utils.book_append_sheet(wb, worksheet, sheetName);
|
|
|
+ }
|
|
|
+ // 如果data是数组（接口数据）
|
|
|
+ else if (Array.isArray(data)) {
|
|
|
+ const worksheet = XLSX.utils.json_to_sheet(data);
|
|
|
+ XLSX.utils.book_append_sheet(wb, worksheet, sheetName);
|
|
|
+ }
|
|
|
+ // 如果data已经是worksheet对象
|
|
|
+ else if (data['!ref']) {
|
|
|
+ XLSX.utils.book_append_sheet(wb, data, sheetName);
|
|
|
+ } else {
|
|
|
+ throw new Error('不支持的导出数据类型');
|
|
|
+ }
|
|
|
+
|
|
|
+ // 导出文件
|
|
|
+ XLSX.writeFile(wb, filename);
|
|
|
+ return true;
|
|
|
+ } catch (error) {
|
|
|
+ console.error('导出Excel失败:', error);
|
|
|
+ ElMessage.error('导出失败: ' + error.message);
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 列转换为数字的通用函数
|
|
|
+const convertColumnsToNumber = (worksheet, startCol = 2) => {
|
|
|
+ const range = XLSX.utils.decode_range(worksheet['!ref']);
|
|
|
+ for (let col = startCol; col <= range.e.c; col++) {
|
|
|
+ for (let row = range.s.r + 1; row <= range.e.r; row++) {
|
|
|
+ const cellAddress = XLSX.utils.encode_cell({ r: row, c: col });
|
|
|
+ if (worksheet[cellAddress]) {
|
|
|
+ const cellValue = worksheet[cellAddress].v;
|
|
|
+ const numValue = Number(cellValue);
|
|
|
+
|
|
|
+ if (!isNaN(numValue) && cellValue !== '') {
|
|
|
+ worksheet[cellAddress].t = 'n';
|
|
|
+ worksheet[cellAddress].v = numValue;
|
|
|
+ worksheet[cellAddress].z = '0';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// const ondlexcel = ref(false)
|
|
|
+// const dlrq = ref('')
|
|
|
+// const dlToExcel = async=> {
|
|
|
+// ondlexcel.value = true
|
|
|
+// }
|
|
|
+// const dlcloseDialog = () => {
|
|
|
+// ondlexcel.value = false
|
|
|
// }
|
|
|
+// const dlonchange_data = (val) => {
|
|
|
+// if (val) {
|
|
|
+// // 将日期对象转换为本地时间的年月格式
|
|
|
+// const year = val.getFullYear()
|
|
|
+// const month = (val.getMonth() + 1).toString().padStart(2, '0')
|
|
|
+// dlrq.value = `${year}${month}`
|
|
|
+// } else {
|
|
|
+// dlrq.value = ''
|
|
|
// }
|
|
|
-
|
|
|
// }
|
|
|
|
|
|
+// const dlonDialog = async() => {
|
|
|
+// if(!dlrq.value){
|
|
|
+// ElMessage.error('请选择年月')
|
|
|
+// return
|
|
|
+// }
|
|
|
|
|
|
-
|
|
|
+// const res = await Excel_StatisticEle({sys_rq: dlrq.value})
|
|
|
+// console.log('获取数据:', res)
|
|
|
+
|
|
|
+// if(res.code === 0){
|
|
|
+// // 直接使用接口返回的数据导出
|
|
|
+// const success = exportToExcel(
|
|
|
+// res.data,
|
|
|
+// `电量汇总_${dlrq.value}.xlsx`,
|
|
|
+// '生产汇总'
|
|
|
+// );
|
|
|
+
|
|
|
+// if(success) {
|
|
|
+// ElMessage.success('导出成功');
|
|
|
+// }
|
|
|
+// } else {
|
|
|
+// ElMessage.error(res.msg || '获取数据失败');
|
|
|
+// }
|
|
|
+// }
|
|
|
|
|
|
|
|
|
|
