feat: 实时模拟

ruoyi-ui/src/assets/icons/svg/realtime-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="60" height="60" viewBox="0 0 60 60"><defs><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg0_211_00643"><stop offset="0%" stop-color="#FAFCFF" stop-opacity="1"/><stop offset="100%" stop-color="#E5EAF1" stop-opacity="1"/></linearGradient><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg1_211_00755"><stop offset="0%" stop-color="#E7ECF3" stop-opacity="1"/><stop offset="100%" stop-color="#FEFEFF" stop-opacity="1"/></linearGradient><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg2_22_002364"><stop offset="0%" stop-color="#FAFCFF" stop-opacity="1"/><stop offset="100%" stop-color="#D0DAEA" stop-opacity="1"/></linearGradient><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg3_22_002028"><stop offset="0%" stop-color="#DAE3F0" stop-opacity="1"/><stop offset="100%" stop-color="#FEFEFF" stop-opacity="1"/></linearGradient></defs><g><g transform="matrix(-1,0,0,1,120,0)"><ellipse cx="90" cy="30" rx="30" ry="30" fill="url(#master_svg0_211_00643)" fill-opacity="1"/><ellipse cx="90" cy="30" rx="28.5" ry="28.5" stroke="url(#master_svg1_211_00755)" fill-opacity="0" fill="none" stroke-width="3"/></g><g><ellipse cx="30" cy="30" rx="9.428571701049805" ry="9.428571701049805" fill="url(#master_svg2_22_002364)" fill-opacity="1"/><ellipse cx="30" cy="30" rx="7.928571701049805" ry="7.928571701049805" stroke="url(#master_svg3_22_002028)" fill-opacity="0" fill="none" stroke-width="3"/></g></g></svg>

ruoyi-ui/src/assets/icons/svg/realtime-minus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="36" height="36" viewBox="0 0 36 36"><defs><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg0_211_00643"><stop offset="0%" stop-color="#FAFCFF" stop-opacity="1"/><stop offset="100%" stop-color="#E5EAF1" stop-opacity="1"/></linearGradient><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg1_211_00755"><stop offset="0%" stop-color="#E7ECF3" stop-opacity="1"/><stop offset="100%" stop-color="#FEFEFF" stop-opacity="1"/></linearGradient></defs><g><g><ellipse cx="18" cy="18" rx="18" ry="18" fill="url(#master_svg0_211_00643)" fill-opacity="1"/><ellipse cx="18" cy="18" rx="16.5" ry="16.5" stroke="url(#master_svg1_211_00755)" fill-opacity="0" fill="none" stroke-width="3"/></g><g><rect x="11.5" y="16" width="13" height="4" rx="2" fill="#869DBC" fill-opacity="1"/></g></g></svg>

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

@@ -2,7 +2,7 @@
   <div>
     <el-row :gutter="10">
       <el-col :span="18">
-        <Simulation />
+        <Simulation :site-id="2" />
         <el-row :gutter="20" style="margin-top: 10px">
           <el-col :span="8">
             <Site />

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

@@ -1,5 +1,34 @@
 <template>
-  <div class="realtime-container">实时视频</div>
+  <div class="realtime-container">
+    <div class="title">
+      <span>实时视频</span>
+      <svg-icon icon-class="realtime-close" class-name="icon-close"/>
+    </div>
+    <div class="video"></div>
+    <div class="actions">
+      <div class="action-plus">
+        <svg-icon icon-class="realtime-plus" class-name="icon-plus"/>
+      </div>
+      <div class="action-circle">
+        <svg-icon icon-class="realtime-circle" class-name="icon-circle"/>
+        <div class="action-up">
+          <svg-icon icon-class="realtime-up" class-name="icon-up"/>
+        </div>
+        <div class="action-up">
+          <svg-icon icon-class="realtime-down" class-name="icon-down"/>
+        </div>
+        <div class="action-up">
+          <svg-icon icon-class="realtime-left" class-name="icon-left"/>
+        </div>
+        <div class="action-up">
+          <svg-icon icon-class="realtime-right" class-name="icon-right"/>
+        </div>
+      </div>
+      <div class="action-minus">
+        <svg-icon icon-class="realtime-minus" class-name="icon-minus"/>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -14,4 +43,82 @@ export default {
   border-radius: 4px;
   padding: 10px 20px;
 }
