Merge remote-tracking branch 'origin/master'

zhoushihao

2024-07-06 f481c5fe4fc2aa80c77a760f4161e4ab3912cb45

 UI-Project/src/views/GlassStorage/MaterialRackManagement.vue

@@ -1,13 +1,14 @@
<template>

  <div >

  <div  class="app-container">

    <el-card style="flex: 1; margin-left: 10px; " :loading="loading">

      <div slot="header" class="clearfix" style="display: flex; align-items: center;">



<!-- 左侧按钮组 -->

<div >

  <el-button type="success" size="mini"  @click="storage()">原片仓储详情</el-button>

  <el-button type="success" size="mini" @click="handleInbound()">入库</el-button>

  <el-button type="success" size="mini" @click="handleInbound()">吊装位入库</el-button>

  <el-button type="success" size="mini" @click="handleInbound()">添加原片</el-button>

  <el-button type="success" size="mini" >吊装位入库</el-button>

 
</div>



<!-- 右侧选择框 -->

@@ -20,9 +21,9 @@
</el-form-item>



</div>



<el-dialog v-model="Hidden" top="10vh" width="80%"  >

      <el-table

        :data="tableData"

        :data="tableData" v-model="dialogVisible3"

       

        style="width: 98%; height: 200px"

        @selection-change="handleSelectionChange"

@@ -47,23 +48,24 @@
  min-width="80"

  prop="shelf_status"

>

  <template #default="scope">

    <el-tag :type="getTagType(scope.row.shelf_status)">

      {{ scope.row.shelf_status === 1 ? '启用' : '未启用' }}

    </el-tag>

  </template>

<template #default="scope">

        <el-tag :type="getTagType(scope.row.shelf_status)" @click="toggleStatus(scope.row)">

          {{ scope.row.shelf_status === 1 ? '启用' : '未启用' }}

        </el-tag>

      </template>

</el-table-column>



        <!-- 操作列 -->

        <el-table-column label="操作" width="300">

        <el-table-column label="操作" width="350">

          <template #default="{ row }">

            <el-button type="primary" size="mini" @click="handleEdit(row)">修改</el-button>

            <el-button type="primary" size="mini" @click="edithandleRowClick(row)">修改</el-button>

            <el-button type="danger" size="mini" @click="handleDelete(row)">删除</el-button>

            <el-button type="warning" size="mini" @click="handleCheckout(row)">出库</el-button>

           
            <el-button type="success" size="mini" @click="addglass()">添加原片</el-button>

          </template>

        </el-table-column>

      </el-table>





      <el-table

    :data="tasktableData"

@@ -73,9 +75,16 @@
    ref="table"

    empty-text="No Data"

  >





  <template #header>

        <div style="display: flex; align-items: center;">

          <span style="font-size: 16px; font-weight: bold; margin-right: 20px;">任务列表</span>

        
        </div>

      </template>

    <el-table-column prop="Glassid" label="Glassid"></el-table-column>

    <el-table-column prop="taskDescription" label="任务描述" width="250"></el-table-column>

    <el-table-column prop="taskStatus" label="任务状态"></el-table-column>

    <el-table-column prop="glassThickness" label="玻璃厚度"></el-table-column>

    <el-table-column prop="glassFilm" label="玻璃膜系"></el-table-column>

    <el-table-column prop="creationTime" label="创建时间"></el-table-column>

@@ -97,16 +106,26 @@
    <el-table-column label="操作" width="350">

      <template #default="{ row }">

        <el-button type="primary" size="mini" @click="handleRestart(row)">重新开始</el-button>

        <el-button type="danger" size="mini" @click="handleDelete(row)">删除任务</el-button>

        <el-button type="danger" size="mini" @click="handleDeletetask(row)">删除任务</el-button>

        <el-button type="success" size="mini" @click="handleComplete(row)">任务完成</el-button>

      </template>

    </el-table-column>

  </el-table>



  </el-dialog>

    </el-card>



    <div ref="chart" id="chart" style="width: 100%; height: 250px;"></div>

 
    <!-- <div ref="chart" id="chart" style="width: 100%; height: 250px;"></div> -->





   
    <div class="img-ypcc" >





      <div class="img-car1" :style="'z-index:999;left:297px;top:158px;position:absolute;'">

      <div v-show="cellshow1" style="margin-top:10px;width:200px;height:5px;background-color:#409EFF;"></div>

    </div>

   
    </div>

   

    <!-- 入库对话框 -->

    <el-dialog

