318 lines
8.6 KiB
Vue
318 lines
8.6 KiB
Vue
<template>
|
|
<div class="fullHeight whiteBlock">
|
|
<div class="inner">
|
|
<!-- <gantt-elastic
|
|
:tasks="tasks"
|
|
:options="options"
|
|
:dynamic-style="dynamicStyle"
|
|
>
|
|
</gantt-elastic> -->
|
|
<!-- <gantt-header slot="header"></gantt-header>
|
|
<gantt-footer slot="footer"></gantt-footer> -->
|
|
<iframe @load="load" :src="'doc/ExtGantt/Ext甘特图.html?url='+baseURL+'&projectSn='+projectSn+'&token='+$store.state.userInfo.token" id="iframe" class="Extgantt" > </iframe>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
// import GanttElastic from "gantt-elastic";
|
|
// import Iframe from '../vrCenter/iframe.vue';
|
|
export default {
|
|
// components: {
|
|
// "gantt-elastic": GanttElastic
|
|
// Iframe,
|
|
// },
|
|
data() {
|
|
return {
|
|
baseURL:'',
|
|
projectSn:'',
|
|
userId:"",
|
|
tasks: [
|
|
{
|
|
id: 99,
|
|
label: "地基与基础工程",
|
|
user:
|
|
'<a href="https://www.google.com/search?q=John+Doe" target="_blank" style="color:#0077c0;">John Doe</a>',
|
|
start: "2020-12-01",
|
|
duration: 5 * 24 * 60 * 60 * 1000,
|
|
progress: 85,
|
|
type: "task",
|
|
style: {
|
|
base: {
|
|
fill: "#1EBC61",
|
|
stroke: "#0EAC51",
|
|
},
|
|
|
|
// 'tree-row-bar': {
|
|
// fill: '#000',
|
|
// stroke: '#000'
|
|
// },
|
|
// 'tree-row-bar-polygon': {
|
|
// stroke: '#000'
|
|
// }
|
|
},
|
|
progressBarStyle: {
|
|
bar: {
|
|
fill: "#ff0",
|
|
},
|
|
},
|
|
//collapsed: true,
|
|
},
|
|
{
|
|
id: 100,
|
|
label: "无支护土方工程",
|
|
user:
|
|
'<a href="https://www.google.com/search?q=John+Doe" target="_blank" style="color:#0077c0;">John Doe</a>',
|
|
start: "2020-12-01",
|
|
duration: 5 * 24 * 60 * 60 * 1000,
|
|
progress: 85,
|
|
type: "task",
|
|
parentId: 99,
|
|
//collapsed: true,
|
|
},
|
|
{
|
|
id: 101,
|
|
label: "有支护土方工程",
|
|
user:
|
|
'<a href="https://www.google.com/search?q=John+Doe" target="_blank" style="color:#0077c0;">John Doe</a>',
|
|
start: "2020-12-01",
|
|
duration: 5 * 24 * 60 * 60 * 1000,
|
|
progress: 85,
|
|
type: "task",
|
|
parentId: 99,
|
|
//collapsed: true,
|
|
},
|
|
{
|
|
id: 102,
|
|
label: "地基与基础处理工程",
|
|
user:
|
|
'<a href="https://www.google.com/search?q=John+Doe" target="_blank" style="color:#0077c0;">John Doe</a>',
|
|
start: "2020-12-01",
|
|
duration: 5 * 24 * 60 * 60 * 1000,
|
|
progress: 85,
|
|
type: "task",
|
|
parentId: 99,
|
|
//collapsed: true,
|
|
},
|
|
{
|
|
id: 103,
|
|
label: "桩基工程",
|
|
user:
|
|
'<a href="https://www.google.com/search?q=John+Doe" target="_blank" style="color:#0077c0;">John Doe</a>',
|
|
start: "2020-12-01",
|
|
duration: 5 * 24 * 60 * 60 * 1000,
|
|
progress: 85,
|
|
type: "task",
|
|
parentId: 99,
|
|
//collapsed: true,
|
|
},
|
|
{
|
|
id: 1,
|
|
label: "主体结构",
|
|
user:
|
|
'<a href="https://www.google.com/search?q=John+Doe" target="_blank" style="color:#0077c0;">John Doe</a>',
|
|
start: "2020-12-10",
|
|
duration: 7 * 24 * 60 * 60 * 1000,
|
|
progress: 85,
|
|
type: "project",
|
|
//collapsed: true,
|
|
},
|
|
{
|
|
id: 2,
|
|
label: "混泥土结构",
|
|
user:
|
|
'<a href="https://www.google.com/search?q=Peter+Parker" target="_blank" style="color:#0077c0;">Peter Parker</a>',
|
|
parentId: 1,
|
|
start: "2020-12-11",
|
|
duration: 4 * 24 * 60 * 60 * 1000,
|
|
progress: 50,
|
|
type: "milestone",
|
|
// collapsed: true,
|
|
style: {
|
|
base: {
|
|
fill: "#1EBC61",
|
|
stroke: "#0EAC51",
|
|
},
|
|
// 'tree-row-bar': {
|
|
// fill: '#000',
|
|
// stroke: '#000'
|
|
// },
|
|
// 'tree-row-bar-polygon': {
|
|
// stroke: '#000'
|
|
// }
|
|
},
|
|
},
|
|
{
|
|
id: 3,
|
|
label: "Courage is being scared to death, but saddling up anyway.",
|
|
user:
|
|
'<a href="https://www.google.com/search?q=John+Wayne" target="_blank" style="color:#0077c0;">John Wayne</a>',
|
|
parentId: 2,
|
|
start: "2020-12-12",
|
|
duration: 2 * 24 * 60 * 60 * 1000,
|
|
progress: 100,
|
|
type: "task",
|
|
},
|
|
{
|
|
id: 4,
|
|
label: "Put that toy AWAY!",
|
|
user:
|
|
'<a href="https://www.google.com/search?q=Clark+Kent" target="_blank" style="color:#0077c0;">Clark Kent</a>',
|
|
start: "2020-12-13",
|
|
duration: 2 * 24 * 60 * 60 * 1000,
|
|
progress: 50,
|
|
type: "task",
|
|
dependentOn: [3],
|
|
},
|
|
],
|
|
options: {
|
|
maxRows: 100,
|
|
maxHeight: 500,
|
|
title: {
|
|
label: "Your project title as html (link or whatever...)",
|
|
html: false,
|
|
},
|
|
row: {
|
|
height: 12,
|
|
},
|
|
calendar: {
|
|
hour: {
|
|
display: false,
|
|
},
|
|
},
|
|
chart: {
|
|
progress: {
|
|
bar: false,
|
|
},
|
|
expander: {
|
|
display: true,
|
|
},
|
|
},
|
|
taskList: {
|
|
expander: {
|
|
straight: false,
|
|
},
|
|
columns: [
|
|
{
|
|
id: 1,
|
|
label: "ID",
|
|
value: "id",
|
|
width: 40,
|
|
},
|
|
{
|
|
id: 2,
|
|
label: "分部分项工程名称",
|
|
value: "label",
|
|
width: 200,
|
|
expander: true,
|
|
html: true,
|
|
events: {
|
|
click({ data, column }) {
|
|
alert("description clicked!\n" + data.label);
|
|
},
|
|
},
|
|
},
|
|
|
|
{
|
|
id: 3,
|
|
label: "开始日期",
|
|
value: "start",
|
|
width: 85,
|
|
},
|
|
{
|
|
id: 6,
|
|
label: "结束日期",
|
|
value: "start",
|
|
width: 85,
|
|
},
|
|
{
|
|
id: 5,
|
|
label: "当前进度(%)",
|
|
value: "progress",
|
|
width: 80,
|
|
style: {
|
|
"task-list-header-label": {
|
|
"text-align": "center",
|
|
width: "100%",
|
|
},
|
|
"task-list-item-value-container": {
|
|
"text-align": "center",
|
|
width: "100%",
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
locale: {
|
|
name: "en", // name String
|
|
weekdays: "周日_周一_周二_周三_周四_周五_周六".split("_"), // weekdays Array
|
|
weekdaysShort: "周日_周一_周二_周三_周四_周五_周六".split("_"), // OPTIONAL, short weekdays Array, use first three letters if not provided
|
|
weekdaysMin: "周日_周一_周二_周三_周四_周五_周六".split("_"), // OPTIONAL, min weekdays Array, use first two letters if not provided
|
|
months: "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split(
|
|
"_"
|
|
), // months Array
|
|
monthsShort: "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split(
|
|
"_"
|
|
), // OPTIONAL, short months Array, use first three letters if not provided
|
|
},
|
|
},
|
|
dynamicStyle: {
|
|
"task-list-header-label": {
|
|
"font-weight": "bold",
|
|
},
|
|
},
|
|
|
|
};
|
|
},
|
|
created(){
|
|
this.baseURL = this.$http.defaults.baseURL;
|
|
this.projectSn = this.$store.state.projectSn;
|
|
this.userId = this.$store.state.userInfo.userId
|
|
},
|
|
methods:{
|
|
load() {
|
|
var idom = document.getElementById('iframe').contentWindow;
|
|
idom.postMessage(this.userId)
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.fullHeight{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.inner {
|
|
padding: 25px 20px;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
.left {
|
|
span {
|
|
margin-right: 64px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
.square {
|
|
display: inline-block;
|
|
width: 12px;
|
|
height: 12px;
|
|
margin-right: 7px;
|
|
vertical-align: middle;
|
|
}
|
|
.square1 {
|
|
background-color: rgba(76, 135, 254, 1);
|
|
}
|
|
.square2 {
|
|
background-color: rgba(84, 207, 142, 1);
|
|
}
|
|
.square3 {
|
|
background-color: rgba(243, 208, 37, 1);
|
|
}
|
|
.Extgantt{
|
|
width: 100%;
|
|
height: 100% ;
|
|
border: none;
|
|
|
|
}
|
|
</style> |