zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

页面调整

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

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

79
src/components/GanttComponent.vue Normal file
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>

12
src/config/route.js
View File

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

428
src/views/pm/mtask.vue
View File

@ -1,75 +1,77 @@
<template> <template>
<el-container> <el-container style="flex-direction: column">
<el-header> <el-main id="topContainer" class="nopadding" style="position: relative;margin-bottom: 10px;">
<div class="left-panel"> <el-header>
<div class="left-panel">
<el-button type="primary" icon="el-icon-plus" @click="add">新增任务</el-button> <el-button type="primary" icon="el-icon-plus" @click="add">新增任务</el-button>
</div> </div>
<div class="right-panel"> <div class="right-panel">
<el-date-picker <el-date-picker
v-model="query.date" v-model="query.date"
type="daterange" type="daterange"
range-separator="至" range-separator="至"
start-placeholder="开始时间" start-placeholder="开始时间"
end-placeholder="结束时间" end-placeholder="结束时间"
value-format="YYYY-MM-DD"
/> />
<el-button <el-button
type="primary" type="primary"
icon="el-icon-search" icon="el-icon-search"
@click="handleQuery" @click="handleQuery"
>查询</el-button> >查询</el-button>
</div> </div>
</el-header> </el-header>
<el-main class="nopadding">
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane label="混料工序" name="first"> <el-tab-pane label="混料工序" name="first">
<scTable <scTable
ref="table" ref="table"
:apiObj="apiObj" :apiObj="apiObj"
row-key="id" row-key="id"
stripe stripe
:height="topHeight"
:params="query" :params="query"
> >
<el-table-column type="index" width="50"/> <el-table-column type="index" width="50"/>
<el-table-column label="任务编号" prop="number"> <el-table-column label="任务编号" prop="number">
</el-table-column> </el-table-column>
<el-table-column label="产品名称" prop="material" show-overflow-tooltip> <el-table-column label="产品名称" prop="material" show-overflow-tooltip>
</el-table-column> </el-table-column>
<el-table-column label="型号" prop="number"> <el-table-column label="型号" prop="number">
</el-table-column> </el-table-column>
<el-table-column label="任务量" prop="number"> <el-table-column label="任务量" prop="number">
</el-table-column> </el-table-column>
<el-table-column label="计划量" prop="count"> <el-table-column label="计划量" prop="count">
</el-table-column> </el-table-column>
<!-- <el-table-column label="状态" prop="count"> <el-table-column label="日均产量" prop="count">
</el-table-column> --> </el-table-column>
<el-table-column label="日均产量" prop="count"> <el-table-column label="计划开工时间" prop="start_date">
</el-table-column> </el-table-column>
<el-table-column label="计划开工时间" prop="start_date"> <el-table-column label="计划完工时间" prop="end_date">
</el-table-column> </el-table-column>
<el-table-column label="计划完工时间" prop="end_date"> <el-table-column label="完成产量" prop="count">
</el-table-column> </el-table-column>
<el-table-column label="完成量" prop="count"> <el-table-column label="完成率" prop="count">
</el-table-column> </el-table-column>
<el-table-column label="操作" fixed="right" align="left" width="120"> <el-table-column label="要求描述" prop="count">
<template #default="scope"> </el-table-column>
<el-link <el-table-column label="操作" fixed="right" align="left" width="120">
type="primary" <template #default="scope">
@click="table_edit(scope.row)" <el-link
v-auth="'equipment.update'" type="primary"
> @click="table_edit(scope.row)"
编辑 v-auth="'pu_plan.update'"
</el-link> >编辑
<el-divider direction="vertical"></el-divider> </el-link>
<el-link <el-divider direction="vertical"></el-divider>
type="danger" <el-link
@click="table_del(scope.row)" type="danger"
v-auth="'equipment.delete'" @click="table_del(scope.row)"
> v-auth="'pu_plan.delete'"
删除 >删除
</el-link> </el-link>
</template> </template>
</el-table-column> </el-table-column>
</scTable> </scTable>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="成型7车间" name="second"> <el-tab-pane label="成型7车间" name="second">
<scTable <scTable
@ -78,48 +80,48 @@
row-key="id" row-key="id"
stripe stripe
:params="query" :params="query"
> >
<el-table-column type="index" width="50"/> <el-table-column type="index" width="50"/>
<el-table-column label="任务编号" prop="number"> <el-table-column label="任务编号" prop="number">
</el-table-column> </el-table-column>
<el-table-column label="产品名称" prop="material" show-overflow-tooltip> <el-table-column label="产品名称" prop="material" show-overflow-tooltip>
</el-table-column> </el-table-column>
<el-table-column label="型号" prop="number"> <el-table-column label="型号" prop="number">
</el-table-column> </el-table-column>
<el-table-column label="任务量" prop="number"> <el-table-column label="任务量" prop="number">
</el-table-column> </el-table-column>
<el-table-column label="计划量" prop="count"> <el-table-column label="计划量" prop="count">
</el-table-column> </el-table-column>
<!-- <el-table-column label="状态" prop="count"> <el-table-column label="日均产量" prop="count">
</el-table-column> --> </el-table-column>
<el-table-column label="日均产量" prop="count"> <el-table-column label="计划开工时间" prop="start_date">
</el-table-column> </el-table-column>
<el-table-column label="计划开工时间" prop="start_date"> <el-table-column label="计划完工时间" prop="end_date">
</el-table-column> </el-table-column>
<el-table-column label="计划完工时间" prop="end_date"> <el-table-column label="完成产量" prop="count">
</el-table-column> </el-table-column>
<el-table-column label="完成量" prop="count"> <el-table-column label="完成率" prop="count">
</el-table-column> </el-table-column>
<el-table-column label="操作" fixed="right" align="left" width="120"> <el-table-column label="要求描述" prop="count">
<template #default="scope"> </el-table-column>
<el-link <el-table-column label="操作" fixed="right" align="left" width="120">
type="primary" <template #default="scope">
@click="table_edit(scope.row)" <el-link
v-auth="'equipment.update'" type="primary"
> @click="table_edit(scope.row)"
编辑 v-auth="'pu_plan.update'"
</el-link> >编辑
<el-divider direction="vertical"></el-divider> </el-link>
<el-link <el-divider direction="vertical"></el-divider>
type="danger" <el-link
@click="table_del(scope.row)" type="danger"
v-auth="'equipment.delete'" @click="table_del(scope.row)"
> v-auth="'pu_plan.delete'"
删除 >删除
</el-link> </el-link>
</template> </template>
</el-table-column> </el-table-column>
</scTable> </scTable>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="成型10车间" name="third"> <el-tab-pane label="成型10车间" name="third">
<scTable <scTable
@ -128,51 +130,106 @@
row-key="id" row-key="id"
stripe stripe
:params="query" :params="query"
> >
<el-table-column type="index" width="50"/> <el-table-column type="index" width="50"/>
<el-table-column label="任务编号" prop="number"> <el-table-column label="任务编号" prop="number">
</el-table-column> </el-table-column>
<el-table-column label="产品名称" prop="material" show-overflow-tooltip> <el-table-column label="产品名称" prop="material" show-overflow-tooltip>
</el-table-column> </el-table-column>
<el-table-column label="型号" prop="number"> <el-table-column label="型号" prop="number">
</el-table-column> </el-table-column>
<el-table-column label="任务量" prop="number"> <el-table-column label="任务量" prop="number">
</el-table-column> </el-table-column>
<el-table-column label="计划量" prop="count"> <el-table-column label="计划量" prop="count">
</el-table-column> </el-table-column>
<!-- <el-table-column label="状态" prop="count"> <el-table-column label="日均产量" prop="count">
</el-table-column> --> </el-table-column>
<el-table-column label="日均产量" prop="count"> <el-table-column label="计划开工时间" prop="start_date">
</el-table-column> </el-table-column>
<el-table-column label="计划开工时间" prop="start_date"> <el-table-column label="计划完工时间" prop="end_date">
</el-table-column> </el-table-column>
<el-table-column label="计划完工时间" prop="end_date"> <el-table-column label="完成产量" prop="count">
</el-table-column> </el-table-column>
<el-table-column label="完成量" prop="count"> <el-table-column label="完成率" prop="count">
</el-table-column> </el-table-column>
<el-table-column label="操作" fixed="right" align="left" width="120"> <el-table-column label="要求描述" prop="count">
<template #default="scope"> </el-table-column>
<el-link <el-table-column label="操作" fixed="right" align="left" width="120">
type="primary" <template #default="scope">
@click="table_edit(scope.row)" <el-link
v-auth="'equipment.update'" type="primary"
> @click="table_edit(scope.row)"
编辑 v-auth="'pu_plan.update'"
</el-link> >
<el-divider direction="vertical"></el-divider> 编辑
<el-link </el-link>
type="danger" <el-divider direction="vertical"></el-divider>
@click="table_del(scope.row)" <el-link
v-auth="'equipment.delete'" type="danger"
> @click="table_del(scope.row)"
删除 v-auth="'pu_plan.delete'"
</el-link> >
</template> 删除
</el-table-column> </el-link>
</scTable> </template>
</el-table-column>
</scTable>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</el-main> </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> </el-container>
<save-dialog <save-dialog
v-if="dialog.save" v-if="dialog.save"
@ -199,7 +256,23 @@ export default {
page_size:20, page_size:20,
date:'' date:''
}, },
tableHeight:null,
hideDo:true,
activeName:'first', 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: [], selection: [],
state_: { state_: {
10: '完好', 10: '完好',
@ -207,9 +280,45 @@ export default {
30: '在修', 30: '在修',
40: '禁用', 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: { 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() { add() {
this.dialog.save = true; this.dialog.save = true;
@ -244,7 +353,6 @@ export default {
}); });
}).catch(() => {}); }).catch(() => {});
}, },
//本地更新数据 //本地更新数据
handleSaveSuccess(data, mode) { handleSaveSuccess(data, mode) {
if (mode == "add") { if (mode == "add") {
@ -254,7 +362,27 @@ export default {
} }
}, },
handleQuery() { 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() { resetQuery() {
this.query = {}; this.query = {};
@ -263,7 +391,21 @@ export default {
}; };
</script> </script>
<style scoped> <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{ .el-main.nopadding{
padding:0 20px 20px 20px padding:0 20px 0 20px
} }
</style> </style>

209
src/views/pm/mtask2.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<el-container style="flex-direction: column"> <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;margin-bottom: 10px;">
<div class="right-panel" style=" display: inline-block;position: absolute;right: 20px;margin-top: 4px;"> <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="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> <el-button type="primary" icon="el-icon-search" @click="handleQuery" >导出</el-button>
</div> </div>
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
@ -13,9 +13,12 @@
:apiObj="apiObj" :apiObj="apiObj"
row-key="id" row-key="id"
stripe stripe
:height="tableHeight"
:params="query" :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 label="任务编号" prop="number">
</el-table-column> </el-table-column>
<el-table-column label="产品名称" prop="material" show-overflow-tooltip> <el-table-column label="产品名称" prop="material" show-overflow-tooltip>
@ -41,7 +44,7 @@
<el-link <el-link
type="primary" type="primary"
@click="table_edit(scope.row)" @click="table_edit(scope.row)"
v-auth="'equipment.update'" v-auth="'pu_plan.update'"
> >
编辑 编辑
</el-link> </el-link>
@ -49,7 +52,7 @@
<el-link <el-link
type="danger" type="danger"
@click="table_del(scope.row)" @click="table_del(scope.row)"
v-auth="'equipment.delete'" v-auth="'pu_plan.delete'"
> >
删除 删除
</el-link> </el-link>
@ -59,8 +62,8 @@
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</el-main> </el-main>
<el-main class="nopadding" style="position: relative;height: 50%;"> <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;"> <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>
<el-button type="primary" icon="el-icon-plus">合并任务</el-button> <el-button type="primary" icon="el-icon-plus">合并任务</el-button>
</div> </div>
@ -71,9 +74,12 @@
:apiObj="apiObj" :apiObj="apiObj"
row-key="id" row-key="id"
stripe stripe
:height="tableHeight"
:params="query" :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 label="订单编号" prop="number">
</el-table-column> </el-table-column>
<el-table-column label="合同编号" prop="material" show-overflow-tooltip> <el-table-column label="合同编号" prop="material" show-overflow-tooltip>
@ -93,10 +99,7 @@
</scTable> </scTable>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="生产进度" name="rate"> <el-tab-pane label="生产进度" name="rate">
<div class="ganntClass" :style="{ height: ganttHeight }" v-loading="ganttLoading"> <GanttComponent class="left-container" :tasks="tasks"></GanttComponent>
<div ref="gantt" class="gantt-container"></div>
</div>
<!-- <vue-gantt :tasks="tasks" :timerange="timeRange"></vue-gantt> -->
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</el-main> </el-main>
@ -109,42 +112,18 @@
></save-dialog> ></save-dialog>
</template> </template>
<script> <script>
import gantt from 'dhtmlx-gantt'; import GanttComponent from '@/components/GanttComponent.vue';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
import saveDialog from "./mtask_form.vue"; import saveDialog from "./mtask_form.vue";
export default { export default {
name: "rparty", name: "rparty",
components: { components: {
saveDialog saveDialog,GanttComponent
}, },
data() { data() {
return { return {
ganttHeight: '500px', ganttHeight: '500px',
ganttLoading: false, ganttLoading: false,
projectId: '', 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: { dialog: {
save: false, save: false,
}, },
@ -163,6 +142,24 @@ export default {
30: '在修', 30: '在修',
40: '禁用', 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() { created() {
@ -170,118 +167,30 @@ export default {
gantt.clearAll(); gantt.clearAll();
}, },
mounted(){ mounted(){
var $this = this; let heights = document.getElementById('topContainer').clientHeight;
//本地化 console.log('heights',heights)
gantt.i18n.setLocale('cn'); this.tableHeight = (heights-50)+'px';
//自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
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);
}, },
methods: { 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() { getProjectTaskData() {
this.ganttLoading= true; this.ganttLoading= true;
@ -371,7 +280,7 @@ export default {
</script> </script>
<style scoped> <style scoped>
.el-main.nopadding{ .el-main.nopadding{
padding:0 20px 20px 20px padding:0 20px 0 20px
} }
.gantt-container { .gantt-container {
height: 30%; height: 30%;

50
src/views/wpm/worktask.vue
View File

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

170
src/views/wpm/worktask2.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-container style="flex-direction: column"> <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;"> <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>
<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" :apiObj="apiObj"
row-key="id" row-key="id"
stripe stripe
:height="tableHeight"
:params="query" :params="query"
> >
<el-table-column type="index" width="50"/> <el-table-column type="index" width="50"/>
@ -39,7 +40,6 @@
<el-link <el-link
type="primary" type="primary"
@click="table_edit(scope.row)" @click="table_edit(scope.row)"
v-auth="'equipment.update'"
> >
编辑 编辑
</el-link> </el-link>
@ -47,7 +47,6 @@
<el-link <el-link
type="danger" type="danger"
@click="table_del(scope.row)" @click="table_del(scope.row)"
v-auth="'equipment.delete'"
> >
删除 删除
</el-link> </el-link>
@ -69,6 +68,7 @@
:apiObj="apiObj" :apiObj="apiObj"
row-key="id" row-key="id"
stripe stripe
:height="tableHeight"
:params="query" :params="query"
> >
<el-table-column type="index" width="50"/> <el-table-column type="index" width="50"/>
@ -91,50 +91,38 @@
</scTable> </scTable>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="生产进度" name="rate"> <el-tab-pane label="生产进度" name="rate">
<div class="ganntClass" :style="{ height: ganttHeight }" v-loading="ganttLoading"> <GanttComponent class="left-container" :tasks="tasks"></GanttComponent>
<div ref="gantt" class="gantt-container"></div>
</div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</el-main> </el-main>
</el-container> </el-container>
<save-dialog
v-if="dialog.save"
ref="saveDialog"
@success="handleSaveSuccess"
@closed="dialog.save = false"
></save-dialog>
</template> </template>
<script> <script>
import gantt from 'dhtmlx-gantt'; import GanttComponent from '@/components/GanttComponent.vue';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
export default { export default {
name: "rparty", name: "rparty",
components: {
GanttComponent
},
data() { data() {
return { return {
ganttHeight: '500px', ganttHeight: '500px',
ganttLoading: false, ganttLoading: false,
projectId: '', projectId: '',
tasks: { tasks: {
data: [] data: [
}, {number:'GZ20231012',model:'GB2',cate:'100*50*2',count:300,text: "一天任务",start_date: "2023-10-12",id:'2023101800',duration: 2,progress: 1},
gantttt:{ {number:'GZ20231013',model:'GB2',cate:'100*50*2',count:300,text: "一天任务",start_date: "2023-10-13",id:'2023101801',duration: 1,progress: 1},
data:[], {number:'GZ20231014',model:'GB2',cate:'100*50*2',count:200, text: "一天任务",start_date: "2023-10-14",id:'2023101802',duration: 1,progress: 0.8},
links:[ {number:'GZ20231015',model:'ZB2',cate:'100*50*2',count:100, text: "一天任务", start_date: "2023-10-15",id:'2023101803',duration: 1,progress: 0.6},
{ id:1, source:1, target:3, type:"0"}, {number:'GZ20231016',model:'GB2',cate:'100*50*2',count:50, text: "一天任务", start_date: "2023-10-16",id:'2023101804',duration: 1,progress: 0.4},
{ id:2, source:12323545, target:12345453, type:"1"}, {number:'GZ20231017',model:'GB2',cate:'100*50*2',count:0, text: "一天任务", start_date: "2023-10-17",id:'2023101805',duration: 1,progress: 0.2},
{ id:3, source:12345453, target:12345437, type:"0"} {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},
columns:[ {number:'GZ20231020',model:'ZB2',cate:'100*50*2',count:100, text: "一天任务", start_date: "2023-10-20",id:'2023101808',duration: 1,progress: 0.6},
{ align: 'right', name: 'color', label: '', width: '15', {number:'GZ20231021',model:'GB2',cate:'100*50*2',count:50, text: "一天任务", start_date: "2023-10-21",id:'2023101809',duration: 1,progress: 0.4},
template:function(task){ {number:'GZ20231022',model:'GB2',cate:'100*50*2',count:0, text: "一天任务", start_date: "2023-10-22",id:'20231018010',duration: 1,progress: 0.2},
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: { dialog: {
save: false, save: false,
@ -154,6 +142,7 @@ export default {
30: '在修', 30: '在修',
40: '禁用', 40: '禁用',
}, },
tableHeight:null
}; };
}, },
created() { created() {
@ -161,116 +150,9 @@ export default {
gantt.clearAll(); gantt.clearAll();
}, },
mounted(){ mounted(){
var $this = this; let heights = document.getElementById('topContainer').clientHeight;
//本地化 console.log('heights',heights)
gantt.i18n.setLocale('cn'); this.tableHeight = (heights-50)+'px';
//自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
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);
}, },
methods: { methods: {
//获取甘特图数据 //获取甘特图数据
@ -362,7 +244,7 @@ export default {
</script> </script>
<style scoped> <style scoped>
.el-main.nopadding{ .el-main.nopadding{
padding:0 20px 20px 20px padding:0 20px 0 20px
} }
.gantt-container { .gantt-container {
height: 30%; height: 30%;

10
src/views/wpm/worktaskFlog.vue
View File

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