@@ -149,7 +168,64 @@
        <el-button type="primary" @click="handleConfirmInbound">确 定</el-button>

      </div>

    </el-dialog>

    <div ref="chart" id="chart" style="width: 100%; height: 400px;"></div>





    <el-dialog title="添加原片"  v-model="dialogVisible3" width="50%">

    <el-form :model="formData3" ref="form" label-width="80px">

      <el-form-item label="颜色膜系">

        <el-input v-model="formData.selectedColor" readonly style="width: 250px; height: 35px; font-size: 20px"></el-input>

        <el-dropdown @command="handleCommand">

          <span class="el-dropdown-link">

            选择<i class="el-icon-arrow-down el-icon--right"></i>

          </span>

          <el-dropdown-menu slot="dropdown">

            <el-dropdown-item v-for="color in colors" :key="color['0_glass_id']" :command="color['0_glass_id']">

              {{ color['0_glass_id'] }}

            </el-dropdown-item>

          </el-dropdown-menu>

        </el-dropdown>

      </el-form-item>



      <el-form-item label="长度">

        <el-input v-model="formData.wid" required style="width: 250px; font-size: 20px" @focus="clearInput('wid')"></el-input>

      </el-form-item>



      <el-form-item label="高度">

        <el-input v-model="formData.heig" required style="width: 250px; font-size: 20px" @focus="clearInput('heig')"></el-input>

      </el-form-item>



      <el-form-item label="厚度">

        <el-input v-model="formData.thinkness" required style="width: 250px; font-size: 20px" @focus="clearInput('thinkness')"></el-input>

      </el-form-item>



      <el-form-item label="数量">

        <el-input-number v-model="formData.num" required :min="0" :max="9000" style="width: 250px; font-size: 20px" @focus="clearInput('num')"></el-input-number>

      </el-form-item>

    </el-form>



    <span slot="footer" class="dialog-footer">

      <el-button @click="dialogVisible3 = false">关闭</el-button>

      <el-button type="primary" @click="submitForm">提交</el-button>

    </span>

  </el-dialog>



  <el-dialog title="编辑" v-model="editdialogVisible" width="30%" @close="edithandleDialogClose">

      <el-form :model="editForm" ref="editFormRef" label-width="80px">

        <el-form-item label="数量">

          <el-input v-model="editForm.quantity"></el-input>

        </el-form-item>

        <el-form-item label="批次号">

          <el-input v-model="editForm.batchnumber"></el-input>

        </el-form-item>

      </el-form>



      <div  class="dialog-footer">

        <el-button @click="editdialogVisible = false">取消</el-button>

        <el-button type="primary" @click="editsaveEdit">保存</el-button>

      </div>

    </el-dialog>





  </div>

</template>



@@ -159,6 +235,7 @@
<script setup>

import { ref, onMounted, onBeforeUnmount } from 'vue'; // 导入 Vue 3 的模块

import * as echarts from 'echarts';

import { ElMessage, ElMessageBox } from 'element-plus'





    const loading = ref(false);

@@ -170,7 +247,7 @@
        height: '50',

        thickness: '10',

        quantity: '5',

        entry_time: '2024-06-19',

        entry_time: '2024-06-19 10:00:00',

        batchnumber:"444",

        shelf_status: 1

      },

@@ -181,7 +258,7 @@
        height: '60',

        thickness: '12',

        quantity: '10',

        entry_time: '2024-06-18',

        entry_time: '2024-06-19 10:00:00',

        batchnumber:"444",

        shelf_status: 0

      },

@@ -192,7 +269,7 @@
        height: '60',

        thickness: '12',

        quantity: '10',

        entry_time: '2024-06-18',

        entry_time: '2024-06-19 10:00:00',

        batchnumber:"444",

        shelf_status: 1

      },

@@ -203,7 +280,7 @@
        height: '60',

        thickness: '12',

        quantity: '10',

        entry_time: '2024-06-18',

        entry_time: '2024-06-19 10:00:00',

        batchnumber:"444",

        shelf_status: 1

      },

