mes-dacheng-admin-backend-ui/src/view/yunyin/shengchanguanli/AIGeneratedvue.vue

<template>
    <div>
      <layout>
        <layout-header>
          <div class="">
            <!--          按钮部分-->
            <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-form-item> -->
              <h3>页面正在建设中</h3>
            </el-form>
  
        
  
          </div>
        </layout-header>
  
        <layout>
          <!--    左侧树侧形结构-->
          <!-- <layout-sider :resize-directions="['right']" :width="190" 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>
            </div>
          </layout-sider>
   -->
          <!-- 右侧区域 -->
          <layout-content >
          <!-- <el-main>
            <div class="gva-table-box">
              <el-table ref="multipleTable" style="width: 100%;height: 33vh" 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"
                        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   align="center" label="上月末主电表读数" prop="印件名称"  width="200" />
               <el-table-column   align="center" label="本月末主电表读数" prop="联数"  width="200" />
               <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="工序1"  width="200" />
               <el-table-column   align="center" label="辅电表耗电量" prop="工序2"  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"
                        :row-style="{ height: '25px' }"  :header-cell-style="{ padding: '0px' }"
                        :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
                        :data="mxtableData"  border row-key="ID"
                        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" />
              </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>
  
          </el-main> -->
        </layout-content>
        </layout>
      </layout>
    </div>
  </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";
  defineOptions({name: 'Company'})
  // =========== 获取左侧树侧形结构 ===========
  

  
  

  

  

  

  
  
  
  
  
  </script>
  
  <style scoped>
  .form-container {
    display: flex;
    flex-wrap: wrap;
  }
  
  .form-column {
    /*flex: 1;*/
    margin-right: 15px; /* 调整列之间的间距 */
  }
  
  /* 左侧输入框宽度调整 */
  .form-column .el-form-item .el-input {
    width: 150px; /* 调整左侧输入框的宽度 */
  }
  
  :deep(.hui-plan-usage-lows  div) {
    color: #8c939d !important;
  }
  :deep(.lan-plan-usage-lows  div) {
    color: blue !important;
    font-weight: bold;
  }
  

  /* 媒体查询，根据需要调整断点 */
  @media screen and (max-width: 768px) {
    .form-column {
      flex: 1 0 100%; /* 在小屏幕下变成单列布局 */
      margin-right: 0;
    }
  }
  /*:deep(.el-table td .cell) {*/
  /*  line-height: 30px !important;*/
  /*}*/
  .JKWTree-container {
    display: flex;
  }
  .JKWTree-tree {
    /*width: 300px;*/
    background-color: #fff;
    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 tr.current-row) > td {
    background: #ff80ff !important;
  }
  </style>
  <style scoped>
  :deep(.el-table td .cell) {
    line-height: 20px !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;
  }
  .el-tabs__header{
    margin: 0px !important;
  }
  .gva-table-box{
    padding: 0px !important;
  }
  .mab{
    margin-bottom: 5px;
  }
  </style>