Merge branch 'v2' of https://e.coding.net/ctcdevteam/ehs/ehs_web into v2
This commit is contained in:
commit
84adac4680
|
@ -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",
|
||||
|
|
|
@ -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>
|
|
@ -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
|
||||
|
|
|
@ -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>
|
|
@ -1,75 +1,77 @@
|
|||
<template>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<div class="left-panel">
|
||||
<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>
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<el-date-picker
|
||||
v-model="query.date"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
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>
|
||||
<el-main class="nopadding">
|
||||
</div>
|
||||
</el-header>
|
||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
||||
<el-tab-pane label="混料工序" name="first">
|
||||
<scTable
|
||||
<scTable
|
||||
ref="table"
|
||||
:apiObj="apiObj"
|
||||
row-key="id"
|
||||
stripe
|
||||
:height="topHeight"
|
||||
:params="query"
|
||||
>
|
||||
<el-table-column type="index" width="50"/>
|
||||
<el-table-column label="任务编号" prop="number">
|
||||
</el-table-column>
|
||||
<el-table-column label="产品名称" prop="material" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column label="型号" prop="number">
|
||||
</el-table-column>
|
||||
<el-table-column label="任务量" prop="number">
|
||||
</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>
|
||||
<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'"
|
||||
>
|
||||
编辑
|
||||
</el-link>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<el-link
|
||||
type="danger"
|
||||
@click="table_del(scope.row)"
|
||||
v-auth="'equipment.delete'"
|
||||
>
|
||||
删除
|
||||
</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</scTable>
|
||||
>
|
||||
<el-table-column type="index" width="50"/>
|
||||
<el-table-column label="任务编号" prop="number">
|
||||
</el-table-column>
|
||||
<el-table-column label="产品名称" prop="material" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column label="型号" prop="number">
|
||||
</el-table-column>
|
||||
<el-table-column label="任务量" prop="number">
|
||||
</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>
|
||||
<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="'pu_plan.update'"
|
||||
>编辑
|
||||
</el-link>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<el-link
|
||||
type="danger"
|
||||
@click="table_del(scope.row)"
|
||||
v-auth="'pu_plan.delete'"
|
||||
>删除
|
||||
</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</scTable>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="成型7车间" name="second">
|
||||
<scTable
|
||||
|
@ -78,48 +80,48 @@
|
|||
row-key="id"
|
||||
stripe
|
||||
:params="query"
|
||||
>
|
||||
<el-table-column type="index" width="50"/>
|
||||
<el-table-column label="任务编号" prop="number">
|
||||
</el-table-column>
|
||||
<el-table-column label="产品名称" prop="material" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column label="型号" prop="number">
|
||||
</el-table-column>
|
||||
<el-table-column label="任务量" prop="number">
|
||||
</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>
|
||||
<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'"
|
||||
>
|
||||
编辑
|
||||
</el-link>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<el-link
|
||||
type="danger"
|
||||
@click="table_del(scope.row)"
|
||||
v-auth="'equipment.delete'"
|
||||
>
|
||||
删除
|
||||
</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</scTable>
|
||||
>
|
||||
<el-table-column type="index" width="50"/>
|
||||
<el-table-column label="任务编号" prop="number">
|
||||
</el-table-column>
|
||||
<el-table-column label="产品名称" prop="material" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column label="型号" prop="number">
|
||||
</el-table-column>
|
||||
<el-table-column label="任务量" prop="number">
|
||||
</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>
|
||||
<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="'pu_plan.update'"
|
||||
>编辑
|
||||
</el-link>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<el-link
|
||||
type="danger"
|
||||
@click="table_del(scope.row)"
|
||||
v-auth="'pu_plan.delete'"
|
||||
>删除
|
||||
</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</scTable>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="成型10车间" name="third">
|
||||
<scTable
|
||||
|
@ -128,51 +130,106 @@
|
|||
row-key="id"
|
||||
stripe
|
||||
:params="query"
|
||||
>
|
||||
<el-table-column type="index" width="50"/>
|
||||
<el-table-column label="任务编号" prop="number">
|
||||
</el-table-column>
|
||||
<el-table-column label="产品名称" prop="material" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column label="型号" prop="number">
|
||||
</el-table-column>
|
||||
<el-table-column label="任务量" prop="number">
|
||||
</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>
|
||||
<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'"
|
||||
>
|
||||
编辑
|
||||
</el-link>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<el-link
|
||||
type="danger"
|
||||
@click="table_del(scope.row)"
|
||||
v-auth="'equipment.delete'"
|
||||
>
|
||||
删除
|
||||
</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</scTable>
|
||||
>
|
||||
<el-table-column type="index" width="50"/>
|
||||
<el-table-column label="任务编号" prop="number">
|
||||
</el-table-column>
|
||||
<el-table-column label="产品名称" prop="material" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column label="型号" prop="number">
|
||||
</el-table-column>
|
||||
<el-table-column label="任务量" prop="number">
|
||||
</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>
|
||||
<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="'pu_plan.update'"
|
||||
>
|
||||
编辑
|
||||
</el-link>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<el-link
|
||||
type="danger"
|
||||
@click="table_del(scope.row)"
|
||||
v-auth="'pu_plan.delete'"
|
||||
>
|
||||
删除
|
||||
</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</scTable>
|
||||
</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>
|
|
@ -101,8 +101,7 @@
|
|||
</el-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",
|
||||
|
@ -392,6 +391,7 @@ export default {
|
|||
padding: 0 20px 20px 20px
|
||||
}
|
||||
|
||||
|
||||
.gantt-container {
|
||||
height: 30%;
|
||||
}
|
||||
|
|
|
@ -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>
|
|
@ -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%;
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue