补片流程卡调整

chenlu

2024-12-02 e50fa16b6dbc4e7c50d5fbdbc04d2a556ca01c4e

 north-glass-erp/northglass-erp/src/views/pp/glassOptimize/ProjectMange.vue

@@ -1,26 +1,33 @@
<script setup>
import {reactive, ref} from "vue";
import {computed, reactive, ref} from "vue";
import {useI18n} from "vue-i18n";
import deepClone from "@/utils/deepClone"
import {Search} from "@element-plus/icons-vue";
import {ElDatePicker, ElMessage} from "element-plus";
import useOrderInfoStore from "@/stores/sd/order/orderInfo";
import request from "@/utils/request";
import {ElDatePicker, ElMessage, ElMessageBox} from "element-plus";
import useOrderInfoStore from "@/stores/sd/order/orderInfo";
import useUserInfoStore from "@/stores/userInfo";
import userInfo from "@/stores/userInfo";
import GlassComputed from "@/views/pp/glassOptimize/GlassComputed.vue";

const { t } = useI18n()
const {t} = useI18n()
const userStore = useUserInfoStore()
const user = userInfo()
const orderInfo = useOrderInfoStore()

const xGrid = ref()
const gridOptions = reactive({
  height:'100%',
  height: '100%',
  loading: false,
  border:  "full",//表格加边框
  border: "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 30, useKey: true},//鼠标移动或选择高亮
  stripe: true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true, height: 30, useKey: true},//鼠标移动或选择高亮
  id: 'ProjectMange',
  scrollX:{enabled: true},
  scrollY:{ enabled: true ,gt:0},//开启虚拟滚动
  showOverflow:true,
  scrollX: {enabled: true},
  scrollY: {enabled: true, gt: 0},//开启虚拟滚动
  showOverflow: true,
  columnConfig: {
    resizable: true,
    useKey: true
@@ -36,68 +43,314 @@
    mode: 'row',
    showStatus: true
  },
  /*formConfig: {
    data: {
      width: '',
      height: '',
      quantity: ''
    },
    items: [
      { field: 'width', title: t('order.width')+':', itemRender: { name: 'VxeInput' } },
      { field: 'height', title: t('order.height')+':', itemRender: { name: 'VxeInput' } },
      { field: 'quantity', title: t('order.quantity')+':', itemRender: { name: 'VxeInput' } },
      {
        itemRender: {
          name: 'VxeButtonGroup',
          options: [
            { type: 'submit', content: t('craft.sure'), status: 'primary' },
            { type: 'reset', content: t('product.msg.reset') }
          ]
        }
      }
    ]
  },*/
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    {field: 'id', width: 100,title: '工程号',},
    {field: '',width: 50,title: '名称',},
    {field: 'id', width: 50,title: '膜系',},
    {field: 'id', width: 50,title: '厚度',},
    {field: 'id', width: 50,title: '类型',},
    {field: 'id', width: 50,title: '状态',},
    {field: 'id', width: 50,title: '数量',},
    {field: 'id', width: 50,title: '面积',},
    {field: 'id', width: 100,title: '流程卡数量',},
    {field: 'id', width: 100,title: '原片使用数',},
    {field: 'id', width: 70,title: '流程卡',},
    {field: 'id', width: 100,title: '钢化装载率',},
    {field: '',width: 100,title: '钢化炉数',},
    {field: '',width: 100,title: '平均切裁率',},
    {field: '',width: 100,title: '有效切裁率',},
    {field: '',width: 100,title: '尾片切裁率',},
    {field: '',width: 100,title: '原料使用数',},
    {field: '',width: 100,title: '平均切裁率',},
    {field: '',width: 50,title: '备注',},
    {field: '',width: 100,title: '创建人',},
    {field: '',width: 100,title: '创建时间',},
    {field: '',width: 100,title: '修改时间',},

  columns: [
    {type: 'expand', fixed: "left", slots: {content: 'content'}, width: 50},
    {field: 'projectNumber', width: 100, title: '工程号', filters: [{data: ''}], slots: {filter: 'num1_filter'},},
    {field: 'projectName', width: 50, title: '名称',},
    {field: 'glassType', width: 50, title: '膜系',},
    {field: 'thickness', width: 50, title: '厚度',},
    {field: 'type', width: 50, title: '类型',},
    {field: 'state', width: 50, title: '状态',},
    {field: 'quantity', width: 50, title: '数量',},
    {field: 'area', width: 50, title: '面积',},
    {field: 'processCardQuantity', width: 100, title: '流程卡数量',},
    {field: 'usingQuantity', width: 100, title: '原片使用数',},
    {field: 'processCardCollection', width: 70, title: '流程卡',},
    {field: 'temperedLoadingRate', width: 100, title: '钢化装载率',},
    {field: 'numberOfTemperingFurnaces', width: 100, title: '钢化炉数',},
    {field: 'averageCuttingRate', width: 100, title: '平均切裁率',},
    {field: 'effectiveCuttingRate', width: 100, title: '有效切裁率',},
    {field: 'residueGlassCuttingRate', width: 100, title: '尾片切裁率',},
    {field: 'amountOfOriginalGlassUsage1', width: 100, title: '原料使用数',},
    {field: 'averageCuttingRate1', width: 100, title: '平均切裁率',},
    {field: 'notes', width: 50, title: '备注',},
    {field: 'creator', width: 100, title: '创建人',},
    {field: 'createTime', width: 100, title: '创建时间',},
    {field: 'modifyTime', width: 100, title: '修改时间',},
  ],//表头参数
  data:null,//表格数据
  data: null,//表格数据
  //右键菜单选项
  menuConfig: {
    body: {
      options: [
        [
          {code: 'openproject', name: '打开工程', prefixIcon: 'vxe-icon-folder-open'},
          {code: 'compute', name: '模拟计算', prefixIcon: 'vxe-icon-subtable'},
          {code: 'optimizetypography', name: '优化排版', prefixIcon: 'vxe-icon-menu'},
          {code: 'production', name: '允许生产', prefixIcon: 'vxe-icon-square-checked'},
          {code: 'novisible', name: '生产不可见', prefixIcon: 'vxe-icon-eye-fill-close'},
          {code: 'copyproject', name: '复刻工程', prefixIcon: 'vxe-icon-copy'},
          {code: 'undooptimize', name: '撤销优化', prefixIcon: 'vxe-icon-error-circle-fill'},
          {code: 'undocompute', name: '撤销模拟计算', prefixIcon: 'vxe-icon-error-circle-fill'},
          {code: 'Initializeproject', name: '初始化工程', prefixIcon: 'vxe-icon-undo'},
          {code: 'delproject', name: '删除工程', prefixIcon: 'vxe-icon-delete'},
          {code: 'viewTempered', name: '查看钢化版图', prefixIcon: 'vxe-icon-custom-column'},
          {code: 'viewOptimize', name: '查看优化版图', prefixIcon: 'vxe-icon-layout'},
          {code: 'Export', name: '数据导出', prefixIcon: 'vxe-icon-download', visible: true, disabled: false},

        ],
        []
      ]
    },
  },
  toolbarConfig: {
    buttons: [],
    slots:{
    slots: {
      buttons: "toolbar_buttons"
    },
  },

})
const oderInfo = useOrderInfoStore()
// 定义操作配置对象数组，集中管理不同操作选项对应的参数
const operationConfigs = [
  {
    code: 'compute', // 打开模拟计算操作
    initialState: ['1', '2'], //
    targetState: null,
    successMsg: '模拟计算已启动！',
    checkMessage: '当前工程状态不符合模拟计算条件，请确认工程状态后再操作！',
    requiresRow: true,
    actionFunction: () => {
      optimizeCompute.value = true;
      Mange.value = false;
    }
  },
  {
    code: 'undocompute',
    initialState: '10',
    targetState: 2,
    successMsg: '撤销模拟计算成功，数据已更新！',
    checkMessage: '当前工程状态不符合撤销模拟计算条件，请确认工程状态后再操作！',
    requiresRow: true,
  },
  {
    code: 'undooptimize',
    initialState: '20',
    targetState: 10,
    successMsg: '撤销优化成功，数据已更新！',
    checkMessage: '当前工程状态不符合撤销优化条件，请确认工程状态后再操作！',
    requiresRow: true,
  },
  {
    code: 'production',
    initialState: '20',
    targetState: 100,
    successMsg: '设置成功，允许生产！',
    checkMessage: '当前工程状态不符合允许生产条件，请确认工程状态后再操作！',
    requiresRow: true,
  },
  {
    code: 'novisible',
    initialState: '100',
    targetState: 20,
    successMsg: '设置成功，生产不可见！',
    checkMessage: '当前工程状态不符合生产不可见条件，请确认工程状态后再操作！',
    requiresRow: true,
  },
  {
    code: 'Initializeproject',
    initialState: ['2', '10', '20'],
    targetState: 1,
    successMsg: '初始化工程成功！',
    checkMessage: '当前工程状态不符合初始化条件，请确认工程状态后再操作！',
    requiresRow: true,
  },
  {
    code: 'delproject',
    initialState: ['1', '2', '10', '20', '100'],
    targetState: null,
    successMsg: '工程删除成功！',
    checkMessage: '当前工程状态不符合删除条件，请确认工程状态后再操作！',
  },
  {
    code: 'Export', // 导出文件操作的配置
    initialState: [],
    targetState: null,
    successMsg: '文件导出成功！',
    gridRef: xGrid,
    requiresRow: false,
  },
  {
    code: 'viewTempered',
    initialState: [],
    targetState: null,
    successMsg: '钢化版图已打开！',
    failureMsg: '工程删除失败，请联系管理员！',
  },
  {
    code: 'viewOptimize',
    initialState: [],
    targetState: null,
    successMsg: '优化版图已打开！',
    failureMsg: '工程删除失败，请联系管理员！',
  }
];
function getOriginalState(targetState) {
  // 根据工程状态返回对应的原始状态
  const stateMapping = {
    2: '10',
    10: '20',
    100: '200',
    200: '100',
    1:['2', '10', '20'],
  };
  return stateMapping[targetState] || targetState;
}
//右键菜单条件判断
function checkOperationCondition(config, row) {
  if (!config.requiresRow ||!row) {
    return false;
  }
  if (Array.isArray(config.initialState)) {
    return config.initialState.includes(String(row.state));
  }
  return config.initialState === String(row.state);
}
// 右键菜单点击事件
const gridEvents = {
  menuClick({ menu, row }) {
    const $grid = xGrid.value;
    if ($grid) {
      const config = operationConfigs.find(c => c.code === menu.code);
      if (config) {
        if (config.requiresRow &&!row) {
          ElMessage.warning('未选中工程，请选中工程后再进行当前操作！');
          return;
        }
        if (config.code === 'Export') {
          config.gridRef.value.exportData();
          ElMessage.success(config.successMsg);
          return;
        }
        // 添加确认提示弹窗，询问用户是否进行当前操作
        ElMessageBox.confirm('是否进行当前操作？', '确认操作', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        if (config.code === 'viewTempered'){
          ElMessageBox.alert('当前点击的是查看钢化版图功能，目前暂时仅做提示，暂无实际查看操作!', '功能提示', {
            confirmButtonText: '我知道了'
          });
          return;
        }
        if (config.code === 'viewOptimize'){
          ElMessageBox.alert('当前点击的是查看钢化版图功能，目前暂时仅做提示，暂无实际查看操作!', '功能提示', {
            confirmButtonText: '我知道了'
          });
          return;
        }
        if (config.code === 'delproject') {
          if (!row) {
            ElMessage.warning(config.checkMessage);
            return;
          }
          const isInitialStateMatched = config.initialState.includes(String(row.state));
          if (!isInitialStateMatched) {
            ElMessage.warning(config.checkMessage);
            return;
          }
          deleteProject(row.projectNumber, config);
        } else if (!checkOperationCondition(config, row)) {
          ElMessage.warning(config.checkMessage);
          return;
        } else {
          if (config.code === 'compute') {
            config.actionFunction();
          } else {
            row.state = config.targetState;
            const index = produceList.value.findIndex(item => item === row);
            if (index!== -1) {
              produceList.value.splice(index, 1, {...row });
              xGrid.value.reloadData(produceList.value);
            }
            updateProjectStateAndHandleResponse(row, row.projectNumber, config.targetState, config.successMsg);
          }
        }
        }).catch(() => {
          // 用户点击取消后执行的逻辑
          ElMessage.info('已取消操作');
        });
      } else {
        console.error(`未找到操作选项 ${menu.code} 对应的配置，请检查配置项`);
      }
    }
  }
};
// 封装发送右键菜单请求、处理响应以及错误回滚等逻辑的函数
function rollbackStateAndReloadGrid(row, targetState) {
  row.state = getOriginalState(targetState);
  const rollbackIndex = produceList.value.findIndex(item => item === row);
  if (rollbackIndex!== -1) {
    produceList.value.splice(rollbackIndex, 1, {...row});
    xGrid.value.reloadData(produceList.value);
  }
}
function updateProjectStateAndHandleResponse(row, projectNumber, targetState, successMsg) {
  const updateParams = {
    projectNumber: projectNumber,
    stateToUpdate: targetState
  };
  request.post(`/glassOptimize/updateProjectState/${projectNumber}/${targetState}`, updateParams, {
    headers: {
      'Content-Type': 'application/json'
    }
  }).then((res) => {
    if (Number(res.code) === 200 && (res.msg === "" || res.msg === null)) {
      ElMessage.success(successMsg);
    } else {
      console.log('res.code 的值:', res.code, ', 类型:', typeof res.code);
      console.log('res.msg 的值:', res.msg, ', 类型:', typeof res.msg);
      const errorMsg = res.data? res.data.errorMessage : '操作失败，未获取到具体原因，请联系管理员';
      ElMessage.error(`操作失败，原因: ${errorMsg}`);
      rollbackStateAndReloadGrid(row, targetState); // 调用回滚函数
    }
  }).catch((error) => {
    console.error('请求出错，操作未完成，详细错误信息:', error);
    const errorMsg = (res.data && res.data.errorMessage)? res.data.errorMessage : '操作失败，未获取到具体原因，请联系管理员';
    ElMessage.error(`请求出错，操作未完成，原因: ${errorMsg}`);
    rollbackStateAndReloadGrid(row, targetState); // 调用回滚函数
  });
}

