258 lines
8.1 KiB
Vue
258 lines
8.1 KiB
Vue
<template>
|
||
<div style="border: 1px solid #938d8d;margin-left: 10px;margin-right: 10px;">
|
||
<el-row style="height: 100px;">
|
||
<el-col :span="12">
|
||
<div class="grid-content bg-purple"><h2 style="margin-left: 30px;padding-top: 10px;">车间任务看板</h2></div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="grid-content bg-purple-light">
|
||
<h2 style="text-align:right;margin-right: 140px;">{{ getTime }}</h2>
|
||
</div>
|
||
<div class="grid-content bg-purple-light">
|
||
<p style="text-align:right;margin-right: 110px;"><b>{{ getDate }}</b></p>
|
||
</div>
|
||
|
||
</el-col>
|
||
</el-row>
|
||
<el-row style="border: 1px solid #938d8d;margin-left: 10px;margin-right: 10px;margin-bottom: 10px;">
|
||
<el-input value="各区域叫料未操作" style="width: 200px;"/>
|
||
<div class="" style="height: 200px;border: 1px solid #938d8d;">
|
||
<!-- 表头 -->
|
||
<div class="warp-title">
|
||
<ul class="item">
|
||
<li>
|
||
<span class="title" style="width: 150px">状态</span>
|
||
<span class="title" style="width: 150px">区域</span>
|
||
<span class="title" style="width: 150px">站点</span>
|
||
<span class="title" style="width: 150px">物料名称</span>
|
||
<span class="title" style="width: 150px">数量</span>
|
||
<span class="title" style="width: 150px">备注</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- 表格滚动区 -->
|
||
<div>
|
||
<vue-seamless-scroll
|
||
:style="{height: this.scrollHeight + 'px' }"
|
||
:data="tableData1"
|
||
:class-option="defaultOption"
|
||
class="warp-content"
|
||
>
|
||
<ul class="item" style="list-style:none;">
|
||
<li
|
||
v-for="(item, index) in tableData1"
|
||
:style="{backgroundColor:((index+1)%2 == 0) ? '#f0f9eb' : '#ffffff'}"
|
||
>
|
||
<span class="data" style="width: 150px" v-text="formatterStatus(item.status)"/>
|
||
<span class="date" style="width: 150px" v-text="item.region"/>
|
||
<span class="date" style="width: 150px" v-text="item.device_code"/>
|
||
<span class="date" style="width: 150px" v-text="item.material"/>
|
||
<span class="date" style="width: 150px" v-text="item.qty"/>
|
||
<span class="date" style="width: 150px" v-text="item.remark"/>
|
||
</li>
|
||
</ul>
|
||
</vue-seamless-scroll>
|
||
</div>
|
||
</div>
|
||
</el-row>
|
||
|
||
<el-row style="border: 1px solid #938d8d;margin-left: 10px;margin-right: 10px;margin-top: 80px;">
|
||
<el-input value="各区域叫料执行中" style="width: 200px;"/>
|
||
<div class="" style="height: 250px;border: 1px solid #938d8d;">
|
||
<!-- 表头 -->
|
||
<div class="warp-title">
|
||
<ul class="item">
|
||
<li>
|
||
<span class="title" style="width: 150px;font-weight:bold;">状态</span>
|
||
<span class="title" style="width: 150px">起点</span>
|
||
<span class="title" style="width: 150px">终点</span>
|
||
<span class="title" style="width: 150px">物料名称</span>
|
||
<span class="title" style="width: 150px">数量</span>
|
||
<span class="title" style="width: 150px">备注</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- 表格滚动区 -->
|
||
<div>
|
||
<vue-seamless-scroll
|
||
:style="{height: this.scrollHeight + 'px' }"
|
||
:data="tableData2"
|
||
:class-option="defaultOption"
|
||
class="warp-content"
|
||
>
|
||
<ul class="item" style="list-style:none;">
|
||
<li
|
||
v-for="(item, index) in tableData2"
|
||
:style="{backgroundColor:((index+1)%2 == 0) ? '#f0f9eb' : '#ffffff'}"
|
||
>
|
||
<span class="data" style="width: 150px" v-text="formatterInstructStatus(item.title)"/>
|
||
<span class="data" style="width: 150px" v-text="item.start_point_code"/>
|
||
<span class="data" style="width: 150px" v-text="item.next_point_code"/>
|
||
<span class="data" style="width: 150px" v-text="item.material"/>
|
||
<span class="data" style="width: 150px" v-text="item.quantity"/>
|
||
<span class="data" style="width: 150px" v-text="item.remark"/>
|
||
</li>
|
||
</ul>
|
||
</vue-seamless-scroll>
|
||
</div>
|
||
</div>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
//https://blog.csdn.net/weixin_43992867/article/details/110622449
|
||
//https://blog.csdn.net/qq_42540989/article/details/102579726
|
||
//https://blog.csdn.net/weixin_42201180/article/details/107557277
|
||
import deviceCrud from '@/api/acs/device/device'
|
||
import instructionCrud from '@/api/acs/instruction/instruction'
|
||
|
||
export default {
|
||
data() {
|
||
// 这里存放数据
|
||
return {
|
||
tableData1: [],
|
||
tableData2: [],
|
||
getTime: '',
|
||
getDate: '',
|
||
scrollHeight: 250,
|
||
listData: [{
|
||
'title': '第一行',
|
||
'date': '2017-12-16'
|
||
}, {
|
||
'title': '第二行',
|
||
'date': '2017-12-16'
|
||
}, {
|
||
'title': '第三行',
|
||
'date': '2017-12-16'
|
||
}, {
|
||
'title': '第四行',
|
||
'date': '2017-12-16'
|
||
}, {
|
||
'title': '第五行',
|
||
'date': '2017-12-16'
|
||
}, {
|
||
'title': '第六行',
|
||
'date': '2017-12-16'
|
||
}, {
|
||
'title': '第七行',
|
||
'date': '2017-12-16'
|
||
}, {
|
||
'title': '第八行',
|
||
'date': '2017-12-16'
|
||
}]
|
||
}
|
||
},
|
||
// 监听属性 类似于data概念
|
||
computed: {
|
||
defaultOption() {
|
||
return {
|
||
step: 0.2, // 数值越大速度滚动越快
|
||
limitMoveNum: 8, // 开始无缝滚动的数据量 this.dataList.length
|
||
hoverStop: true, // 是否开启鼠标悬停stop
|
||
direction: 1, // 0向下 1向上 2向左 3向右
|
||
openWatch: true, // 开启数据实时监控刷新dom
|
||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
|
||
}
|
||
}
|
||
|
||
},
|
||
// 监控data中的数据变化
|
||
watch: {},
|
||
// 生命周期 - 创建完成（可以访问当前this实例）
|
||
created() {
|
||
// 定时器
|
||
const timer = setInterval(() => {
|
||
this.settime()// 你所加载数据的方法
|
||
deviceCrud.selectDeviceDevicerInfo('2').then(data => {
|
||
this.tableData1 = data
|
||
})
|
||
instructionCrud.queryUnFinish().then(data => {
|
||
this.tableData2 = data
|
||
})
|
||
}, 1000)
|
||
// 销毁定时器
|
||
this.$once('hook:beforeDestroy', () => {
|
||
clearInterval(timer)
|
||
})
|
||
},
|
||
// 生命周期 - 挂载完成（可以访问DOM元素）
|
||
mounted() {
|
||
|
||
},
|
||
// 方法集合
|
||
methods: {
|
||
formatterStatus(status) {
|
||
if (!status) {
|
||
return '未操作'
|
||
}
|
||
},
|
||
formatterInstructStatus(status) {
|
||
if (!status) {
|
||
return '执行中'
|
||
}
|
||
},
|
||
settime() {
|
||
const _this = this
|
||
const yy = new Date().getFullYear()
|
||
const mm = new Date().getMonth() + 1
|
||
const dd = new Date().getDate()
|
||
const hh = new Date().getHours()
|
||
const mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
|
||
const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
|
||
_this.getDate = yy + '年' + mm + '月' + dd + '日 ' + '星期' + '日一二三四五六'.charAt(new Date().getDay())
|
||
_this.getTime = hh + ':' + mf + ':' + ss
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
|
||
.title {
|
||
font-weight: bold;
|
||
}
|
||
|
||
.warp-title {
|
||
overflow: hidden;
|
||
|
||
ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
li {
|
||
height: 20px;
|
||
line-height: 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 15px;
|
||
}
|
||
|
||
}
|
||
|
||
.warp-content {
|
||
overflow: hidden;
|
||
|
||
ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
li {
|
||
height: 30px;
|
||
line-height: 30px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 15px;
|
||
}
|
||
|
||
}
|
||
</style>
|
||
|