@@ -214,12 +291,14 @@
        height: '60',

        thickness: '12',

        quantity: '10',

        entry_time: '2024-06-18',

        entry_time: '2024-06-19 10:00:00',

        batchnumber:"444",

        shelf_status: 1

      }

      // Add more data as needed

    ]);



    const Hidden = ref(false)



   const getTagType2 =(status) => {

      switch (status) {

@@ -240,6 +319,12 @@
      return status === 1 ? 'success' : 'danger';

      // 根据状态值决定标签类型，这里假设状态为1时为成功（绿色），否则为失败（红色）

    }



    const toggleStatus = (row) => {

      // 切换料架状态的逻辑

      row.shelf_status = 1 - row.shelf_status; // Toggle between 0 and 1

      // 此处可以添加保存状态的逻辑，比如调用 API 更新数据

    };



   const tasktableData=ref([



@@ -276,25 +361,49 @@
     

    });



    const handleEdit = (row) => {

      // 处理修改数量逻辑

      console.log('Edit Quantity:', row);

    };



   
    const handleDelete = (row) => {

      // 处理删除逻辑

      console.log('Delete:', row);

    };

  // 使用 Element UI 的 MessageBox.confirm 方法进行二次确认

  ElMessageBox.confirm('确定要执行删除操作吗？', '确认删除', {

    confirmButtonText: '确认',

    cancelButtonText: '取消',

    type: 'warning',

  }).then(() => {

    // 点击确认按钮的回调，执行出库操作

    console.log('执行删除操作', row);

  }).catch(() => {

    // 点击取消按钮的回调，不执行任何操作

    console.log('取消删除操作');

  });

};



    
    const handleCheckout = (row) => {

      // 处理出库逻辑

      console.log('Checkout:', row);

    };

  // 使用 Element UI 的 MessageBox.confirm 方法进行二次确认

  ElMessageBox.confirm('确定要执行出库操作吗？', '确认出库', {

    confirmButtonText: '确认',

    cancelButtonText: '取消',

    type: 'warning',

  }).then(() => {

    // 点击确认按钮的回调，执行出库操作

    console.log('执行出库操作', row);

  }).catch(() => {

    // 点击取消按钮的回调，不执行任何操作

    console.log('取消出库操作');

  });

};





    const handleInbound = () => {

      // 打开入库对话框

      dialogVisible.value = true;

    };



    const storage = () => {

      // 打开入库对话框

      Hidden.value = true;

    };

    


    const handleCloseDialog = () => {

      // 关闭对话框时重置表单数据

@@ -315,91 +424,211 @@
      // 关闭对话框

      dialogVisible.value = false;

    };











    const dialogVisible3 = ref(false);

    const colors = ref([

      { '0_glass_id': 'Red' },

      { '0_glass_id': 'Green' },

      { '0_glass_id': 'Blue' }

      // Add more colors as needed

    ]);



    const formData3 = ref({

      selectedColor: '',

      wid: '',

      heig: '',

      thinkness: '',

      num: ''

    });





    const addglass = () => {

      // 打开入库对话框

      dialogVisible3.value = true;

    };

    const handleCommand = (command) => {

      formData.value.selectedColor = command;

    };



    const clearInput = (field) => {

      formData.value[field] = '';

    };



    const submitForm = () => {

      console.log('提交数据:', formData.value);

      dialogVisible3.value = false;

      // Add your submit logic here

    };

    





    let chartInstance = null;



