| | |
| | | import {ElMessage, ElMessageBox} from 'element-plus' |
| | | import {useI18n} from 'vue-i18n' |
| | | const router = useRouter() |
| | | const adda = ref(false) |
| | | const {t} = useI18n() |
| | | let language = ref(localStorage.getItem('lang') || 'zh') |
| | | const tableData = ref([]) |
| | | const slot = ref('') |
| | | const requestData = { |
| | | line: 2001 |
| | | }; |
| | | const timeRange = ref([]) |
| | | const selectValuesa = reactive([]); |
| | | let socket = null; |
| | | const socketUrl = `ws://${WebSocketHost}:${host}/api/cacheGlass/api/talk/edgTasks`; |
| | | const handleMessage = (data) => { |
| | | tableData.value = data.edgTasks[0] |
| | | }; |
| | | onMounted(() => { |
| | | socket = initializeWebSocket(socketUrl, handleMessage); |
| | | }); |
| | | onUnmounted(() => { |
| | | if (socket) { |
| | | closeWebSocket(socket); |
| | | } |
| | | }); |
| | | onBeforeUnmount(() => { |
| | | closeWebSocket(); |
| | | }); |
| | | // let socket = null; |
| | | // const socketUrl = `ws://${WebSocketHost}:${host}/api/cacheGlass/api/talk/edgTasks`; |
| | | // const handleMessage = (data) => { |
| | | // tableData.value = data.edgTasks[0] |
| | | // }; |
| | | // onMounted(() => { |
| | | // socket = initializeWebSocket(socketUrl, handleMessage); |
| | | // }); |
| | | // onUnmounted(() => { |
| | | // if (socket) { |
| | | // closeWebSocket(socket); |
| | | // } |
| | | // }); |
| | | // onBeforeUnmount(() => { |
| | | // closeWebSocket(); |
| | | // }); |
| | | </script> |
| | | <template> |
| | | <div style="height: 500px;"> |
| | | <div> |
| | | <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;" > |
| | | <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;"> |
| | | <el-table height="750" ref="table" |
| | | @selection-change="handleSelectionChange" |
| | | :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"> |
| | | <el-table-column prop="glassId" align="center" :label="$t('workOrder.glassID')" min-width="180" /> |
| | | <el-table-column prop="width" align="center" :label="$t('workOrder.width')" min-width="120" /> |
| | | <el-table-column prop="height" align="center" :label="$t('workOrder.height')" min-width="80" /> |
| | | <el-table-column prop="thickness" align="center" :label="$t('workOrder.thickness')" min-width="120" /> |
| | | <el-table-column prop="glassType" align="center" :label="$t('workOrder.glasstype')" min-width="120" /> |
| | | <el-table-column prop="line" align="center" :label="$t('workOrder.line')" min-width="120" /> |
| | | <el-table-column fixed="right" :label="$t('workOrder.operate')" align="center" width="200"> |
| | | <template #default="scope"> |
| | | <el-button type="text" plain @click="open(scope.row)">{{ |
| | | $t('workOrder.breakage') |
| | | }} |
| | | </el-button> |
| | | <el-button type="text" plain @click="opena(scope.row)">{{ |
| | | $t('workOrder.takeout') |
| | | }} |
| | | </el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <div class="block text-center" m="t-4"> |
| | | <el-carousel height="550px"> |
| | | <!-- <el-carousel trigger="click" height="550px">//鼠标移入时页面不切换,鼠标移走时界面自动滚动 --> |
| | | <el-carousel-item v-for="item in 3" :key="item"> |
| | | <h3 class="small justify-center" text="2xl">{{ item }}</h3> |
| | | </el-carousel-item> |
| | | </el-carousel> |
| | | </div> |
| | | </div> |
| | | </el-card> |
| | | </div> |
| | | </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%;} |
| | | #dialog-footer{ |
| | | text-align: center; |
| | | margin-top: -15px; |
| | | .demonstration { |
| | | color: var(--el-text-color-secondary); |
| | | } |
| | | #message{ |
| | | |
| | | .el-carousel__item h3 { |
| | | color: #475669; |
| | | opacity: 0.75; |
| | | line-height: 550px; |
| | | margin: 0; |
| | | text-align: center; |
| | | align-items: center; |
| | | color: black; |
| | | width: 200px; |
| | | height: 100px; |
| | | background-color: #337ecc; |
| | | margin-left: 28%; |
| | | } |
| | | #awatch{ |
| | | height: 460px; |
| | | /* margin-top: -60px; */ |
| | | |
| | | .el-carousel__item:nth-child(2n) { |
| | | background-color: #99a9bf; |
| | | } |
| | | |
| | | .el-carousel__item:nth-child(2n + 1) { |
| | | background-color: #d3dce6; |
| | | } |
| | | </style> |