+.title {
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 600;
+  color: #1D2738;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.icon-close {
+  width: 36px;
+  height: 36px;
+  cursor: pointer;
+}
+.video {
+  margin-top: 10px;
+  height: 168px;
+  border-radius: 4px;
+  background: #000000;
+}
+.actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 10px;
+}
+.icon-minus,
+.icon-plus {
+  width: 36px;
+  height: 36px;
+  cursor: pointer;
+}
+.action-circle {
+  margin: 0 20px;
+  width: 60px;
+  height: 60px;
+  position: relative;
+}
+.icon-circle {
+  width: 60px;
+  height: 60px;
+}
+.icon-up {
+  position: absolute;
+  top: 8px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 14px;
+  height: 10px;
+  cursor: pointer;
+}
+.icon-down {
+  position: absolute;
+  bottom: 8px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 14px;
+  height: 10px;
+  cursor: pointer;
+}
+.icon-left {
+  position: absolute;
+  top: 50%;
+  left: 8px;
+  transform: translateY(-50%);
+  width: 10px;
+  height: 14px;
+  cursor: pointer;
+}
+.icon-right {
+  position: absolute;
+  top: 50%;
+  right: 8px;
+  transform: translateY(-50%);
+  width: 10px;
+  height: 14px;
+  cursor: pointer;
+}
 </style>

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

@@ -1,10 +1,29 @@
 <template>
-  <div class="realtime-container">报表</div>
-
+  <div class="realtime-container">
+    <el-table border :data="reports">
+      <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>
+  </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},
+      ]
+    }
+  }
 }
 </script>
 
@@ -13,6 +32,6 @@ export default {
   background: #fff;
   height: 300px;
   border-radius: 4px;
-  padding: 10px 20px;
+  padding: 20px;
 }
 </style>

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

@@ -1,9 +1,121 @@
 <template>
-  <div class="realtime-container">实时动态模拟</div>
+  <div class="realtime-container">
+    <div ref="chart" class="chart" :style="{height: '500px', width: '100%'}" />
+  </div>
 </template>
 
 <script>
+import * as echarts from "echarts";
+require('echarts/theme/macarons') // echarts theme
+import resize from '@/utils/resize'
+import { getSiteSection } from '@/api/site/berthing'
+
 export default {
+  mixins: [resize],
+  props: {
+    siteId: Number,
+  },
+  data() {
+    return {
+      sections: []
+    }
+  },
+  mounted() {
+    this.loadSection();
+    this.$nextTick(() => {
+      this.chart = echarts.init(this.$refs.chart, 'macarons');
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    loadSection() {
+      getSiteSection(this.siteId).then((res) => {
+        this.sections = JSON.parse(res.data.positions) || [];
+        this.setOptions();
+      })
+    },
+    setOptions() {
+      if (!this.chart) {
+        return;
+      }
+      const xAxisData = this.sections.map(({ x }) => x);
+      const seriesData = this.sections.map(({ y }) => y);
+      const waterData = this.sections.map(() => 405);
+      const options = {
+        xAxis: {
+          name: '起点距',
+          data: xAxisData,
+          boundaryGap: false,
+          show: false,
+        },
+        yAxis: [
+          {
+            name: '高程',
+            show: false,
+            min: 'dataMin',
+            max: 'dataMax',
+          },
+        ],
+        grid: {
+          left: 0,
+          right: 0,
+          bottom: 0,
+          top: 0,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'line'
+          },
+          formatter: function(prams) {
+            return `时间：${prams[0].name}<br/>水位：${prams[0].data}m`;
+          },
+          padding: [5, 10]
+        },
+        series: [{
+          name: '水位',
+          type: 'line',
+          silent: true,
+          data: waterData,
+          symbolSize: 0,
+          lineStyle: {
+            normal: {
+              width: 0
+            }
+          },
+          areaStyle: {
+            normal: {
+              color: '#adcef8',
+            }
+          },
+          z: 1,
+        }, {
+          name: '高程',
+          type: 'line',
+          symbol: false,
+          smooth: false,
+          data: seriesData,
+          lineStyle: {
+            color: '#FF8500',
+          },
+          areaStyle: {
+            normal: {
+              color: '#f6c27d',
+            }
+          },
+          z: 2,
+        }]
+      };
+      this.chart.setOption(options);
+    },
+  }
 }
 </script>