ZengTao
2025-03-07 df13b23a2fa3519e6f796ed946d87412a6a5f7ca
UI-Project/src/views/GlassStorage/rawfilmstorage.vue
@@ -4,8 +4,10 @@
import {ElMessage, ElMessageBox} from 'element-plus'
import {useI18n} from 'vue-i18n'
import {host, WebSocketHost} from '@/utils/constants'
import dayjs from 'dayjs';
import request from "@/utils/request"
import {closeWebSocket, initializeWebSocket} from '@/utils/WebSocketService';
import { inject } from 'vue';
const router = useRouter()
const tableDataa = ref([])
const tableDatab = ref([])
@@ -16,7 +18,7 @@
const dialogFormVisiblec = ref(false)
const dialogFormVisiblee = ref(false)
const Edit = ref(false)
const timeRange = ref(["2022-01-01 00:00:00", "2025-01-01 00:00:00"])
const timeRange = ref([])
const selectValuesa = reactive([]);
const patternWidth = ref('');
const patternHeight = ref('');
@@ -27,6 +29,7 @@
const leftingStation = ref('');
const loadingline = ref('');
let webSocket: WebSocket | null = null;  
const globalDate = inject('globalDate');
const value = ref('')
const options = [
  {
@@ -42,27 +45,33 @@
  taskType: '',
  taskState: '',
});
request.post("/glassStorage/rawGlassStorageTask/setRawGlassTaskRequest",{
      beginDate: "2022-01-01 00:00:00",
      endDate: "2025-01-01 00:00:00",
  let startTime = window.localStorage.getItem('startTime')
  request.post("/glassStorage/rawGlassStorageTask/setRawGlassTaskRequest",{
  beginDate: startTime,
  endDate: globalDate,
}).then((response) => {
          if (response.code == 200) {
            tableDataa.value = response.data
            console.log(tableDataa.value);
          } else {
          ElMessage.warning(response.msg)
          }
          });
onMounted(() => {
    socket = initializeWebSocket(socketUrl, handleMessage);
// 格式化后端时间并计算一周前的时间
const defaultTime = ref<[Date, Date]>([new Date(), new Date()]);
function parseAndSetTime() {
  const backendTime = new Date(globalDate);
  const oneWeekAgo = new Date(backendTime.getTime() - 7 * 24 * 60 * 60 * 1000); // 减去7天
  console.log(formatTimestamp(oneWeekAgo));
  console.log(oneWeekAgo);
  timeRange.value = [formatTimestamp(oneWeekAgo), formatTimestamp(backendTime)];
  window.localStorage.setItem('startTime', formatTimestamp(oneWeekAgo))
}
  onMounted(() => {
  socket = initializeWebSocket(socketUrl, handleMessage);
  parseAndSetTime();
});
let socket = null;
const socketUrl = `ws://${WebSocketHost}:${host}/api/glassStorage/api/talk/rawGlass`;
const handleMessage = (data) => {
  // if(data.tasks !=null){
  // tableDataa.value = data.tasks[0]
  // }
    const formattedTasks = data.tasks[0].map(task => {
      if (task && task.createTime) {
        return { ...task, createTime: formatTimestamp(task.createTime) };
@@ -72,7 +81,6 @@
    tableDataa.value = formattedTasks;
  if(data.rawStationDetailsList !=null){
  tableDatab.value = data.rawStationDetailsList[0]
  console.log(tableDatab.value);
  }
};
const handleEdit = (row) => {
@@ -287,14 +295,14 @@
  }
};
// 格式化时间戳为年月日时间字符串的函数
function formatTimestamp(timestamp) {
function formatTimestamp(timestamp: number | Date): string {
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始,需要加1,并补零
  const day = String(date.getDate()).padStart(2, '0'); // 补零
  const hours = String(date.getHours()).padStart(2, '0'); // 补零(如果需要显示时间)
  const minutes = String(date.getMinutes()).padStart(2, '0'); // 补零(如果需要显示时间)
  const seconds = String(date.getSeconds()).padStart(2, '0'); // 补零(如果需要显示时间)
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
function getStatusType1(taskType) {  
@@ -305,35 +313,43 @@
    return 'warning';  
  case 3:  
    return 'success';  
  case 4:
    return 'danger';
  case 5:
    return 'primary';
}  
}
function getStatusText1(taskType) {  
switch (taskType) {
  case 1:  
    return t('film.stocke');//入库
    return t('sorter.advancetask');//进片任务
  case 2:  
    return t('film.outbound');//出库
    return t('sorter.outputtasks');//出片任务
  case 3:  
  return t('film.dispatch');//调度
  return t('sorter.schedulingtasks');//调度任务
  case 4:
  return t('sorter.advancerequests');//进片请求
  case 5:
  return t('sorter.releaserequest');//出片请求
}  
}
function getStatusType2(taskState) {  
switch (taskState) {  
  case 1:
  case 0:
    return 'info';  
  case 2:  
    return 'warning';  
  case 3:
  case 1:
    return 'success';  
}  
}
function getStatusText2(taskState) {  
switch (taskState) {
  case 1:
  case 0:
    return t('film.built');//新建
  case 2:  
    return t('film.execution');//执行中
  case 3:
    return t('film.fail');//失败
  case 1:
  return t('film.finish');//完成
}  
}
@@ -364,14 +380,16 @@
        :end-placeholder="$t('film.endtime')"
        :default-time="defaultTime" />
    <el-select v-model="selectValuesa[0]" clearable :placeholder="$t('film.taskstatus')" style="margin-left: 10px;" >
      <el-option :label="$t('film.built')" value="1"></el-option>
      <el-option :label="$t('film.execution')" value="2"></el-option>
      <el-option :label="$t('film.finish')" value="3"></el-option>
      <el-option :label="$t('film.built')" value="0"></el-option>
      <el-option :label="$t('film.finish')" value="1"></el-option>
      <el-option :label="$t('film.fail')" value="2"></el-option>
    </el-select>
    <el-select v-model="selectValuesa[1]" clearable :placeholder="$t('film.tasktype')" style="margin-left: 10px;" >
      <el-option :label="$t('film.stocke')" value="1"></el-option>
      <el-option :label="$t('film.outbound')" value="2"></el-option>
      <el-option :label="$t('film.dispatch')" value="3"></el-option>
      <el-option :label="$t('sorter.advancetask')" value="1"></el-option>
      <el-option :label="$t('sorter.outputtasks')" value="2"></el-option>
      <el-option :label="$t('sorter.schedulingtasks')" value="3"></el-option>
      <el-option :label="$t('sorter.advancerequests')" value="4"></el-option>
      <el-option :label="$t('sorter.releaserequest')" value="5"></el-option>
    </el-select>
    <el-button type="primary" style="margin-left: 10px;" @click="selectReportData()">{{ $t('film.inquire') }}</el-button>
  </div>
@@ -380,7 +398,7 @@
        <el-table height="300" ref="table"
        :data="tableDataa" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="id" align="center" :label="$t('film.enableid')"/>
          <el-table-column prop="originateSlot" align="center" :label="$t('film.originateslot')"/>
          <el-table-column prop="startSlot" align="center" :label="$t('film.originateslot')"/>
          <el-table-column prop="endSlot" align="center" :label="$t('film.endslot')"/>
          <el-table-column prop="patternQuantity" align="center" :label="$t('film.patternquantity')"/>
          <el-table-column
@@ -410,8 +428,8 @@
        </el-table>
      </div>
    </el-card>
    <div class="img-dlpl" >
    <div class="img-car1" :style="'z-index:999;top:243px;left:' + 460 + 'px;position:absolute;'">
    <div class="img-dlpl">
    <div class="img-car1" :style="'z-index:999;top:250px;left:' + 20 + 'px;position:absolute;'">
    </div>
    </div>
    <el-dialog v-model="dialogFormVisiblea" top="5vh" width="85%" >
@@ -637,15 +655,15 @@
  margin-top: -15px;
}
.img-dlpl{
  margin-left: 20px;
  margin-top: -40px;
  margin-left: 330px;
  margin-top: 10px;
  background-image:url('../../assets/ypcc.png');
  background-repeat: no-repeat;
  background-attachment: local;
  min-height: 500px;
  width: 1400px;
  min-height: 700px;
  width: 800px;
  max-width: 100%;
  background-size: 1600px 600px;
  background-size: 800px 700px;
  overflow: hidden;
  position:relative
}
@@ -655,10 +673,10 @@
  position: absolute;
  background-repeat: no-repeat;
  background-attachment: local;
  min-width: 200px;
  height: 100px;
  max-height: 100%;
  background-size: 40px 100px;
  min-height: 150px;
  width: 70px;
  max-width: 100%;
  background-size: 70px 150px;
  overflow: hidden;
  position:relative
}