Ver código fonte

甘特图接口联调

fujunwen 4 anos atrás
pai
commit
fca6ac45ff
2 arquivos alterados com 105 adições e 5 exclusões
  1. 5 0
      src/api/ganttChart.js
  2. 100 5
      src/views/analysis/GanttChart.vue

+ 5 - 0
src/api/ganttChart.js

@@ -0,0 +1,5 @@
+import httputils from "@/api/httputils";
+
+export function queryGanttChart(url, getParams) {
+  return httputils.getJson(url, getParams);
+}

+ 100 - 5
src/views/analysis/GanttChart.vue

@@ -8,9 +8,10 @@
         :isReadOnly="true" 
         tipPlace="top" 
         caption="系统名称:"
-        v-model="systemName" 
+        v-model="systemId" 
         :selectdata="systemList" 
         :placeholder="'请选择'"
+        @change="getGanttChartData"
       />
       <div class="legend-container">
         <div v-for="(item) in legends" :key="'key_' + item.id" class="item-legend">
@@ -26,17 +27,27 @@
       </div>
     </div>
     <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>
 </template>
 
 <script>
+import { queryGanttChart } from '../../api/ganttChart';
+import { querySystemList } from '../../api/coreDeviceReport';
+import { Tree } from 'meri-design';
+import _ from 'lodash';
 export default {
   data () {
     return {
       systemList: [], // 系统列表
-      systemName: '', // 系统名称
+      systemId: '', // 系统名称
       legends: [
         {id: 1, text: '按时完成', backgroundColor: '#E7E9EA', borderColor: '#C3C7CB'},
         {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'},
       ], // 图例
       timeType: 'month', // 甘特图时间类型
+      treeData: [], // 树结构数据
     }
   },
 
@@ -51,9 +63,71 @@ export default {
 
   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>
 
@@ -99,6 +173,27 @@ export default {
     width: 100%;
     height: calc(100% - 44px);
     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>