|
|
@@ -1,34 +1,160 @@
|
|
|
<template>
|
|
|
- <div id="playerMap" ref="playerMap" class="tabDiv">
|
|
|
+ <div id="playerMap" ref="playerMap" class="app-container yunMapDiv" style="height:200%;">
|
|
|
<!-- 全屏 -->
|
|
|
- <div class="battonDiv">
|
|
|
- <el-tooltip v-if="!isFullSreen" class="item" effect="dark" :content="$t('largeScreen.common.screening')" placement="top-start">
|
|
|
- <a @click="fullPing()"><i class="el-icon-full-screen"></i></a>
|
|
|
- </el-tooltip>
|
|
|
- <el-tooltip v-else class="item" effect="dark" :content="$t('largeScreen.common.cancel')" placement="top-start">
|
|
|
- <a @click="exitFullPing()"><i class="el-icon-switch-button"></i></a>
|
|
|
- </el-tooltip>
|
|
|
- </div>
|
|
|
+ <el-row :gutter="20" class="rowCls">
|
|
|
+ <div class="headerBg">
|
|
|
+ <h2>现场工控端</h2>
|
|
|
+ <div class="battonDiv">
|
|
|
+ <el-tooltip v-if="!isFullSreen" class="item" effect="dark" :content="$t('largeScreen.common.screening')" placement="top-start">
|
|
|
+ <a @click="fullPing()"><i class="el-icon-full-screen"></i></a>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip v-else class="item" effect="dark" :content="$t('largeScreen.common.cancel')" placement="top-start">
|
|
|
+ <a @click="exitFullPing()"><i class="el-icon-switch-button"></i></a>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--
|
|
|
<el-image
|
|
|
style="width: 100%; height: 100%"
|
|
|
:src="url"
|
|
|
fit="fill"
|
|
|
- ></el-image>
|
|
|
- </div>
|
|
|
+ ></el-image> -->
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 区域模块 -->
|
|
|
+ <div style="text-align:left;margin-left:5%;">
|
|
|
+ <!-- 搜索-部分 -->
|
|
|
+ <div class="defaultRow noBorder">
|
|
|
+ <el-select v-model="opValue" :span="2" @change="selectChange" :placeholder='$t("common.pleaseSelect")'>
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+
|
|
|
+ <span :span="2" style="margin-left: 2%;">
|
|
|
+ <el-button plain type="primary" icon="el-icon-view" size="medium" @click="readView" >
|
|
|
+ 读RFID
|
|
|
+ </el-button>
|
|
|
+ </span>
|
|
|
+ <span :span="2" style="margin-right: 5%; float:right;">
|
|
|
+ <el-button plain type="primary" icon="el-icon-view" size="medium" >
|
|
|
+ 我的班表
|
|
|
+ </el-button>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-tabs style="text-align: left;margin-top:25px;">
|
|
|
+ <el-tab-pane label="未完成">
|
|
|
+ <span class="tabTitle" slot="label"><el-badge :value="taskCount" class="item"><i class="el-icon-date"></i> 未完成</el-badge> </span>
|
|
|
+ <el-col :span="(index==0)? 12:8" :gutter="24" v-for="(item, index) in taskData.slice(0,3)" :key="item.id" :offset="(index==0)?0:1" v-show="(item.status==0)?true:false" :style="(index==0)?'zoom:1;min-width:300px;':'zoom:0.6;min-width:180px;'">
|
|
|
+ <el-card :gutter="24" class="box-card" style="margin:5px;" >
|
|
|
+ <div class="card_content">
|
|
|
+ <div class="block card_header">
|
|
|
+ <el-image
|
|
|
+ style="width: 90px; height: 80px;max-width:200%;max-height:200%;"
|
|
|
+ :src="resolveLogo('status'+(index+1)+'.png')"
|
|
|
+ fit="fill"
|
|
|
+ >
|
|
|
+ </el-image>
|
|
|
+ <span>{{ item.taskName }}</span>
|
|
|
+ <div class="itemNo">任务编号: {{ item.no }}</div>
|
|
|
+ </div>
|
|
|
+ <el-form style="margin-top:10px;">
|
|
|
+ <el-form-item label="零件名称:" >
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="工序号:" >
|
|
|
+ <span>{{ item.taskNo }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="托盘编号:" >
|
|
|
+ <span>{{ item.trayNo }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="额定时间:" >
|
|
|
+ <span>{{ item.time }}分钟</span>
|
|
|
+ <div class="timeprogress">
|
|
|
+ <el-progress :text-inside="true" :stroke-width="15" :percentage="setPercentage(item.time, item.left)" color="#FF3366" :format="setItemText(item.time, item.left)" ></el-progress>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <span style="margin:2% 0; float:right;">
|
|
|
+ <el-button plain type="primary" icon="el-icon-view" size="medium" @click="finishTask(item)">
|
|
|
+ 完成
|
|
|
+ </el-button>
|
|
|
+ </span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="已完成">
|
|
|
+ <span class="tabTitle" slot="label"><i class="el-icon-date"></i> 已完成</span>
|
|
|
+ <el-table
|
|
|
+ :data="finishData"
|
|
|
+ stripe
|
|
|
+ style="width: 100%">
|
|
|
+ <el-table-column
|
|
|
+ prop="taskName"
|
|
|
+ label="名称"
|
|
|
+ width="200">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="零件名"
|
|
|
+ width="200">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="no"
|
|
|
+ label="编号"
|
|
|
+ width="200">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="taskNo"
|
|
|
+ label="工序号"
|
|
|
+ width="150">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="trayNo"
|
|
|
+ label="托盘编号"
|
|
|
+ width="200">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ <!-- 【查看】组件 -->
|
|
|
+ <task-view
|
|
|
+ ref="view"
|
|
|
+ :dialog-visible="tenantViewVisible"
|
|
|
+ @get-data="showRFID"
|
|
|
+ @close="viewClose"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
|
|
|
<script>
|
|
|
+ // 【查看】组件
|
|
|
+ import TaskView from "../waitingTasks/components/View"
|
|
|
import { fullScreen, exitFullScreen } from '@/utils/commons'
|
|
|
export default {
|
|
|
name: 'TouchScreen',
|
|
|
- components: { },
|
|
|
+ components: { TaskView },
|
|
|
props: {
|
|
|
},
|
|
|
data () {
|
|
|
return {
|
|
|
- isFullSreen: false, // 默认不全屏
|
|
|
- url: require('@/assets/yunMap/touchScreen.jpg')
|
|
|
+ options:[{name:"上下料站1",value:1},{name:"上下料站2",value:2},{name:"上下料站2",value:3},{name:"上下料站4",value:4}],
|
|
|
+ opValue: 1,
|
|
|
+ taskCount:6,
|
|
|
+ taskData:[{id:1,taskName:"上料",no:"12235566",name:"框体",taskNo:"OP10",trayNo:"TP7788",time:15,left:2,status:0},{id:2,taskName:"翻面",no:"12235566",name:"框体",taskNo:"OP50",trayNo:"TP7788",time:25,left:6,status:0},{id:3,taskName:"下料",no:"12235566",name:"框体",taskNo:"OP90",trayNo:"TP7788",time:5,left:1,status:0},{id:4,taskName:"下料",no:"12235566",name:"框体",taskNo:"OP90",trayNo:"TP7788",time:5,left:1,status:0}],
|
|
|
+ finishData:[],
|
|
|
+ step: 1,
|
|
|
+ tenantViewVisible: false,
|
|
|
+ isFullSreen: false, // 默认不全屏
|
|
|
}
|
|
|
},
|
|
|
// 实例已经在内存中创建好，此时data和methods已将ok,如果要操作data中的数据或是调用methods中的方法，最早只能在created中操作
|
|
|
@@ -62,13 +188,46 @@ export default {
|
|
|
exitFullScreen(document.getElementById('playerMap'))
|
|
|
})
|
|
|
},
|
|
|
-
|
|
|
+ selectChange(value){
|
|
|
+ console.log(value)
|
|
|
+ },
|
|
|
+ readView(){
|
|
|
+ //this.tenantViewVisible = true
|
|
|
+ this.$refs.view.read(null)
|
|
|
+ },
|
|
|
+ showRFID(code){
|
|
|
+ console.log(code)
|
|
|
+ },
|
|
|
+ resolveLogo(logo) {
|
|
|
+ return require(`@/assets/yunMap/${logo}`);
|
|
|
+ },
|
|
|
+ viewClose () {
|
|
|
+ this.tenantViewVisible = false
|
|
|
+ },
|
|
|
+ setPercentage(time, left){
|
|
|
+ return this.formatGap(time, left)[0]>100? 100 : this.formatGap(time, left)[0]
|
|
|
+ },
|
|
|
+ // 设置进度文本内容
|
|
|
+ setItemText(time, left){
|
|
|
+ return () => {
|
|
|
+ return this.formatGap(time, left)[1]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //时间差转换
|
|
|
+ formatGap(time, left) {
|
|
|
+ return [Number(parseInt(100*left/time)), "剩余"+ left +"分钟"]
|
|
|
+ },
|
|
|
+ finishTask(item){
|
|
|
+ item.status = 1
|
|
|
+ this.taskCount = this.taskCount - 1
|
|
|
+ this.finishData.push(item)
|
|
|
+ this.taskData.shift()
|
|
|
+
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" type="text/css">
|
|
|
-</style>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.tabDiv{
|
|
|
@@ -80,4 +239,61 @@ export default {
|
|
|
z-index: 9;
|
|
|
}
|
|
|
}
|
|
|
+ .tabTitle {
|
|
|
+ font-size: 24px;
|
|
|
+ height: 24px;
|
|
|
+ line-height:24px;
|
|
|
+ }
|
|
|
+ .card_content{
|
|
|
+ padding: 8px;
|
|
|
+ width:100%;
|
|
|
+ text-align:left;
|
|
|
+ color:#fff;
|
|
|
+ }
|
|
|
+ .card_header{
|
|
|
+ position:relative;
|
|
|
+ border-bottom:1px solid #fff;
|
|
|
+ margin:10px 0;
|
|
|
+ }
|
|
|
+ .indexNo {
|
|
|
+ position:absolute;
|
|
|
+ top:25%;
|
|
|
+ left:9%;
|
|
|
+ font-size:24px;
|
|
|
+ line-height:24px;
|
|
|
+ height:24px;
|
|
|
+ color:#fff;
|
|
|
+ z-index:999;
|
|
|
+ }
|
|
|
+ .indexNo2 {
|
|
|
+ position:absolute;
|
|
|
+ top:25%;
|
|
|
+ left:6%;
|
|
|
+ font-size:24px;
|
|
|
+ line-height:24px;
|
|
|
+ height:24px;
|
|
|
+ color:#fff;
|
|
|
+ z-index:999;
|
|
|
+ }
|
|
|
+ .itemNo {
|
|
|
+ font-size:12px;
|
|
|
+ line-height:12px;
|
|
|
+ height:12px;
|
|
|
+ text-align:right;
|
|
|
+ color:#fff;
|
|
|
+ margin-left:20%;
|
|
|
+ margin-bottom:10px;
|
|
|
+ }
|
|
|
+ .timeprogress >>> .el-progress-bar__outer {
|
|
|
+ background-color: #1890ff;
|
|
|
+ }
|
|
|
+ .timeprogress .el-progress-bar__inner {
|
|
|
+ text-align:center;
|
|
|
+ }
|
|
|
+ .el-form-item >>> .el-form-item__label {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .el-form-item {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
</style>
|
