页面调整

This commit is contained in:
shijing 2023-10-18 17:12:23 +08:00
parent ae47399224
commit 584b22fbbd
9 changed files with 658 additions and 465 deletions

View File

@ -24,7 +24,7 @@
"d3": "^7.6.1",
"dagre": "^0.8.5",
"dagre-d3": "^0.6.4",
"dhtmlx-gantt": "^8.0.6",
"echarts": "5.4.1",
"element-plus": "2.2.32",
"file-saver": "^2.0.5",

View File

@ -0,0 +1,79 @@
<template>
<div ref="ganttContainer"></div>
</template>
<script>
import {gantt} from 'dhtmlx-gantt';
export default {
props: {
tasks: {
type: Object,
default () {
return {
data: [],
links: [],
}
}
},
start_date:{
type:String,
default () {
return ''
}
},
end_date:{
type:String,
default () {
return ''
}
},
},
mounted: function () {
gantt.i18n.setLocale('cn');
gantt.config.date_format = "%Y-%m-%d";
gantt.config.date_grid = "%Y/%m/%d";
gantt.config.readonly = true;
gantt.config.autosize = true;
gantt.plugins({
tooltip: true
});
// gantt.config.start_date = new Date(2023, 9, 1);
// gantt.config.end_date = new Date(2023, 9, 10);
gantt.config.columns = [
{name: 'number',label: '订单编号',tree: true,width: '*',align: 'left'},
{name: 'model',label: '型号', width: '70',align: 'center'},
{name: 'cate',label: '规格',width: '80',align: 'center'},
{name: 'count',label: '完成量',width: '50', align: 'center'}
];
gantt.attachEvent('onGanttReady', function () {
var tooltips = gantt.ext.tooltips;
gantt.templates.tooltip_text = function (start, end, task) {
return task.number + '<br/>计划产量:' + task.count + '<br/>当日产量:' + task.count + '<br/>完成产量:' + task.count + '<br/>开工时间:' + gantt.templates.tooltip_date_format(start) + '<br/>完工时间:' + gantt.templates.tooltip_date_format(end);
};
});
// gantt.config.scale_unit = "day";
// gantt.config.step = 1;
// gantt.config.date_scale = " %Y/%m/%d";
//
var yearScaleCss = function () {
return 'yearScaleStyle';
};
var monthScaleCss = function () {
return 'monthScaleStyle';
};
gantt.config.scales = [
{ unit: 'year', step: 1, format: " %Y", css: yearScaleCss },
{ unit: 'day', step: 1, format: " %m/%d", css: monthScaleCss }
];
gantt.init(this.$refs.ganttContainer);
gantt.parse(this.$props.tasks);
}
}
</script>
<style>
@import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
</style>

View File

@ -754,7 +754,17 @@ const routes = [
"perms": ["inm"]
},
"component": "pm/mtask2"
}
},
// {
// "name": "gantt",
// "path": "/pm/gantt",
// "meta": {
// "title": "gantt",
// "icon": "el-icon-cellphone",
// "perms": ["inm"]
// },
// "component": "pm/gantt"
// }
]
},
//生产执行 wpm

163
src/views/pm/gantt.vue Normal file
View File

