更改样式
This commit is contained in:
parent
f41e7a8a67
commit
7429dd3dce
|
|
@ -1,13 +1,13 @@
|
|||
<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;margin-bottom: 10px;">
|
||||
<div class="right-panel" style=" display: inline-block;position: absolute;right: 20px;margin-top: 4px;z-index: 100">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="add">新增</el-button>
|
||||
<el-button type="primary" icon="el-icon-plus" @click="mtaskAssgin">任务下达</el-button>
|
||||
</div>
|
||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
||||
<el-tab-pane label="粗加工6车间" name="first">
|
||||
<scTable ref="table1" :apiObj="apiMtask" row-key="id" stripe :params="paramsMtask" hidePagination>
|
||||
<scTable ref="table1" :apiObj="apiMtask" row-key="id" stripe :params="paramsMtask" :height="tableHeight" @selection-change="handleSelectionChange" hidePagination>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column type="index" width="50" />
|
||||
<el-table-column label="任务编号" prop="number">
|
||||
|
|
@ -38,11 +38,11 @@
|
|||
</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 type="primary" @click="table_edit(scope.row)">
|
||||
编辑
|
||||
</el-link>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<el-link type="danger" @click="table_del(scope.row)" v-auth="'equipment.delete'">
|
||||
<el-link type="danger" @click="table_del(scope.row)">
|
||||
删除
|
||||
</el-link>
|
||||
</template>
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
</div>
|
||||
<el-tabs v-model="activeNameSub" class="demo-tabs" @tab-click="handleClick">
|
||||
<el-tab-pane label="订单排产" name="order">
|
||||
<scTable ref="table2" :apiObj="apiOrderItem" row-key="id" stripe :params="paramsOrderItem" hidePagination>
|
||||
<scTable ref="table2" :apiObj="apiOrderItem" row-key="id" stripe :height="tableHeight" :params="paramsOrderItem" hidePagination>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column label="订单编号" prop="number">
|
||||
<template #default="scope">
|
||||
|
|
@ -86,10 +86,7 @@
|
|||
</scTable>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="生产进度" name="rate">
|
||||
<div class="ganntClass" :style="{ height: ganttHeight }" v-loading="ganttLoading">
|
||||
<div ref="gantt" class="gantt-container"></div>
|
||||
</div>
|
||||
<!-- <vue-gantt :tasks="tasks" :timerange="timeRange"></vue-gantt> -->
|
||||
<GanttComponent class="left-container" :tasks="tasks"></GanttComponent>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-main>
|
||||
|
|
@ -106,7 +103,7 @@ import saveDialog from "./mtask_form.vue";
|
|||
export default {
|
||||
name: "rparty",
|
||||
components: {
|
||||
saveDialog
|
||||
saveDialog,GanttComponent
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -119,30 +116,7 @@ export default {
|
|||
ganttLoading: false,
|
||||
projectId: '',
|
||||
orderitems: [],
|
||||
tasks: {
|
||||
data: []
|
||||
},
|
||||
gantttt: {
|
||||
data: [],
|
||||
links: [
|
||||
{ id: 1, source: 1, target: 3, type: "0" },
|
||||
{ id: 2, source: 12323545, target: 12345453, type: "1" },
|
||||
{ id: 3, source: 12345453, target: 12345437, type: "0" }
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
align: 'right', name: 'color', label: '', width: '15',
|
||||
template: function (task) {
|
||||
if (task.color) {
|
||||
return "<div class='tttttt' style='background:" + task.color + "'>" + "</div>"
|
||||
}
|
||||
}
|
||||
},
|
||||
{ align: 'left', name: 'text', label: '', tree: true, width: "*", min_width: 120 },
|
||||
{ align: 'center', name: 'person', label: '负责人', width: '100' },
|
||||
{ align: 'right', name: 'time', label: '时间节点', width: '80' },
|
||||
],
|
||||
},
|
||||
|
||||
|
||||
dialog: {
|
||||
save: false,
|
||||
|
|
@ -150,21 +124,39 @@ export default {
|
|||
apiMtask: this.$API.pm.mtask.list,
|
||||
apiOrderItem: this.$API.sam.orderitem.list,
|
||||
paramsOrderItem: { mtask__isnull: true },
|
||||
paramsMtask: { parent__isnull: true, mgroup__belong_dept__name: '6车间' },
|
||||
paramsMtask2: { parent__isnull: true, mgroup__belong_dept__name: '6车间', material_out__is_hidden: false },
|
||||
paramsMtask: { mgroup__belong_dept__name: '6车间'},
|
||||
query: {
|
||||
page: 1,
|
||||
page_size: 20,
|
||||
date: ''
|
||||
},
|
||||
tableHeight:null,
|
||||
activeName: 'first',
|
||||
activeNameSub: 'order',
|
||||
selection: [],
|
||||
selectedId:[],
|
||||
selectedIds:[],
|
||||
state_: {
|
||||
10: '完好',
|
||||
20: '限用',
|
||||
30: '在修',
|
||||
40: '禁用',
|
||||
},
|
||||
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() {
|
||||
|
|
@ -172,126 +164,37 @@ 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: {
|
||||
mtaskAssgin() {
|
||||
let rows = this.$refs.table1.getSelectionRows()
|
||||
if (rows.length == 0) {
|
||||
handleSelectionChange(selection){
|
||||
this.selectedIds = [];
|
||||
selection.forEach(item => {
|
||||
this.selectedIds.push(item.id)
|
||||
});
|
||||
},
|
||||
mtaskAssgin(){
|
||||
if(this.selectedIds.length>0){
|
||||
|
||||
}else{
|
||||
this.$message.error('未选择任何任务')
|
||||
return
|
||||
}
|
||||
},
|
||||
selectionChange(selection){
|
||||
this.selectedId = [];
|
||||
selection.forEach(item => {
|
||||
this.selectedId.push(item.id)
|
||||
});
|
||||
},
|
||||
// mtaskAssgin() {
|
||||
// let rows = this.$refs.table1.getSelectionRows()
|
||||
// if (rows.length == 0) {
|
||||
// this.$message.error('未选择任何任务')
|
||||
// return
|
||||
// }
|
||||
// },
|
||||
startPlan() {
|
||||
let rows = this.$refs.table2.getSelectionRows()
|
||||
if (rows.length == 0) {
|
||||
|
|
@ -388,7 +291,7 @@ export default {
|
|||
</script>
|
||||
<style scoped>
|
||||
.el-main.nopadding {
|
||||
padding: 0 20px 20px 20px
|
||||
padding: 0 20px 0 20px
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue