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