@ -0,0 +1,163 @@
<template>
<div class="container">
<GanttComponent class="left-container" :tasks="tasks"></GanttComponent>
</div>
</template>
<script>
import GanttComponent from '@/components/GanttComponent.vue';
export default {
name: "rparty",
components: {GanttComponent},
data () {
return {
tasks: {
data: [
{number:'GZ20231012',model:'GB2',cate:'100*50*2',count:300,text: "一天任务",start_date: "2023-10-12",id:'2023101800',duration: 2,progress: 1},
{number:'GZ20231013',model:'GB2',cate:'100*50*2',count:300,text: "一天任务",start_date: "2023-10-13",id:'2023101801',duration: 1,progress: 1},
{number:'GZ20231014',model:'GB2',cate:'100*50*2',count:200, text: "一天任务",start_date: "2023-10-14",id:'2023101802',duration: 1,progress: 0.8},
{number:'GZ20231015',model:'ZB2',cate:'100*50*2',count:100, text: "一天任务", start_date: "2023-10-15",id:'2023101803',duration: 1,progress: 0.6},
{number:'GZ20231016',model:'GB2',cate:'100*50*2',count:50, text: "一天任务", start_date: "2023-10-16",id:'2023101804',duration: 1,progress: 0.4},
{number:'GZ20231017',model:'GB2',cate:'100*50*2',count:0, text: "一天任务", start_date: "2023-10-17",id:'2023101805',duration: 1,progress: 0.2},
{number:'GZ20231018',model:'GB2',cate:'100*50*2',count:300,text: "一天任务",start_date: "2023-10-18",id:'2023101806',duration: 1,progress: 1},
{number:'GZ20231018',model:'GB2',cate:'100*50*2',count:200, text: "一天任务",start_date: "2023-10-19",id:'2023101807',duration: 1,progress: 0.8},
{number:'GZ20231020',model:'ZB2',cate:'100*50*2',count:100, text: "一天任务", start_date: "2023-10-20",id:'2023101808',duration: 1,progress: 0.6},
{number:'GZ20231021',model:'GB2',cate:'100*50*2',count:50, text: "一天任务", start_date: "2023-10-21",id:'2023101809',duration: 1,progress: 0.4},
{number:'GZ20231022',model:'GB2',cate:'100*50*2',count:0, text: "一天任务", start_date: "2023-10-22",id:'20231018010',duration: 1,progress: 0.2},
]
},
}
},
mounted(){
var that = this;
},
methods: {
init(){
//
gantt.i18n.setLocale('cn');
//, 使,
gantt.config.autosize = false;
//
gantt.config.readonly = false;
//
gantt.config.show_grid = true;
//便使
gantt.config.columns = [
{
name: 'text',label: '分项工程',
tree: true,width: '*',align: 'left',template: function (obj) { return `<span class="gantt-name-box" title="${obj.text}">${obj.text}</span>` }
},
{name: 'beginTime',label: '开始日期', width: '100',align: 'center', template: function (obj) {return obj.beginTime;}},
{name: 'endTime',label: '结束日期',width: '100',align: 'center',template: function (obj) {return obj.endTime;}},
{name: 'limitTime',label: '工期',width: '100', align: 'center',template: function (obj) {return `${obj.limitTime}`;}
}
];
gantt.config.data=[
{ "id": "1635835705701744641", "text": "345分项工程分项工程分项工程", "start_date": "2022-12-01", "beginTime": "2022-12-01", "endTime": "2023-03-14", "limitTime": 103, "duration": 103, "progress": 1 },
{ "id": "1635835705701744642", "text": "111", "start_date": "2023-03-14", "beginTime": "2023-03-14", "endTime": "2023-03-17", "limitTime": 3, "duration": 3, "progress": 1 },
{ "id": "1635835705701744643", "text": "分项工程", "start_date": "2023-03-13", "beginTime": "2023-03-13", "endTime": "2023-03-23", "limitTime": 10, "duration": 10, "progress": 1 },
{ "id": "1635835705701744644", "text": "分项工程1", "start_date": "2023-03-30", "beginTime": "2023-03-30", "endTime": "2023-04-20", "limitTime": 21, "duration": 21, "progress": 1 },
{ "id": "1635835705701744645", "text": "分项工程2", "start_date": "2023-03-21", "beginTime": "2023-03-21", "endTime": "2023-03-29", "limitTime": 8, "duration": 8, "progress": 1 },
{ "id": "1635835705701744646", "text": "分项工程3", "start_date": "2023-03-23", "beginTime": "2023-03-23", "endTime": "2023-03-31", "limitTime": 8, "duration": 8, "progress": 1 },
{ "id": "1635835705701744647", "text": "6", "start_date": "2023-03-29", "beginTime": "2023-03-29", "endTime": "2023-03-30", "limitTime": 1, "duration": 1, "progress": 1 },
{ "id": "1635835705701744648", "text": "1", "start_date": "2023-03-16", "beginTime": "2023-03-16", "endTime": "2023-03-17", "limitTime": 1, "duration": 1, "progress": 1 },
];
//
//gantt.config.fit_tasks = true;
gantt.config.row_height = 44;
//
gantt.config.scale_height = 50;
//gantt
gantt.plugins({
tooltip: true
});
//
var yearScaleTemplate = function (date) {
return date.getFullYear();
};
var monthScaleTemplate = function (date) {
var month = date.getMonth()+1;
return month;
};
var dayScaleTemplate = function (date) {
var month = date.getDate();
return month;
};
//
var yearScaleCss = function () {
return 'yearScaleStyle';
};
var monthScaleCss = function () {
return 'monthScaleStyle';
};
var monthScaleCss = function () {
return 'monthScaleStyle';
};
gantt.config.start_date = new Date(2023, 9, 1);
gantt.config.end_date = new Date(2023, 9, 20);
gantt.config.scales = [
{ unit: 'year', step: 1, format: yearScaleTemplate, css: yearScaleCss },
{ unit: 'month', step: 1, format: monthScaleTemplate, css: monthScaleCss },
{ unit: 'day', step: 1, format: dayScaleTemplate, css: monthScaleCss }
];
gantt.attachEvent('onGanttReady', function () {
var tooltips = gantt.ext.tooltips;
gantt.templates.tooltip_text = function (start, end, task) {
return '任务编号:' + task.no + '<br/>Task' + task.text + '<br/>Role' + task.roleName + '<br/>Owner' + task.ownerName + '<br/>计划开始时间:' + gantt.templates.tooltip_date_format(start) + '<br/>RCD' + gantt.templates.tooltip_date_format(end);
};
});
//
gantt.config.details_on_dblclick = false;
//gantt
gantt.config.show_errors = false;
//
gantt.attachEvent('onBeforeTaskDrag', function (id, mode, e) {
return false;
});
//
gantt.config.drag_move = false;
//
gantt.config.drag_progress = false;
//Link
gantt.config.drag_links = false;
//
gantt.plugins({
marker: true
});
//
var dateToStr = gantt.date.date_to_str(gantt.config.task_date);
var markerId = gantt.addMarker({
start_date: new Date(),
css: 'today', //style
text: 'Today',
title: dateToStr(new Date())
});
gantt.getMarker(markerId);
//
gantt.init(this.$refs.gantt);
},
},
};
</script>
<style scoped>html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
height: 100vh;
width: 100%;
}
.left-container {
overflow: hidden;
position: relative;
height: 100%;
}
</style>

View File

