义乌上片后端接口及前端页面样式与调用

wangfei

2024-11-08 3c4b340b58d0d0bdbc3db74b5721586dd964f86c

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

@@ -10,137 +10,212 @@
const router = useRouter()
const {t} = useI18n()
const selectValuesa = reactive([]);
const selectedProjectNo = ref(''); // 当前选中的工程号  
const loadingline = ref(''); // 当前选中的上片线
const selectedProjectNo = ref('');
const stationCell = ref('1');
const filmRemove = ref('');
const dialogFormVisible = ref(false)
 
 
 
 
const blind = ref(false)
const blinda = ref(false)
const blindb = ref(false)
const add = ref(false)
const adda = ref(false)
const dialoglea = ref(false)
const tableDatax = ref([])
const user = ref('');
const projectNo = ref('');
const workstationId = ref('');
const id = ref('');
const patternHeight = ref('');
const patternWidth = ref('');
const filmsId = ref('');
const patternThickness = ref('');
const number = ref('');
const canSelectProject = ref(true);
const canStartLoading = ref(false);
const selectedValue = ref(''); // 当前选中的宽  
const selectedValuea = ref('');  
const selectedValueb = ref('');
const selectedValuec = ref(''); 
// const upstatus = ref('上片机手动状态：'); // 假设这个用于显示自动/手动状态  
const upstatus = ref(t('basicData.machineaa'));
const cuttingMachine = ref(''); // 假设这个用于存储后端返回的状态值（0或1）  
const cuttingMachineStatusColor = ref('#911005'); // 用于动态设置i标签的背景色 
const inKageWord = ref(0); // 用于存储要传递给接口的inKageWord值 
const options = ref<any[]>([]); // 下拉选项列表  
const ida = ref(null); 
const selectOptions = ref<Array<any>>([]); // 下拉选选项数组  
const selectOptionsa = ref<Array<any>>([]); // 下拉选选项数组  
const selectOptionsb = ref<Array<any>>([]); // 下拉选选项数组  
const selectOptionsc = ref<Array<any>>([]); // 下拉选选项数组  
  const tableDataa = ref([])
  const tableData = reactive([]);
const tableDataa = ref<any[]>([]);
const tableDatab = ref<any[]>([]);
const tableData = ref([])
// const tableData = reactive([]);
const titleSelectJson = ref({
  engineerId: [],
})
const handlezhiban = () => {
  dialoglea.value = true; // 打开绑定架子对话框
  dialoglea.value = true;
  fetchFlowCardId();
};
const selectproject = () => {
  dialogFormVisible.value = true;
  selectgong();
};
 
 
const markingMachineStatus = ref('#911005');
const cuttingMachineStatus = ref('#911005');
const confirmMarkingMachine = () => {
  markingMachineStatus.value = 'green';
};
const confirmCuttingMachine = () => {
  cuttingMachineStatus.value = 'green';
};
onMounted(() => {
  socket = initializeWebSocket(socketUrl, handleMessage);
});
const handleMessage = (data) => {

}
  onUnmounted(() => {
    if (socket) {
    closeWebSocket(socket);
    }
    });
//定义接收加载表头下拉数据
const titleSelectJson = ref({
  engineerId: [],
})
const fetchTableData = async () => {
  try {
    const response = await request.get("/loadGlass/up-patten-usage/prioritylist");
    if (response.code === 200) {
      tableData.splice(0, tableData.length, ...response.data);
      ElMessage.error(response.message);
    }
  } catch (error) {
    // 处理请求失败的情况
    // ElMessage.error('获取表格数据失败，请重试');
  }
};
let socket = null;
const socketUrl = `ws://${WebSocketHost}:${host}/api/loadGlass/api/talk/uploadGlass`;
// 定义消息处理函数，更新 receivedData 变量
 
