parent
ec754c40d0
commit
b0a323b4b6
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,74 @@
|
|||||||
|
<template>
|
||||||
|
<el-collapse v-model="activeName" accordion >
|
||||||
|
<el-collapse-item :name="deptName">
|
||||||
|
<template slot="title">
|
||||||
|
<div style="width: 100%;height:100%;margin-left: 5%;text-align: center;line-height: 50px">
|
||||||
|
<button class="deptName">{{deptName}}({{type==='ks'?'总人数:':'出勤:'}}{{users}})</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="box" v-for="(item,index) in data[deptName]" @click="itemClick(item)">
|
||||||
|
<div style="font-size: 16px;text-align: center">
|
||||||
|
{{item.name}}
|
||||||
|
</div>
|
||||||
|
<div style="text-align: center;">
|
||||||
|
<img :src="item.headImage" :style="{width: myStyle.headImgWidth||'100%'}">
|
||||||
|
</div>
|
||||||
|
<div v-if="!!item.cq" style="width:100%;font-size: 12px;text-align: center;color:blue;margin-bottom: 15px;line-height: 19px">
|
||||||
|
任务:{{test()}}
|
||||||
|
<el-progress type="line" :text-inside="true" :stroke-width="18" :style="{width:'65%',float:'left',marginLeft:'2%'}"
|
||||||
|
:percentage="Math.round(item.gzl/test()*100,2)>100?100:65"
|
||||||
|
:color="'green'" text-color="white"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import XEUtils from 'xe-utils'
|
||||||
|
export default {
|
||||||
|
name:"Template",
|
||||||
|
props:{
|
||||||
|
data:Object,
|
||||||
|
deptName:String,
|
||||||
|
type:String,
|
||||||
|
myStyle:Object,
|
||||||
|
users:Number
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
activeName:'1',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
itemClick(item){
|
||||||
|
this.$emit('initDetail',item);
|
||||||
|
},
|
||||||
|
test(){
|
||||||
|
return XEUtils.random(1,60)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.box{
|
||||||
|
width:49%;
|
||||||
|
text-align: center;
|
||||||
|
border: 3px solid yellow;
|
||||||
|
border-radius: 25px;
|
||||||
|
float: left;
|
||||||
|
margin: 1px;
|
||||||
|
}
|
||||||
|
.deptName{
|
||||||
|
color: white;
|
||||||
|
border:1px solid blue;
|
||||||
|
border-radius:15px;
|
||||||
|
background-color: blue;
|
||||||
|
width: 80%;
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
font-size: 16px;
|
||||||
|
box-shadow: 2px 2px 2px 1px black;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,274 @@
|
|||||||
|
<template>
|
||||||
|
<el-container>
|
||||||
|
<el-header style="width: 100%; height: 35px;font-size: 12px">
|
||||||
|
<el-form :inline="true" label-width="65px" label-position="left">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="4">
|
||||||
|
<el-form-item label="月份:">
|
||||||
|
<el-date-picker v-model="queryParam.beginTime" value-format="yyyy/MM" type="month"/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="20" style="text-align: right">
|
||||||
|
<el-button type="success" @click="initList">查询</el-button>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
</el-header>
|
||||||
|
<el-container style="padding-top: 0px">
|
||||||
|
<el-main>
|
||||||
|
<div class="mytable">
|
||||||
|
<vxe-grid
|
||||||
|
id="id"
|
||||||
|
ref="xGrid"
|
||||||
|
border
|
||||||
|
resizable
|
||||||
|
keep-source
|
||||||
|
:align="'center'"
|
||||||
|
:height="height"
|
||||||
|
:auto-resize="true"
|
||||||
|
:columns="tableColumn"
|
||||||
|
:data="list"
|
||||||
|
:custom-config="{ storage: true }"
|
||||||
|
highlight-current-row
|
||||||
|
highlight-hover-row
|
||||||
|
show-overflow
|
||||||
|
:span-method="rowspanMethod"
|
||||||
|
:scroll-y="{enabled: true}"
|
||||||
|
>
|
||||||
|
<template #default="{row,column}">
|
||||||
|
<el-progress
|
||||||
|
type="line"
|
||||||
|
define-back-color="white"
|
||||||
|
:show-text="false"
|
||||||
|
:stroke-width="15"
|
||||||
|
:percentage="row[column.property]"
|
||||||
|
:color="row.gx==='计划'?'blue':'green'"
|
||||||
|
></el-progress>
|
||||||
|
</template>
|
||||||
|
</vxe-grid>
|
||||||
|
</div>
|
||||||
|
</el-main>
|
||||||
|
</el-container>
|
||||||
|
</el-container>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import {mapGetters} from 'vuex'
|
||||||
|
import XEUtils from 'xe-utils'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Gjtj',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
list: [],
|
||||||
|
queryParam: {
|
||||||
|
beginTime: '',
|
||||||
|
},
|
||||||
|
days: [],
|
||||||
|
sunDays: [],
|
||||||
|
height: '500px',
|
||||||
|
tableColumn: [
|
||||||
|
{field: 'dcCh', title: '船号', minWidth: "70",},
|
||||||
|
{field: 'gx', title: '工序', minWidth: "70",},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters(['name', 'bmbm'])
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.queryParam.beginTime = new Date();
|
||||||
|
window.addEventListener('resize', this.getHeight)
|
||||||
|
this.getHeight()
|
||||||
|
// this.initTable()
|
||||||
|
this.initList()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initList() {
|
||||||
|
this.initTable()
|
||||||
|
const list = []
|
||||||
|
const gx = ['计划', '技术准备', '上料', '抛丸', '理料', '划线', '切割', '曲面', '坡口', '打磨', '预配盘', '配盘']
|
||||||
|
for (const item of gx) {
|
||||||
|
const column = {dcCh: 'TK110-4', gx: item}
|
||||||
|
this.days.forEach(day => {
|
||||||
|
if (!this.sunDays.includes(day)) {
|
||||||
|
column[day] = XEUtils.random(0, 100)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
list.push(column)
|
||||||
|
}
|
||||||
|
this.list = list
|
||||||
|
},
|
||||||
|
initTable() {
|
||||||
|
const date = this.queryParam.beginTime||new Date();
|
||||||
|
const days = XEUtils.getDayOfMonth(date);
|
||||||
|
const _columns=[
|
||||||
|
{field: 'dcCh', title: '船号', minWidth: "70",},
|
||||||
|
{field: 'gx', title: '工序', minWidth: "70",},
|
||||||
|
]
|
||||||
|
for (let i = 1; i <= days; i++) {
|
||||||
|
const _day = XEUtils.getWhatMonth(date, 0, i);
|
||||||
|
const day = XEUtils.toDateString(_day, 'yyyy/MM/dd')
|
||||||
|
_columns.push({
|
||||||
|
field: day, title: day, width: "150",
|
||||||
|
slots: {
|
||||||
|
// 使用插槽模板渲染
|
||||||
|
default: 'default',
|
||||||
|
}
|
||||||
|
// cellRender: {
|
||||||
|
// name: 'bar',
|
||||||
|
// props: {
|
||||||
|
// bar: {
|
||||||
|
// max: 100
|
||||||
|
// },
|
||||||
|
// colors: ['blue', 'green'],
|
||||||
|
// label: {
|
||||||
|
// formatter: '{value}'
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
})
|
||||||
|
this.days.push(day)
|
||||||
|
const _sunday6 = XEUtils.getWhatWeek(day, 0, 6, 0)
|
||||||
|
const sunday6 = XEUtils.toDateString(_sunday6, 'yyyy/MM/dd');
|
||||||
|
if (!this.sunDays.includes(sunday6)) {
|
||||||
|
this.sunDays.push(sunday6)
|
||||||
|
}
|
||||||
|
const _sunday7 = XEUtils.getWhatWeek(day, 0, 7, 0)
|
||||||
|
const sunday7 = XEUtils.toDateString(_sunday7, 'yyyy/MM/dd');
|
||||||
|
if (!this.sunDays.includes(sunday7)) {
|
||||||
|
this.sunDays.push(sunday7)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.tableColumn=_columns
|
||||||
|
},
|
||||||
|
rowspanMethod({row, _rowIndex, column, visibleData}) {
|
||||||
|
let fields = ["dcCh"];
|
||||||
|
const cellValue = row[column.property];
|
||||||
|
if (cellValue && fields.includes(column.property)) {
|
||||||
|
const prevRow = visibleData[_rowIndex - 1];
|
||||||
|
let nextRow = visibleData[_rowIndex + 1];
|
||||||
|
if (prevRow && prevRow[column.property] === cellValue) {
|
||||||
|
return {rowspan: 0, colspan: 0};
|
||||||
|
} else {
|
||||||
|
let countRowspan = 1;
|
||||||
|
while (nextRow && nextRow[column.property] === cellValue) {
|
||||||
|
nextRow = visibleData[++countRowspan + _rowIndex];
|
||||||
|
}
|
||||||
|
if (countRowspan > 1) {
|
||||||
|
return {rowspan: countRowspan, colspan: 1};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getHeight() {
|
||||||
|
this.height = window.innerHeight - 200
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
::v-deep .el-progress__text{
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-header {
|
||||||
|
margin: 0;
|
||||||
|
padding: 5px;
|
||||||
|
height: auto;
|
||||||
|
|
||||||
|
.el-input {
|
||||||
|
width: 140px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-select {
|
||||||
|
width: 140px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-container {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-main {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-col {
|
||||||
|
padding: 0;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-aside {
|
||||||
|
background: #fff;
|
||||||
|
padding: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-container {
|
||||||
|
padding: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-row {
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-row:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableStyles {
|
||||||
|
background: #0a76a4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-dropdown {
|
||||||
|
width: 400px;
|
||||||
|
height: 400px;
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #dcdfe6;
|
||||||
|
box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.mytable1 {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.borderClass {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.vxe-input {
|
||||||
|
display: inline-block !important;
|
||||||
|
position: relative !important;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-input {
|
||||||
|
display: inline-block !important;
|
||||||
|
position: relative !important;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.keyword-lighten {
|
||||||
|
color: #000;
|
||||||
|
background-color: #FFFF00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vxe-textarea--inner {
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-form-item__label-wrap {
|
||||||
|
margin-left: 0px !important;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fontClass {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,205 @@
|
|||||||
|
<template>
|
||||||
|
<el-container style="width:100%;height: 840px;">
|
||||||
|
<div style="width:100%;background-color: #0d84ff;">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="6" class="rg-table">
|
||||||
|
<div class="rg-table-box" style="width:100%;height: 900px;padding: 5px;overflow-y: auto;">
|
||||||
|
<div v-for="(item,index) in ks" >
|
||||||
|
<Template :data="data" :deptName="item" :type="'ks'" :users="totalUsers[item]" :myStyle="{headImgWidth:'100%'}" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<div class="rg-table-box" style="width:100%;height: 900px;padding: 5px;overflow-y: auto;">
|
||||||
|
<div v-for="(item,index) in ks">
|
||||||
|
<Template :data="cqData" :deptName="item" :type="'cq'" :users="cqUsers[item]||0" :myStyle="{headImgWidth:'100%'}" @initDetail="initDetail"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-container style="padding-top: 0px">
|
||||||
|
<el-main>
|
||||||
|
<div class="mytable">
|
||||||
|
<vxe-grid
|
||||||
|
id="id"
|
||||||
|
ref="xGrid"
|
||||||
|
border
|
||||||
|
resizable
|
||||||
|
keep-source
|
||||||
|
:align="'center'"
|
||||||
|
:height="height"
|
||||||
|
:auto-resize="true"
|
||||||
|
:columns="tableColumn"
|
||||||
|
:data="list"
|
||||||
|
:custom-config="{ storage: true }"
|
||||||
|
highlight-current-row
|
||||||
|
highlight-hover-row
|
||||||
|
show-overflow
|
||||||
|
:scroll-y="{enabled: true}"
|
||||||
|
>
|
||||||
|
<template #default="{row,column}">
|
||||||
|
<el-progress
|
||||||
|
type="line"
|
||||||
|
define-back-color="white"
|
||||||
|
:show-text="false"
|
||||||
|
:stroke-width="15"
|
||||||
|
:percentage="row[column.property]"
|
||||||
|
:color="row.gx==='计划'?'blue':'green'"
|
||||||
|
></el-progress>
|
||||||
|
</template>
|
||||||
|
</vxe-grid>
|
||||||
|
</div>
|
||||||
|
</el-main>
|
||||||
|
</el-container>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</el-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import XEUtils from 'xe-utils'
|
||||||
|
import Template from "@/views/dashboard/components/Template.vue";
|
||||||
|
export default {
|
||||||
|
name: 'Kstj',
|
||||||
|
components: {Template},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 管理室-配送,准备室-资料接收编制计划,
|
||||||
|
ks:['管理室','准备室','1作业区','2作业区','3作业区','4作业区','5作业区','6作业区'],
|
||||||
|
data:{},
|
||||||
|
cqData:{},
|
||||||
|
totalUsers:{},
|
||||||
|
cqUsers:{},
|
||||||
|
height: '800px',
|
||||||
|
list:[],
|
||||||
|
tableColumn:[],
|
||||||
|
'管理室': [
|
||||||
|
{field: 'dcCh', title: '船号', minWidth: "70",},
|
||||||
|
{field: 'dcPl', title: '批量', minWidth: "50",},
|
||||||
|
{field: 'dcFd', title: '分段', minWidth: "50",},
|
||||||
|
{field: 'tzbh', title: '套料图号', minWidth: "70",},
|
||||||
|
{field: 'sl', title: '数量', minWidth: "50",},
|
||||||
|
{field: 'start', title: '接收时间', minWidth: "90",},
|
||||||
|
{field: 'end', title: '回报时间', minWidth: "90",},
|
||||||
|
],
|
||||||
|
'准备室': [
|
||||||
|
{field: 'dcCh', title: '船号', minWidth: "70",},
|
||||||
|
{field: 'dcPl', title: '批量', minWidth: "50",},
|
||||||
|
{field: 'dcFd', title: '分段', minWidth: "50",},
|
||||||
|
{field: 'tzbh', title: '套料图号', minWidth: "70",},
|
||||||
|
{field: 'sl', title: '数量', minWidth: "50",},
|
||||||
|
{field: 'start', title: '接收时间', minWidth: "90",},
|
||||||
|
{field: 'end', title: '回报时间', minWidth: "90",},
|
||||||
|
],
|
||||||
|
'作业区': [
|
||||||
|
{field: 'dcCh', title: '船号', minWidth: "70",},
|
||||||
|
{field: 'dcPl', title: '批量', minWidth: "50",},
|
||||||
|
{field: 'dcFd', title: '分段', minWidth: "50",},
|
||||||
|
{field: 'sbbh', title: '加工设备', minWidth: "50",},
|
||||||
|
{field: 'gx', title: '工序', minWidth: "50",},
|
||||||
|
{field: 'sl', title: '数量', minWidth: "50",},
|
||||||
|
{field: 'start', title: '接收时间', minWidth: "110",},
|
||||||
|
{field: 'end', title: '回报时间', minWidth: "110",},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.initData()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initDetail(item){
|
||||||
|
this.tableColumn=this[item.ks]
|
||||||
|
if (item.ks.indexOf('作业区')>-1){
|
||||||
|
this.tableColumn=this['作业区']
|
||||||
|
}
|
||||||
|
this.loadData(item)
|
||||||
|
},
|
||||||
|
loadData(item){
|
||||||
|
const list=[]
|
||||||
|
const num=XEUtils.random(0,100)
|
||||||
|
for (let i = 0; i < num; i++) {
|
||||||
|
const data={
|
||||||
|
dcCh:'TK110-4',
|
||||||
|
dcPl:'096',
|
||||||
|
dcFd:'9202',
|
||||||
|
gx:'切割',
|
||||||
|
sl:'3',
|
||||||
|
sbbh:'龙门1',
|
||||||
|
tzbh:'B001S2TX001',
|
||||||
|
start:XEUtils.toDateString(new Date(),'yyyy/MM/dd HH:mm'),
|
||||||
|
end:XEUtils.toDateString(new Date(),'yyyy/MM/dd HH:mm'),
|
||||||
|
}
|
||||||
|
list.push(data)
|
||||||
|
}
|
||||||
|
this.list=list
|
||||||
|
},
|
||||||
|
initData(){
|
||||||
|
let i =0
|
||||||
|
for (const item of this.ks) {
|
||||||
|
if (!this.data[item]){
|
||||||
|
this.data[item]=[]
|
||||||
|
}
|
||||||
|
if (!this.cqData[item]){
|
||||||
|
this.cqData[item]=[]
|
||||||
|
}
|
||||||
|
if (!this.cqUsers[item]){
|
||||||
|
this.cqUsers[item]=0
|
||||||
|
}
|
||||||
|
let totalUser=XEUtils.random(1,10)
|
||||||
|
this.totalUsers[item]=totalUser
|
||||||
|
if ('准备室'===item){
|
||||||
|
totalUser=1
|
||||||
|
this.totalUsers[item]=totalUser
|
||||||
|
}
|
||||||
|
for (let j = 0; j < totalUser; j++) {
|
||||||
|
++i
|
||||||
|
const cq=XEUtils.random(0, 1);
|
||||||
|
const data={
|
||||||
|
ks:item,
|
||||||
|
yhdm:'李'+j,
|
||||||
|
name:'李'+j,
|
||||||
|
headImage:'static/img/btn_hr.e600324c.jpg',
|
||||||
|
gzl:XEUtils.random(0, 100),
|
||||||
|
cq:cq
|
||||||
|
}
|
||||||
|
if (cq){
|
||||||
|
this.cqUsers[item]+=1
|
||||||
|
this.cqData[item].push(data)
|
||||||
|
}else {
|
||||||
|
this.data[item].push(data)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.rg-table-box::-webkit-scrollbar {
|
||||||
|
/*整体样式*/
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
.rg-table-box::-webkit-scrollbar-track {
|
||||||
|
/*轨道*/
|
||||||
|
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||||||
|
background: #ededed;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.rg-table-box::-webkit-scrollbar-thumb {
|
||||||
|
/*滚动条小方块*/
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: #2e75d3;
|
||||||
|
background-image: -webkit-linear-gradient(
|
||||||
|
45deg,
|
||||||
|
rgba(255, 255, 255, 0.2) 25%,
|
||||||
|
transparent 25%,
|
||||||
|
transparent 50%,
|
||||||
|
rgba(255, 255, 255, 0.2) 50%,
|
||||||
|
rgba(255, 255, 255, 0.2) 75%,
|
||||||
|
transparent 75%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue