mes-admin-backend-ui/src/view/DecisionSupport/ProductionAchievementRate.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-button type="primary" class="bt" icon="download" @click="rqToExcel" >按时段导出明细</el-button>
              </el-form-item>
            </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"
						v-if="! ismachine"
						:show-overflow-tooltip="true"
						@selection-change="selectionChange($event)"
						:row-style="{ height: '20px' }" :selectable="checkboxT"
						:cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
						:header-cell-style="{ padding: '0px' }" @row-click="pchzRowClick"
            :row-class-name="pchzrowClassStyle"
						highlight-current-row="true" @row-dblclick="gytableDatadoubleClick"  id="pchztable"
						style="width: 100%;height: 30vh" border tooltip-effect="dark" :data="pchztableData" row-key="ID" >
				<el-table-column fixed align="left" label="机台编号" prop="机台编号"  width="110"/>
				<el-table-column fixed align="left" label="机台名称" prop="机台名称"  width="170"/>
				<el-table-column fixed align="left" label="班组" prop="班组"  width="60"/>
				<el-table-column align="left" label="近7天综合达成率" prop="近7天综合达成率"  width="135"/>
                <!-- 近七天列表 -->
                <template v-for="item in datelist">
                    <el-table-column align="left"  :label="item.display" :prop="item.prop"  width="80"/> 
                </template>
				<el-table-column align="left" label="实际总产量" prop="实际总产量"  width="100"/>
				<el-table-column align="left" label="排产总产量"  prop="排产总产量"  width="100"/>
				<el-table-column align="left" label="实际产量1" prop="实际产量1"  width="100"/>
				<el-table-column align="left" label="排产产量1" prop="排产产量1"  width="100"/>
        <el-table-column align="left" label="实际产量2" prop="实际产量2"  width="100"/>
        <el-table-column align="left" label="排产产量2" prop="排产产量2"  width="100"/>
        <el-table-column align="left" label="实际产量3" prop="实际产量3"  width="100"/>
        <el-table-column align="left" label="排产产量3" prop="排产产量3"  width="100"/>
        <el-table-column align="left" label="实际产量4" prop="实际产量4"  width="100"/>
        <el-table-column align="left" label="排产产量4" prop="排产产量4"  width="100"/>
        <el-table-column align="left" label="实际产量5" prop="实际产量5"  width="100"/>
        <el-table-column align="left" label="排产产量5" prop="排产产量5"  width="100"/>
        <el-table-column align="left" label="实际产量6" prop="实际产量6"  width="100"/>
        <el-table-column align="left" label="排产产量6" prop="排产产量6"  width="100"/>
        <el-table-column align="left" label="实际产量7" prop="实际产量7"  width="100"/>
        <el-table-column align="left" label="排产产量7" prop="排产产量7"  width="100"/>
			  </el-table>
			  
			  <el-table ref="JPmultipleTable"
						v-if="! ismachine"
						:show-overflow-tooltip="true"
						@selection-change="selectionChange($event)"
						:row-style="{ height: '20px' }" :row-class-name="totalClassName" :cell-class-name="tableDataCellClass"
						:cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
						:header-cell-style="{ padding: '0px' }" @row-click="getUid" 
						highlight-current-row="true" @row-dblclick="JPgytableDatadoubleClick" id="pcmxtable"
						style="width: 100%;height: 45vh" border tooltip-effect="dark" :data="pcmxtableData" row-key="ID" >
					<el-table-column  align="left" fixed label="日期" prop="日期"  width="110"/>
					  <el-table-column  align="left" fixed label="机台编号" prop="机台编号"  width="90"/>
					<el-table-column  align="left" fixed label="班组" prop="班组"  width="70"/>
					<el-table-column  align="left" label="工单编号" prop="工单编号"  width="90"/>
					<el-table-column  align="left" label="印件号" prop="印件号"  width="70"/>
					<el-table-column  align="left" label="印件名称" prop="印件名称"  width="120"/>
					<el-table-column  align="left" label="工序号"  prop="工序号"  width="70"/>
					<el-table-column  align="left" label="工序名称" prop="工序名称"  width="120"/>
					<el-table-column  align="left" label="实际产量" prop="实际产量"  width="90"/>
					<el-table-column  align="left" label="排产标准产能" prop="排产标准产能"  width="110"/>
					<el-table-column  align="left" label="排产产量" prop="排产产量"  width="90"/>
					<el-table-column  align="left" label="上报运行工时" prop="上报运行工时"  width="110"/>
					<el-table-column  align="left" label="运行工时" prop="运行工时"  width="110"/>
					<el-table-column  align="left" label="工序计划辅助工时" prop="工序计划辅助工时"  width="140"/>
					<el-table-column  align="left" label="装版实际工时" prop="装版实际工时"  width="110"/>
					<el-table-column  align="left" label="保养工时" prop="保养工时"  width="110"/>
					<el-table-column  align="left" label="打样工时" prop="打样工时"  width="110"/>
					<el-table-column  align="left" label="版距" prop="版距"  width="110"/>
					<el-table-column  align="left" label="机台名称" prop="机台名称"  width="130"/>
			  </el-table>


              <el-table ref="multipleTable"
						v-if="ismachine"
						:show-overflow-tooltip="true"
						@selection-change="selectionChange($event)"
						:row-style="{ height: '20px' }" :selectable="checkboxT"
						:cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
						:header-cell-style="{ padding: '0px' }" @row-click="sbhzRowClick" 
						highlight-current-row="true" @row-dblclick="gytableDatadoubleClick"  id="sbhztable"
						style="width: 100%;height: 30vh" border tooltip-effect="dark" :data="sbhztableData" row-key="ID" >
				<el-table-column fixed align="left" label="机台编号" prop="机台编号"  width="90"/>
				<el-table-column fixed align="left" label="班组" prop="班组"  width="70"/>
				<el-table-column align="left" label="实际产量" prop="实际产量"  width="85"/>
				<el-table-column align="left" label="目标产量" prop="目标产量"  width="85"/>
				<el-table-column align="left" label="负荷产量"  prop="负荷产量"  width="85"/>
				<el-table-column align="left" label="目标达成" prop="目标达成"  width="85"/>
				<el-table-column align="left" label="综合利用率" prop="综合利用率"  width="95"/>
        <el-table-column align="left" label="装版实际工时" prop="装版实际工时"  width="110"/>
        <el-table-column align="left" label="装版补产工时" prop="装版补产工时"  width="110"/>
        <el-table-column align="left" label="保养工时" prop="保养工时"  width="110"/>
        <el-table-column align="left" label="打样总工时" prop="打样总工时"  width="110"/>
        <el-table-column align="left" label="打样补产工时" prop="打样补产工时"  width="110"/>
        <el-table-column align="left" label="异常总工时" prop="异常总工时"  width="110"/>
        <el-table-column align="left" label="异常补时" prop="异常补时"  width="110"/>
        <el-table-column align="left" label="运行工时" prop="运行工时"  width="110"/>
			  </el-table>
			  
			  <el-table ref="JPmultipleTable"
            v-if="ismachine"
						:show-overflow-tooltip="true"
						@selection-change="selectionChange($event)"
						:row-style="{ height: '20px' }"  :cell-class-name="tableDataCellClass"
						:cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
						:header-cell-style="{ padding: '0px' }" @row-click="sbmxRowClick" 
            :row-class-name="sbmxrowClassStyle"
						highlight-current-row="true" @row-dblclick="JPgytableDatadoubleClick" id="sbmxtable"
						style="width: 100%;height: 45vh" border tooltip-effect="dark" :data="sbmxtableData" row-key="ID" >
					<el-table-column  align="left" fixed label="机台编号" prop="机台编号"  width="90"/>
					<el-table-column  align="left" fixed label="日期" prop="日期"  width="110"/>
					<el-table-column  align="left" fixed label="班组" prop="班组"  width="70"/>
					<el-table-column  align="left" label="工单编号" prop="工单编号"  width="90"/>
					<el-table-column  align="left" label="印件名称" prop="印件名称"  width="110"/>
					<el-table-column  align="left" label="印件工序" prop="工序名称"  width="110"/>
					<el-table-column  align="left" label="实际产量" prop="实际产量"  width="100"/>
					<el-table-column  align="left" label="目标产量" prop="目标产量"  width="90"/>
					<el-table-column  align="left" label="负荷产量" prop="负荷产量"  width="90"/>
					<el-table-column  align="left" label="目标达成" prop="目标达成"  width="90"/>
					<el-table-column  align="left" label="综合利用率" prop="综合利用率"  width="100"/>
          <el-table-column  align="left" label="装版实际工时" prop="装版实际工时"  width="110"/>
          <el-table-column  align="left" label="装版补产工时" prop="装版补产工时"  width="110"/>
          <el-table-column  align="left" label="保养工时" prop="保养工时"  width="100"/>
          <el-table-column  align="left" label="打样总工时" prop="打样总工时"  width="100"/>
          <el-table-column  align="left" label="打样补产工时" prop="打样补产工时"  width="110"/>
          <el-table-column  align="left" label="异常总工时" prop="异常总工时"  width="100"/>
          <el-table-column  align="left" label="异常补时" prop="异常补时"  width="100"/>
          <el-table-column  align="left" label="运行工时" prop="运行工时"  width="100"/>
          <el-table-column  align="left" label="小时产能" prop="小时产能"  width="100"/>
          <el-table-column  align="left" label="最高限速" prop="最高限速"  width="100"/>
          <el-table-column  align="left" label="理论生产效率" prop="理论生产效率"  width="110"/>
          <el-table-column  align="left" label="难度系数" prop="难度系数"  width="100"/>
          <el-table-column  align="left" label="版距" prop="版距"  width="100"/>
			  </el-table>
            </div>

  <!-- 按时段导出弹窗 -->
  <el-dialog v-model="onrqexcel"  title="达成率明细导出" destroy-on-close style="height: 30%;width: 20%;">

    <el-form-item label="部门" label-width="100px">
      <el-select v-model="excelbm" placeholder="选择部门">
    <el-option
      v-for="item in bmoptions"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
    </el-form-item>

    <el-form-item label="选择年月" label-width="100px">
      <el-date-picker
        v-model="excelrq"
        type="daterange"
        range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
        :default-value="new Date()"
        @change="onchange_data"
        style="width: 200px;" 
      />
    </el-form-item>
    <template #footer>
      <div class="dialog-footer" style="text-align: right;">
        <el-button @click="rqexcelcloseDialog">取消</el-button>
        <el-button type="primary" @click="rqexcelonDialog">确定</el-button>
      </div>
    </template>
  </el-dialog>


  
          </el-main>
        </layout-content>
        </layout>
      </layout>
    </div>
  </template>
  <script setup>
  // 全量引入格式化工具 请按需保留
  import { Layout, LayoutSider, LayoutContent } from '@arco-design/web-vue';
  import {PARLeftmenu,PARlist,PARDetail,PARlistpro,PARDetailpro,PARDateExcel} from "@/api/mes/job.js"
  import {ref, reactive} from 'vue'
  import * as XLSX from 'xlsx'
  import { exportExcelFile } from '@/utils/excel'
  import {ElMessage} from "element-plus";