//删除工程
function deleteProject(projectNumber, config) {
  request.post(`/glassOptimize/deleteProject/${projectNumber}`, {
    headers: {
      'Content-Type': 'application/json'
    }
  }).then((res) => {
    if (Number(res.code) === 200 && (res.msg === "" || res.msg === null)) {
      ElMessage.success(config.successMsg);
      // 从列表中移除已删除的工程数据
      const index = produceList.value.findIndex(item => item.projectNumber === projectNumber);
      if (index!== -1) {
        produceList.value.splice(index, 1);
        xGrid.value.reloadData(produceList.value);
      }
    } else {
      console.log('res.code 的值:', res.code, ', 类型:', typeof res.code);
      console.log('res.msg 的值:', res.msg, ', 类型:', typeof res.msg);
      const errorMsg = res.data? res.data.errorMessage : config.failureMsg;
      ElMessage.error(`操作失败，原因: ${errorMsg}`);
    }
  }).catch((error) => {
    console.error('请求出错，工程删除未完成，详细错误信息:', error);
    const errorMsg = (res.data && res.data.errorMessage)? res.data.errorMessage : config.failureMsg;
    ElMessage.error(`请求出错，工程删除未完成，原因: ${errorMsg}`);
  });
}

//定义模拟计算弹窗默认隐藏
const optimizeCompute = ref(false)
const Mange = ref(true)

