|
@@ -8,9 +8,10 @@
|
|
:isReadOnly="true"
|
|
:isReadOnly="true"
|
|
tipPlace="top"
|
|
tipPlace="top"
|
|
caption="系统名称:"
|
|
caption="系统名称:"
|
|
- v-model="systemName"
|
|
|
|
|
|
+ v-model="systemId"
|
|
:selectdata="systemList"
|
|
:selectdata="systemList"
|
|
:placeholder="'请选择'"
|
|
:placeholder="'请选择'"
|
|
|
|
+ @change="getGanttChartData"
|
|
/>
|
|
/>
|
|
<div class="legend-container">
|
|
<div class="legend-container">
|
|
<div v-for="(item) in legends" :key="'key_' + item.id" class="item-legend">
|
|
<div v-for="(item) in legends" :key="'key_' + item.id" class="item-legend">
|
|
@@ -26,17 +27,27 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="main-gantt-container">
|
|
<div class="main-gantt-container">
|
|
-
|
|
|
|
|
|
+ <div class="task-title">
|
|
|
|
+ <div class="title">任务标题</div>
|
|
|
|
+ <Tree :data="treeData" />
|
|
|
|
+ </div>
|
|
|
|
+ <div class="chart-container">
|
|
|
|
+ <div id="ganttContainer"></div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
+import { queryGanttChart } from '../../api/ganttChart';
|
|
|
|
+import { querySystemList } from '../../api/coreDeviceReport';
|
|
|
|
+import { Tree } from 'meri-design';
|
|
|
|
+import _ from 'lodash';
|
|
export default {
|
|
export default {
|
|
data () {
|
|
data () {
|
|
return {
|
|
return {
|
|
systemList: [], // 系统列表
|
|
systemList: [], // 系统列表
|
|
- systemName: '', // 系统名称
|
|
|
|
|
|
+ systemId: '', // 系统名称
|
|
legends: [
|
|
legends: [
|
|
{id: 1, text: '按时完成', backgroundColor: '#E7E9EA', borderColor: '#C3C7CB'},
|
|
{id: 1, text: '按时完成', backgroundColor: '#E7E9EA', borderColor: '#C3C7CB'},
|
|
{id: 2, text: '未开始/进行中', backgroundColor: 'rgba(91, 143, 249, 0.2)', borderColor: '#5B8FF9'},
|
|
{id: 2, text: '未开始/进行中', backgroundColor: 'rgba(91, 143, 249, 0.2)', borderColor: '#5B8FF9'},
|
|
@@ -44,6 +55,7 @@ export default {
|
|
{id: 4, text: '按时完成', backgroundColor: '#FBB8B5', borderColor: '#F54E45'},
|
|
{id: 4, text: '按时完成', backgroundColor: '#FBB8B5', borderColor: '#F54E45'},
|
|
], // 图例
|
|
], // 图例
|
|
timeType: 'month', // 甘特图时间类型
|
|
timeType: 'month', // 甘特图时间类型
|
|
|
|
+ treeData: [], // 树结构数据
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
|
|
@@ -51,9 +63,71 @@ export default {
|
|
|
|
|
|
computed: {},
|
|
computed: {},
|
|
|
|
|
|
- mounted() {},
|
|
|
|
|
|
+ mounted() {
|
|
|
|
+ this.getSystemList();
|
|
|
|
+ },
|
|
|
|
|
|
- methods: {}
|
|
|
|
|
|
+ methods: {
|
|
|
|
+ /**
|
|
|
|
+ * 获取系统列表数据
|
|
|
|
+ */
|
|
|
|
+ getSystemList() {
|
|
|
|
+ querySystemList().then((res) => {
|
|
|
|
+ if (res.result === 'success') {
|
|
|
|
+ let data = res.data;
|
|
|
|
+ let newData = [];
|
|
|
|
+ _.forEach(data, (item) => {
|
|
|
|
+ newData.push({
|
|
|
|
+ id: item.code,
|
|
|
|
+ name: item.name
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+ this.systemId = newData[0].id;
|
|
|
|
+ this.systemList = newData;
|
|
|
|
+ this.getGanttChartData();
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ /**
|
|
|
|
+ * 获取甘特图数据
|
|
|
|
+ */
|
|
|
|
+ getGanttChartData() {
|
|
|
|
+ let param = {
|
|
|
|
+ smsxt: this.systemId,
|
|
|
|
+ plazaId: 1000423
|
|
|
|
+ }
|
|
|
|
+ queryGanttChart('/data/base/queryGanttChart', param).then((res) => {
|
|
|
|
+ console.log('res', res)
|
|
|
|
+ const { data, result } = res;
|
|
|
|
+ if (result === 'success') {
|
|
|
|
+ let newData = [];
|
|
|
|
+ _.forEach(data, (item) => {
|
|
|
|
+ let typeName = '';
|
|
|
|
+ _.forIn(item, (val, key) => {
|
|
|
|
+ if (typeName === '') {
|
|
|
|
+ switch (key) {
|
|
|
|
+ case 0:
|
|
|
|
+ typeName = '专维';
|
|
|
|
+ break
|
|
|
|
+ case 1:
|
|
|
|
+ typeName = '维保专业';
|
|
|
|
+ break
|
|
|
|
+ case 2:
|
|
|
|
+ typeName = '第三方视图';
|
|
|
|
+ break
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ console.log('val', val, key)
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ newData.push({
|
|
|
|
+ // id:
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
@@ -99,6 +173,27 @@ export default {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: calc(100% - 44px);
|
|
height: calc(100% - 44px);
|
|
background: #F2F5F7;
|
|
background: #F2F5F7;
|
|
|
|
+ border:1px solid rgba(239,240,241,1);
|
|
|
|
+ border-radius:4px;
|
|
|
|
+ display: flex;
|
|
|
|
+ .task-title{
|
|
|
|
+ width: 404px;
|
|
|
|
+ height: 100%;
|
|
|
|
+ border-right: 1px solid #EFF0F1;
|
|
|
|
+ .title{
|
|
|
|
+ padding-left: 32px;
|
|
|
|
+ padding-top: 15px;
|
|
|
|
+ padding-bottom: 15px;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ color: #646C73;
|
|
|
|
+ line-height: 19px;
|
|
|
|
+ border-bottom: 1px solid #EFF0F1;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .chart-container{
|
|
|
|
+ flex: 1;
|
|
|
|
+ overflow: auto;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|