|
|
@@ -0,0 +1,177 @@
|
|
|
+<template>
|
|
|
+ <div :style="'height:' + height + 'px'">
|
|
|
+ <div ref="gantt" class="gantt-container"></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { gantt } from 'dhtmlx-gantt'
|
|
|
+import demo from './demo.json'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'gantt',
|
|
|
+ props: {
|
|
|
+ //容器高度
|
|
|
+ height: {
|
|
|
+ type: [String, Number],
|
|
|
+ default: 300
|
|
|
+ },
|
|
|
+ //时间刻度类型，可选值： hour day
|
|
|
+ scaleType:{
|
|
|
+ type: String,
|
|
|
+ default: 'hour'
|
|
|
+ },
|
|
|
+ //是否显示左侧grid表格
|
|
|
+ showGrid:{
|
|
|
+ type:Boolean,
|
|
|
+ default:true
|
|
|
+ },
|
|
|
+ //grid显示列
|
|
|
+ columns:{
|
|
|
+ type:Array,
|
|
|
+ default: ()=> [
|
|
|
+ {name: "wbs", label: "序号", width: 40, template: gantt.getWBSCode},
|
|
|
+ {name: "produce_no", label: "工单单号", tree: true, width: 220,resize: true},
|
|
|
+ {name: "dispatch_no", label: "派工单号",align: "center", width: 150,resize: true},
|
|
|
+ {name: "node", label: "工序", align: "center",width: 50,resize: true},
|
|
|
+ {name: "station", label: "工位", align: "center",width: 50,resize: true},
|
|
|
+ {name: "prod_user", label: "工号", align: "center",width: 50},
|
|
|
+ {name: "dispatch_num", label: "派工数量",align: "center", width: 60},
|
|
|
+ {name: "report_num", label: "报工数量", align: "center",width: 60},
|
|
|
+ {name: "dispatch_status", label: "工单状态", align: "center",width: 60},
|
|
|
+ {name: "report_status", label: "报工状态", align: "center",width: 60},
|
|
|
+ {name: "start_date", label: "计划开始时间",align: "center", width: 90},
|
|
|
+ {name: "end_date", label: "计划完成时间",align: "center", width: 90},
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ data:{
|
|
|
+ type:Array,
|
|
|
+ default: ()=> demo
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tasks: {
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ scales: {
|
|
|
+ hour:[
|
|
|
+ { unit: "day",
|
|
|
+ format: function(date){
|
|
|
+ return new Date(date).format("yyyy-MM-dd");
|
|
|
+ },
|
|
|
+ css: function (date) {
|
|
|
+ if (date.getDay() == 0 || date.getDay() == 6) {
|
|
|
+ return 'day-item weekend weekend-border-bottom'
|
|
|
+ } else {
|
|
|
+ return 'day-item'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {unit: "hour", step: 8, format: "%H:%i"}
|
|
|
+ ],
|
|
|
+ day:[
|
|
|
+ {unit: "month", step: 1, format: "%Y年%m月"},
|
|
|
+ {unit: "day", step: 1, format: "%j日, 周%D",
|
|
|
+ css: function (date) {
|
|
|
+ if (date.getDay() == 0 || date.getDay() == 6) {
|
|
|
+ return 'day-item weekend weekend-border-bottom'
|
|
|
+ } else {
|
|
|
+ return 'day-item'
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ gantt.config.grid_resize = true;
|
|
|
+ //grid行高
|
|
|
+ gantt.config.row_height = 30
|
|
|
+ //进度条行高
|
|
|
+ gantt.config.bar_height = 24
|
|
|
+ //将包含子任务的任务转换为项目，将没有子任务的项目转换回任务
|
|
|
+ gantt.config.auto_types = true
|
|
|
+ //是否只读
|
|
|
+ gantt.config.readonly = true
|
|
|
+ //设置语言
|
|
|
+ gantt.i18n.setLocale('cn')
|
|
|
+ //是否显示grid
|
|
|
+ gantt.config.show_grid = this.showGrid;
|
|
|
+ //设置时间跨度
|
|
|
+ gantt.config.scales = this.scales[this.scaleType]
|
|
|
+ //时间刻度行高
|
|
|
+ gantt.config.scale_height = 30;
|
|
|
+
|
|
|
+ //进度文字
|
|
|
+ gantt.templates.progress_text = function (start, end, task) {
|
|
|
+ return "<span style='text-align:left;'>" + Math.round(task.progress * 100) + "% </span>";
|
|
|
+ };
|
|
|
+ //设置列
|
|
|
+ gantt.config.columns = this.columns
|
|
|
+ //初始化
|
|
|
+ gantt.init(this.$refs.gantt)
|
|
|
+ //转换数据
|
|
|
+ gantt.parse(this.data)
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+@import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
|
|
|
+/*容器大小*/
|
|
|
+.gantt-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+/*周末字体*/
|
|
|
+/deep/ .weekend {
|
|
|
+ color: rgb(45, 140, 240)!important;
|
|
|
+}
|
|
|
+
|
|
|
+/*gantt进度字体*/
|
|
|
+/deep/ .gantt_task_progress {
|
|
|
+ text-align: left;
|
|
|
+ padding-left: 4px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ color: white;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+/*grid选中行*/
|
|
|
+/deep/ .gantt_grid_data .gantt_row.gantt_selected{
|
|
|
+ background: #C4D9FF!important;
|
|
|
+}
|
|
|
+
|
|
|
+/*grid行hover*/
|
|
|
+/deep/ .gantt_grid_data .gantt_row:hover{
|
|
|
+ background: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+/*gantt选中行*/
|
|
|
+/deep/.gantt_task_row.gantt_selected{
|
|
|
+ background: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+/*grid表头字体*/
|
|
|
+/deep/ .gantt_grid_head_cell{
|
|
|
+ font-size:12px;
|
|
|
+ font-weight:700;
|
|
|
+ color: #606266;
|
|
|
+ font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
|
|
|
+}
|
|
|
+
|
|
|
+/*gantt表头字体*/
|
|
|
+/deep/ .gantt_task .gantt_task_scale .gantt_scale_cell{
|
|
|
+ font-size:12px;
|
|
|
+ font-weight:700;
|
|
|
+ color: #606266;
|
|
|
+ font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
|
|
|
+}
|
|
|
+</style>
|