//定义工程状态
const optionVal = ref('0')
const optionVal = ref('all')
const options = [
  {
    value: '0',
    value: 'all',
    label: '全部',
  },
  {
@@ -109,64 +362,179 @@
    label: '第一次优化',
  },
  {
    value: '3',
    value: '10',
    label: '模拟计算保存',
  },
  {
    value: '4',
    value: '20',
    label: '优化保存',
  },
  {
    value: '5',
    label: '完成优化',
    value: '100',
    label: '允许生产',
  },
  {
    value: '6',
    value: '200',
    label: '已领取',
  },
]

//点击查询
const getWorkOrder = () => {
  let startTime = orderInfo.workOrderDate[0]
  let endTime = orderInfo.workOrderDate[1]
  request.post(`/processCard/flowCard/${pageNum.value}/${total.pageSize}/${startTime}/${endTime}`, filterData.value).then((res) => {
//工程状态函数
function handleOptionChange() {
  if (optionVal.value === 'all') {
    // 清空工程状态相关的已有筛选条件
    delete filterData.value['state'];
  } else {
    filterData.value['state'] = optionVal.value; // 明确添加选择的工程状态值到筛选条件中
  }
  getWorkOrder();
}

//公共函数
function buildRequestParams() {
  let startSelectTime = orderInfo.workOrderDate[0];
  let endSelectTime = orderInfo.workOrderDate[1];

  const params = {
    startSelectTime,
    endSelectTime,
  };

  return params;
}

//筛选条件
let filterData = ref({
  projectNumber: '',
})
// 定义数据返回结果，使用ref创建响应式数据，初始化为空数组
let produceList = ref([])

// 获取15天前到当前时间
function getNowTime() {
  const start = new Date(new Date().getTime() - 3600 * 1000 * 24 * 15)
      .toISOString()
      .replace('T', ' ')
      .slice(0, 10) //默认开始时间15天前
  const end = new Date(new Date().getTime())
      .toISOString()
      .replace('T', ' ')
      .slice(0, 10)//默认结束时间当前时间
  return [start, end]
}

// 初始化时间范围，若为空则设为近15天时间
if (orderInfo.workOrderDate[0] === "" && orderInfo.workOrderDate[1] === "") {
  orderInfo.workOrderDate = getNowTime();
}
//获取选中时间
let startSelectTime = orderInfo.workOrderDate[0]
let endSelectTime = orderInfo.workOrderDate[1]
// 首次加载数据
request.post(`/glassOptimize/optimizeProjectMange/${startSelectTime}/${endSelectTime}`, filterData.value).then((res) => {
  if (res.code == 200) {
    produceList.value = produceList.value.concat(deepClone(res.data.data))
    xGrid.value.reloadData(produceList.value);
    gridOptions.loading = false;
  } else {
    ElMessage.warning(res.msg);
  }
})

/*使用筛选，后端获取数据*/
const changeFilterEvent = (event, option, $panel,) => {
  // 手动触发筛选
  $panel.changeOption(event, !!option.data, option)
}

function filterChanged(column) {
  gridOptions.loading = true;
  //筛选条件发生变化条件发生变化
  let value = column.datas[0] != undefined ? column.datas[0] : ''
  value = value.trim();
  //判断是否为工程状态列的筛选改变（假设工程状态字段名为'state'，可根据实际情况调整）
  if (column.property === 'state') {
    if (value === 'all') {
      // 如果选择的是全部，从筛选数据中删除此条件，避免传递给后端干扰获取全部数据
      delete filterData.value['state'];
    } else {
      filterData.value['state'] = value;
    }
  } else {
    //判断是否存在外键
    if (column.property.indexOf('.') > -1) {
      const columnArr = column.property.split('.');
      filterData.value[columnArr[0]] = {
        [columnArr[1]]: value,
      };
    } else {
      filterData.value[column.property] = value;
    }
  }

  const params = buildRequestParams();
  request.post(`/glassOptimize/optimizeProjectMange/${params.startSelectTime}/${params.endSelectTime}`, filterData.value).then((res) => {
    if (res.code == 200) {
      total.dataTotal = res.data.total.total * 1
      total.pageTotal = res.data.total.pageTotal
      pageTotal.value = res.data.total
      xGrid.value.loadData(res.data.data)
      produceList.value = deepClone(res.data.data);
      xGrid.value.reloadData(produceList)
      gridOptions.loading = false
    } else {
      ElMessage.warning(res.msg)
    }
  })
  });
}

// 点击查询按钮触发的函数，根据当前筛选条件获取数据并加载到表格
const getWorkOrder = () => {
  const params = buildRequestParams();
  request.post(`/glassOptimize/optimizeProjectMange/${params.startSelectTime}/${params.endSelectTime}`, filterData.value).then((res) => {
    if (res.code == 200) {
      produceList.value = deepClone(res.data.data);
      gridOptions.data = produceList.value;
      xGrid.value.reloadData(produceList.value);
      gridOptions.loading = false;
    } else {
      ElMessage.warning(res.msg);
    }
  });
};
// 计算小片数量
const smallPieceQuantityInput = computed(() => {
  return produceList.value.reduce((acc, item) => acc + item.quantity, 0);
});
// 计算小片面积
const smallPieceAreaInput = computed(() => {
  const sum = produceList.value.reduce((acc, item) => acc + item.area, 0);
  return Number(sum.toFixed(2)); // 先使用toFixed保留两位小数，再转换回数值类型（因为toFixed返回字符串）
});

// 计算原片数量
const originalPieceQuantityInput = computed(() => {
  return produceList.value.reduce((acc, item) => acc + item.usingQuantity, 0);
});

// 原片面积固定为0，直接返回0
const originalPieceAreaInput = 0;


</script>

<template>
    <div id="mange">
  <div id="mange">
    <glass-computed v-if="optimizeCompute"/>
    <div style="height: 100%; width: 100%" v-if="Mange">
      <div id="select">
        <span>优化日期</span>
        <el-date-picker
            style="margin-left:10px; margin-top: -5px; "
            v-model="oderInfo.mangeDate"
            v-model="orderInfo.workOrderDate"
            :default-time="defaultTime"
            :start-placeholder="$t('basicData.startDate')"
            :end-placeholder="$t('basicData.endDate')"
            type="daterange"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
            :start-placeholder="$t('basicData.startDate')"
            :end-placeholder="$t('basicData.endDate')"
            :default-time="defaultTime"

        />
        <vxe-input
            style="margin-left:10px; "
            placeholder="输入工程号或流程卡号"
        >
        </vxe-input>

        <span class="input">工程状态</span>
        <el-select
            style="margin-left:10px; margin-top: -5px; width: 150px"
@@ -175,9 +543,8 @@
            v-model="optionVal"
            clearable
            class="m-2"
            @change="getWorkOrder"
              >

            @change="handleOptionChange"
        >
          <el-option
              v-for="item in options"
              :key="item.value"
@@ -195,17 +562,17 @@
      </div>

      <vxe-grid
          @filter-change="filterChanged"
          height="100%"
          class="mytable-scrollbar"
          ref="xGrid"
          v-bind="gridOptions"
          v-on="gridEvents"
          @filter-change="filterChanged"
      >
        <template #num2_filter="{ column, $panel }">
        <template #select_filter="{ column, $panel }">
          <div>
            <div v-for="(option, index) in column.filters" :key="index">
              <vxe-select v-model="option.data" :placeholder="$t('processCard.pleaseSelect')"  @change="changeFilterEvent($event, option, $panel)">
              <vxe-select v-model="option.data" @change="changeFilterEvent($event, option, $panel)">
                <vxe-option value="0" :label="$t('basicData.unchecked')"></vxe-option>
                <vxe-option value="1" :label="$t('basicData.selected')"></vxe-option>
              </vxe-select>
@@ -216,36 +583,39 @@
        <template #num1_filter="{ column, $panel }">
          <div>
            <div v-for="(option, index) in column.filters" :key="index">
              <input
                  type="type"
                  v-model="option.data"
                  @keyup.enter.native="$panel.confirmFilter()"
                  @input="changeFilterEvent($event, option, $panel)"/>
              <input v-model="option.data" type="text"
                     @keyup.enter.native="$panel.confirmFilter()"
                     @input="changeFilterEvent($event, option, $panel)"/>
            </div>
          </div>
        </template>
      </vxe-grid>
      <div id="last">
        <span>
          小片数<vxe-input size="small" class="input" disabled></vxe-input>
          小片面<vxe-input size="small" class="input" disabled></vxe-input>
          原片数<vxe-input size="small" class="input" disabled></vxe-input>
          原片面<vxe-input size="small" class="input" disabled></vxe-input>
        </span>
        小片数量
        <el-input class="input" disabled v-model="smallPieceQuantityInput"></el-input>
        小片面积
        <el-input class="input" disabled v-model="smallPieceAreaInput"></el-input>
        原片数量
        <el-input class="input" disabled v-model="originalPieceQuantityInput"></el-input>
        原片面积
        <el-input class="input" disabled v-model="originalPieceAreaInput"></el-input>
      </div>
    </div>
  </div>
</template>

<style scoped>
#mange{
#mange {
  width: 100%;
  height: 85%;
}

#last {
  margin-top: 10px;
}
.input{

.input {
  width: 80px;
  margin-left: 15px;
  margin-left: 10px;
}
</style>