import { start } from 'nprogress';
  defineOptions({name: 'Company'})

  const treeData = ref([]); 
const defaultProps = {
  label: 'label',
  children: 'children'
};
 
const getTreeData = async () => {
  try {
    const response = await PARLeftmenu();
    console.log('接口原始数据:', response);

    if (!response) {
      throw new Error('接口返回数据为空');
    }

    const rawData = response.data;
    const newTreeData = [];

    // 1. 处理排产计划达成率统计
    if (rawData['排产计划达成率统计']) {
      const planCompletionNode = {
        label: '排产计划达成率统计',
        children: rawData['排产计划达成率统计']
          .map(item => ({
            label: item['使用部门'].trim() || '未知部门',
          }))
      };
      newTreeData.push(planCompletionNode);
    }

    // 2. 处理设备工时达成率统计
    if (rawData['设备工时达成率统计']) {
      const equipmentHoursNode = {
        label: '设备工时达成率统计',
        children: []
      };

      // 获取所有年份并按降序排序
      const sortedYears = Object.keys(rawData['设备工时达成率统计'])
        .sort((a, b) => parseInt(b) - parseInt(a));

      for (const year of sortedYears) {
        const yearData = rawData['设备工时达成率统计'][year];
        if (!yearData) continue;

        const yearNode = {
          label: year,
          children: []
        };

        // 获取该年所有月份并按降序排序
        const sortedMonths = Object.keys(yearData)
          .sort((a, b) => {
            // 处理格式为YYYYMM的月份键
            const monthA = a.length === 6 ? parseInt(a.substring(4)) : parseInt(a);
            const monthB = b.length === 6 ? parseInt(b.substring(4)) : parseInt(b);
            return monthB - monthA;
          });

        for (const monthKey of sortedMonths) {
          const monthData = yearData[monthKey];
          if (!monthData) continue;

          const monthName = monthKey.length === 6 
            ? `${monthKey.substring(4)}月` 
            : monthKey;
          
          const monthNode = {
            label: `${year}年${monthName}`,
            children: monthData
              .filter(dept => dept) // 过滤空部门
              .map(dept => ({
                label: dept.trim() || '未知部门',
                rq: monthKey, // 添加月份键值
              }))
          };
          yearNode.children.push(monthNode);
        }

        equipmentHoursNode.children.push(yearNode);
      }
      newTreeData.push(equipmentHoursNode);
    }

    console.log('最终树数据:', newTreeData);
    treeData.value = newTreeData;
  } catch (error) {
    console.error('加载树数据失败:', error);
    treeData.value = [];
  }
};

