接口对接完成

src/utils/eventBus.js

@@ -0,0 +1,75 @@
+/*
+ * @Purpose: vue项目中的全局调用事件
+ * @FilePath: eventBus.ts
+ * @Author: sujunling
+ * @Date: 2022-11-15 16:18:08
+ * @Original: original
+ * @Descripttion:
+ */
+
+class EventBus {
+
+    constructor() {
+        this.list = {};
+        this.casualData = {};
+    }
+
+    emit(name, ...args) {
+        let eventName = this.list[name];
+        try {
+            if (eventName) {
+                if (typeof eventName == 'object') {
+                    eventName.map((fn) => fn.apply(this, args));
+                } else {
+                    eventName.apply(this, args)
+                }
+            } else {
+                this.casualData[name] = args;
+                console.log('没有找到这个事件:', name)
+            }
+        } catch (error) {
+            console.log(error);
+        }
+    }
+
+    on(name, callback) {
+        let fn = this.list[name] || [];
+        fn.push(callback);
+        this.list[name] = fn;
+        if (this.casualData[name]) {
+            this.emit(name, this.casualData[name])
+            delete this.casualData[name];
+        }
+    }
+
+    one(name, callback) {
+        this.list[name] = callback;
+        if (this.casualData[name]) {
+            this.emit(name, this.casualData[name])
+            delete this.casualData[name];
+        }
+    }
+
+    off(name, callback) {
+        let fn = this.list[name];
+        if (fn) {
+            let index = fn.indexOf(callback);
+            if (index > -1) {
+                fn.splice(index, 1);
+            }
+        }
+    }
+
+    remove(name) {
+        delete this.list[name];
+    }
+}
+
+const getInstance = () => {
+    if (!window['eventBus']) {
+        window['eventBus'] = new EventBus();
+    }
+    return window['eventBus'];
+};
+
+export default getInstance();

src/views/groupPage/districtPageModules/decisionSupport/constructionProgressSimulation/BottomBox.vue

@@ -19,30 +19,40 @@
           <span class="site-info">进度模拟方案</span>
           <span
             class="but_title_tab"
-            :class="{ activeBut: activeName == i.name }"
+            :class="{ activeBut: activeName == i.num_boards }"
             v-for="(i, k) in titleList"
             :key="k"
-            @click="changeTab(i.name)"
-            >{{ k ? i.name : `【最优】${i.name}` }}{{ i.date }}</span
+            @click="changeActive(i.num_boards)"
+            >{{ k ? `方案${i.num_boards + 1}` : `【最优】方案${i.num_boards + 1}` }}:&nbsp;&nbsp;工期{{
+              Math.ceil(Math.abs(i.time_score))
+            }}天</span
           >
           <i class="export-file" @click="project">导出project文件</i>
         </div>
       </div>
-      <div class="but_table" :class="{activeNoData2: tableData.length == 0}">
+      <div class="but_table" :class="{ activeNoData2: tableData.length == 0 }">
         <el-table v-if="tableData.length" :data="tableData" size="mini" style="width: 100%" height="230">
-          <el-table-column prop="num" label="序号"> </el-table-column>
-          <el-table-column prop="date" label="施工工序"> </el-table-column>
-          <el-table-column prop="name" label="联合单元" width="200"> </el-table-column>
-          <el-table-column prop="total_time" label="工期（工作日）"> </el-table-column>
-          <el-table-column prop="start_time" label="开始时间"> </el-table-column>
-          <el-table-column prop="end_time" label="结束时间"> </el-table-column>
-          <el-table-column prop="2025-04-21" label="2025-04-21"> </el-table-column>
-          <el-table-column prop="2025-04-22" label="2025-04-22"> </el-table-column>
-          <el-table-column prop="2025-04-23" label="2025-04-23"> </el-table-column>
-          <el-table-column prop="2025-04-24" label="2025-04-24"> </el-table-column>
-          <el-table-column prop="2025-04-25" label="2025-04-25"> </el-table-column>
-          <el-table-column prop="2025-04-26" label="2025-04-26"> </el-table-column>
-          <el-table-column prop="2025-04-27" label="2025-04-27"> </el-table-column>
+          <el-table-column prop="num" label="序号"
+            ><template slot-scope="scope">{{ scope.$index + 1 }}</template></el-table-column
+          >
+          <el-table-column prop="step" label="施工工序"> </el-table-column>
+          <el-table-column prop="joint_unit" label="联合单元" width="200"> </el-table-column>
+          <el-table-column prop="duration_days" label="工期（工作日）"
+            ><template slot-scope="{ row }">{{ Math.ceil(Math.abs(row.duration_days)) }}</template></el-table-column
+          >
+          <el-table-column prop="start_time" label="开始时间"
+            ><template slot-scope="{ row }">{{ getDate(row.start_time) }}</template></el-table-column
+          >
+          <el-table-column prop="end_time" label="结束时间"
+            ><template slot-scope="{ row }">{{ getDate(row.end_time) }}</template></el-table-column
+          >
+          <el-table-column prop="" label="查看详情">
+            <template slot-scope="scope">
+              <el-button class="tdbutton" size="mini" type="primary" @click="openNewNode(scope.row.step)"
+                >新建</el-button
+              >
+            </template>
+          </el-table-column>
         </el-table>
       </div>
     </div>
@@ -50,120 +60,14 @@
 </template>
 
 <script>
+import eventBus from "@/utils/eventBus.js";
 export default {
   data() {
     return {
-      activeName: '方案一',
-      titleList: [
-        {
-          name: '方案一',
-          date: '工期226天',
-          status: '进行中'
-        },
-        {
-          name: '方案二',
-          date: '工期223天',
-          status: '进行中'
-        },
-        {
-          name: '方案三',
-          date: '工期216天',
-          status: '进行中'
-        }
-      ],
-      tableData: [
-        {
-          num: 1,
-          date: '第一层土方开挖',
-          name: '区域A,区域B,区域C,区域D',
-          total_time: 5,
-          start_time: '2025-05-21',
-          end_time: '2026-05-21',
-          '2025-04-21': 1,
-          '2025-04-22': 1,
-          '2025-04-23': 1,
-          '2025-04-24': 1,
-          '2025-04-25': 1,
-          '2025-04-26': 1,
-          '2025-04-27': 1
-        },
-        {
-          num: 1,
-          date: '第一层土方开挖',
-          name: '区域A,区域B,区域C,区域D',
-          total_time: 5,
-          start_time: '2025-05-21',
-          end_time: '2026-05-21',
-          '2025-04-21': 1,
-          '2025-04-22': 1,
-          '2025-04-23': 1,
-          '2025-04-24': 1,
-          '2025-04-25': 1,
-          '2025-04-26': 1,
-          '2025-04-27': 1
-        },
-        {
-          num: 1,
-          date: '第一层土方开挖',
-          name: '区域A,区域B,区域C,区域D',
-          total_time: 5,
-          start_time: '2025-05-21',
-          end_time: '2026-05-21',
-          '2025-04-21': 1,
-          '2025-04-22': 1,
-          '2025-04-23': 1,
-          '2025-04-24': 1,
-          '2025-04-25': 1,
-          '2025-04-26': 1,
-          '2025-04-27': 1
-        },
-        {
-          num: 1,
-          date: '第一层土方开挖',
-          name: '区域A,区域B,区域C,区域D',
-          total_time: 5,
-          start_time: '2025-05-21',
-          end_time: '2026-05-21',
-          '2025-04-21': 1,
-          '2025-04-22': 1,
-          '2025-04-23': 1,
-          '2025-04-24': 1,
-          '2025-04-25': 1,
-          '2025-04-26': 1,
-          '2025-04-27': 1
-        },
-        {
-          num: 1,
-          date: '第一层土方开挖',
-          name: '区域A,区域B,区域C,区域D',
-          total_time: 5,
-          start_time: '2025-05-21',
-          end_time: '2026-05-21',
-          '2025-04-21': 1,
-          '2025-04-22': 1,
-          '2025-04-23': 1,
-          '2025-04-24': 1,
-          '2025-04-25': 1,
-          '2025-04-26': 1,
-          '2025-04-27': 1
-        },
-        {
-          num: 1,
-          date: '第一层土方开挖',
-          name: '区域A,区域B,区域C,区域D',
-          total_time: 5,
-          start_time: '2025-05-21',
-          end_time: '2026-05-21',
-          '2025-04-21': 1,
-          '2025-04-22': 1,
-          '2025-04-23': 1,
-          '2025-04-24': 1,
-          '2025-04-25': 1,
-          '2025-04-26': 1,
-          '2025-04-27': 1
-        }
-      ],
-      tableData:[]
+      activeName: 0,
+      titleList: [],
+      tableData: [],
+      best_schedule: []
     }
   },
   mounted() {
@@ -203,11 +107,42 @@ export default {
   },
 
   methods: {
-    changeTab(t) {
+    indexMethod(index) {
+      return index + 1
+    },
+
+    changeActive(t) {
       this.activeName = t
+      this.tableData = this.titleList[t].schedule
     },
 
-    project() {}
+    changeTable(t, best_schedule) {
+      this.best_schedule = best_schedule
+      this.titleList = t
+      this.tableData = t[this.activeName].schedule
+    },
+
+    getDate(isoDate) {
+      const date = new Date(isoDate)
+      const year = date.getFullYear()
+      const month = String(date.getMonth() + 1).padStart(2, '0')
+      const day = String(date.getDate()).padStart(2, '0')
+      const hours = String(date.getHours()).padStart(2, '0')
+      const minutes = String(date.getMinutes()).padStart(2, '0')
+      const seconds = String(date.getSeconds()).padStart(2, '0')
+      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+    },
+
+    project() {},
+
+    openNewNode(step) {
+      if (this.best_schedule && this.best_schedule.length) {
+        var arr = this.best_schedule.filter((i) => i.step == step)
+        if (arr && arr.length) {
+            eventBus.emit("best_schedule", arr);
+        }
+      }
+    }
   }
 }
 </script>
@@ -233,10 +168,12 @@ export default {
   font-size: 14px;
   color: #2ba7ff;
 }
-.but_table .el-table--border::after, .but_table .el-table--group::after, .but_table .el-table::before{
-    background-color: rgba(14, 167, 255, 0);
+.but_table .el-table--border::after,
+.but_table .el-table--group::after,
+.but_table .el-table::before {
+  background-color: rgba(14, 167, 255, 0);
 }
-.activeNoData2{
+.activeNoData2 {
   height: 100%;
   background: url('~@/assets/images/jczc/noData2.png') no-repeat center center;
   background-size: 102px 74px;
@@ -272,6 +209,7 @@ export default {
   margin-left: 0.10417rem;
   position: absolute;
   font-family: Source Han Sans CN;
+  overflow: hidden;
   background: linear-gradient(0deg, rgba(14, 167, 255, 0.7) 0%, rgba(14, 167, 255, 0.2) 100%);
   .head {
     height: 0.166667rem /* 32/192 */;

src/views/groupPage/districtPageModules/decisionSupport/constructionProgressSimulation/LeftBox.vue

@@ -13,7 +13,7 @@
           <div class="addDiv" @click="addStopDate"></div>
         </div>
       </div>
-      <div class="bodyBox" :class="{activeNoData: stopDateList.length == 0}">
+      <div class="bodyBox" :class="{ activeNoData: stopDateList.length == 0 }">
         <div class="inputStopDate" v-if="stopDateList.length > 0">
           <template v-for="(item, index) in stopDateList">
             <div :key="'inputStopDate_' + index" class="dateTimeDiv">
@@ -27,7 +27,7 @@
                 end-placeholder="结束日期"
               ></el-date-picker>
               <div class="removeDiv" @click="removeStopDate(index)">
-                <i class="removeDate el-icon-remove-outline" style="color:#78B6E7;"></i>
+                <i class="removeDate el-icon-remove-outline" style="color: #78b6e7"></i>
               </div>
             </div>
           </template>
@@ -35,11 +35,15 @@
         <div class="tableBox" v-if="tableData.length">
           <div class="title">【方案1】因停工导致延期的施工工序</div>
           <el-table :data="tableData" size="mini" style="width: 100%" height="250">
-            <el-table-column prop="date" label="施工工序" width="88"> </el-table-column>
-            <el-table-column prop="name" label="联合单元" width="90"> </el-table-column>
+            <el-table-column prop="step" label="施工工序" width="88"> </el-table-column>
+            <el-table-column prop="joint_unit" label="联合单元" width="90"> </el-table-column>
             <el-table-column label="施工天数">
-              <el-table-column prop="num1" label="延期前" width="65"> </el-table-column>
-              <el-table-column prop="num2" label="延期后" width="65"> </el-table-column>
+              <el-table-column prop="start_time" label="停工起" width="65"
+                ><template slot-scope="{ row }">{{ getDate(row.start_time) }}</template></el-table-column
+              >
+              <el-table-column prop="end_time" label="停工止" width="65">
+                <template slot-scope="{ row }">{{ getDate(row.end_time) }}</template></el-table-column
+              >
             </el-table-column>
           </el-table>
         </div>
@@ -53,41 +57,17 @@
 </template>
 
 <script>
+import eventBus from '@/utils/eventBus.js'
+
 export default {
   data() {
     return {
-      //进度模拟方案
       stopDateList: [],
-      tableData:[],
-    //   tableData: [
-    //     {
-    //       date: '第一层土方开挖',
-    //       name: '区域A,区域B,区域C,区域D',
-    //       num1: 5,
-    //       num2: 10
-    //     },
-    //     {
-    //       date: '第一层土方开挖',
-    //       name: '区域A,区域B,区域C,区域D',
-    //       num1: 5,
-    //       num2: 10
-    //     },
-    //     {
-    //       date: '第一层土方开挖',
-    //       name: '区域A,区域B,区域C,区域D',
-    //       num1: 5,
-    //       num2: 10
-    //     },
-    //     {
-    //       date: '第一层土方开挖',
-    //       name: '区域A,区域B,区域C,区域D',
-    //       num1: 5,
-    //       num2: 10
-    //     }
-    //   ]
+      tableData: []
     }
   },
   mounted() {
+    eventBus.one('best_schedule', (i) => (this.tableData = i))
     this.getPageData()
   },
 
@@ -113,6 +93,23 @@ export default {
       } else {
         this.stopDateList.splice(index, 1)
       }
+    },
+
+    getDate(isoDate) {
+      const date = new Date(isoDate)
+      const year = date.getFullYear()
+      const month = String(date.getMonth() + 1).padStart(2, '0')
+      const day = String(date.getDate()).padStart(2, '0')
+      const hours = String(date.getHours()).padStart(2, '0')
+      const minutes = String(date.getMinutes()).padStart(2, '0')
+      const seconds = String(date.getSeconds()).padStart(2, '0')
+      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+    },
+
+    changeTable(r) {
+      r.map((i) => {
+        this.stopDateList.push({ value: [i.start, i.end] })
+      })
     }
   }
 }
@@ -139,17 +136,22 @@ export default {
   font-size: 14px;
   color: #2ba7ff;
 }
-.tableBox .el-table--border .el-table__cell, .tableBox .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
-    border-right: 1px solid #216294;
+.tableBox .el-table--border .el-table__cell,
+.tableBox .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
+  border-right: 1px solid #216294;
 }
-.tableBox .el-table--border, .tableBox .el-table--group {
-    border: 1px solid #216294;
+.tableBox .el-table--border,
+.tableBox .el-table--group {
+  border: 1px solid #216294;
 }
-.tableBox  .el-table--border th.el-table__cell, .tableBox  .el-table__fixed-right-patch {
-    border-bottom: 1px solid #216294;
+.tableBox .el-table--border th.el-table__cell,
+.tableBox .el-table__fixed-right-patch {
+  border-bottom: 1px solid #216294;
 }
-.tableBox .el-table--border::after, .tableBox .el-table--group::after, .tableBox .el-table::before{
-    background-color: rgba(14, 167, 255, 0);
+.tableBox .el-table--border::after,
+.tableBox .el-table--group::after,
+.tableBox .el-table::before {
+  background-color: rgba(14, 167, 255, 0);
 }
 </style>
 <style>
@@ -164,10 +166,10 @@ export default {
 .dateTimeDiv .el-range-separator {
   color: #d9d8d8;
 }
-.tableBox .el-table .el-table__cell{
-    padding: 0px;
+.tableBox .el-table .el-table__cell {
+  padding: 0px;
 }
-.activeNoData{
+.activeNoData {
   height: 100%;
   background: url('~@/assets/images/jczc/noData.png') no-repeat top right;
   background-size: 202.4px 307.5px;
@@ -181,7 +183,7 @@ export default {
 .tableBox {
   margin-top: 20px;
   padding-top: 15px;
-  border-top: dashed 1px rgba(42 ,147,255,0.3);
+  border-top: dashed 1px rgba(42, 147, 255, 0.3);
 }
 .tableBox .title {
   font-weight: 500;

src/views/groupPage/districtPageModules/decisionSupport/constructionProgressSimulation/RightBox.vue

@@ -67,9 +67,6 @@ export default {
     return {
       //施工计划时间段
       planDateList: [
-        {
-          value: ''
-        }
       ],
       tableData: []
     }
@@ -79,7 +76,7 @@ export default {
   },
 
   methods: {
-    updateFile(f,item, k) {
+    updateFile(f, item, k) {
       const formData = new FormData()
       formData.append('file', f)
       formData.append('name', k ? 'construction_data_2' : 'construction_data_1')
@@ -89,10 +86,10 @@ export default {
       })
         .then((response) => response.json())
         .then((r) => {
-            if(r && r.code == 1){
-                this.$message.success(k ? '施工调整表格数据上传成功！' : '施工计划表格数据上传成功！')
-                item.file = r.result;
-            }
+          if (r && r.code == 1) {
+            this.$message.success(k ? '施工调整表格数据上传成功！' : '施工计划表格数据上传成功！')
+            item.file = r.result
+          }
         })
     },
 
@@ -101,7 +98,7 @@ export default {
       this.resetState()
       const file = event.target.files[0]
       if (!file) return
-      this.updateFile(file, item, index);
+      this.updateFile(file, item, index)
       this.fileName = file.name
       this.isLoading = true
       const reader = new FileReader()
@@ -200,6 +197,19 @@ export default {
           this.planDateList.splice(index, 1)
         }
       }
+    },
+
+    changeTable(r) {
+      if (r.start_date) {
+        this.planDateList.push({
+          value: r.start_date
+        })
+      }
+      if (r.conversion_date) {
+        this.planDateList.push({
+          value: r.conversion_date
+        })
+      }
     }
   }
 }

src/views/groupPage/districtPageModules/decisionSupport/constructionProgressSimulation/index.vue

@@ -10,7 +10,7 @@
     <BottomBox ref="BottomBox" />
     <div class="modelListDiv">
       <i>大公桥调蓄池施工进度模拟</i>
-      <b @click="start">开始模拟</b>
+      <b @click="start"><span class="el-icon-loading" v-if="startType"></span>{{ title }}</b>
     </div>
   </div>
 </template>
@@ -25,6 +25,8 @@ export default {
   components: { LeftBox, RightBox, BottomBox },
   data() {
     return {
+      title: '开始模拟',
+      startType: false,
       data: {
         c_puct: Math.sqrt(2),
         n_playout: 2000,
@@ -36,6 +38,7 @@ export default {
   },
   mounted() {
     this.changeDom()
+    this.addFile()
     window.init = () => {
       var data = {
         c_puct: 1.4142135623730951,
@@ -53,6 +56,8 @@ export default {
 
   methods: {
     start() {
+      this.title = '分析中请等待'
+      this.startType = true
       var l = this.$refs.LeftBox.stopDateList
       if (l && l.length) {
         l.map((i) => {
@@ -86,7 +91,7 @@ export default {
       } else {
         return this.$message.error('请填写完整的开始计划时间和调整计划时间！')
       }
-      this.getData(this.data)
+    //   this.getData(this.data)
     },
 
     getData(data, callback) {
@@ -117,7 +122,6 @@ export default {
         best_time_score: -224.421390070922,
         mpp_file: null
       })
-      return
       fetch('http://127.0.0.1:8000/run', {
         method: 'POST',
         headers: {
@@ -125,12 +129,24 @@ export default {
         },
         body: JSON.stringify(data)
       })
-        .then(function (e) {
+        .then((e) => {
           return e.json()
         })
-        .then(function (r) {
+        .then((r) => {
           console.log('分析结果:', r)
-          callback && callback(r)
+          this.startType = false;
+          this.title = '开始模拟';
+          if (r.code == 1) {
+            if (r.result.outcome && r.result.outcome.all_results && r.result.outcome.all_results.length) {
+              this.$refs.BottomBox.changeTable(r.result.outcome.all_results, r.result.outcome.best_schedule)
+            }
+            if (r.result.request) {
+              this.$refs.RightBox.changeTable(r.result.request)
+            }
+            if (r.result.request && r.result.request.rain_intervals && r.result.request.rain_intervals.length) {
+              this.$refs.LeftBox.changeTable(r.result.request.rain_intervals)
+            }
+          }
         })
     },
 
@@ -155,7 +171,28 @@ export default {
       }
     },
 
-    addFile() {}
+    addFile() {
+      fetch('./static/testData.json')
+        .then((e) => {
+          return e.json()
+        })
+        .then((r) => {
+          console.log('分析结果:', r)
+          if (r.code == 1) {
+            if (r.result.outcome && r.result.outcome.all_results && r.result.outcome.all_results.length) {
+              this.$refs.BottomBox.changeTable(r.result.outcome.all_results, r.result.outcome.best_schedule)
+            }
+            if (r.result.request) {
+              this.$refs.RightBox.changeTable(r.result.request)
+            }
+            if (r.result.request && r.result.request.rain_intervals && r.result.request.rain_intervals.length) {
+              this.$refs.LeftBox.changeTable(r.result.request.rain_intervals)
+            }
+          }
+        })
+    },
+
+    changeTable(r) {}
   }
 }
 </script>
@@ -166,7 +203,7 @@ export default {
   font-weight: bold;
   font-size: 16px;
   color: #feffff;
-  width: 100px;
+  width: 114px;
   height: 34px;
   background: #2187d3;
   border-radius: 4px;

tsconfig.json

@@ -21,7 +21,7 @@
     },
     "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx", "src/utils/eventBus.js"],
   "exclude": ["node_modules"],
   "vueCompilerOptions": {
     "target": 2