原片仓储模块、磨边、上片一线新增历史任务页面

wangfei

2025-03-13 bb7c9575fa2a8546bf04ff22ba24aacf37add1e4

原片仓储模块、磨边、上片一线新增历史任务页面

 UI-Project/src/lang/en.js

@@ -34,6 +34,10 @@
          quit:"Exit",
      },
      basicData:{
          untask:'无任务',
          up:'上片',
          tonumber:'上片总数量',
          finishnumber:'已完成数量',
          rackreset:'架子复位',
          prackreset:'是否架子复位？',
          printing:'自动打印',
@@ -297,6 +301,8 @@
          Schedulingswitch:'调度开关',
      },
      workOrder:{
          upnumber:'上片位编号',
          coatingtypesbe:'原片膜系',
          glassID:'Glass ID',
          height:'Height',
          width:'Width',
@@ -604,6 +610,7 @@
          premark :'Please enter a note',
      },
      film:{
          resetnumber:'架子号',
          fail:'失败',
          mes:'Original film storage details',
          warehousing:'store',
@@ -643,6 +650,7 @@
          filmsa:'Films：',
          createtime:'Creation time',
          remainquantity:'Remaining Quantity',
          thickremainquant:'Remaining quantity of original film (sheets)',
          thickremainquantity:'Remaining quantity of original film (sheets)：',
          inquantity:'Please enter the quantity',
          quantitya:'Number：',

 UI-Project/src/lang/py.js

@@ -34,6 +34,10 @@
        quit: "Выход",
    },
    basicData: {
        untask:'无任务',
        up:'上片',
        tonumber:'上片总数量',
        finishnumber:'已完成数量',
        rackreset:'架子复位',
        prackreset:'是否架子复位？',
        laserprinting: 'Машина лазерной маркировки готова：',
@@ -296,6 +300,8 @@
        Schedulingswitch:'调度开关',
    },
    workOrder: {
        upnumber:'上片位编号',
        coatingtypesbe:'原片膜系',
        glassID: 'Стеклянный ID',
        height: 'Высота',
        width: 'Ширина',
@@ -602,6 +608,7 @@
        premark :'请输入备注',
    },
    film:{
        resetnumber:'架子号',
        fail:'失败',
        mes:'原片仓储详情',
        warehousing:'原片入库',
@@ -641,6 +648,7 @@
        filmsa:'Типы покрытий：',
        createtime:'创建时间',
        remainquantity:'剩余数量',
        thickremainquant:'原片剩余数量（张）',
        thickremainquantity:'原片剩余数量（张）：',
        inquantity:'Введите кольчество.',
        quantitya:'Количество：',

 UI-Project/src/lang/zh.js

@@ -34,6 +34,10 @@
          quit:"退出",
      },
      basicData:{
          untask:'无任务',
          up:'上片',
          tonumber:'上片总数量',
          finishnumber:'已完成数量',
          rackreset:'架子复位',
          prackreset:'是否架子复位？',
          laserprinting:'打标机就绪状态：',
@@ -296,11 +300,13 @@
          Schedulingswitch:'调度开关',
      },
      workOrder:{
          upnumber:'上片位编号',
          glassID:'玻璃ID',
          height:'高',
          width:'宽',
          thickness:'厚度',
          coatingtypes:'膜系',
          coatingtypesbe:'原片膜系',
          productionsequence:'出片顺序',
          cardnumber:'流程卡号',
          operate:'操作',
@@ -603,6 +609,7 @@
          premark :'请输入备注',
      },
      film:{
          resetnumber:'架子号',
          fail:'失败',
          mes:'原片仓储详情',
          warehousing:'原片入库',
@@ -643,6 +650,7 @@
          createtime:'创建时间',
          remainquantity:'剩余数量',
          thickremainquantity:'原片剩余数量（张）：',
          thickremainquant:'原片剩余数量（张）',
          inquantity:'请输入数量',
          quantitya:'数量：',
          enableid:'任务ID',

 UI-Project/src/router/index.js

@@ -386,6 +386,30 @@
                  },
                ]
               },
               {
                path: '/stockhistory',
                 name: 'stockhistory',
                 component: () => import('../views/StockBasicData/stockhistory.vue'),
                 children: [
                   {
                    path: '/StockBasicData/stockhistory',
                    name: 'stockhistory',
                    component: () => import('../views/StockBasicData/stockhistory.vue')
                   },
                 ]
                },
                {
                 path: '/upreturnhistory',
                  name: 'upreturnhistory',
                  component: () => import('../views/Returns/upreturnhistory.vue'),
                  children: [
                    {
                     path: '/Returns/upreturnhistory',
                     name: 'upreturnhistory',
                     component: () => import('../views/Returns/upreturnhistory.vue')
                    },
                  ]
                 },
  ]
})
// 导航守卫  

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

@@ -3,16 +3,17 @@
  <div style="display: flex;width: 1770px;">
          <el-select v-model="selectValuesa[0]" filterable :placeholder="$t('searchOrder.taskstatus')" clearable
          style="width: 200px;margin-left: 10px;">
          <el-option :label="$t('searchOrder.begin')" value="1"></el-option>
          <el-option :label="$t('searchOrder.finish')" value="2"></el-option>
          <el-option :label="$t('order.dilapidation')" value="3"></el-option>
          <el-option :label="$t('searchOrder.uncar')" value="4"></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]" filterable :placeholder="$t('film.enabletype')" clearable
          style="width: 200px;margin-left: 10px;">
          <el-option :label="$t('searchOrder.inkage')" value="1"></el-option>
          <el-option :label="$t('searchOrder.outfilm')" 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-date-picker v-model="timeRange" type="datetimerange" range-separator="至" :start-placeholder="$t('reportmanage.starttime')" 
             style="margin-left: 15px;" value-format = "YYYY-MM-DD hh:mm:ss"
@@ -23,6 +24,8 @@
        <el-table ref="table" style="margin-top: 20px;height: 580px;width: 1770px;" :data="tableDatax" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
      <el-table-column prop="startSlot" align="center" :label="$t('film.originateslot')" min-width="80" />
          <el-table-column prop="endSlot" align="center" :label="$t('film.endslot')" min-width="80" />
          <el-table-column prop="shelf" align="center" :label="$t('film.resetnumber')" min-width="80" />
          <el-table-column prop="patternQuantity" align="center" :label="$t('film.thickremainquant')" min-width="80" />
          <el-table-column
            align="center"
            :label="$t('film.taskstatus')"
@@ -30,8 +33,8 @@
            prop="taskState"
          >
          <template #default="scope">  
        <el-tag :type="getStatusTypeb(scope.row.taskState)">  
          {{ getStatusTextb(scope.row.taskState) }}  
        <el-tag :type="getStatusType2(scope.row.taskState)">  
          {{ getStatusText2(scope.row.taskState) }}  
        </el-tag>  
      </template> 
          </el-table-column>
@@ -42,8 +45,8 @@
            prop="taskType"
          >
          <template #default="scope">  
        <el-tag :type="getStatusTypea(scope.row.taskType)">  
          {{ getStatusTexta(scope.row.taskType) }}  
        <el-tag :type="getStatusText1(scope.row.taskType)">  
          {{ getStatusType1(scope.row.taskType) }}  
        </el-tag>  
      </template> 
          </el-table-column>
@@ -214,49 +217,53 @@
  timeRange.value = [formatTimestamp(oneWeekAgo), formatTimestamp(backendTime)];
  window.localStorage.setItem('startTime', formatTimestamp(oneWeekAgo))
}
function getStatusTypeb(state: number) {  
  switch (state) {  
    case 0:
      return 'primary';  
    case 2: 
      return 'success';  
    case 3: 
      return 'danger';  
    case 4: 
      return 'warning';  
  }  
}
function getStatusTextb(state: number) {
  switch (state) {
    case 0:  
      return t('searchOrder.begin');
    case 2:  
      return t('searchOrder.finish');
    case 3:  
    return t('order.dilapidation');
    case 4:  
    return t('searchOrder.uncar');
  }  
}
function getStatusTypea(ishorizontal: number) {  
  switch (ishorizontal) {  
    case 1: 
      return 'primary';  
    case 2: 
      return 'success';  
    case 3:
      return 'warning';  
  }  
function getStatusType1(taskType) {  
switch (taskType) {  
  case 1:  
    return 'info';  
  case 2:  
    return 'warning';  
  case 3:  
    return 'success';  
  case 4:  
    return 'danger';  
  case 5:  
    return 'primary';  
}  
function getStatusTexta(ishorizontal: number) {
  switch (ishorizontal) {
    case 1:  
      return t('searchOrder.inkage');
    case 2:  
    return t('searchOrder.outfilm');
    case 3:  
    return t('film.dispatch');
  }  
}
function getStatusText1(taskType) {  
switch (taskType) {
  case 1:  
    return t('sorter.advancetask');//进片任务
  case 2:  
    return t('sorter.outputtasks');//出片任务
  case 3:  
  return t('sorter.schedulingtasks');//调度任务
  case 4:  
  return t('sorter.advancerequests');//进片请求
  case 5:  
  return t('sorter.releaserequest');//出片请求
}  
}
function getStatusType2(taskState) {  
switch (taskState) {  
  case 0:  
    return 'info';  
  case 2:  
    return 'warning';  
  case 1:  
    return 'success';  
}  
}
function getStatusText2(taskState) {  
switch (taskState) {
  case 0:  
    return t('film.built');//新建
  case 2:  
    return t('film.fail');//失败
  case 1:  
    return t('film.finish');//完成
}  
}
onMounted(() => {
  parseAndSetTime();

 UI-Project/src/views/Returns/upreturnhistory.vue

New file
@@ -0,0 +1,273 @@
<template>  
    <div>  
  <div style="display: flex;width: 1770px;">
    <el-input v-model="rawGlassWidth" clearable style="margin-left: 10px;margin-bottom: 10px;width: 200px;" :placeholder="$t('Mounting.width')" />
    <el-input v-model="rawGlassHeight" clearable style="margin-left: 10px;margin-bottom: 10px;width: 200px;" :placeholder="$t('Mounting.height')" />
    <el-input v-model="rawGlassThickness" clearable style="margin-left: 10px;margin-bottom: 10px;width: 200px;" :placeholder="$t('Mounting.thickness')" />
    <el-input v-model="rawGlassfilmsId" clearable style="margin-left: 10px;margin-bottom: 10px;width: 200px;" :placeholder="$t('workOrder.coatingtypesbe')" />
    <el-input v-model="slot" clearable style="margin-left: 10px;margin-bottom: 10px;width: 200px;" :placeholder="$t('workOrder.upnumber')" />
    <el-select 
            :placeholder="$t('searchOrder.taskstatus')"
             clearable
             style="width: 270px;margin-left: 10px;"  
             v-model="taskStateList">
               <el-option
                v-for="item in optionsa"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
          </el-select>
            <el-date-picker v-model="timeRange" type="datetimerange" range-separator="至" :start-placeholder="$t('reportmanage.starttime')" 
             style="margin-left: 15px;" value-format = "YYYY-MM-DD hh:mm:ss"
              :end-placeholder="$t('reportmanage.endtime')">
            </el-date-picker>
          <el-button type="primary" style="margin-left: 10px;margin-bottom: 10px;" @click="sethistorical()">{{$t('reportmanage.inquire')}}</el-button>
     </div>
        <el-table ref="table" style="margin-top: 20px;height: 580px;width: 1770px;" :data="tableDatax" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
      <el-table-column prop="rawGlassWidth" align="center" :label="$t('Mounting.width')" min-width="80" />
      <el-table-column prop="rawGlassHeight" align="center" :label="$t('Mounting.height')" min-width="80" />
      <el-table-column prop="rawGlassThickness" align="center" :label="$t('Mounting.thickness')" min-width="80" />
      <el-table-column prop="slot" align="center" :label="$t('workOrder.upnumber')" min-width="80" />
      <el-table-column prop="totalCount" align="center" :label="$t('basicData.tonumber')" min-width="80" />
      <el-table-column prop="finishCount" align="center" :label="$t('basicData.finishnumber')" min-width="80" />
      <el-table-column prop="damageCount" align="center" :label="$t('hellow.damagenumber')" min-width="80" />
          <el-table-column
            align="center"
            :label="$t('film.taskstatus')"
            min-width="80"
            prop="taskState"
          >
          <template #default="scope">  
        <el-tag :type="getStatusTypeb(scope.row.taskState)">  
          {{ getStatusTextb(scope.row.taskState) }}  
        </el-tag>  
      </template> 
          </el-table-column>
          <el-table-column
            align="center"
            :label="$t('sorter.taskRunning')"
            min-width="80"
            prop="taskRunning"
          >
          <template #default="scope">  
        <el-tag :type="getStatusTypea(scope.row.taskRunning)">  
          {{ getStatusTexta(scope.row.taskRunning) }}  
        </el-tag>  
      </template> 
          </el-table-column>
          <el-table-column prop="createTime" align="center" :label="$t('reportmanage.starttime')" min-width="100" />
          <el-table-column prop="updateTime" align="center" :label="$t('reportmanage.endtime')" min-width="100" />
        </el-table>
  <div style="margin-top: 20px;margin-left: 40%;">
        <el-pagination
          v-model:current-page="currentPage2"
          :page-size="pageSize"
          :size="large"
          :disabled="disabled"
          layout="prev, pager, next, jumper"
          :total="totalRecords"
          @current-change="handlePageChange2"
          style="margin-top: 10px;"
      />
    </div>
  </div>
  </template>  
<script lang="ts" setup>
import {useI18n} from 'vue-i18n'
import {useRouter} from "vue-router"
import request from "@/utils/request"
import {host, WebSocketHost} from '@/utils/constants'
import {onBeforeUnmount, onMounted, onUnmounted, reactive, ref} from "vue";
import {closeWebSocket, initializeWebSocket} from '@/utils/WebSocketService';
import {ElMessage, ElMessageBox} from 'element-plus'
const {t} = useI18n()
let language = ref(localStorage.getItem('lang') || 'zh')
import { inject } from 'vue';
const globalDate = inject('globalDate');
const router = useRouter()
const timeRange = ref([])
const taskStateList = reactive([]);
const tableDatax = ref([])
const currentPage2 = ref(1)
const totalRecords = ref(0)
const rawGlassHeight = ref('');
const rawGlassThickness = ref('');
const rawGlassWidth = ref('');
const rawGlassfilmsId = ref('');
const slot = ref('');
let getglobalDate = window.localStorage.getItem('globalDate')
const historical = async (page) => {
  try {
  let startTime = window.localStorage.getItem('startTime')
      const response = await request.post("/loadGlass/loadglassdevicetaskhistory/queryLoadGlassHistoryTask", {
        pageNo: 1,
        pageSize: 20,
        rawGlassHeight: '',
        rawGlassThickness: '',
        rawGlassWidth: '',
        rawGlassfilmsId: '',
        slot: '',
        station: 1,
        taskStateList: '',
        beginDate: startTime,
        endDate: getglobalDate
    })
      if (response.code == 200) {
        ElMessage.success(response.message);
        tableDatax.value = response.data.records;
        console.log(response.data.pages);
        totalRecords.value = response.data.total/2 || 0
      } else {
        ElMessage.error(response.message);
    }
}
catch (error) {
    console.error(error);
  }
}
const handlePageChange2 = (newPage) => {
  currentPage2.value = newPage;
  console.log(currentPage2.value);
  window.localStorage.setItem('pagenumber', currentPage2.value)
  historicala(currentPage2.value);
};
const historicala = async (page) => {
  try { 
  let page = window.localStorage.getItem('pagenumber')
  let startTime = window.localStorage.getItem('startTime')
      const response = await request.post("/loadGlass/loadglassdevicetaskhistory/queryLoadGlassHistoryTask", {
        pageNo: page,
        pageSize: 20,
        rawGlassHeight: '',
        rawGlassThickness: '',
        rawGlassWidth: '',
        rawGlassfilmsId: '',
        slot: '',
        station: 1,
        taskStateList: '',
        beginDate: startTime,
        endDate: getglobalDate
    })
      if (response.code == 200) {
        ElMessage.success(response.message);
        tableDatax.value = response.data.records;
        console.log(response.data.pages);
        
        totalRecords.value = response.data.total/2 || 0
      } else {
        ElMessage.error(response.message);
    }
}
catch (error) {
    console.error(error);
  }
}
// 历史查询点击
const sethistorical = async () => {
  try { 
  let startTime = window.localStorage.getItem('startTime')
  let page = window.localStorage.getItem('pagenumber')
  console.log(page);
  const response = await request.post("/loadGlass/loadglassdevicetaskhistory/queryLoadGlassHistoryTask", {
        pageNo: page,
        pageSize: 20,
        rawGlassHeight: rawGlassHeight.value,
        rawGlassThickness: rawGlassThickness.value,
        rawGlassWidth: rawGlassWidth.value,
        rawGlassfilmsId: rawGlassfilmsId.value,
        slot: slot.value,
        station: 1,
        taskStateList: '',
        beginDate: (timeRange.value && timeRange.value[0]) || '',
        endDate: (timeRange.value && timeRange.value[1]) || '',
    })
      if (response.code == 200) {
        ElMessage.success(response.message);
        tableDatax.value = response.data.records;
      } else {
        ElMessage.error(response.message);
    }
}
catch (error) {
    console.error(error);
  }
}
// 格式化时间戳为年月日时间字符串的函数
function formatTimestamp(timestamp) {
  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'); // 补零（如果需要显示时间）
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
// 格式化后端时间并计算一周前的时间
const defaultTime = ref<[Date, Date]>([new Date(), new Date()]);
function parseAndSetTime() {
  const backendTime = new Date(getglobalDate);
  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))
}
function getStatusTypeb(taskState: number) {  
  switch (taskState) {  
    case 0:
      return 'primary';  
    case 1: 
      return 'success';  
    case 2: 
      return 'success';  
  }  
}
function getStatusTextb(taskState: number) {
  switch (taskState) {
    case 0:  
      return t('searchOrder.empty');
    case 1:  
      return t('film.execution');
    case 2:  
      return t('searchOrder.endtask');
  }  
}
function getStatusTypea(taskRunning: number) {  
  switch (taskRunning) {  
    case 0: 
      return 'primary';  
    case 1: 
      return 'success';  
  }  
}  
function getStatusTexta(taskRunning: number) {
  switch (taskRunning) {
    case 0:  
      return t('basicData.untask');
    case 1:  
    return t('basicData.up');
  }  
}
const optionsa = [
  {
    value: 0,
    label: t('searchOrder.empty'),
  },
  {
    value: 1,
    label: t('film.execution'),
  },
  {
    value: 2,
    label: t('searchOrder.endtask'),
  }
]
onMounted(() => {
  parseAndSetTime();
  historical(1);
});
  </script>
  <style scoped>  
  </style>

 UI-Project/src/views/Returns/upreturns.vue

@@ -16,6 +16,7 @@
const blind = ref(false)
const blinda = ref(false)
const blindb = ref(false)
const blindbd = ref(false)
const ReportData = ref(true);
const canSelectProjecta = ref(true);
const canSelectProjectb = ref(true);
@@ -28,6 +29,8 @@
const tableDatab = ref<any[]>([]);
const stationInfos = reactive({});
const buttonEnabledStatus = ref({});
const globalDate = inject('globalDate');
import { inject } from 'vue';
const tableData = ref([])
const titleSelectJson = ref({
  engineerId: [],
@@ -422,6 +425,12 @@
  } catch (error) {
  }
};
// 历史任务
const iframeUrl = ref('');
const handlehistorical = (row) => {
  blindbd.value = true;
  iframeUrl.value = `${window.location.origin}/#/Returns/upreturnhistory`;
};
function getStatusType2(filmRemove) {
  switch (filmRemove) {
    case 0:
@@ -466,6 +475,7 @@
    <el-button :disabled="!canSelectProjectb" style="margin-top: 5px;margin-left: 20px;" type="success" @click="handleBind">{{ $t('basicData.startloading') }}</el-button>
    <el-button :disabled="!canSelectProjectc" style="margin-top: 5px;margin-left: 20px;"  id="searchButton" type="warning" @click="handleBinda">{{ $t('basicData.stop') }}</el-button>
    <el-button :disabled="!canSelectProjectc" style="margin-top: 5px;margin-left: 20px;" id="searchButton" type="danger" @click="deleteTask">{{ $t('searchOrder.deleteTask') }}</el-button>
    <el-button style="margin-top: 5px;margin-left: 20px;" id="searchButton" type="info" @click="handlehistorical">{{ $t('searchOrder.historicaltasks') }}</el-button>
    <el-select disabled v-model="selectValuesa[1]" clearable :placeholder="$t('Mounting.oneloadingline')"
               style="margin-top: 5px;margin-left: 20px;">
      <el-option :label="$t('Mounting.all')" value="0"></el-option>
@@ -628,6 +638,17 @@
      </div>
    </template>
  </el-dialog>
    <!-- 历史任务 -->
<el-dialog v-model="blindbd" top="10vh" width="90%">
     <iframe 
     :src="iframeUrl" 
     marginwidth="2000px"
     marginheight="2000px"
     width="100%" 
     height="700px" 
     frameborder="0"
     ></iframe>
  </el-dialog>
  </div>
</template>
<style scoped>

 UI-Project/src/views/StockBasicData/stockBasicData.vue

@@ -11,6 +11,7 @@
const {t} = useI18n()
let language = ref(localStorage.getItem('lang') || 'zh')
const tableData = ref([])
const blindb = ref(false)
const slot = ref('')
const requestData = {
  line: 2001
@@ -107,6 +108,12 @@
const handleMessage = (data) => {
  tableData.value = data.edgTasks[0]
};
// 历史任务
const iframeUrl = ref('');
const handlehistorical = (row) => {
  blindb.value = true;
  iframeUrl.value = `${window.location.origin}/#/StockBasicData/stockhistory`;
};
onMounted(() => {
  socket = initializeWebSocket(socketUrl, handleMessage);
});
@@ -145,6 +152,10 @@
    <div>
      <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;" v-loading="loading">
        <div style="display: flex;">
        <el-button style="margin-left: 20px;" id="searchButton" type="success" @click="handlehistorical">{{
          $t('searchOrder.historicaltasks')
        }}
      </el-button>
        <el-select v-model="selectValuesa[0]" filterable :placeholder="$t('workOrder.cway')" clearable
                   style="margin-left: 20px;margin-bottom: 10px;">
          <el-option :label="$t('workOrder.edgingone')" value="930"></el-option>
@@ -200,6 +211,17 @@
      </div>
      </el-card>
    </div>
  <!-- 历史任务 -->
<el-dialog v-model="blindb" top="10vh" width="90%">
     <iframe 
     :src="iframeUrl" 
     marginwidth="2000px"
     marginheight="2000px"
     width="100%" 
     height="700px" 
     frameborder="0"
     ></iframe>
  </el-dialog>
  </div>
</template>
<style scoped>

 UI-Project/src/views/StockBasicData/stockhistory.vue

New file
@@ -0,0 +1,276 @@
<template>  
    <div>  
  <div style="display: flex;width: 1770px;">
    <el-input v-model="glassId" clearable style="margin-left: 10px;margin-bottom: 10px;width: 200px;" :placeholder="$t('searchOrder.inglassID')" />
    <el-select 
            :placeholder="$t('searchOrder.taskstatus')"
             clearable
             style="width: 270px;margin-left: 10px;"  
             v-model="taskState">
               <el-option
                v-for="item in optionsa"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
          </el-select>
          <el-select 
            :placeholder="$t('film.enabletype')"
             clearable
             style="width: 270px;margin-left: 10px;"  
             v-model="taskType">
               <el-option
                v-for="item in optionsb"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
          </el-select>
            <el-date-picker v-model="timeRange" type="datetimerange" range-separator="至" :start-placeholder="$t('reportmanage.starttime')" 
             style="margin-left: 15px;" value-format = "YYYY-MM-DD hh:mm:ss"
              :end-placeholder="$t('reportmanage.endtime')">
            </el-date-picker>
          <el-button type="primary" style="margin-left: 10px;margin-bottom: 10px;" @click="sethistorical()">{{$t('reportmanage.inquire')}}</el-button>
     </div>
        <el-table ref="table" style="margin-top: 20px;height: 580px;width: 1770px;" :data="tableDatax" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
      <el-table-column prop="glassIdIn" align="center" :label="$t('searchOrder.glassID')" min-width="80" />
          <el-table-column
            align="center"
            :label="$t('film.taskstatus')"
            min-width="80"
            prop="taskState"
          >
          <template #default="scope">  
        <el-tag :type="getStatusTypeb(scope.row.taskState)">  
          {{ getStatusTextb(scope.row.taskState) }}  
        </el-tag>  
      </template> 
          </el-table-column>
          <el-table-column
            align="center"
            :label="$t('film.enabletype')"
            min-width="80"
            prop="taskType"
          >
          <template #default="scope">  
        <el-tag :type="getStatusTypea(scope.row.taskType)">  
          {{ getStatusTexta(scope.row.taskType) }}  
        </el-tag>  
      </template> 
          </el-table-column>
          <el-table-column prop="createTime" align="center" :label="$t('reportmanage.starttime')" min-width="100" />
          <el-table-column prop="updateTime" align="center" :label="$t('reportmanage.endtime')" min-width="100" />
        </el-table>
  <div style="margin-top: 20px;margin-left: 40%;">
        <el-pagination
          v-model:current-page="currentPage2"
          :page-size="pageSize"
          :size="large"
          :disabled="disabled"
          layout="prev, pager, next, jumper"
          :total="totalRecords"
          @current-change="handlePageChange2"
          style="margin-top: 10px;"
      />
    </div>
  </div>
  </template>  
<script lang="ts" setup>
import {useI18n} from 'vue-i18n'
import {useRouter} from "vue-router"
import request from "@/utils/request"
import {host, WebSocketHost} from '@/utils/constants'
import {onBeforeUnmount, onMounted, onUnmounted, reactive, ref} from "vue";
import {closeWebSocket, initializeWebSocket} from '@/utils/WebSocketService';
import {ElMessage, ElMessageBox} from 'element-plus'
const {t} = useI18n()
let language = ref(localStorage.getItem('lang') || 'zh')
import { inject } from 'vue';
const globalDate = inject('globalDate');
const router = useRouter()
const timeRange = ref([])
const selectValuesa = reactive([]);
const tableDatax = ref([])
const currentPage2 = ref(1)
const totalRecords = ref(0)
const glassId = ref('');
const startSlot = ref('');
const targetSlot = ref('');
const taskState = ref('');
const taskType = ref('');
let getglobalDate = window.localStorage.getItem('getglobalDate')
const historical = async (page) => {
  try {
  let startTime = window.localStorage.getItem('startTime')
      const response = await request.post("/cacheGlass/edgStorageDeviceTaskHistory", {
        deviceId: 2,
        pageNo: 1,
        pageSize: 20,
        glassId: glassId.value,
        taskState: '',
        taskType: '',
        startTime: startTime,
        endTime: getglobalDate
    })
      if (response.code == 200) {
        ElMessage.success(response.message);
        tableDatax.value = response.data.records;
        console.log(response.data.pages);
        totalRecords.value = response.data.total/2 || 0
      } else {
        ElMessage.error(response.message);
    }
}
catch (error) {
    console.error(error);
  }
}
const handlePageChange2 = (newPage) => {
  currentPage2.value = newPage;
  console.log(currentPage2.value);
  window.localStorage.setItem('pagenumber', currentPage2.value)
  historicala(currentPage2.value);
};
const historicala = async (page) => {
  try { 
  let page = window.localStorage.getItem('pagenumber')
  let startTime = window.localStorage.getItem('startTime')
      const response = await request.post("/cacheGlass/edgStorageDeviceTaskHistory", {
        deviceId: 2,
        pageNo: page,
        pageSize: 20,
        glassId: glassId.value,
        taskState: '',
        taskType: '',
        startTime: startTime,
        endTime: getglobalDate
    })
      if (response.code == 200) {
        ElMessage.success(response.message);
        tableDatax.value = response.data.records;
        console.log(response.data.pages);
        
        totalRecords.value = response.data.total/2 || 0
      } else {
        ElMessage.error(response.message);
    }
}
catch (error) {
    console.error(error);
  }
}
// 历史查询点击
const sethistorical = async () => {
  try { 
  let startTime = window.localStorage.getItem('startTime')
  let page = window.localStorage.getItem('pagenumber')
  console.log(page);
  const response = await request.post("/cacheGlass/edgStorageDeviceTaskHistory", {
        deviceId: 2,
        pageNo: page,
        pageSize: 20,
        glassId: glassId.value,
        taskState: taskState.value,
        taskType: taskType.value,
      startTime: (timeRange.value && timeRange.value[0]) || '',
      endTime: (timeRange.value && timeRange.value[1]) || '',
    })
      if (response.code == 200) {
        ElMessage.success(response.message);
        tableDatax.value = response.data.records;
      } else {
        ElMessage.error(response.message);
    }
}
catch (error) {
    console.error(error);
  }
}
// 格式化时间戳为年月日时间字符串的函数
function formatTimestamp(timestamp) {
  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'); // 补零（如果需要显示时间）
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
// 格式化后端时间并计算一周前的时间
const defaultTime = ref<[Date, Date]>([new Date(), new Date()]);
function parseAndSetTime() {
  const backendTime = new Date(getglobalDate);
  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))
}
function getStatusTypeb(taskState: number) {  
  switch (taskState) {  
    case 0:
      return 'primary';  
    case 1: 
      return 'success';  
  }  
}
function getStatusTextb(taskState: number) {
  switch (taskState) {
    case 0:  
      return t('searchOrder.empty');
    case 1:  
      return t('searchOrder.endtask');
  }  
}
function getStatusTypea(taskType: number) {  
  switch (taskType) {  
    case 1: 
      return 'primary';  
    case 2: 
      return 'success';  
    case 3:
      return 'warning';  
  }  
}  
function getStatusTexta(taskType: number) {
  switch (taskType) {
    case 1:  
      return t('sorter.advancetask');
    case 2:  
    return t('sorter.outputtasks');
    case 3:  
    return t('sorter.straighttasks');
  }  
}
const optionsa = [
  {
    value: 0,
    label: t('searchOrder.empty'),
  },
  {
    value: 1,
    label: t('searchOrder.endtask'),
  }
]
const optionsb = [
  {
    value: 1,
    label: t('sorter.advancetask'),
  },
  {
    value: 2,
    label: t('sorter.outputtasks'),
  },
  {
    value: 3,
    label: t('sorter.straighttasks'),
  }
]
onMounted(() => {
  parseAndSetTime();
  historical(1);
});
  </script>
  <style scoped>  
  </style>