// 初始化加载数据
getTreeData();

const ismachine = ref(false)
const datelist = ref([]); 
const pchztableData = ref([]); 
const pcmxtableData = ref([]); 
const sbhztableData = ref([]);
const sbmxtableData = ref([]);
// 节点点击事件处理
const handleNodeClick = async (nodeData) => {
  console.log('节点点击:', nodeData)
  if(!nodeData.children){
    console.log('点击了车间')
    //根据是否有rq判断点击的是排产还是设备
    if(!nodeData.rq){
    ismachine.value = false;
    const response = await PARlist({Machine:nodeData.label});
    // 创建日期映射表
    const dateMap = response.data.list.map(fullDate => {
    const [year, month, day] = fullDate.split('-');
    const shortKey = `${month.padStart(2, '0')}-${day.padStart(2, '0')}`; // 显示用 05-08
    const longKey = `${month.padStart(2, '0')}月${day.padStart(2, '0')}日`; // 数据键 05月08日
    return {
    display: shortKey, // 表头显示
    prop: longKey      // 对应数据字段
    };
    });
    datelist.value = dateMap; // 存储映射关系
    pchztableData.value = response.data.data;
    }else{
      ismachine.value = true;
      const response = await PARlistpro({Machine:nodeData.label,rq:nodeData.rq});
      sbhztableData.value = response.data;
    }
  }
}

