feat: 实时模拟优化

ruoyi-system/src/main/java/com/ruoyi/system/mapper/MeasureUploadMapper.java

@@ -31,7 +31,7 @@ public interface MeasureUploadMapper {
      * @param siteId 主键
      * @return 实例对象
      */
-    List<MeasureUpload> queryBySiteIdTime(Long siteId, Date createTime);
+    List<MeasureUpload> queryBySiteIdTime(@Param("siteId") Long siteId, @Param("createTime") Date createTime);
 
 
     /**

ruoyi-ui/src/api/analysis/achievement.js

@@ -55,3 +55,11 @@ export function getTaskNotice(siteId, taskId) {
     params: { siteId, taskId, page: 1, size: 10000 },
   })
 }
+
+export function taskAction(siteId, action) {
+  return request({
+    url: '/directive/taskStop',
+    method: 'post',
+    params: { siteId, action },
+  })
+}

ruoyi-ui/src/views/analysis/task/index.vue

@@ -30,17 +30,21 @@
         <el-button type="primary" @click="$router.push('/site/site/add')">新增站点</el-button>
       </div>
       <el-table v-loading="loading" :data="list" border>
-        <el-table-column label="任务编号" prop="taskid" />
-        <el-table-column label="任务模式" prop="workmode" />
-        <el-table-column label="策略名称" prop="workmode" />
+        <el-table-column label="任务编号" prop="taskid" fixed />
+        <el-table-column label="任务模式">
+          <template slot-scope="scope">
+            <span>{{ ['移动测流', '固定测流'][scope.row.type] }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="策略名称" prop="planid" />
         <el-table-column label="起测时间">
           <template slot-scope="scope">
             <span>{{ formatDateTime(scope.row.createTime) }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="水位" prop="workmode" />
-        <el-table-column label="过水面积" prop="workmode" />
-        <el-table-column label="瞬时流量（总）" prop="workmode" />
+        <el-table-column label="水位" prop="waterlevels" />
+        <el-table-column label="过水面积" prop="acreagesum" />
+        <el-table-column label="瞬时流量（总）" prop="flowsum" />
         <el-table-column label="当前状态">
           <template slot-scope="scope">
             <span class="status status-running" v-if="scope.row.status === 0">
@@ -61,11 +65,11 @@
           <template slot-scope="scope">
             <template v-if="scope.row.status === 0">
               <el-button size="mini" type="text" icon="el-icon-edit" @click="goRealTime(scope.row)">实时动态</el-button>
-              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">中止</el-button>
+              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleStop(scope.row)">中止</el-button>
             </template>
             <template v-else-if="scope.row.status === 2">
-              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">测流成果</el-button>
-              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">导出</el-button>
+              <el-button size="mini" type="text" icon="el-icon-edit" @click="goRealTime(scope.row)">测流成果</el-button>
+              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleExport(scope.row)">导出</el-button>
             </template>
           </template>
         </el-table-column>
@@ -84,7 +88,8 @@
 
 <script>
 import { listSite } from "@/api/site/site";
-import { listAchievements } from "@/api/analysis/achievement";
+import { listAchievements, taskAction } from "@/api/analysis/achievement";
+import {deletePlainWater} from "@/api/site/berthing";
 
 export default {
   data() {
@@ -149,11 +154,16 @@ export default {
     goRealTime(task) {
       this.$router.push(`/analysis/task/realtime/${task.siteId}/${task.taskid}`);
     },
-    handleUpdate(site) {
-      this.$router.push(`/site/site/edit/${site.siteId}`);
+    handleExport(task) {
+      window.open(`${process.env.VUE_APP_BASE_API}/achievement/downAchievement?resultId=${task.resultId}`, '_blank')
     },
-    handleConfig(site) {
-      this.$router.push(`/site/site/config/${site.siteId}`);
+    handleStop(task) {
+      this.$modal.confirm('是否确认中止编号为"' + task.taskid + '"的测流任务？').then(function() {
+        return taskAction(task.siteId, 0);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("中止成功");
+      }).catch(() => {});
     },
   }
 }

ruoyi-ui/src/views/analysis/task/realtime.vue

@@ -1,50 +1,22 @@
 <template>
-  <div>
-    <el-row :gutter="10">
-      <el-col :span="18">
-        <Simulation :site-id="2" />
-        <el-row :gutter="20" style="margin-top: 10px">
-          <el-col :span="8">
-            <Site />
-          </el-col>
-          <el-col :span="8">
-            <Car />
-          </el-col>
-          <el-col :span="8">
-            <Message />
-          </el-col>
-        </el-row>
-      </el-col>
-      <el-col :span="6">
-        <Movie />
-        <Flow style="margin-top: 10px" />
-        <Water style="margin-top: 10px" />
-      </el-col>
-    </el-row>
-    <Report style="margin-top: 10px" />
-  </div>
+  <Realtime v-if="siteId" :siteId="siteId" />
 </template>
 
 <script>
-import Simulation from './realtime/simulation'
-import Site from './realtime/site'
-import Car from './realtime/car'
-import Message from './realtime/message'
-import Movie from './realtime/movie'
-import Flow from './realtime/flow'
-import Water from './realtime/water'
-import Report from './realtime/report'
+import Realtime from './realtime/realtime'
 
 export default {
   components: {
-    Simulation,
-    Site,
-    Car,
-    Message,
-    Movie,
-    Flow,
-    Water,
-    Report,
+    Realtime,
+  },
+  data() {
+    return {
+      siteId: 0,
+    }
+  },
+  mounted() {
+    const { siteId } = this.$route.params;
+    this.siteId = siteId;
   },
 }
 </script>

ruoyi-ui/src/views/analysis/task/realtime/car.vue

@@ -32,34 +32,10 @@
 </template>
 
 <script>
-import { getCarInfo } from '@/api/analysis/achievement';
-
 export default {
-  data() {
-    return {
-      siteId: 0,
-      carInfo: {}
-    }
-  },
-  methods: {
-    loadCarInfo() {
-      getCarInfo(this.siteId).then((res) => {
-        this.carInfo = res.data || {};
-      }).finally(() => {
-        this.timer = setTimeout(() => this.loadCarInfo(), 5e3)
-      })
-    }
-  },
-  mounted() {
-    const { siteId } = this.$route.params;
-    this.siteId = siteId;
-    this.loadCarInfo()
+  props: {
+    carInfo: Object,
   },
-  beforeDestroy() {
-    if (this.timer) {
-      clearTimeout(this.timer);
-    }
-  }
 }
 </script>
 

ruoyi-ui/src/views/analysis/task/realtime/flow.vue

@@ -6,43 +6,24 @@
 </template>
 
 <script>
-import { listMeasureLine } from '@/api/analysis/achievement'
 import * as echarts from "echarts";
 require('echarts/theme/macarons') // echarts theme
 import resize from '@/utils/resize'
 
 export default {
   mixins: [resize],
-  data() {
-    return {
-      siteId: 0,
-    }
-  },
   mounted() {
-    const { siteId } = this.$route.params;
-    this.siteId = siteId;
-    this.loadMeasureLine()
     this.$nextTick(() => {
       this.chart = echarts.init(this.$refs.chart, 'macarons');
     })
   },
   beforeDestroy() {
-    if (this.timer) {
-      clearTimeout(this.timer);
-    }
     if (this.chart) {
       this.chart.dispose()
       this.chart = null
     }
   },
   methods: {
-    loadMeasureLine() {
-      listMeasureLine(this.siteId).then((res) => {
-        this.setOptions(res.data || [])
-      }).finally(() => {
-        this.timer = setTimeout(() => this.loadMeasureLine(), 5e3)
-      })
-    },
     setOptions(chartData) {
       if (!this.chart) {
         return;
@@ -78,7 +59,7 @@ export default {
           },
         ],
         grid: {
-          left: 10,
+          left: 20,
           right: 0,
           bottom: 0,
           top: 30,
@@ -97,6 +78,7 @@ export default {
         series: [{
           name: '流量',
           type: 'bar',
+          barWidth: 14,
           data: seriesData,
           itemStyle: {
             color: '#7FC8E5'

ruoyi-ui/src/views/analysis/task/realtime/message.vue

@@ -10,34 +10,9 @@
 </template>
 
 <script>
-import { getTaskNotice } from '@/api/analysis/achievement';
-
 export default {
-  data() {
-    return {
-      siteId: 0,
-      messages: []
-    }
-  },
-  methods: {
-    loadTaskNotice() {
-      getTaskNotice(this.siteId, this.id).then((res) => {
-        this.messages = res.data.records || [];
-      }).finally(() => {
-        this.timer = setTimeout(() => this.loadTaskNotice(), 5e3)
-      })
-    }
-  },
-  mounted() {
-    const { siteId, id } = this.$route.params;
-    this.id = id;
-    this.siteId = siteId;
-    this.loadTaskNotice()
-  },
-  beforeDestroy() {
-    if (this.timer) {
-      clearTimeout(this.timer);
-    }
+  props: {
+    messages: Array,
   }
 }
 </script>

ruoyi-ui/src/views/analysis/task/realtime/realtime.vue

@@ -0,0 +1,133 @@
+<template>
+  <div>
+    <el-row :gutter="10">
+      <el-col :span="18">
+        <Simulation :site-id="2" />
+        <el-row :gutter="20" style="margin-top: 10px">
+          <el-col :span="8">
+            <Site :siteRealTime="siteRealTime" />
+          </el-col>
+          <el-col :span="8">
+            <Car :carInfo="carInfo" />
+          </el-col>
+          <el-col :span="8">
+            <Message :messages="messages" />
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="6">
+        <Movie />
+        <Flow ref="flow" style="margin-top: 10px" />
+        <Water ref="water" style="margin-top: 10px" />
+      </el-col>
+    </el-row>
+    <Report :measureLine="measureLine" style="margin-top: 10px" />
+  </div>
+</template>
+
+<script>
+import Simulation from './simulation'
+import Site from './site'
+import Car from './car'
+import Message from './message'
+import Movie from './movie'
+import Flow from './flow'
+import Water from './water'
+import Report from './report'
+import { getCarInfo, getSiteRealTime, getTaskNotice, listMeasureLine, listWaterLevel } from "@/api/analysis/achievement";
+
+export default {
+  components: {
+    Simulation,
+    Site,
+    Car,
+    Message,
+    Movie,
+    Flow,
+    Water,
+    Report,
+  },
+  props: {
+    siteId: Number | String,
+  },
+  data() {
+    return {
+      carInfo: {},
+      siteRealTime: {},
+      messages: [],
+      measureLine: [],
+    }
+  },
+  methods: {
+    loadCarInfo() {
+      getCarInfo(this.siteId).then((res) => {
+        this.carInfo = res.data || {};
+      }).finally(() => {
+        this.timer1 = setTimeout(() => this.loadCarInfo(), 5e3)
+      })
+    },
+    loadMeasureLine() {
+      listMeasureLine(this.siteId).then((res) => {
+        const measureLine = res.data || [];
+        this.measureLine = measureLine;
+        this.$refs.flow.setOptions(measureLine)
+      }).finally(() => {
+        this.timer2 = setTimeout(() => this.loadMeasureLine(), 5e3)
+      })
+    },
+    loadTaskNotice() {
+      getTaskNotice(this.siteId, this.id).then((res) => {
+        this.messages = res.data.records || [];
+      }).finally(() => {
+        this.timer3 = setTimeout(() => this.loadTaskNotice(), 5e3)
+      })
+    },
+    loadSiteRealTime() {
+      getSiteRealTime(this.siteId).then((res) => {
+        this.siteRealTime = res.data || {};
+      }).finally(() => {
+        this.timer4 = setTimeout(() => this.loadSiteRealTime(), 5e3)
+      })
+    },
+    loadWaterLevel() {
+      const endTime = new Date()
+      const startTime = new Date()
+      startTime.setHours(0)
+      startTime.setMinutes(0)
+      startTime.setSeconds(0)
+      startTime.setMilliseconds(0)
+      const params = {
+        startTime: this.parseTime(startTime),
+        endTime: this.parseTime(endTime),
+        siteId: this.siteId,
+        type: 1,
+        page: 1,
+        size: 10000
+      }
+      listWaterLevel(params).then((res) => {
+        this.$refs.water.setOptions(res.data?.records || [])
+      }).finally(() => {
+        this.timer5 = setTimeout(() => this.loadWaterLevel(), 5e3)
+      })
+    },
+  },
+  mounted() {
+    this.loadCarInfo();
+    this.loadMeasureLine();
+    this.loadTaskNotice();
+    this.loadSiteRealTime();
+    this.loadWaterLevel();
+  },
+  beforeDestroy() {
+    if (this.timer1) clearTimeout(this.timer1);
+    if (this.timer2) clearTimeout(this.timer2);
+    if (this.timer3) clearTimeout(this.timer3);
+    if (this.timer4) clearTimeout(this.timer4);
+    if (this.timer5) clearTimeout(this.timer5);
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

ruoyi-ui/src/views/analysis/task/realtime/report.vue

@@ -1,29 +1,21 @@
 <template>
   <div class="realtime-container">
-    <el-table border :data="reports">
+    <el-table border :data="measureLine">
       <el-table-column prop="pn" label="垂线编号" />
       <el-table-column prop="x" label="起点距" />
       <el-table-column prop="startTime" label="开始时间" />
       <el-table-column prop="area" label="过水面积" />
       <el-table-column prop="area" label="水位" />
-      <el-table-column prop="area" label="流速" />
+      <el-table-column prop="wspeed" label="流速" />
     </el-table>
   </div>
 </template>
 
 <script>
 export default {
-  data() {
-    return {
-      reports: [
-        {pn: 1, x: 10, startTime: '2024-05-12', area: 15},
-        {pn: 1, x: 10, startTime: '2024-05-12', area: 15},
-        {pn: 1, x: 10, startTime: '2024-05-12', area: 15},
-        {pn: 1, x: 10, startTime: '2024-05-12', area: 15},
-        {pn: 1, x: 10, startTime: '2024-05-12', area: 15},
-      ]
-    }
-  }
+  props: {
+    measureLine: Array,
+  },
 }
 </script>
 

ruoyi-ui/src/views/analysis/task/realtime/site.vue

@@ -22,34 +22,10 @@
 </template>
 
 <script>
-import { getSiteRealTime } from '@/api/analysis/achievement';
-
 export default {
-  data() {
-    return {
-      siteId: 0,
-      siteRealTime: {}
-    }
-  },
-  methods: {
-    loadSiteRealTime() {
-      getSiteRealTime(this.siteId).then((res) => {
-        this.siteRealTime = res.data || {};
-      }).finally(() => {
-        this.timer = setTimeout(() => this.loadSiteRealTime(), 5e3)
-      })
-    }
-  },
-  mounted() {
-    const { siteId } = this.$route.params;
-    this.siteId = siteId;
-    this.loadSiteRealTime()
+  props: {
+    siteRealTime: Object,
   },
-  beforeDestroy() {
-    if (this.timer) {
-      clearTimeout(this.timer);
-    }
-  }
 }
 </script>
 

ruoyi-ui/src/views/analysis/task/realtime/water.vue

@@ -6,57 +6,24 @@
 </template>
 
 <script>
-import { listWaterLevel } from '@/api/analysis/achievement'
 import * as echarts from "echarts";
 require('echarts/theme/macarons') // echarts theme
 import resize from '@/utils/resize'
 
 export default {
   mixins: [resize],
-  data() {
-    return {
-      siteId: 0,
-    }
-  },
   mounted() {
-    const { siteId } = this.$route.params;
-    this.siteId = siteId;
-    this.loadWaterLevel()
     this.$nextTick(() => {
       this.chart = echarts.init(this.$refs.chart, 'macarons');
     })
   },
   beforeDestroy() {
-    if (this.timer) {
-      clearTimeout(this.timer);
-    }
     if (this.chart) {
       this.chart.dispose()
       this.chart = null
     }
   },
   methods: {
-    loadWaterLevel() {
-      const endTime = new Date()
-      const startTime = new Date()
-      startTime.setHours(0)
-      startTime.setMinutes(0)
-      startTime.setSeconds(0)
-      startTime.setMilliseconds(0)
-      const params = {
-        startTime: this.parseTime(startTime),
-        endTime: this.parseTime(endTime),
-        siteId: this.siteId,
-        type: 1,
-        page: 1,
-        size: 10000
-      }
-      listWaterLevel(params).then((res) => {
-        this.setOptions(res.data?.records || [])
-      }).finally(() => {
-        this.timer = setTimeout(() => this.loadWaterLevel(), 5e3)
-      })
-    },
     setOptions(chartData) {
       if (!this.chart) {
         return;
@@ -94,7 +61,7 @@ export default {
           },
         ],
         grid: {
-          left: 10,
+          left: 20,
           right: 0,
           bottom: 0,
           top: 30,