const handleMessage = (data: any) => {
  tableDataa.value = data.list[0].slice(0, 2);
  tableDatab.value = data.list[0].slice(2, 4);
};
onBeforeUnmount(() => {
  closeWebSocket();
});
const selectgong = async () => {
const requestData = {
  state: 100
};
const selectgong = async (queryString: string) => {
  try {
    const response = await request.post('/loadGlass/engineering/engineering/selectTask')
    const response = await request.post('/loadGlass/optimizeProject/listByState', {
      ...requestData,
      query: queryString
    });
    if (response.code == 200) {
      titleSelectJson.value.engineerId = response.data;
    } else {
      ElMessage.error(response.message);
    }
  } catch (error) {
    // 处理错误
    console.error(error);
  }
};
//选择工程预览确认
const handlesure = async () => {
  try {
    const response = await request.post('/loadGlass/up-patten-usage/selectUpPattenUsage', {
      stationCell: 1,
      // engineerId: 'P24101602',
      engineerId: selectedProjectNo.value,
      filmRemove: filmRemove.value,
    })
    window.localStorage.setItem('engineeringId', selectedProjectNo.value)
    window.localStorage.setItem('filmRemove', filmRemove.value)
    if (response.code == 200) {
      ElMessage.success(response.message);
      tableData.value = response.data;
      dialogFormVisible.value = false;
      selectedProjectNo.value = ''
      filmRemove.value = ''
    } else {
      ElMessage.error(response.message);
    }
  } catch (error) {
    console.error(error);
  }
}
// 添加
const handleBindRack = (row) => {
  workstationId.value = row.workstationId; // 假设rackNumber是架号字段的属性名
  ida.value = row.id;
  add.value = true; // 打开绑定架子对话框
// 开始上片
const handleon = async () => {
  let filmRemove = window.localStorage.getItem('filmRemove')
  let engineeringId = window.localStorage.getItem('engineeringId')
  if (markingMachineStatus.value === 'green' && cuttingMachineStatus.value === 'green') {
    try {
      const response = await request.post('/loadGlass/engineering/engineering/changeTask', {
        stationCell: 1,
        filmRemove: filmRemove,
        // engineerId: 'P24101602',
        engineerId: engineeringId,
        state: 1,
      })
      if (response.code == 200) {
        ElMessage.success(response.message);
        blind.value = false;
      } else {
        ElMessage.error(response.message);
      }
    } catch (error) {
      console.error(error);
    }
  } else if (markingMachineStatus.value === '#911005' || cuttingMachineStatus.value === '#911005') {
    // 提示用户打标机未就绪
    ElMessage.warning(t('basicData.pausea'));
  }
}
// 暂停
const handleup = async () => {
  try {
    let engineeringId = window.localStorage.getItem('engineeringId')
    console.log(engineeringId);
    if (engineeringId !== '') {
      const response = await request.post('/loadGlass/engineering/engineering/pauseTask', {
        stationCell: 1,
        // engineerId: 'P24101602',
        engineeringId: engineeringId,
        state: 0,
      })
      if (response.code == 200) {
        ElMessage.success(response.message);
        blinda.value = false;
      } else {
        ElMessage.error(response.message);
      }
    } else {
      ElMessage({
        type: 'info',
        message: t('basicData.infonull'),
      })
    }
  } catch (error) {
    console.error(error);
  }
}

// 查询数据
const selectReportData = async () => {
  let stateList = []
  if (selectValuesa[1] != null && selectValuesa[1] != 'undefined') {
    if (selectValuesa[1] != "") {
      stateList = [selectValuesa[1]];
    }
  }
  const response = await request.post("/cacheVerticalGlass/damage/selectDamage", {
    taskState: stateList,
    taskType: 1
  })
  if (response.code === 200) {
    tableData.value = response.data;
    ElMessage.success(response.message);
  } else {
    ElMessage.error(response.message);
  }
};

function getStatusText(state: number) {
  switch (state) {
    case 0:
      return t('basicData.waiting');
    case 1:
      return t('basicData.up');
    case 2:
      return t('basicData.up');
    case 100:  
    return t('basicData.finish');
// 值班信息
const fetchFlowCardId = async () => {
  try {
    const response = await request.post('/loadGlass/work_assignment/selectWorkAssignment', {
      line: 2001,
      workingProcedure: '冷加工'
    })
    if (response.code == 200) {
      ElMessage.success(response.message);
      tableDatax.value = response.data;
    } else {
      ElMessage.error(response.message);
    }
  } catch (error) {
    console.error(error);
  }  
}  
function getStatusType(state: number) {  
  switch (state) {  
    case 0:
      return 'warning';  
    case 1: 
      return 'primary';  
    case 2: 
      return 'primary';  
    case 100:
      return 'success';  
  }  
}  
onMounted(fetchTableData);
// 开始上片
const handleBind = (row) => {
  blind.value = true; // 打开绑定架子对话框
  blind.value = true;
};
// 暂停
const handleBinda = (row) => {
  blinda.value = true;
};
// 停止任务
const handleBindb = (row) => {
  blindb.value = true; 
};
 

const toggleEnableState = async (row: any) => {  
  // 检查 id 是否为空  
  if (!row.id) {  
@@ -149,7 +224,6 @@
  }  
  const newState = row.state === 100 ? 0 : 100;  
  try {  
    // 发送请求到后端更新状态  
    const response = await request.post('/loadGlass/up-patten-usage/updateGlassState', { id: row.id, state: newState });  
    if (response.code === 200) {  
      ElMessage.success(response.message);  
@@ -158,7 +232,6 @@
      ElMessage.error(response.message);  
    }  
  } catch (error) {  
    // 处理请求错误  
    ElMessage.error(t('basicData.glassnull'));   
  }  
};
@@ -175,13 +248,13 @@
    <div style="margin-left: 70px;">{{ upstatus  }} </div>
    <i :style="{ marginTop: '2px', backgroundColor: cuttingMachineStatusColor, width: '18px', height: '18px', borderRadius: '50%', display: 'block' }"></i>  
    <el-button @click="confirmCutting" style="margin-left: 30px;margin-top: -3px;" >{{ $t('basicData.change') }}</el-button>
   
  </div>
    <el-button style="margin-top: 5px;margin-left: 15px;"  type="primary" @click="selectproject">{{ $t('Mounting.previewproject') }}</el-button>
    <el-button style="margin-top: 5px;margin-left: 20px;" type="success" @click="handleBind">{{ $t('basicData.startloading') }}</el-button>
    <el-button style="margin-top: 5px;margin-left: 20px;"  id="searchButton" type="warning" @click="handleBinda">{{ $t('basicData.stop') }}</el-button>
    <el-button style="margin-top: 5px;margin-left: 20px;" id="searchButton" type="info" @click="handlezhiban">{{ $t('searchOrder.dutyinformation') }}</el-button>
    <el-select v-model="selectValuesa[1]" clearable :placeholder="$t('Mounting.loadinglinea')" style="margin-top: 5px;margin-left: 20px;" >
    <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>
      <el-option :label="$t('Mounting.oneloadingline')" value="1"></el-option>
      <el-option :label="$t('Mounting.twoloadingline')" value="2"></el-option>
@@ -231,9 +304,10 @@
      </div>
    </el-card>
    <div style="display: flex;">
  <div style="width: 49%;float: left;">
      <div style="width: 49%;float: left;margin-left: 300px;">
    <div style="display: flex;">
        <img src="../../assets/shangpianji.png" alt="" style="max-width: 25%;max-height: 25%;margin-left: 10%;margin-top: 5%;">
          <img src="../../assets/shangpianji.png" alt=""
               style="max-width: 25%;max-height: 25%;margin-left: 10%;margin-top: 5%;">
        <el-table :data="tableDataa" border style="width: 75%;margin-top: 10%;margin-left: 2%;"
     :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"
        >
@@ -245,10 +319,10 @@
        </el-table>
    </div>
  </div>
    <div style="width: 48%;float: right;">
      <!-- <div style="width: 48%;float: right;">
      <div style="display: flex;">
        <img src="../../assets/shangpianji.png" alt="" style="max-width: 25%;max-height: 25%;margin-left: 10%;margin-top: 5%;">
        <el-table :data="tableDataa" border style="width: 75%;margin-top: 10%;margin-left: 2%;"
          <el-table :data="tableDatab" border style="width: 75%;margin-top: 10%;margin-left: 2%;"
     :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"
        >
          <el-table-column prop="workstationId" align="center" :label="$t('basicData.station')" min-width="60" />
@@ -258,12 +332,12 @@
          <el-table-column prop="number" align="center" :label="$t('basicData.quantity')" min-width="80" />
        </el-table>
    </div>
</div>
  </div> -->
</div>
  <el-dialog v-model="blind" top="30vh" width="25%" :title="$t('basicData.startfilm')">
    <template #footer>
      <div id="dialog-footer">
        <el-button type="primary" @click="handle">
        <el-button type="primary" @click="handleon">
          {{ $t('basicData.confirm') }}
        </el-button>
        <el-button @click="blind = false">{{ $t('basicData.cancel') }}</el-button>
@@ -277,29 +351,27 @@
          <el-table-column prop="line" fixed align="center" :label="$t('searchOrder.line')"/>
          <el-table-column prop="workProcesses" fixed align="center" :label="$t('searchOrder.process')" />
          <el-table-column prop="teamsGroupsName" align="center" :label="$t('searchOrder.team')">
        <template #default="{ row }">  
          <!-- <template #default="{ row }">
          <el-input v-model="row.teamsGroupsName" autocomplete="off" min-width="150"/>  
        </template>  
          </template>   -->
      </el-table-column>
          <el-table-column prop="deviceName" align="center" :label="$t('searchOrder.basic')">
            <template #default="{ row }">  
          <!-- <template #default="{ row }">
          <el-input v-model="row.deviceName" autocomplete="off" min-width="150"/>  
        </template>
      </template> -->
        </el-table-column>
        </el-table>
        <template #footer>
      <div id="dialog-footer">
        <el-button type="primary" @click="handleConfirm">
          {{ $t('searchOrder.add') }}
        </el-button>
        <el-button @click="dialoglea = false">{{ $t('searchOrder.cancel') }}</el-button>
        <el-button @click="dialoglea = false">{{ $t('large.close') }}</el-button>
      </div>
    </template>
</el-dialog>
  <el-dialog v-model="blinda" top="24vh" width="30%" :title="$t('basicData.whetherpause')">
    <div style="margin-left: 50px;margin-bottom: 10px;">
    <el-form-item :label="$t('Mounting.loadingline')" :required="true">
    <el-select v-model="loadingline" clearable :placeholder="$t('Mounting.inloadingline')" style="margin-left: 20px;" >
      <el-select disabled v-model="stationCell" clearable :placeholder="$t('Mounting.inloadingline')"
                 style="margin-left: 20px;">
      <el-option :label="$t('Mounting.all')" value="0"></el-option>
      <el-option :label="$t('Mounting.oneloadingline')" value="1"></el-option>
      <el-option :label="$t('Mounting.twoloadingline')" value="2"></el-option>
@@ -315,138 +387,11 @@
      </div>
    </template>
  </el-dialog>
    
  <el-dialog v-model="add" top="23vh" width="45%" :title="$t('basicData.addglass')" >
    <div style="margin-left: -50px;margin-top: 10px;margin-bottom: 10px;">
            <el-form  size="mini" label-width="150px">
      <el-form label-width="70px" label-position="right">
        <el-row style="margin-top: -15px;margin-bottom: -2px;">
          <el-col :span="6">
              <div id="dt" style="font-size: 15px;">
        <div>
              <el-form-item :label="$t('basicData.widtha')" :required="true" style="width: 14vw">
               <el-select  
                      v-model="selectedValue"  
                      filterable  
                      clearable  
                      :placeholder="$t('basicData.selectwidth')"
                      style="width: 220px"  
                      @input="handleInputChangea"  
                    >  
                 <el-option  
                    v-for="item in selectOptions"  
                    :key="item.id"  
                    :label="item.label"  
                    :value="item.value"  
                 />  
               </el-select>  
              </el-form-item>
              </div></div>
          </el-col>
          <el-col :span="9">
            <div id="dta" style="font-size: 15px;">
        <div>
          <el-form-item :label="$t('basicData.heighta')" :required="true" style="width: 14vw">
            <el-select  
                      v-model="selectedValuea"  
                      filterable  
                      clearable  
                      :placeholder="$t('basicData.selectheight')" 
                      style="width: 220px"  
                      @input="handleInputChangea"  
                    >  
                 <el-option  
                    v-for="item in selectOptionsa"  
                    :key="item.id"  
                    :label="item.label"  
                    :value="item.value"  
                 />  
               </el-select> 
              </el-form-item></div>
              </div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="6">
              <div id="dt" style="font-size: 15px;">
        <div>
              <el-form-item :label="$t('basicData.coatingtypesa')"  :required="true" style="width: 14vw;">
                <el-select  
                      v-model="selectedValueb"  
                      filterable  
                      clearable  
                      :placeholder="$t('basicData.selectcoatingtypes')"
                      style="width: 220px"  
                      @input="handleInputChangea"  
                    >  
                 <el-option  
                    v-for="item in selectOptionsb"  
                    :key="item.id"  
                    :label="item.label"  
                    :value="item.value"  
                 />  
               </el-select> 
              </el-form-item></div></div>
          </el-col>
          <el-col :span="9">
            <div id="dta" style="font-size: 15px;">
        <div>
              <el-form-item :label="$t('basicData.thicknessa')" :required="true" style="width: 14vw">
                <el-select  
                      v-model="selectedValuec"  
                      filterable  
                      clearable  
                      :placeholder="$t('basicData.selectthickness')"
                      style="width: 220px"  
                      @input="handleInputChangea"  
                    >  
                 <el-option  
                    v-for="item in selectOptionsc"  
                    :key="item.id"  
                    :label="item.label"  
                    :value="item.value"  
                 />  
               </el-select> 
                <!-- <el-input v-model="patternThickness" autocomplete="off" /> -->
              </el-form-item></div></div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="6">
              <div id="dt" style="font-size: 15px;">
        <div>
              <el-form-item :label="$t('basicData.quantitya')" :required="true" style="width: 14vw;">
                <el-input :placeholder="$t('basicData.selectquantity')" v-model="number" autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
        </el-row>
        </el-form>
            </el-form>
          </div>
    <template #footer>
      <div id="dialog-footer">
        <el-button type="primary" @click="handleConfirm">
          {{ $t('basicData.confirm') }}
        </el-button>
        <el-button @click="add = false">{{ $t('basicData.cancel') }}</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="adda" top="30vh" width="25%" :title="$t('basicData.deletemessage')">
    <template #footer>
      <div id="dialog-footer">
        <el-button type="primary" @click="handleConfirma">
          {{ $t('basicData.confirm') }}
        </el-button>
        <el-button @click="adda = false">{{ $t('basicData.cancel') }}</el-button>
      </div>
    </template>
  </el-dialog>
        </div>
  <el-dialog v-model="dialogFormVisible" top="24vh" width="50%"  >
  <el-dialog v-model="dialogFormVisible" top="24vh" width="70%">
    <div class="flex-container" style="margin-left: 50px;margin-bottom: 10px;">
    <el-form-item :label="$t('Mounting.loadingline')" :required="true">
    <el-select v-model="loadingline" clearable :placeholder="$t('Mounting.inloadingline')"  >
        <el-select disabled v-model="stationCell" clearable :placeholder="$t('Mounting.inloadingline')">
      <el-option :label="$t('Mounting.oneloadingline')" value="1"></el-option>
      <el-option :label="$t('Mounting.twoloadingline')" value="2"></el-option>
    </el-select>
@@ -463,21 +408,29 @@
          <el-option
              v-for="item in titleSelectJson['engineerId']"
              :key="item.id"
              :label="item.engineerId"
              :value="item.engineerId"
              :label="item.projectNo"
              :value="item.projectNo"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('Mounting.removalmethoda')" :required="true">
        <el-select v-model="filmRemove" clearable :placeholder="$t('Mounting.removalmethod')">
          <el-option :label="$t('Mounting.noremoval')" value="0"></el-option>
          <el-option :label="$t('Mounting.coarselyground')" value="1"></el-option>
          <el-option :label="$t('Mounting.finegrinding')" value="2"></el-option>
    </el-select>  
              </el-form-item>
          </div>
    <template #footer>
      <div id="dialog-footer">
        <el-button type="primary" @click="handleup">
        <el-button type="primary" @click="handlesure">
          {{ $t('basicData.confirm') }}
        </el-button>
        <el-button @click="dialogFormVisible = false">{{ $t('basicData.cancel') }}</el-button>
      </div>
    </template>
  </el-dialog>

</template>
 
<style scoped>