// 节点展开事件处理
const handleNodeExpand = (nodeData, node) => {
  console.log('节点展开:', nodeData)
}

const currentjtbh = ref('')//储存设备汇总表格当前选中的机台编号
const currentrq = ref('')//储存设备明细表格当前选中的日期
// 排产表格行点击事件处理
const pchzRowClick = async (row) => {
  console.log('行点击:', row)
  currentjtbh.value = row.机台编号;
  const response = await PARDetail({jtbh:row.机台编号,bz:row.班组})
  if (response?.code === 0 && Array.isArray(response.data)) {
    pcmxtableData.value = response.data;
    console.log('表格数据更新成功:', response.data); 
  }
}

// 设备汇总表格行点击事件处理
const sbhzRowClick = async (row) => {
  console.log('行点击:', row)
  const response = await PARDetailpro({jtbh:row.机台编号,bz:row.班组,rq:row.sczl_rq})
  if (response?.code === 0 && Array.isArray(response.data)) {
    sbmxtableData.value = response.data;
    console.log('表格数据更新成功:', response.data); 
  }
} 




//设备明细表格行点击事件处理
const sbmxRowClick = async (row) => {
  currentrq.value = row.日期;
}

  
//导出按钮（汇总）
const hzToExcel = async () => {
  try {
    //  获取数据
    
    const el = document.getElementById(ismachine.value ? 'sbhztable' : 'pchztable');
    const filename = '生产效率统计汇总导出.xlsx';
    const worksheet = XLSX.utils.table_to_sheet(el, { raw: true });
    //从某列开始转化成数字
    //设置从C列开始为数字格式
    const range = XLSX.utils.decode_range(worksheet['!ref']);
    for (let col = 2; col <= range.e.c; col++) { // 从C列(索引2)开始
      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)) {
            worksheet[cellAddress].t = 'n'; // 数字类型
            worksheet[cellAddress].v = numValue; // 更新值
            worksheet[cellAddress].z = '0'; // 数字格式
          }
        }
      }
    }
    
    // 创建并导出工作簿
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, worksheet, 'Sheet1');
    XLSX.writeFile(wb, filename);
  } catch (error) {
    console.error('导出失败:', error);
    ElMessage.error('导出数据失败，请重试');
  }
};

  

  //导出按钮（汇总）
  const mxToExcel = async () => {
  try {
    //  获取数据
    const el = document.getElementById(ismachine.value ? 'sbmxtable' : 'pcmxtable');
    const filename = '生产效率统计明细导出.xlsx';
    const worksheet = XLSX.utils.table_to_sheet(el, { raw: true });
    //从某列开始转化成数字
    const range = XLSX.utils.decode_range(worksheet['!ref']);
    for (let col = 4; col <= range.e.c; col++) { // 从C列(索引2)开始
      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)) {
            worksheet[cellAddress].t = 'n'; // 数字类型
            worksheet[cellAddress].v = numValue; // 更新值
            worksheet[cellAddress].z = '0'; // 数字格式
          }
        }
      }
    }
    
    // 创建并导出工作簿
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, worksheet, 'Sheet1');
    XLSX.writeFile(wb, filename);
  } catch (error) {
    console.error('导出失败:', error);
    ElMessage.error('导出数据失败，请重试');
  }
};  
  
