root/rongLiJiaNai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init project

Browse Source
This commit is contained in:
loujf
2022-06-30 16:35:45 +08:00
parent 51d07613bc
commit 6713bde89c
1091 changed files with 126470 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

257
acs/qd/src/views/bigscreen/task.vue Normal file
View File

@@ -0,0 +1,257 @@
<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>