<template >
|
<!-- <div style="width:2650px;height:1600px" class="gradient"> -->
|
<div style="width:100%;height:100%" class="gradient">
|
<el-row>
|
<el-col :span="6">
|
<div style="display: flex;justify-content: flex-start;margin-top:43px;padding-left:15px">
|
<span ref="dateBtn" style="font-size:15px;color:#ffffff">
|
退出登录
|
</span>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div style="display: flex;justify-content:center;">
|
<span class="milky" style="font-size:40px;margin-bottom:10px;margin-top:20px;">
|
提板机WCS控制系统
|
</span>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div style="display: flex;justify-content: flex-end;margin-top:48px;padding-right:10px">
|
<span ref="dateBtn" style="font-size:15px;color:#ffffff">
|
2023.04.14 10:28:34
|
</span>
|
</div>
|
</el-col>
|
</el-row>
|
|
<el-row style="display: flex;justify-content: space-around;">
|
<el-col :span="15" style="margin-top:15px">
|
|
<el-tabs v-model="taskActiveName" @tab-click="handleClick" type="border-card" style="height:620px;">
|
<el-tab-pane label="待处理任务" name="currentTask">
|
<el-table
|
:data="currentTaskData"
|
style="width: 100%;font-size:15px;height:550px;overflow: auto;"
|
:row-class-name="tableRowClassName">
|
<el-table-column
|
prop="no"
|
label="序号"
|
width="80">
|
</el-table-column>
|
<el-table-column
|
prop="name"
|
label="槽名"
|
width="120">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="坐标"
|
width="120">
|
</el-table-column>
|
<el-table-column
|
prop="why"
|
label="异常原因"
|
width="300">
|
</el-table-column>
|
<el-table-column label="操作" width="240">
|
<template #default="scope">
|
<el-button
|
size="mini"
|
type="primary"
|
@click="handleEdit(scope.$index, scope.row)" v-if="scope.row.status == 1">半路径处理</el-button>
|
|
<el-button
|
size="mini"
|
type="primary"
|
@click="handleDelete(scope.$index, scope.row)" v-if="scope.row.status == 1">全路径处理</el-button>
|
|
<el-button
|
size="mini"
|
type="danger"
|
@click="handleEdit(scope.$index, scope.row)" v-if="scope.row.status == 0">删除任务</el-button>
|
|
<el-button
|
size="mini"
|
type="danger"
|
@click="handleDelete(scope.$index, scope.row)" v-if="scope.row.status == 0">手动完成</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="历史历史" name="historyTask">
|
<el-table
|
:data="historyTaskData"
|
style="width: 100%;font-size:15px;height:550px;overflow: auto;"
|
:row-class-name="tableRowClassName">
|
<el-table-column
|
prop="no"
|
label="序号"
|
width="80">
|
</el-table-column>
|
<el-table-column
|
prop="name"
|
label="槽名"
|
width="120">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="坐标"
|
width="120">
|
</el-table-column>
|
<el-table-column
|
prop="why"
|
label="异常原因"
|
width="300">
|
</el-table-column>
|
<el-table-column
|
prop="dealStyle"
|
label="处理方式"
|
width="200">
|
</el-table-column>
|
</el-table>
|
</el-tab-pane>
|
</el-tabs>
|
</el-col>
|
|
<el-col :span="8" style="margin-top:15px">
|
|
<el-tabs v-model="deviceActiveName" @tab-click="handleClick" type="border-card" style="height:620px;">
|
<el-tab-pane label="子母车运行状态" name="deviceStatus">
|
<el-row :gutter="20" style="height:260px;">
|
|
<el-col :span="24" >
|
<div style="background: #f5f5f5;height:260px;padding:15px;font-size:15px">母车状态：
|
<div style="background: #dddddd;height:0.2px;margin-top:3px"></div>
|
<div style="display: flex;justify-content: space-between;">
|
<div style="margin-top:15px">
|
运行状态
|
</div>
|
<div style="margin-top:15px">
|
前往目的坐标
|
</div>
|
</div>
|
|
<div style="display: flex;justify-content: space-between;">
|
<div style="margin-top:15px">
|
当前坐标
|
</div>
|
<div style="margin-top:15px">
|
x=123.53,y=564.25
|
</div>
|
</div>
|
|
<div style="display: flex;justify-content: space-between;">
|
<div style="margin-top:15px">
|
目的坐标
|
</div>
|
<div style="margin-top:15px">
|
x=653.59,y=314.45
|
</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20" style="height:260px;margin-top:15px">
|
<el-col :span="24">
|
<div style="background: #f5f5f5;height:270px;padding:15px;font-size:15px">子车状态：
|
<div style="background: #dddddd;height:0.2px;margin-top:3px"></div>
|
<div style="display: flex;justify-content: space-between;">
|
<div style="margin-top:15px">
|
运行状态
|
</div>
|
<div style="margin-top:15px">
|
前往目的坐标
|
</div>
|
</div>
|
|
<div style="display: flex;justify-content: space-between;">
|
<div style="margin-top:15px">
|
当前坐标
|
</div>
|
<div style="margin-top:15px">
|
x=123.53,y=564.25
|
</div>
|
</div>
|
|
<div style="display: flex;justify-content: space-between;">
|
<div style="margin-top:15px">
|
目的坐标
|
</div>
|
<div style="margin-top:15px">
|
x=653.59,y=314.45
|
</div>
|
</div>
|
</div>
|
</el-col>
|
|
</el-row>
|
</el-tab-pane>
|
|
<el-tab-pane label="子母车参数设置" name="deviceSetting">
|
<el-row :gutter="20" style="height:260px;">
|
|
<el-col :span="24" >
|
<div style="background: #f5f5f5;height:260px;padding:15px;font-size:15px">
|
<div style="display: flex;justify-content: space-between;">
|
<div style="padding:0px;">母车参数：</div>
|
<el-button type="primary" size="mini">设置参数</el-button>
|
</div>
|
|
<div style="background: #dddddd;height:0.2px;margin-top:6px"></div>
|
<div style="display: flex;justify-content: space-between;">
|
<div style="padding-top:15px">
|
运行速度
|
</div>
|
<!-- <el-input v-model="input" placeholder="88cm/s" style="max-width:100px;margin-top:5px"></el-input> -->
|
<el-select v-model="fatherCarSpeedValue" placeholder="请选择" style="margin-top:10px;width:120px;height:50px">
|
<el-option
|
class="select_item"
|
v-for="item in fatherCarSpeedOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</div>
|
|
<div style="display: flex;justify-content: space-between;">
|
<div style="margin-top:0px">
|
电机转速
|
</div>
|
<!-- <div style="margin-top:15px">
|
x=123.53,y=564.25
|
</div> -->
|
</div>
|
|
<div style="display: flex;justify-content: space-between;">
|
<div style="margin-top:15px">
|
超时报警
|
</div>
|
<!-- <div style="margin-top:15px">
|
x=653.59,y=314.45
|
</div> -->
|
</div>
|
</div>
|
</el-col>
|
|
|
</el-row>
|
|
<el-row :gutter="20" style="height:260px;margin-top:15px">
|
<el-col :span="24">
|
<div style="background: #f5f5f5;height:270px;padding:15px;font-size:15px">
|
<div style="display: flex;justify-content: space-between;">
|
<div style="padding:0px;">子车参数：</div>
|
<el-button type="primary" size="mini">设置参数</el-button>
|
</div>
|
<div style="background: #dddddd;height:0.2px;margin-top:6px"></div>
|
<div style="display: flex;justify-content: space-between;">
|
<div style="margin-top:15px">
|
运行速度
|
</div>
|
<!-- <el-input v-model="input" placeholder="88cm/s" style="max-width:100px;margin-top:5px"></el-input> -->
|
<el-select v-model="fatherCarSpeedValue" placeholder="请选择" style="margin-top:10px;width:120px">
|
<el-option
|
v-for="item in fatherCarSpeedOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</div>
|
|
<div style="display: flex;justify-content: space-between;">
|
<div style="padding-top:15px">
|
提板速度
|
</div>
|
<el-select v-model="fatherCarSpeedValue" placeholder="请选择" style="margin-top:10px;width:120px">
|
<el-option
|
v-for="item in fatherCarSpeedOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</div>
|
|
<div style="display: flex;justify-content: space-between;">
|
<div style="margin-top:15px">
|
提板抓力
|
</div>
|
<!-- <div style="margin-top:15px">
|
x=653.59,y=314.45
|
</div> -->
|
</div>
|
|
<div style="display: flex;justify-content: space-between;">
|
<div style="margin-top:15px">
|
超时报警
|
</div>
|
<!-- <div style="margin-top:15px">
|
x=653.59,y=314.45
|
</div> -->
|
</div>
|
</div>
|
</el-col>
|
|
</el-row>
|
</el-tab-pane>
|
</el-tabs>
|
|
</el-col>
|
</el-row>
|
|
|
|
</div>
|
</template>
|
|
|
<script>
|
|
import drawMixin from "./drawMixin";
|
|
export default {
|
|
mixins: [drawMixin],
|
|
data() {
|
return {
|
taskActiveName: 'currentTask',
|
deviceActiveName:'deviceStatus',
|
|
currentTaskData: [{
|
no: '1',
|
name: '南槽1',
|
address: '120,142',
|
why:'极板损坏1',
|
status:'0'
|
}, {
|
no: '2',
|
name: '南槽2',
|
address: '122,142',
|
why:'极板损坏2',
|
status:'1'
|
}],
|
|
historyTaskData: [{
|
no: '1',
|
name: '南槽1',
|
address: '120,142',
|
why:'极板损坏1',
|
dealStyle:'全路径处理'
|
}, {
|
no: '2',
|
name: '南槽2',
|
address: '122,142',
|
why:'极板损坏2',
|
dealStyle:'半路径处理'
|
},{
|
no: '3',
|
name: '南槽3',
|
address: '120,142',
|
why:'极板损坏3',
|
dealStyle:'半路径处理'
|
}, {
|
no: '4',
|
name: '南槽4',
|
address: '122,142',
|
why:'极板损坏4',
|
dealStyle:'半路径处理'
|
}, {
|
no: '2',
|
name: '南槽2',
|
address: '122,142',
|
why:'极板损坏2',
|
dealStyle:'半路径处理'
|
},{
|
no: '3',
|
name: '南槽3',
|
address: '120,142',
|
why:'极板损坏3',
|
dealStyle:'半路径处理'
|
}, {
|
no: '4',
|
name: '南槽4',
|
address: '122,142',
|
why:'极板损坏4',
|
dealStyle:'半路径处理'
|
}, {
|
no: '2',
|
name: '南槽2',
|
address: '122,142',
|
why:'极板损坏2',
|
dealStyle:'半路径处理'
|
},{
|
no: '3',
|
name: '南槽3',
|
address: '120,142',
|
why:'极板损坏3',
|
dealStyle:'半路径处理'
|
}, {
|
no: '4',
|
name: '南槽4',
|
address: '122,142',
|
why:'极板损坏4',
|
dealStyle:'半路径处理'
|
}],
|
|
fatherCarSpeedOptions: [{
|
value: 'low',
|
label: '低速'
|
}, {
|
value: 'middle',
|
label: '中速'
|
}, {
|
value: 'fast',
|
label: '高速'
|
}],
|
fatherCarSpeedValue: '',
|
};
|
},
|
methods: {
|
handleClick(tab, event) {
|
console.log(tab, event);
|
}
|
}
|
};
|
</script>
|
|
|
<style scoped>
|
|
/* ::v-deep .el-input__inner{
|
height: 30px !important;
|
} */
|
|
/* >>> .el-tabs__nav .el-tabs__item{
|
font-size: 25px;
|
height:55px;
|
margin-top: 10px;
|
}
|
|
>>> .el-input__inner{
|
height: 50px;
|
}
|
|
.select_item{
|
height: 45px;
|
line-height: 35px;
|
font-size: 25px;
|
} */
|
|
.milky{
|
font-size: 80px; /*设置文字大小*/
|
color:#fbd044; /*设置文字颜色*/
|
text-shadow: 0 8px 10px #8c8c8c; /*设置文字阴影*/
|
font-weight: bolder; /*设置文字宽度*/
|
text-align: center; /*设置文字居中*/
|
|
}
|
|
|
.gradient {
|
/* 设置容器尺寸 - 原理1 */
|
width: 400px;
|
height: 400px;
|
/* 背景渐变色 - 原理2 */
|
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
|
/* 背景尺寸 - 原理3 */
|
background-size: 600% 600%;
|
/* 循环动画 - 原理4 */
|
/* animation: gradientBG 5s ease infinite; */
|
}
|
/* 动画，控制背景 background-position */
|
@keyframes gradientBG {
|
0% {
|
background-position: 0% 50%;
|
}
|
50% {
|
background-position: 100% 50%;
|
}
|
100% {
|
background-position: 0% 50%;
|
}
|
}
|
</style>
|