onMounted(() => {

  // Initialize the chart

  chartInstance = echarts.init(document.getElementById('chart'));

    const editdialogVisible = ref(false);

    const editForm = ref({

      quantity: '',

      batchnumber: ''

    });

    const editFormRef = ref(null);

    let currentRow = ref(null);



  // Simulated data for demonstration

  const chartData = {

    labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],

    datasets: [

      { name: '使用情况统计', data: [{ remaining: 4, total: 5 }, { remaining: 9, total: 10 }, { remaining: 0, total: 30 }, { remaining: 0, total: 10 },{ remaining: 4, total: 5 }] }

    ]

  };

    // 处理行点击事件

    const edithandleRowClick = (row) => {

      currentRow.value = row;

      editForm.value.quantity = row.quantity.toString();

      editForm.value.batchnumber = row.batchnumber;

      editdialogVisible.value = true;

      console.log(editForm.value)

    };



  const options = {

    tooltip: {

      trigger: 'axis',

      axisPointer: {

        type: 'shadow'

      }

    },

    legend: {

      data: ['使用情况统计']

    },

    xAxis: {

      type: 'category',

      data: chartData.labels

    },

    yAxis: {

      type: 'value'

    },

    series: chartData.datasets.map(item => ({

      name: item.name,

      type: 'bar',

      stack: '总量',

      label: {

        show: true,

        position: 'inside',

        formatter: '{c}%'

      },

      data: item.data.map(dataItem => ({

        value: (dataItem.remaining / dataItem.total * 100).toFixed(2), // 计算剩余量占比，保留两位小数

        remaining: dataItem.remaining,

        total: dataItem.total,

        itemStyle: {

          color: getColorByRemaining(dataItem.remaining, dataItem.total)

        }

      }))

    }))

  };

    // 添加保存编辑内容

    const editsaveEdit = () => {

      if (!currentRow.value) return;



  function getColorByRemaining(remaining, total) {

    // 根据剩余量与总量的比例，设置不同的颜色逻辑

    const percentage = remaining / total;

    if (percentage >= 0.8) {

      return '#FF6666'; // Red

    } else if (percentage >= 0.5) {

      return '#FFCC66'; // Yellow

    } else {

      return '#66CC66'; // Green

    }

  }

      // 更新当前行数据

      currentRow.value.quantity = parseInt(editForm.value.quantity);

      currentRow.value.batchnumber = editForm.value.batchnumber;



  // Set options and render chart

  if (chartInstance) {

    chartInstance.setOption(options);

  }

});

      // 关闭对话框

      editdialogVisible.value = false;

    };



onBeforeUnmount(() => {

  if (chartInstance) {

    chartInstance.dispose();

    chartInstance = null;

  }

});

    // 对话框关闭时重置编辑表单和当前行数据

    const edithandleDialogClose = () => {

      editForm.value.quantity = '';

      editForm.value.batchnumber = '';

      currentRow.value = null;

    };



const handleSelectionChange = (selection) => {

  console.log('Selection changed:', selection);









    




    const handleRestart = (row) => {

  // 使用 Element UI 的 MessageBox.confirm 方法进行二次确认

  ElMessageBox.confirm('确定要执行重新开始操作吗？', '确认重新开始', {

    confirmButtonText: '确认',

    cancelButtonText: '取消',

    type: 'warning',

  }).then(() => {

    // 点击确认按钮的回调

    console.log('执行重新开始操作', row);

  }).catch(() => {

    // 点击取消按钮的回调，不执行任何操作

    console.log('取消重新开始操作');

  });

};





const handleDeletetask = (row) => {

  // 使用 Element UI 的 MessageBox.confirm 方法进行二次确认

  ElMessageBox.confirm('确定要执行删除任务操作吗？', '确认删除任务', {

    confirmButtonText: '确认',

    cancelButtonText: '取消',

    type: 'warning',

  }).then(() => {

    // 点击确认按钮的回调

    console.log('执行删除任务操作', row);

  }).catch(() => {

    // 点击取消按钮的回调，不执行任何操作

    console.log('取消删除任务操作');

  });

};







const handleComplete = (row) => {

  // 使用 Element UI 的 MessageBox.confirm 方法进行二次确认

  ElMessageBox.confirm('确定要执行任务完成操作吗？', '确认任务完成', {

    confirmButtonText: '确认',

    cancelButtonText: '取消',

    type: 'warning',

  }).then(() => {

    // 点击确认按钮的回调

    console.log('执行任务完成操作', row);

  }).catch(() => {

    // 点击取消按钮的回调，不执行任何操作

    console.log('取消任务完成操作');

  });

};















































    




</script>



<style>

<style scoped>

html, body {

  height: 100%;

  margin: 0;

  padding: 0;

  overflow: hidden; /* 禁止出现滚动条 */

}



.app-container {



  flex-direction: column;

  height: 100vh; /* 使用视口高度 */

}







.img-ypcc{

  margin-left: 80px;

  background-image:url('../../assets/ypcc.png');

  background-repeat: no-repeat;

    background-attachment: local;

    min-height: 800px;

    width: 1600px;

    max-width: 100%;

    background-size: 1400px 800px;

    overflow: hidden;

    position:relative

}



.img-car1{

  background-image:url('../../assets/ypccche.png');

  position: absolute;

  background-repeat: no-repeat;

    background-attachment: local;

    min-height: 200px;

    width: 200px;

    max-width: 100%;

    background-size: 200px 70px;

    overflow: hidden;

    position:relative

}



.custom-dialog {

  max-height: 90vh; /* 最大高度为视口高度的90% */

  overflow-y: auto; /* 对话框内部出现垂直滚动条 */

}

</style>