const onrqexcel = ref(false);
const excelbm = ref(''); // 部门
const excelrq = ref([]); // 初始化为数组，用于存储日期范围
const bmoptions = ref([]); // 部门下拉选项

// 打开导出弹窗时
const rqToExcel = async () => {
  //动态加载部门数据
  if (treeData.value[0]?.children) {
    bmoptions.value = treeData.value[0].children.map(item => ({
      label: item.label,
      value: item.label, 
    }));
  }
  onrqexcel.value = true;
};

const onchange_data = (val) => {
  if (val && val.length === 2) {
    // 格式化单个日期为 "YYYY-MM-DD"
    const formatDate = (date) => {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0'); // 获取日，并补零
      return `${year}-${month}-${day}`;
    };

    // 分别格式化开始日期和结束日期
    excelrq.value = [formatDate(val[0]), formatDate(val[1])];
  } else {
    excelrq.value = []; // 清空选择
  }
};

// 确定导出
const rqexcelonDialog = async () => {
  if (excelrq.value.length !== 2) {
    ElMessage.warning('请选择完整的日期范围');
    return;
  }
  
  try {
    // 获取数据
    const response = await PARDateExcel({
      start_rq: excelrq.value[0],
      end_rq: excelrq.value[1],
      bm: excelbm.value
    });
    
    const data = response.data; // 假设返回的是数组格式的数据
    
    // 1. 准备表头
    const headers = Object.keys(data[0] || {});
    
    // 2. 准备工作表数据（包含表头和数据行）
    const wsData = [
      headers, // 表头行
      ...data.map(row => headers.map(key => row[key])) // 数据行
    ];
    
    // 3. 创建工作表
    const worksheet = XLSX.utils.aoa_to_sheet(wsData);
    
    // 4. 数字类型转换（从第5列开始，索引4）
    const range = XLSX.utils.decode_range(worksheet['!ref']);
    for (let col = 4; 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)) {
            worksheet[cellAddress].t = 'n';
            worksheet[cellAddress].v = numValue;
            worksheet[cellAddress].z = '0';
          }
        }
      }
    }
    
    // 5. 创建并导出工作簿
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, worksheet, 'Sheet1');
    XLSX.writeFile(wb, '生产效率统计按时段明细导出.xlsx');
    
  } catch (error) {
    console.error('导出失败:', error);
    ElMessage.error('导出数据失败，请重试');
  }
};

// 关闭弹窗
const rqexcelcloseDialog = () => {
  onrqexcel.value = false;
};
  
  
 //===============颜色==================================
//排产汇总表格样式
const pchzrowClassStyle = ({row,rowIndex}) =>{
  if(row['机台编号']== currentjtbh.value){
    return "warning-row"
  }
}

//设备明细表格样式
 const sbmxrowClassStyle = ({row,rowIndex}) =>{
  if(row['日期']== currentrq.value){
    return "warning-row"
  }
}
  
  </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 .warning-row) {
  background: #FFFF80 !important;
}
  /* 选中某行时的背景色 */
  :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>