@ -1,5 +1,6 @@
<template>
<el-container>
<el-container style="flex-direction: column">
<el-main id="topContainer" class="nopadding" style="position: relative;margin-bottom: 10px;">
<el-header>
<div class="left-panel">
<el-button type="primary" icon="el-icon-plus" @click="add">新增任务</el-button>
@ -11,6 +12,7 @@
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
value-format="YYYY-MM-DD"
/>
<el-button
type="primary"
@ -19,7 +21,6 @@
>查询</el-button>
</div>
</el-header>
<el-main class="nopadding">
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane label="混料工序" name="first">
<scTable
@ -27,6 +28,7 @@
:apiObj="apiObj"
row-key="id"
stripe
:height="topHeight"
:params="query"
>
<el-table-column type="index" width="50"/>
@ -40,32 +42,32 @@
</el-table-column>
<el-table-column label="计划量" prop="count">
</el-table-column>
<!-- <el-table-column label="状态" prop="count">
</el-table-column> -->
<el-table-column label="日均产量" prop="count">
</el-table-column>
<el-table-column label="计划开工时间" prop="start_date">
</el-table-column>
<el-table-column label="计划完工时间" prop="end_date">
</el-table-column>
<el-table-column label="完成量" prop="count">
<el-table-column label="完成产量" prop="count">
</el-table-column>
<el-table-column label="完成率" prop="count">
</el-table-column>
<el-table-column label="要求描述" prop="count">
</el-table-column>
<el-table-column label="操作" fixed="right" align="left" width="120">
<template #default="scope">
<el-link
type="primary"
@click="table_edit(scope.row)"
v-auth="'equipment.update'"
>
编辑
v-auth="'pu_plan.update'"
>编辑
</el-link>
<el-divider direction="vertical"></el-divider>
<el-link
type="danger"
@click="table_del(scope.row)"
v-auth="'equipment.delete'"
>
删除
v-auth="'pu_plan.delete'"
>删除
</el-link>
</template>
</el-table-column>
@ -90,32 +92,32 @@
</el-table-column>
<el-table-column label="计划量" prop="count">
</el-table-column>
<!-- <el-table-column label="状态" prop="count">
</el-table-column> -->
<el-table-column label="日均产量" prop="count">
</el-table-column>
<el-table-column label="计划开工时间" prop="start_date">
</el-table-column>
<el-table-column label="计划完工时间" prop="end_date">
</el-table-column>
<el-table-column label="完成量" prop="count">
<el-table-column label="完成产量" prop="count">
</el-table-column>
<el-table-column label="完成率" prop="count">
</el-table-column>
<el-table-column label="要求描述" prop="count">
</el-table-column>
<el-table-column label="操作" fixed="right" align="left" width="120">
<template #default="scope">
<el-link
type="primary"
@click="table_edit(scope.row)"
v-auth="'equipment.update'"
>
编辑
v-auth="'pu_plan.update'"
>编辑
</el-link>
<el-divider direction="vertical"></el-divider>
<el-link
type="danger"
@click="table_del(scope.row)"
v-auth="'equipment.delete'"
>
删除
v-auth="'pu_plan.delete'"
>删除
</el-link>
</template>
</el-table-column>
@ -140,22 +142,24 @@
</el-table-column>
<el-table-column label="计划量" prop="count">
</el-table-column>
<!-- <el-table-column label="状态" prop="count">
</el-table-column> -->
<el-table-column label="日均产量" prop="count">
</el-table-column>
<el-table-column label="计划开工时间" prop="start_date">
</el-table-column>
<el-table-column label="计划完工时间" prop="end_date">
</el-table-column>
<el-table-column label="完成量" prop="count">
<el-table-column label="完成产量" prop="count">
</el-table-column>
<el-table-column label="完成率" prop="count">
</el-table-column>
<el-table-column label="要求描述" prop="count">
</el-table-column>
<el-table-column label="操作" fixed="right" align="left" width="120">
<template #default="scope">
<el-link
type="primary"
@click="table_edit(scope.row)"
v-auth="'equipment.update'"
v-auth="'pu_plan.update'"
>
编辑
</el-link>
@ -163,7 +167,7 @@
<el-link
type="danger"
@click="table_del(scope.row)"
v-auth="'equipment.delete'"
v-auth="'pu_plan.delete'"
>
删除
</el-link>
@ -173,6 +177,59 @@
</el-tab-pane>
</el-tabs>
</el-main>
<el-main class="nopadding" style="position: relative;">
<el-header>
<div class="right-panel">
<el-date-picker
v-model="query.date"
type="daterange"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
value-format="YYYY-MM-DD"
/>
<el-button
type="primary"
icon="el-icon-search"
@click="handleQuery"
>查询</el-button>
</div>
</el-header>
<scTable
ref="table2"
:data="dataList"
row-key="id"
stripe
:height="bottomHeight"
:hideDo="hideDo"
:params="query"
>
<el-table-column type="index" width="50"/>
<el-table-column label="任务编号" prop="number" width="100" fixed="left">
</el-table-column>
<el-table-column label="产品名称" prop="name" width="100" show-overflow-tooltip fixed="left">
</el-table-column>
<el-table-column label="型号" prop="xh" width="100" fixed="left">
</el-table-column>
<el-table-column label="计划量" prop="count" width="100" fixed="left">
</el-table-column>
<el-table-column label="日均产量" prop="count1" width="100" fixed="left">
</el-table-column>
<el-table-column label="计划开工时间" prop="start_date" width="100" fixed="left">
</el-table-column>
<el-table-column label="计划完工时间" prop="end_date" width="100" fixed="left">
</el-table-column>
<el-table-column v-for="item in columList" :label="item" :key="item">
<template #default="scope">
<div :class="bindClass(scope.row)">
<div>{{ scope.row.count01 }}</div>
<div>{{ scope.row.count02 }}</div>
<div>{{ scope.row.count03 }}</div>
</div>
</template>
</el-table-column>
</scTable>
</el-main>
</el-container>
<save-dialog
v-if="dialog.save"
@ -199,7 +256,23 @@ export default {
page_size:20,
date:''
},
tableHeight:null,
hideDo:true,
activeName:'first',
dataList:[
{number:'rwbh2023',name:'玻璃棒',xh:'',count:100,count1:100,start_date:'2023-10-15',end_date:'2023-10-15', count01:100, count02:200, count03:300 },
{number:'rwbh2023',name:'玻璃棒',xh:'',count:100,count1:100,start_date:'2023-10-15',end_date:'2023-10-15', count01:100, count02:250, count03:300 },
{number:'rwbh2023',name:'玻璃棒',xh:'',count:100,count1:100,start_date:'2023-10-15',end_date:'2023-10-15', count01:100, count02:200, count03:300 },
{number:'rwbh2023',name:'玻璃棒',xh:'',count:100,count1:100,start_date:'2023-10-15',end_date:'2023-10-15', count01:100, count02:200, count03:300 },
{number:'rwbh2023',name:'玻璃棒',xh:'',count:100,count1:100,start_date:'2023-10-15',end_date:'2023-10-15', count01:100, count02:200, count03:300 },
{number:'rwbh2023',name:'玻璃棒',xh:'',count:100,count1:100,start_date:'2023-10-15',end_date:'2023-10-15', count01:100, count02:200, count03:300 },
{number:'rwbh2023',name:'玻璃棒',xh:'',count:100,count1:100,start_date:'2023-10-15',end_date:'2023-10-15', count01:100, count02:200, count03:300 },
{number:'rwbh2023',name:'玻璃棒',xh:'',count:100,count1:100,start_date:'2023-10-15',end_date:'2023-10-15', count01:100, count02:200, count03:300 },
{number:'rwbh2023',name:'玻璃棒',xh:'',count:100,count1:100,start_date:'2023-10-15',end_date:'2023-10-15', count01:100, count02:200, count03:300 },
{number:'rwbh2023',name:'玻璃棒',xh:'',count:100,count1:100,start_date:'2023-10-15',end_date:'2023-10-15', count01:100, count02:200, count03:300 },
{number:'rwbh2023',name:'玻璃棒',xh:'',count:100,count1:100,start_date:'2023-10-15',end_date:'2023-10-15', count01:100, count02:200, count03:300 },
],
columList:['10.15','10.16','10.17'],
selection: [],
state_: {
10: '完好',
@ -207,9 +280,45 @@ export default {
30: '在修',
40: '禁用',
},
topHeight:null,
bottomHeight:null,
};
},
mounted(){
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth()+1;
let day = date.getDate();
let timeNow = date.getTime();
let timer = 1000*60*60*24*2;
let data2 = new Date(timeNow-timer);//2
let year2 = data2.getFullYear();
let month2 = data2.getMonth()+1;
let day2 = data2.getDate();
let startDate = year2+'-'+month2+'-'+day2;
let endDate = year+'-'+month+'-'+day;
this.query.date = [startDate,endDate];
let heights = document.getElementById('topContainer').clientHeight;
console.log('heights',heights)
this.topHeight = (heights-115)+'px';
this.bottomHeight = (heights-65)+'px';
},
methods: {
// Class
bindClass(row){
let count01 = row.count01;
let count02 = row.count02;
let count03 = row.count03;
let classInfo = {countBlock:true, redColor: false, greenColor: false, orangeColor:false };
if(count01+count02<count03){
classInfo.redColor = true;
}else if(count01+count02==count03){
classInfo.greenColor = true;
}else if(count01+count02>count03){
classInfo.orangeColor = true;
}
return classInfo
},
//
add() {
this.dialog.save = true;
@ -244,7 +353,6 @@ export default {
});
}).catch(() => {});
},
//
handleSaveSuccess(data, mode) {
if (mode == "add") {
@ -254,7 +362,27 @@ export default {
}
},
handleQuery() {
this.$refs.table.queryData(this.query)
let startDate = this.query.date[0];
let endDate = this.query.date[1];
let arr = this.getBetweenDate(startDate,endDate);
this.columList = arr;
},
getBetweenDate(start,end){
let arr = [];
let startTimer = new Date(start).getTime();
let endTimer = new Date(end).getTime();
let oneTime = 1000*60*60*24;//1
let tempTime = startTimer;
while(tempTime<=endTimer){
let dates = new Date(tempTime);
let year = dates.getFullYear();
let month = dates.getMonth()+1;
let day = dates.getDate();
let item = year+'-'+month+'-'+day;
arr.push(item);
tempTime = tempTime+oneTime;
}
return arr;
},
resetQuery() {
this.query = {};
@ -263,7 +391,21 @@ export default {
};
</script>
<style scoped>
.countBlock{
width: 80px;
color: #ffffff;
text-align: center;
}
.redColor{
background-color: brown;
}
.greenColor{
background-color: green;
}
.orangeColor{
background-color: orange;
}
.el-main.nopadding{
padding:0 20px 20px 20px
padding:0 20px 0 20px
}
</style>

View File

@ -1,9 +1,9 @@
<template>
<el-container style="flex-direction: column">
<el-main class="nopadding" style="position: relative;height: 50%;margin-bottom: 20px;">
<div class="right-panel" style=" display: inline-block;position: absolute;right: 20px;margin-top: 4px;">
<el-main id="topContainer" class="nopadding" style="position: relative;margin-bottom: 10px;">
<div class="right-panel" style=" display: inline-block;position: absolute;right: 20px;margin-top: 4px;z-index: 100;">
<el-button type="primary" icon="el-icon-plus" @click="add">新增</el-button>
<el-button type="primary" icon="el-icon-plus" @click="add">任务下达</el-button>
<el-button type="primary" icon="el-icon-plus" @click="assign">任务下达</el-button>
<el-button type="primary" icon="el-icon-search" @click="handleQuery" >导出</el-button>
</div>
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
@ -13,9 +13,12 @@
:apiObj="apiObj"
row-key="id"
stripe
:height="tableHeight"
:params="query"
@selection-change="handleSelectionChange"
>
<el-table-column type="index" width="50"/>
<el-table-column type="index" width="40"/>
<el-table-column type="selection" width="40"/>
<el-table-column label="任务编号" prop="number">
</el-table-column>
<el-table-column label="产品名称" prop="material" show-overflow-tooltip>
@ -41,7 +44,7 @@
<el-link
type="primary"
@click="table_edit(scope.row)"
v-auth="'equipment.update'"
v-auth="'pu_plan.update'"
>
编辑
</el-link>
@ -49,7 +52,7 @@
<el-link
type="danger"
@click="table_del(scope.row)"
v-auth="'equipment.delete'"
v-auth="'pu_plan.delete'"
>
删除
</el-link>
@ -59,8 +62,8 @@
</el-tab-pane>
</el-tabs>
</el-main>
<el-main class="nopadding" style="position: relative;height: 50%;">
<div class="right-panel" v-if="activeNameSub=='order'" style="display: inline-block;position: absolute;right: 20px;margin-top: 4px;">
<el-main class="nopadding" style="position: relative;">
<div class="right-panel" v-if="activeNameSub=='order'" style="display: inline-block;position: absolute;right: 20px;margin-top: 4px;z-index: 100;">
<el-button type="primary" icon="el-icon-plus">排产</el-button>
<el-button type="primary" icon="el-icon-plus">合并任务</el-button>
</div>
@ -71,9 +74,12 @@
:apiObj="apiObj"
row-key="id"
stripe
:height="tableHeight"
:params="query"
@selection-change="selectionChange"
>
<el-table-column type="index" width="50"/>
<el-table-column type="index" width="40"/>
<el-table-column type="selection" width="40"/>
<el-table-column label="订单编号" prop="number">
</el-table-column>
<el-table-column label="合同编号" prop="material" show-overflow-tooltip>
@ -93,10 +99,7 @@
</scTable>
</el-tab-pane>
<el-tab-pane label="生产进度" name="rate">
<div class="ganntClass" :style="{ height: ganttHeight }" v-loading="ganttLoading">
<div ref="gantt" class="gantt-container"></div>
</div>
<!-- <vue-gantt :tasks="tasks" :timerange="timeRange"></vue-gantt> -->
<GanttComponent class="left-container" :tasks="tasks"></GanttComponent>
</el-tab-pane>
</el-tabs>
</el-main>
@ -109,42 +112,18 @@
></save-dialog>
</template>
<script>
import gantt from 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
import GanttComponent from '@/components/GanttComponent.vue';
import saveDialog from "./mtask_form.vue";
export default {
name: "rparty",
components: {
saveDialog
saveDialog,GanttComponent
},
data() {
return {
ganttHeight: '500px',
ganttLoading: false,
projectId: '',
tasks: {
data: []
},
gantttt:{
data:[],
links:[
{ id:1, source:1, target:3, type:"0"},
{ id:2, source:12323545, target:12345453, type:"1"},
{ id:3, source:12345453, target:12345437, type:"0"}
],
columns:[
{ align: 'right', name: 'color', label: '', width: '15',
template:function(task){
if(task.color){
return "<div class='tttttt' style='background:"+ task.color+ "'>"+"</div>"}
}
},
{ align: 'left', name: 'text', label: '', tree: true, width:"*",min_width:120},
{ align: 'center', name: 'person', label: '负责人', width: '100' },
{ align: 'right', name: 'time', label: '时间节点', width: '80' },
],
},
dialog: {
save: false,
},
@ -163,6 +142,24 @@ export default {
30: '在修',
40: '禁用',
},
selectedId:[],
selectedIds:[],
tableHeight:null,
tasks: {
data: [
{number:'GZ20231012',model:'GB2',cate:'100*50*2',count:300,text: "一天任务",start_date: "2023-10-12",id:'2023101800',duration: 2,progress: 1},
{number:'GZ20231013',model:'GB2',cate:'100*50*2',count:300,text: "一天任务",start_date: "2023-10-13",id:'2023101801',duration: 1,progress: 1},
{number:'GZ20231014',model:'GB2',cate:'100*50*2',count:200, text: "一天任务",start_date: "2023-10-14",id:'2023101802',duration: 1,progress: 0.8},
{number:'GZ20231015',model:'ZB2',cate:'100*50*2',count:100, text: "一天任务", start_date: "2023-10-15",id:'2023101803',duration: 1,progress: 0.6},
{number:'GZ20231016',model:'GB2',cate:'100*50*2',count:50, text: "一天任务", start_date: "2023-10-16",id:'2023101804',duration: 1,progress: 0.4},
{number:'GZ20231017',model:'GB2',cate:'100*50*2',count:0, text: "一天任务", start_date: "2023-10-17",id:'2023101805',duration: 1,progress: 0.2},
{number:'GZ20231018',model:'GB2',cate:'100*50*2',count:300,text: "一天任务",start_date: "2023-10-18",id:'2023101806',duration: 1,progress: 1},
{number:'GZ20231018',model:'GB2',cate:'100*50*2',count:200, text: "一天任务",start_date: "2023-10-19",id:'2023101807',duration: 1,progress: 0.8},
{number:'GZ20231020',model:'ZB2',cate:'100*50*2',count:100, text: "一天任务", start_date: "2023-10-20",id:'2023101808',duration: 1,progress: 0.6},
{number:'GZ20231021',model:'GB2',cate:'100*50*2',count:50, text: "一天任务", start_date: "2023-10-21",id:'2023101809',duration: 1,progress: 0.4},
{number:'GZ20231022',model:'GB2',cate:'100*50*2',count:0, text: "一天任务", start_date: "2023-10-22",id:'20231018010',duration: 1,progress: 0.2},
]
},
};
},
created() {
@ -170,118 +167,30 @@ export default {
gantt.clearAll();
},
mounted(){
var $this = this;
//
gantt.i18n.setLocale('cn');
//, 使,
gantt.config.autosize = false;
//
gantt.config.readonly = false;
//
gantt.config.show_grid = true;
//便使
gantt.config.columns = [
{
name: 'text',label: '分项工程',
tree: true,width: '*',align: 'left',template: function (obj) { return `<span class="gantt-name-box" title="${obj.text}">${obj.text}</span>` }
},
{name: 'beginTime',label: '开始日期', width: '100',align: 'center', template: function (obj) {return obj.beginTime;}},
{name: 'endTime',label: '结束日期',width: '100',align: 'center',template: function (obj) {return obj.endTime;}},
{name: 'limitTime',label: '工期',width: '100', align: 'center',template: function (obj) {return `${obj.limitTime}`;}
}
];
gantt.config.data=[
{ "id": "1635835705701744641", "text": "345分项工程分项工程分项工程", "start_date": "2022-12-01", "beginTime": "2022-12-01", "endTime": "2023-03-14", "limitTime": 103, "duration": 103, "progress": 1 },
{ "id": "1635835705701744642", "text": "111", "start_date": "2023-03-14", "beginTime": "2023-03-14", "endTime": "2023-03-17", "limitTime": 3, "duration": 3, "progress": 1 },
{ "id": "1635835705701744643", "text": "分项工程", "start_date": "2023-03-13", "beginTime": "2023-03-13", "endTime": "2023-03-23", "limitTime": 10, "duration": 10, "progress": 1 },
{ "id": "1635835705701744644", "text": "分项工程1", "start_date": "2023-03-30", "beginTime": "2023-03-30", "endTime": "2023-04-20", "limitTime": 21, "duration": 21, "progress": 1 },
{ "id": "1635835705701744645", "text": "分项工程2", "start_date": "2023-03-21", "beginTime": "2023-03-21", "endTime": "2023-03-29", "limitTime": 8, "duration": 8, "progress": 1 },
{ "id": "1635835705701744646", "text": "分项工程3", "start_date": "2023-03-23", "beginTime": "2023-03-23", "endTime": "2023-03-31", "limitTime": 8, "duration": 8, "progress": 1 },
{ "id": "1635835705701744647", "text": "6", "start_date": "2023-03-29", "beginTime": "2023-03-29", "endTime": "2023-03-30", "limitTime": 1, "duration": 1, "progress": 1 },
{ "id": "1635835705701744648", "text": "1", "start_date": "2023-03-16", "beginTime": "2023-03-16", "endTime": "2023-03-17", "limitTime": 1, "duration": 1, "progress": 1 },
];
//
//gantt.config.fit_tasks = true;
gantt.config.row_height = 44;
//
gantt.config.scale_height = 50;
//gantt
gantt.plugins({
tooltip: true
});
//
var yearScaleTemplate = function (date) {
return date.getFullYear();
};
var monthScaleTemplate = function (date) {
var month = date.getMonth()+1;
return month;
};
var dayScaleTemplate = function (date) {
var month = date.getDate();
return month;
};
//
var yearScaleCss = function () {
return 'yearScaleStyle';
};
var monthScaleCss = function () {
return 'monthScaleStyle';
};
var monthScaleCss = function () {
return 'monthScaleStyle';
};
gantt.config.start_date = new Date(2023, 9, 1);
gantt.config.end_date = new Date(2023, 9, 20);
gantt.config.scales = [
{ unit: 'year', step: 1, format: yearScaleTemplate, css: yearScaleCss },
{ unit: 'month', step: 1, format: monthScaleTemplate, css: monthScaleCss },
{ unit: 'day', step: 1, format: dayScaleTemplate, css: monthScaleCss }
];
gantt.attachEvent('onGanttReady', function () {
var tooltips = gantt.ext.tooltips;
gantt.templates.tooltip_text = function (start, end, task) {
return '任务编号:' + task.no + '<br/>Task' + task.text + '<br/>Role' + task.roleName + '<br/>Owner' + task.ownerName + '<br/>计划开始时间:' + gantt.templates.tooltip_date_format(start) + '<br/>RCD' + gantt.templates.tooltip_date_format(end);
};
});
//
gantt.config.details_on_dblclick = false;
//gantt
gantt.config.show_errors = false;
//
gantt.attachEvent('onBeforeTaskDrag', function (id, mode, e) {
return false;
});
//
gantt.config.drag_move = false;
//
gantt.config.drag_progress = false;
//Link
gantt.config.drag_links = false;
//
gantt.plugins({
marker: true
});
//
var dateToStr = gantt.date.date_to_str(gantt.config.task_date);
var markerId = gantt.addMarker({
start_date: new Date(),
css: 'today', //style
text: 'Today',
title: dateToStr(new Date())
});
gantt.getMarker(markerId);
//
gantt.init(this.$refs.gantt);
let heights = document.getElementById('topContainer').clientHeight;
console.log('heights',heights)
this.tableHeight = (heights-50)+'px';
},
methods: {
handleSelectionChange(selection){
this.selectedIds = [];
selection.forEach(item => {
this.selectedIds.push(item.id)
});
},
assign(){
if(this.selectedIds.length>0){
}else{
this.$message.error('请选择任务')
}
},
selectionChange(selection){
this.selectedId = [];
selection.forEach(item => {
this.selectedId.push(item.id)
});
},
//
getProjectTaskData() {
this.ganttLoading= true;
@ -371,7 +280,7 @@ export default {
</script>
<style scoped>
.el-main.nopadding{
padding:0 20px 20px 20px
padding:0 20px 0 20px
}
.gantt-container {
height: 30%;

View File

@ -1,13 +1,14 @@
<template>
<el-container>
<el-main class="nopadding">
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" style="border-bottom: 1px solid #eeeeee;margin-bottom: 10px;">
<el-container style="flex-direction: column">
<el-main id="topContainer" class="nopadding" style="position: relative;margin-bottom: 10px;">
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane label="混料工序" name="first">
<scTable
ref="table"
:apiObj="apiObj"
row-key="id"
stripe
:height="topHeight"
:params="query"
>
<el-table-column type="index" width="50"/>
@ -31,14 +32,12 @@
type="primary"
@click="table_edit(scope.row)"
v-if="scope.row.status==10"
v-auth="'equipment.update'"
>生产记录
</el-link>
<el-link
type="primary"
@click="table_edit(scope.row)"
@click="table_show(scope.row)"
v-else
v-auth="'equipment.update'"
>查看
</el-link>
</template>
@ -51,6 +50,7 @@
:apiObj="apiObj"
row-key="id"
stripe
:height="topHeight"
:params="query"
>
<el-table-column type="index" width="50"/>
@ -74,14 +74,12 @@
type="primary"
@click="table_edit(scope.row)"
v-if="scope.row.status==10"
v-auth="'equipment.update'"
>生产记录
</el-link>
<el-link
type="primary"
@click="table_edit(scope.row)"
@click="table_show(scope.row)"
v-else
v-auth="'equipment.update'"
>查看
</el-link>
</template>
@ -94,6 +92,7 @@
:apiObj="apiObj"
row-key="id"
stripe
:height="topHeight"
:params="query"
>
<el-table-column type="index" width="50"/>
@ -117,14 +116,12 @@
type="primary"
@click="table_edit(scope.row)"
v-if="scope.row.status==10"
v-auth="'equipment.update'"
>生产记录
</el-link>
<el-link
type="primary"
@click="table_edit(scope.row)"
@click="table_show(scope.row)"
v-else
v-auth="'equipment.update'"
>查看
</el-link>
</template>
@ -132,6 +129,8 @@
</scTable>
</el-tab-pane>
</el-tabs>
</el-main>
<el-main class="nopadding" style="position: relative;">
<div>
<el-row :gutter="20">
<el-col :span="13" style="border-right: 1px solid #eeeeee;">工序进度
@ -139,7 +138,7 @@
ref="table"
row-key="id"
stripe
height="500px"
:height="bottomHeight"
>
<el-table-column type="index" width="50"/>
<el-table-column label="日期" prop="number">
@ -165,7 +164,7 @@
ref="table"
row-key="id"
stripe
height="500px"
:height="bottomHeight"
>
<el-table-column type="index" width="50"/>
<el-table-column label="产品编号" prop="material">
@ -183,16 +182,14 @@
<el-link
type="primary"
@click="table_edit(scope.row)"
v-if="scope.row.status==10"
v-auth="'equipment.update'"
v-if="scope.row.state==10"
>编辑
</el-link>
<!-- 提交后变查看 -->
<el-link
v-else
type="primary"
@click="table_edit(scope.row)"
v-auth="'equipment.update'"
@click="table_show(scope.row)"
>查看
</el-link>
<el-link
@ -238,8 +235,16 @@ export default {
30: '在修',
40: '禁用',
},
topHeight:null,
bottomHeight:null,
};
},
mounted(){
let heights = document.getElementById('topContainer').clientHeight;
console.log('heights',heights)
this.topHeight = (heights-50)+'px';
this.bottomHeight = (heights-40)+'px';
},
methods: {
handleClick(val){
debugger;
@ -274,9 +279,12 @@ export default {
},
//
table_show(row) {
this.dialog.save = true;
this.$nextTick(() => {
this.$refs.saveDialog.open("show").setData(row);
this.$router.push({
name: "worktaskFlog",
query:{mtask:row.id}
});
});
},
//
@ -312,6 +320,6 @@ export default {
</script>
<style scoped>
.el-main.nopadding{
padding:0 20px 20px 20px
padding:0 20px 0 20px
}
</style>

View File

@ -1,6 +1,6 @@
<template>
<el-container style="flex-direction: column">
<el-main class="nopadding" style="position: relative;height: 50%;margin-bottom: 20px;">
<el-main id="topContainer" class="nopadding" style="position: relative;height: 50%;margin-bottom: 10px;">
<div class="right-panel" style=" display: inline-block;position: absolute;right: 20px;margin-top: 4px;">
<el-button type="primary" icon="el-icon-plus" @click="add">新增</el-button>
<el-button type="primary" icon="el-icon-plus" @click="add">任务下达</el-button>
@ -13,6 +13,7 @@
:apiObj="apiObj"
row-key="id"
stripe
:height="tableHeight"
:params="query"
>
<el-table-column type="index" width="50"/>
@ -39,7 +40,6 @@
<el-link
type="primary"
@click="table_edit(scope.row)"
v-auth="'equipment.update'"
>
编辑
</el-link>
@ -47,7 +47,6 @@
<el-link
type="danger"
@click="table_del(scope.row)"
v-auth="'equipment.delete'"
>
删除
</el-link>
@ -69,6 +68,7 @@
:apiObj="apiObj"
row-key="id"
stripe
:height="tableHeight"
:params="query"
>
<el-table-column type="index" width="50"/>
@ -91,50 +91,38 @@
</scTable>
</el-tab-pane>
<el-tab-pane label="生产进度" name="rate">
<div class="ganntClass" :style="{ height: ganttHeight }" v-loading="ganttLoading">
<div ref="gantt" class="gantt-container"></div>
</div>
<GanttComponent class="left-container" :tasks="tasks"></GanttComponent>
</el-tab-pane>
</el-tabs>
</el-main>
</el-container>
<save-dialog
v-if="dialog.save"
ref="saveDialog"
@success="handleSaveSuccess"
@closed="dialog.save = false"
></save-dialog>
</template>
<script>
import gantt from 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
import GanttComponent from '@/components/GanttComponent.vue';
export default {
name: "rparty",
components: {
GanttComponent
},
data() {
return {
ganttHeight: '500px',
ganttLoading: false,
projectId: '',
tasks: {
data: []
},
gantttt:{
data:[],
links:[
{ id:1, source:1, target:3, type:"0"},
{ id:2, source:12323545, target:12345453, type:"1"},
{ id:3, source:12345453, target:12345437, type:"0"}
],
columns:[
{ align: 'right', name: 'color', label: '', width: '15',
template:function(task){
if(task.color){return "<div class='tttttt' style='background:"+ task.color+ "'>"+"</div>"}
}
},
{ align: 'left', name: 'text', label: '', tree: true, width:"*",min_width:120},
{ align: 'center', name: 'person', label: '负责人', width: '100' },
{ align: 'right', name: 'time', label: '时间节点', width: '80' },
],
data: [
{number:'GZ20231012',model:'GB2',cate:'100*50*2',count:300,text: "一天任务",start_date: "2023-10-12",id:'2023101800',duration: 2,progress: 1},
{number:'GZ20231013',model:'GB2',cate:'100*50*2',count:300,text: "一天任务",start_date: "2023-10-13",id:'2023101801',duration: 1,progress: 1},
{number:'GZ20231014',model:'GB2',cate:'100*50*2',count:200, text: "一天任务",start_date: "2023-10-14",id:'2023101802',duration: 1,progress: 0.8},
{number:'GZ20231015',model:'ZB2',cate:'100*50*2',count:100, text: "一天任务", start_date: "2023-10-15",id:'2023101803',duration: 1,progress: 0.6},
{number:'GZ20231016',model:'GB2',cate:'100*50*2',count:50, text: "一天任务", start_date: "2023-10-16",id:'2023101804',duration: 1,progress: 0.4},
{number:'GZ20231017',model:'GB2',cate:'100*50*2',count:0, text: "一天任务", start_date: "2023-10-17",id:'2023101805',duration: 1,progress: 0.2},
{number:'GZ20231018',model:'GB2',cate:'100*50*2',count:300,text: "一天任务",start_date: "2023-10-18",id:'2023101806',duration: 1,progress: 1},
{number:'GZ20231018',model:'GB2',cate:'100*50*2',count:200, text: "一天任务",start_date: "2023-10-19",id:'2023101807',duration: 1,progress: 0.8},
{number:'GZ20231020',model:'ZB2',cate:'100*50*2',count:100, text: "一天任务", start_date: "2023-10-20",id:'2023101808',duration: 1,progress: 0.6},
{number:'GZ20231021',model:'GB2',cate:'100*50*2',count:50, text: "一天任务", start_date: "2023-10-21",id:'2023101809',duration: 1,progress: 0.4},
{number:'GZ20231022',model:'GB2',cate:'100*50*2',count:0, text: "一天任务", start_date: "2023-10-22",id:'20231018010',duration: 1,progress: 0.2},
]
},
dialog: {
save: false,
@ -154,6 +142,7 @@ export default {
30: '在修',
40: '禁用',
},
tableHeight:null
};
},
created() {
@ -161,116 +150,9 @@ export default {
gantt.clearAll();
},
mounted(){
var $this = this;
//
gantt.i18n.setLocale('cn');
//, 使,
gantt.config.autosize = false;
//
gantt.config.readonly = false;
//
gantt.config.show_grid = true;
//便使
gantt.config.columns = [
{
name: 'text',label: '分项工程',
tree: true,width: '*',align: 'left',template: function (obj) { return `<span class="gantt-name-box" title="${obj.text}">${obj.text}</span>` }
},
{name: 'beginTime',label: '开始日期', width: '100',align: 'center', template: function (obj) {return obj.beginTime;}},
{name: 'endTime',label: '结束日期',width: '100',align: 'center',template: function (obj) {return obj.endTime;}},
{name: 'limitTime',label: '工期',width: '100', align: 'center',template: function (obj) {return `${obj.limitTime}`;}
}
];
gantt.config.data=[
{ "id": "1635835705701744641", "text": "345分项工程分项工程分项工程", "start_date": "2022-12-01", "beginTime": "2022-12-01", "endTime": "2023-03-14", "limitTime": 103, "duration": 103, "progress": 1 },
{ "id": "1635835705701744642", "text": "111", "start_date": "2023-03-14", "beginTime": "2023-03-14", "endTime": "2023-03-17", "limitTime": 3, "duration": 3, "progress": 1 },
{ "id": "1635835705701744643", "text": "分项工程", "start_date": "2023-03-13", "beginTime": "2023-03-13", "endTime": "2023-03-23", "limitTime": 10, "duration": 10, "progress": 1 },
{ "id": "1635835705701744644", "text": "分项工程1", "start_date": "2023-03-30", "beginTime": "2023-03-30", "endTime": "2023-04-20", "limitTime": 21, "duration": 21, "progress": 1 },
{ "id": "1635835705701744645", "text": "分项工程2", "start_date": "2023-03-21", "beginTime": "2023-03-21", "endTime": "2023-03-29", "limitTime": 8, "duration": 8, "progress": 1 },
{ "id": "1635835705701744646", "text": "分项工程3", "start_date": "2023-03-23", "beginTime": "2023-03-23", "endTime": "2023-03-31", "limitTime": 8, "duration": 8, "progress": 1 },
{ "id": "1635835705701744647", "text": "6", "start_date": "2023-03-29", "beginTime": "2023-03-29", "endTime": "2023-03-30", "limitTime": 1, "duration": 1, "progress": 1 },
{ "id": "1635835705701744648", "text": "1", "start_date": "2023-03-16", "beginTime": "2023-03-16", "endTime": "2023-03-17", "limitTime": 1, "duration": 1, "progress": 1 },
];
//
//gantt.config.fit_tasks = true;
gantt.config.row_height = 44;
//
gantt.config.scale_height = 50;
//gantt
gantt.plugins({
tooltip: true
});
//
var yearScaleTemplate = function (date) {
return date.getFullYear();
};
var monthScaleTemplate = function (date) {
var month = date.getMonth()+1;
return month;
};
var dayScaleTemplate = function (date) {
var month = date.getDate();
return month;
};
//
var yearScaleCss = function () {
return 'yearScaleStyle';
};
var monthScaleCss = function () {
return 'monthScaleStyle';
};
var monthScaleCss = function () {
return 'monthScaleStyle';
};
gantt.config.start_date = new Date(2023, 9, 1);
gantt.config.end_date = new Date(2023, 9, 20);
gantt.config.scales = [
{ unit: 'year', step: 1, format: yearScaleTemplate, css: yearScaleCss },
{ unit: 'month', step: 1, format: monthScaleTemplate, css: monthScaleCss },
{ unit: 'day', step: 1, format: dayScaleTemplate, css: monthScaleCss }
];
gantt.attachEvent('onGanttReady', function () {
var tooltips = gantt.ext.tooltips;
gantt.templates.tooltip_text = function (start, end, task) {
return '任务编号:' + task.no + '<br/>Task' + task.text + '<br/>Role' + task.roleName + '<br/>Owner' + task.ownerName + '<br/>计划开始时间:' + gantt.templates.tooltip_date_format(start) + '<br/>RCD' + gantt.templates.tooltip_date_format(end);
};
});
//
gantt.config.details_on_dblclick = false;
//gantt
gantt.config.show_errors = false;
//
gantt.attachEvent('onBeforeTaskDrag', function (id, mode, e) {
return false;
});
//
gantt.config.drag_move = false;
//
gantt.config.drag_progress = false;
//Link
gantt.config.drag_links = false;
//
gantt.plugins({
marker: true
});
//
var dateToStr = gantt.date.date_to_str(gantt.config.task_date);
var markerId = gantt.addMarker({
start_date: new Date(),
css: 'today', //style
text: 'Today',
title: dateToStr(new Date())
});
gantt.getMarker(markerId);
//
gantt.init(this.$refs.gantt);
let heights = document.getElementById('topContainer').clientHeight;
console.log('heights',heights)
this.tableHeight = (heights-50)+'px';
},
methods: {
//
@ -362,7 +244,7 @@ export default {
</script>
<style scoped>
.el-main.nopadding{
padding:0 20px 20px 20px
padding:0 20px 0 20px
}
.gantt-container {
height: 30%;

View File

@ -76,7 +76,7 @@
<save-dialog
v-if="dialog.save"
ref="saveDialog"
:puPlan="puPlan"
:mtask="mtask"
@success="handleSaveSuccess"
@closed="dialog.save = false"
></save-dialog>
@ -95,7 +95,7 @@
},
task:'',
orderObj:{},
// apiObj: this.$API.pum.planitem.list,
// apiObj: this.$API.wpm.mlog.list,
apiObj: null,
query: {
page:1,
@ -104,13 +104,13 @@
};
},
mounted(){
this.puPlan = this.$route.query.pu_plan;
// this.getTask();//
this.mtask = this.$route.query.mtask;
this.getTask();//
},
methods: {
//
getTask(){
this.$API.wpm.task.item.req(this.task).then((res) => {
this.$API.pm.mtask.item.req(this.mtask).then((res) => {
debugger;
console.log(res);
this.orderObj = res;