<script lang="ts" setup>
|
import {Search} from "@element-plus/icons-vue";
|
import {reactive} from "vue";
|
import {useRouter} from "vue-router"
|
const router = useRouter()
|
import type { TableColumnCtx } from 'element-plus'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { useI18n } from 'vue-i18n'
|
import { WebSocketHost ,host} from '@/utils/constants'
|
import request from "@/utils/request"
|
import { initializeWebSocket, closeWebSocket } from '@/utils/WebSocketService';
|
import { ref, onMounted, onUnmounted, onBeforeUnmount } from "vue";
|
const tableDataa = ref([])
|
const tableDatab = ref([])
|
const { t } = useI18n()
|
const add = ref(false)
|
const dialogFormVisiblea = ref(false)
|
const dialogFormVisibleb = ref(false)
|
const dialogFormVisiblec = ref(false)
|
const timeRange = ref(["2022-01-01 00:00:00", "2025-01-01 00:00:00"])
|
const selectValuesa = reactive([]);
|
let webSocket: WebSocket | null = null;
|
const value = ref('')
|
const options = [
|
{
|
value: t('film.warehousing1'),
|
label: t('film.warehousing1'),
|
},
|
{
|
value: t('film.warehousing2'),
|
label: t('film.warehousing2'),
|
}
|
]
|
const report = ref({
|
enableType: '',
|
enableState: '',
|
});
|
onMounted(() => {
|
socket = initializeWebSocket(socketUrl, handleMessage);
|
});
|
onUnmounted(() => {
|
if (socket) {
|
closeWebSocket(socket);
|
}
|
});
|
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]
|
console.log(data.tasks[0]);
|
|
}
|
if(data.rawStationDetailsList !=null){
|
tableDatab.value = data.rawStationDetailsList[0]
|
}
|
};
|
// 删除
|
const opena = async(row) => {
|
try {
|
const confirmResult = await ElMessageBox.confirm(
|
t('film.dedelete'),
|
t('productStock.prompt'),
|
{
|
confirmButtonText: t('productStock.yes'),
|
cancelButtonText: t('productStock.cancel'),
|
type: 'warning',
|
}
|
);
|
if (confirmResult === 'confirm') {
|
const response = await request.post("/loadGlass/sys/user/deleteUser", [row.id])
|
if (response.code === 200) {
|
ElMessage.success(response.message);
|
} else {
|
ElMessage.error(response.msg);
|
}
|
}
|
} catch (error) {
|
console.error('发生错误:', error);
|
}
|
};
|
// 禁用
|
const openb = async(row) => {
|
try {
|
const confirmResult = await ElMessageBox.confirm(
|
t('film.dedisable'),
|
t('productStock.prompt'),
|
{
|
confirmButtonText: t('productStock.yes'),
|
cancelButtonText: t('productStock.cancel'),
|
type: 'warning',
|
}
|
);
|
if (confirmResult === 'confirm') {
|
const response = await request.post("/loadGlass/sys/user/deleteUser", [row.id])
|
if (response.code === 200) {
|
ElMessage.success(response.message);
|
} else {
|
ElMessage.error(response.msg);
|
}
|
}
|
} catch (error) {
|
console.error('发生错误:', error);
|
}
|
};
|
// 出库
|
const openc = async(row) => {
|
try {
|
const confirmResult = await ElMessageBox.confirm(
|
t('film.deoutbound'),
|
t('productStock.prompt'),
|
{
|
confirmButtonText: t('productStock.yes'),
|
cancelButtonText: t('productStock.cancel'),
|
type: 'warning',
|
}
|
);
|
if (confirmResult === 'confirm') {
|
const response = await request.post("/loadGlass/sys/user/deleteUser", [row.id])
|
if (response.code === 200) {
|
ElMessage.success(response.message);
|
} else {
|
ElMessage.error(response.msg);
|
}
|
}
|
} catch (error) {
|
console.error('发生错误:', error);
|
}
|
};
|
// 查询数据
|
const selectReportData = async () => {
|
let celllist=[]
|
let stateList=[]
|
if(selectValuesa[0]!=null&&selectValuesa[0]!='undefined'){
|
if(selectValuesa[0]!=""){
|
celllist=[selectValuesa[0]];
|
}
|
}
|
if(selectValuesa[1]!=null&&selectValuesa[1]!='undefined'){
|
if(selectValuesa[1]!=""){
|
stateList=[selectValuesa[1]];
|
}
|
}
|
const response = await request.post("/glassStorage/raw_glass_storage_task/selectRawglasstask", {
|
createTime: timeRange.value[0],
|
patternQuantity: timeRange.value[1],
|
enableType: stateList,
|
enableState: celllist
|
})
|
if (response.code === 200) {
|
tableDataa.value = response.data;
|
ElMessage.success(response.message);
|
}
|
else {
|
ElMessage.error(response.message);
|
}
|
};
|
// 是否禁用
|
const toggleEnableState = async (row: any) => {
|
if (!row.deviceId) {
|
ElMessage.error(t('basicData.updatanull'));
|
return;
|
}
|
const newState = row.enableState === 1 ? 0 : 1;
|
try {
|
// 发送请求到后端更新状态
|
const response = await request.post('/glassStorage/rawGlassStorageDetails/updateEnableState', { deviceId: row.deviceId, enableState: newState });
|
if (response.code === 200) {
|
ElMessage.success(response.message);
|
row.enableState = newState;
|
} else {
|
ElMessage.error(response.message);
|
}
|
} catch (error) {
|
ElMessage.error(t('basicData.glassnull'));
|
}
|
};
|
const handleEdit = (row) => {
|
dialogFormVisiblec.value = true;
|
};
|
function getStatusType1(enableType) {
|
switch (enableType) {
|
case 1:
|
return 'info';
|
case 2:
|
return 'warning';
|
case 3:
|
return 'success';
|
}
|
}
|
function getStatusText1(enableType) {
|
switch (enableType) {
|
case 1:
|
return t('film.stocke');//入库
|
case 2:
|
return t('film.outbound');//出库
|
case 3:
|
return t('film.dispatch');//调度
|
}
|
}
|
function getStatusType2(enableState) {
|
switch (enableState) {
|
case 1:
|
return 'info';
|
case 2:
|
return 'warning';
|
case 3:
|
return 'success';
|
}
|
}
|
function getStatusText2(enableState) {
|
switch (enableState) {
|
case 1:
|
return t('film.built');//新建
|
case 2:
|
return t('film.execution');//执行中
|
case 3:
|
return t('film.finish');//完成
|
}
|
}
|
onBeforeUnmount(() => {
|
closeWebSocket();
|
});
|
</script>
|
<template>
|
<div>
|
<div style="display: flex; flex-direction: row; align-items: center; margin-top: 20px;">
|
<el-button style="margin-left: 20px;" id="searchButton" type="success" @click="dialogFormVisiblea = true">{{ $t('film.mes') }}</el-button>
|
<el-button style="margin-left: 20px;" id="searchButton" type="success" @click="dialogFormVisibleb = true">{{ $t('film.warehousing') }}</el-button>
|
<el-date-picker style="margin-left: 10px;" v-model="timeRange" type="datetimerange"
|
format="YYYY/MM/DD HH:mm:ss"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
:start-placeholder="$t('film.starttime')"
|
: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-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-select>
|
<el-button type="primary" style="margin-left: 10px;" @click="selectReportData()">{{ $t('film.inquire') }}</el-button>
|
</div>
|
<el-card style="flex: 1;margin-left: 10px;margin-top: 20px;" v-loading="loading">
|
<div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;">
|
<el-table height="300" ref="table"
|
:data="tableDataa" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
|
<el-table-column prop="enableId" align="center" :label="$t('film.enableid')"/>
|
<el-table-column prop="originateSlot" 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
|
align="center"
|
:label="$t('film.enabletype')"
|
prop="enableType"
|
>
|
<template #default="scope">
|
<el-tag :type="getStatusType1(scope.row.enableType)">
|
{{ getStatusText1(scope.row.enableType) }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
:label="$t('film.enablestate')"
|
prop="enableState"
|
>
|
<template #default="scope">
|
<el-tag :type="getStatusType2(scope.row.enableState)">
|
{{ getStatusText2(scope.row.enableState) }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="createTime" align="center" :label="$t('film.createtime')" />
|
|
</el-table>
|
</div>
|
</el-card>
|
<div class="awatch">
|
<img src="../../assets/ypcc.png" alt="" style="width: 100%;height: 120%;margin-left: 10px;position: relative;margin-top: -20px;">
|
|
</div>
|
<el-dialog v-model="dialogFormVisiblea" top="5vh" width="85%" >
|
<el-table ref="table" style="margin-top: 20px;height: 700px;"
|
:data="tableDatab" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
|
<el-table-column prop="deviceId" fixed align="center" :label="$t('film.station')" min-width="80"/>
|
<el-table-column prop="patternWidth" align="center" :label="$t('film.width')" min-width="80" />
|
<el-table-column prop="patternHeight" align="center" :label="$t('film.height')" min-width="80" />
|
<el-table-column prop="patternThickness" align="center" :label="$t('film.thickness')" min-width="80" />
|
<el-table-column prop="filmsId" align="center" :label="$t('film.films')" min-width="80" />
|
<el-table-column prop="remainQuantity" align="center" :label="$t('film.remainquantity')" min-width="120" />
|
<el-table-column
|
align="center"
|
:label="$t('film.enablestate')"
|
min-width="80"
|
prop="enablestate"
|
>
|
<template #default="scope">
|
<el-tag
|
:type="scope.row.enableState == 1 ? 'success' : 'danger'"
|
@click="toggleEnableState(scope.row)"
|
>
|
{{ scope.row.enableState == 1 ? $t('film.start') : $t('film.disable')}}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column fixed="right" :label="$t('film.operate')" align="center" width="270">
|
<template #default="scope">
|
<el-button size="mini" type="text" plain @click="handleEdit(scope.row)">{{ $t('film.exit') }}</el-button>
|
<el-button size="mini" type="text" plain @click="opena(scope.row)">{{ $t('film.delete') }}</el-button>
|
<el-button size="mini" type="text" plain @click="openc(scope.row)">{{ $t('film.outbound') }}</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-dialog>
|
<el-dialog v-model="dialogFormVisibleb" top="15vh" width="60%">
|
<div style="margin-top: 10px;margin-bottom: 10px;">
|
<el-form size="mini" label-width="150px">
|
<el-form label-width="70vm" label-position="right">
|
<el-row >
|
<el-col :span="6">
|
<div id="dt" style="font-size: 15px;">
|
<div>
|
<el-form-item :label="$t('film.widtha')" :required="true" style="width: 17vw;">
|
<el-input :placeholder="$t('film.inwidth')" v-model="number" autocomplete="off" />
|
</el-form-item>
|
</div></div>
|
</el-col>
|
<el-col :span="9">
|
<div id="dta" style="font-size: 15px;">
|
<div>
|
<el-form-item :label="$t('film.heighta')" :required="true" style="width: 17vw;">
|
<el-input :placeholder="$t('film.inheight')" v-model="number" 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('film.thicknessa')" :required="true" style="width: 17vw;">
|
<el-input :placeholder="$t('film.inthickness')" v-model="number" autocomplete="off" />
|
</el-form-item></div></div>
|
</el-col>
|
<el-col :span="9">
|
<div id="dta" style="font-size: 15px;">
|
<div>
|
<el-form-item :label="$t('film.filmsa')" :required="true" style="width: 17vw;">
|
<el-input :placeholder="$t('film.infilms')" v-model="number" 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('film.quantitya')" :required="true" style="width: 17vw;">
|
<el-input :placeholder="$t('film.inquantity')" v-model="number" autocomplete="off" />
|
</el-form-item></div></div>
|
</el-col>
|
<el-col :span="9">
|
<div id="dta" style="font-size: 15px;">
|
<div>
|
<el-form-item :label="$t('film.inwarehousing')" :required="true" style="width: 17vw">
|
<el-select :placeholder="$t('film.selectwarehousing')">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</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="dialogFormVisibleb = false">{{ $t('basicData.cancel') }}</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
<el-dialog v-model="dialogFormVisiblec" top="21vh" width="40%">
|
<div style="margin-left: 50px;margin-top: 10px;margin-bottom: 10px;">
|
<el-form size="mini" label-width="100px">
|
<el-form label-width="210px" label-position="right">
|
<el-form-item :label="$t('film.thickremainquantity')" :required="true" style="width: 25vw">
|
<el-input v-model="workstationId" autocomplete="off" />
|
</el-form-item>
|
</el-form>
|
</el-form>
|
</div>
|
<template #footer>
|
<div id="dialog-footer">
|
<el-button type="primary" @click="handleConfirm">
|
{{ $t('reportWork.sure') }}
|
</el-button>
|
<el-button @click="dialogFormVisiblec = false">{{ $t('reportWork.cancel') }}</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<style scoped>
|
|
#dt { display:block; float:left;line-height: 20px;margin-left: 100px;}
|
#dta { display:block; float:left;line-height: 20px;margin-left: 80%;}
|
.awatch{
|
height: 400px;
|
width: 1500px;
|
max-width: 100%;
|
}
|
#dialog-footer {
|
text-align: center;
|
margin-top: -15px;
|
}
|
</style>
|
