feat: 图标修改

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

@@ -63,3 +63,11 @@ export function taskAction(siteId, action) {
     params: { siteId, action },
   })
 }
+
+export function getWaterLevel(siteId) {
+  return request({
+    url: '/reportData/getWaterLevel',
+    method: 'get',
+    params: { siteId },
+  })
+}

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

@@ -152,7 +152,7 @@ export default {
       );
     },
     goRealTime(task) {
-      this.$router.push(`/analysis/task/realtime/${task.siteId}/${task.taskid}`);
+      this.$router.push(`/analysis/task/realtime/${task.siteId}`);
     },
     handleExport(task) {
       window.open(`${process.env.VUE_APP_BASE_API}/achievement/downAchievement?resultId=${task.resultId}`, '_blank')

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

@@ -2,7 +2,7 @@
   <div>
     <el-row :gutter="10">
       <el-col :span="18">
-        <Simulation :site-id="2" />
+        <Simulation :siteId="siteId" />
         <el-row :gutter="20" style="margin-top: 10px">
           <el-col :span="8">
             <Site :siteRealTime="siteRealTime" />
@@ -62,8 +62,6 @@ export default {
     loadCarInfo() {
       getCarInfo(this.siteId).then((res) => {
         this.carInfo = res.data || {};
-      }).finally(() => {
-        this.timer1 = setTimeout(() => this.loadCarInfo(), 5e3)
       })
     },
     loadMeasureLine() {
@@ -71,22 +69,16 @@ export default {
         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() {
@@ -106,17 +98,20 @@ export default {
       }
       listWaterLevel(params).then((res) => {
         this.$refs.water.setOptions(res.data?.records || [])
-      }).finally(() => {
-        this.timer5 = setTimeout(() => this.loadWaterLevel(), 5e3)
       })
     },
   },
   mounted() {
     this.loadCarInfo();
+    this.timer1 = setInterval(() => this.loadCarInfo(), 5e3)
     this.loadMeasureLine();
+    this.timer2 = setInterval(() => this.loadMeasureLine(), 5e3)
     this.loadTaskNotice();
+    this.timer3 = setInterval(() => this.loadTaskNotice(), 5e3)
     this.loadSiteRealTime();
+    this.timer4 = setInterval(() => this.loadSiteRealTime(), 5e3)
     this.loadWaterLevel();
+    this.timer5 = setInterval(() => this.loadWaterLevel(), 5e3)
   },
   beforeDestroy() {
     if (this.timer1) clearTimeout(this.timer1);

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

@@ -3,7 +3,7 @@
     <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="createTime" label="开始时间" />
       <el-table-column prop="area" label="过水面积" />
       <el-table-column prop="area" label="水位" />
       <el-table-column prop="wspeed" label="流速" />

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

@@ -8,47 +8,49 @@
 import * as echarts from "echarts";
 require('echarts/theme/macarons') // echarts theme
 import resize from '@/utils/resize'
+import { getConfig } from '@/api/site/site'
 import { getSiteSection } from '@/api/site/berthing'
-import { getCarLocation } from '@/api/analysis/achievement'
+import { getCarLocation, getWaterLevel } from '@/api/analysis/achievement'
 import CarSvg from '@/assets/images/car.svg'
 import BarSvg from '@/assets/images/bar.svg'
 
 export default {
   mixins: [resize],
   props: {
-    siteId: Number,
+    siteId: Number | String,
   },
   data() {
     return {
       sections: [],
+      config: {},
       location: 0,
+      waterlevel: 0,
     }
   },
   mounted() {
     this.loadSection();
+    this.loadSiteConfig();
     this.loadCarLocation();
+    this.timer1 = setInterval(() => this.loadCarLocation(), 5e3)
+    this.loadWaterLevel();
+    this.timer2 = setInterval(() => this.loadWaterLevel(), 5e3)
     this.$nextTick(() => {
       this.chart = echarts.init(this.$refs.chart, 'macarons');
     })
   },
   beforeDestroy() {
-    if (this.timer1) {
-      clearTimeout(this.timer1);
+    if (this.timer1) clearTimeout(this.timer1);
+    if (this.timer2) clearTimeout(this.timer2);
+    if (this.chart) {
+      this.chart.dispose()
+      this.chart = null
     }
-
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
   },
   methods: {
     loadCarLocation() {
       getCarLocation(this.siteId).then((res) => {
         this.location = res.data?.position || 0;
         this.setOptions();
-      }).finally(() => {
-        this.timer1 = setTimeout(() => this.loadCarLocation(), 5e3)
       })
     },
     loadSection() {
@@ -57,136 +59,144 @@ export default {
         this.setOptions();
       })
     },
+    loadWaterLevel() {
+      getWaterLevel(this.siteId).then((res) => {
+        this.waterlevel = res.data.waterlevel || 0;
+        this.setOptions();
+      })
+    },
+    loadSiteConfig() {
+      getConfig(this.siteId).then((res) => {
+        this.config = res.data || {};
+        this.setOptions();
+      })
+    },
     setOptions() {
-      if (!this.chart) {
+      if (!this.chart || !this.config || this.sections.length === 0) {
         return;
       }
-      const xAxisData = this.sections.map(({ x }) => x);
-      const seriesData = this.sections.map(({ y }) => y);
-      const waterData = this.sections.map(() => 405);
-      const locationData = this.sections.map(() => 420);
-      const topData = this.sections.map(() => 430);
 
-      console.log(Math.min(...xAxisData), Math.max(...xAxisData))
+      const carWidth = 50; // 小车宽度
+      const carHeight = 32; // 小车高度
+      const gap = carWidth / 2; // 断面左右留的边距，方便绘制立柱
+      const barWidth = 18; // 立柱宽度
+
+      const waterlevel = this.waterlevel;
+      const start = this.config.offset;
+      const location = this.location;
+
+      const sections = [
+        [this.sections[0].x - gap, this.sections[0].y],
+        ...this.sections.map(({x, y}) => [x, y]),
+        [this.sections[this.sections.length - 1].x + gap, this.sections[this.sections.length - 1].y],
+      ];
+
+      const x = sections.map(([x]) => x);
+      const maxX = Math.max(...x);
+      const minX = Math.min(...x);
+      const bar1X = start - (carWidth - barWidth) / 2; // 左侧立柱x坐标
+      const bar2X = maxX - (start - minX) + (carWidth - barWidth) / 2; // 右侧立柱x坐标
+      const boxWidth = (carWidth - barWidth) * 2; // 小车充电盒子宽度
+
+      const y = sections.map(([,y]) => y);
+      const maxY = Math.max(...y);
+      const minY = Math.min(...y);
+      const disY = maxY - minY;
+      const barY = maxY + disY * 1.2;
+      const lineY = maxY + disY * 0.8;
 
       const options = {
-        xAxis: [
-          {
-            data: xAxisData,
-            boundaryGap: false,
-            show: false,
-          },
-          {
-            type: 'value',
-            min: Math.min(...xAxisData),
-            max: Math.max(...xAxisData),
-            show: false,
-          }
-        ],
-        yAxis: [
-          {
-            name: '高程',
-            show: false,
-            min: 'dataMin',
-            max: 'dataMax',
-          },
-        ],
         grid: {
+          top: 0,
           left: 0,
           right: 0,
           bottom: 0,
-          top: 0,
-          containLabel: true
+          show: false,
         },
-        tooltip: {
+        xAxis: {
+          type: 'value',
+          min: minX,
+          max: maxX,
+          show: false,
+        },
+        yAxis: {
+          min: minY - disY * 0.1,
+          max: maxY + disY * 1.5,
+          type: 'value',
           show: false,
         },
         series: [
           {
-            name: '水位',
+            data: sections,
             type: 'line',
-            silent: true,
-            data: waterData,
-            symbol: 'none',
+            // symbol: 'none',
+            animation: false,
+            z: 10,
             lineStyle: {
-              normal: {
-                width: 0
-              }
+              width: 1,
+              color: '#FF8500',
             },
             areaStyle: {
-              normal: {
-                color: '#adcef8',
-              }
-            },
-            z: 1,
-          },
-          {
-            name: '小车',
-            type: 'scatter',
-            data: [[this.location, 420]],
-            symbol: `image://${CarSvg}`,
-            symbolSize: [50, 30],
-            xAxisIndex: 1,
-            itemStyle: {
-              normal: {
-                color: '#ff5722',
-                shadowColor: '#ff5722',
-                shadowBlur: 100
-              }
-            },
-            silent: true,
-            z: 3
-          },
-          {
-            name: '柱子',
-            type: 'scatter',
-            data: [[40, 420]],
-            symbol: `image://${BarSvg}`,
-            symbolSize: [20, 500],
-            symbolOffset: [0, '50%'],
-            xAxisIndex: 1,
-            itemStyle: {
-              normal: {
-                color: '#ff5722',
-                shadowColor: '#ff5722',
-                shadowBlur: 100
-              }
-            },
-            silent: true,
-            z: 3
+              opacity: 1,
+              color: '#ffc27f',
+            }
           },
           {
-            name: '小车',
+            data: [[minX, waterlevel],[maxX, waterlevel]],
             type: 'line',
-            data: topData,
             symbol: 'none',
+            z: 0,
             lineStyle: {
-              normal: {
-                width: 0
-              }
+              width: 0,
             },
             areaStyle: {
-              normal: {
-                color: 'transparent',
-              }
-            },
-            z: 0,
+              opacity: 1,
+              color: '#a5cdf7',
+            }
           },
           {
-            name: '高程',
+            data: [[bar1X, lineY],[bar2X, lineY]],
             type: 'line',
-            symbol: false,
-            smooth: false,
-            data: seriesData,
+            symbol: 'none',
+            z: 2,
             lineStyle: {
-              color: '#FF8500',
-            },
-            areaStyle: {
-              normal: {
-                color: '#f6c27d',
-              }
+              width: 2,
+              color: '#54606C',
             },
-            z: 10,
+          },
+          {
+            data: [[bar1X, barY],[bar2X, barY]],
+            type: 'bar',
+            barWidth: barWidth,
+            z: 3,
+            itemStyle: {
+              color: '#A6B7C7'
+            }
+          },
+          {
+            data: [[location, lineY]],
+            type: 'scatter',
+            symbol: `image://${CarSvg}`,
+            symbolSize: [carWidth, carHeight],
+            symbolOffset: [0, -6],
+            silent: true,
+            z: 3,
+            itemStyle: {
+              opacity: 1
+            }
+          },
+          {
+            data: [[start, lineY]],
+            type: 'scatter',
+            symbol: 'rect',
+            symbolSize: [boxWidth, 30],
+            symbolOffset: [0, '-50%'],
+            silent: true,
+            z: 4,
+            itemStyle: {
+              color: '#778CB2',
+              opacity: 0.5
+            }
           },
         ]
       };

ruoyi-ui/src/views/index.vue

@@ -1,15 +1,50 @@
 <template>
-  <baidu-map :zoom="8" :center="center" class="map" />
+  <baidu-map :zoom="8" :center="center" scroll-wheel-zoom class="map">
+    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
+    <bm-marker v-for="item in list" :position="{lng: +item.lon, lat: +item.lat}" :title="item.siteName" @click="handleSiteClick(item)">
+      <bm-label :content="item.siteName" :labelStyle="{color: '#1D2738', fontSize : '12px', borderColor: '#1D2738'}" :offset="{height: 30}"/>
+    </bm-marker>
+  </baidu-map>
 </template>
 
 <script>
+import { listSite } from "@/api/site/site";
+
 export default {
   data() {
     return {
       center: {
         lng: 104.066541,
         lat: 30.572269
-      }
+      },
+      queryParams: {
+        page: 1,
+        size: 10000,
+      },
+      loading: true,
+      list: []
+    }
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    handleQuery() {
+      this.getList();
+    },
+    getList() {
+      this.loading = true;
+      listSite({page: 1, size: 10000,}).then(response => {
+          this.list = response.data.records || [];
+          if (this.list.length > 0) {
+            this.center = { lng: +this.list[0].lon, lat: +this.list[0].lat }
+          }
+          this.loading = false;
+        }
+      );
+    },
+    handleSiteClick(site) {
+      this.$router.push(`/analysis/task/realtime/${site.siteId}`);
     }
   }
 };

ruoyi-ui/src/views/site/plain-point/add.vue

@@ -169,11 +169,16 @@ export default {
       })
     },
     addPoint(point) {
+      if (this.plain.positions.includes(point)) {
+        return;
+      }
       const p = this.plain.sections.find(({ x }) => x === point);
       const points = [...this.points, { ...p, factor: 1 }];
       points.sort((a, b) => a.x - b.x);
       this.points = points;
-      this.plain.positions = [...this.plain.positions, point];
+      const positions = [...this.plain.positions, point];
+      positions.sort((a, b) => a - b);
+      this.plain.positions = positions;
     },
     deletePoint(index) {
       this.points.splice(index, 1);

ruoyi-ui/src/views/site/plain-point/chart-list.vue

@@ -40,13 +40,14 @@ export default {
       }
       const { sections, wlevelmax, wlevelmin, list } = plain;
       const xAxisData = sections.map(({ x }) => x);
-      const seriesData = sections.map(({ y }) => y);
+      const seriesData = sections.map(({ x, y }) => ([x, y]));
       const options = {
         xAxis: {
           name: '起点距',
           boundaryGap: false,
-          data: xAxisData,
-          type: 'category',
+          type: 'value',
+          min: Math.min(...xAxisData),
+          max: Math.max(...xAxisData),
           axisLine: {
             lineStyle: {
               color: '#FF8500'
@@ -124,18 +125,14 @@ export default {
         },
         series: [{
           name: '高程',
-          itemStyle: {
-            normal: {
-              color: '#FF8500',
-              lineStyle: {
-                color: '#FF8500',
-                width: 2
-              }
-            }
+
+          lineStyle: {
+            width: 1,
+            color: '#FF8500',
           },
           areaStyle: {
-            color: '#FF8500',
-            opacity: 0.5
+            opacity: 1,
+            color: '#ffc27f',
           },
           smooth: false,
           symbol: 'none',
@@ -186,7 +183,7 @@ export default {
         const pointsData = positions1.reduce((init, p) => {
           const xIndex = xAxisData.findIndex(x => x === p.x);
           if (xIndex !== -1) {
-            init.push({ coord: [xIndex, wlevel] })
+            init.push({ coord: [p.x, wlevel] })
           }
           return init;
         }, []);
@@ -220,7 +217,7 @@ export default {
           },
           markPoint: {
             label: {
-              formatter: ({ data }) => xAxisData[data.coord[0]],
+              formatter: ({ data }) => data.coord[0],
             },
             itemStyle: {
               color: themes[index],

ruoyi-ui/src/views/site/plain-point/chart.vue

@@ -17,22 +17,17 @@ export default {
       this.chart = echarts.init(this.$refs.chart, 'macarons');
       this.chart.on('click', (params) => {
         if (params.componentType === 'series') {
-          const { seriesIndex, dataIndex } = params;
-          const { series, xAxis } = this.chart.getOption();
-          const { markPoint: { data } } = series[seriesIndex];
-          if (!data.some(({ coord }) => coord[0] === dataIndex)) {
-            this.$emit('addPoint', xAxis[0].data[dataIndex])
-          }
+          const { data } = params;
+          this.$emit('addPoint', data[0]);
         }
       })
     })
   },
   beforeDestroy() {
-    if (!this.chart) {
-      return
+    if (this.chart) {
+      this.chart.dispose()
+      this.chart = null
     }
-    this.chart.dispose()
-    this.chart = null
   },
   watch: {
     plain: {
@@ -50,11 +45,11 @@ export default {
       }
       const { sections, wlevelmax, wlevelmin, wlevel, positions } = plain;
       const xAxisData = sections.map(({ x }) => x);
-      const seriesData = sections.map(({ y }) => y);
+      const seriesData = sections.map(({ x, y }) => ([x, y]));
       const pointsData = positions.reduce((init, p) => {
         const xIndex = xAxisData.findIndex(x => x === p);
         if (xIndex !== -1) {
-          init.push({ coord: [xIndex, wlevel] })
+          init.push({ coord: [p, wlevel] })
         }
         return init;
       }, []);
@@ -62,8 +57,9 @@ export default {
         xAxis: {
           name: '起点距',
           boundaryGap: false,
-          data: xAxisData,
-          type: 'category',
+          type: 'value',
+          min: Math.min(...xAxisData),
+          max: Math.max(...xAxisData),
           axisLine: {
             lineStyle: {
               color: '#FF8500'
@@ -141,24 +137,20 @@ export default {
         },
         series: [{
           name: '高程',
-          itemStyle: {
-            normal: {
-              color: '#FF8500',
-              lineStyle: {
-                color: '#FF8500',
-                width: 2
-              }
-            }
+          lineStyle: {
+            width: 1,
+            color: '#FF8500',
           },
           areaStyle: {
-            color: '#FF8500',
-            opacity: 0.5
+            opacity: 1,
+            color: '#ffc27f',
           },
           smooth: false,
           symbol: 'none',
           type: 'line',
           data: seriesData,
           animations: false,
+          z: 2,
           markLine: {
             symbol: 'none',
             silent: true,
@@ -191,7 +183,7 @@ export default {
           lineStyle: {
             width: 0,
           },
-          data: new Array(seriesData.length).fill(wlevel),
+          data: seriesData.map(([x]) => [x, wlevel]),
           type: 'line',
           markLine: {
             symbol: 'none',
@@ -205,10 +197,11 @@ export default {
           },
           markPoint: {
             label: {
-              formatter: ({ data }) => xAxisData[data.coord[0]],
+              formatter: ({ data }) => data.coord[0],
             },
             data: pointsData,
           },
+          z: 0,
         });
       }
       this.chart.setOption(options);

ruoyi-ui/src/views/site/plain-point/index.vue

@@ -37,7 +37,7 @@
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template slot-scope="scope">
             <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-delete" @click="handleDelete(scope.row)">删除</el-button>
+<!--            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>-->
           </template>
         </el-table-column>
       </el-table>

ruoyi-ui/src/views/site/plain-time/chart-list.vue

@@ -40,13 +40,14 @@ export default {
       }
       const { sections, wlevelmax, wlevelmin, list } = plain;
       const xAxisData = sections.map(({ x }) => x);
-      const seriesData = sections.map(({ y }) => y);
+      const seriesData = sections.map(({ x, y }) => ([x, y]));
       const options = {
         xAxis: {
           name: '起点距',
           boundaryGap: false,
-          data: xAxisData,
-          type: 'category',
+          type: 'value',
+          min: Math.min(...xAxisData),
+          max: Math.max(...xAxisData),
           axisLine: {
             lineStyle: {
               color: '#FF8500'
@@ -124,18 +125,13 @@ export default {
         },
         series: [{
           name: '高程',
-          itemStyle: {
-            normal: {
-              color: '#FF8500',
-              lineStyle: {
-                color: '#FF8500',
-                width: 2
-              }
-            }
+          lineStyle: {
+            width: 1,
+            color: '#FF8500',
           },
           areaStyle: {
-            color: '#FF8500',
-            opacity: 0.5
+            opacity: 1,
+            color: '#ffc27f',
           },
           smooth: false,
           symbol: 'none',

ruoyi-ui/src/views/site/plain-time/index.vue

@@ -48,7 +48,7 @@
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template slot-scope="scope">
             <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-delete" @click="handleDelete(scope.row)">删除</el-button>
+<!--            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>-->
           </template>
         </el-table-column>
       </el-table>

ruoyi-ui/src/views/site/plain-water/chart-list.vue

@@ -40,13 +40,14 @@ export default {
       }
       const { sections, wlevelmax, wlevelmin, list } = plain;
       const xAxisData = sections.map(({ x }) => x);
-      const seriesData = sections.map(({ y }) => y);
+      const seriesData = sections.map(({ x, y }) => ([x, y]));
       const options = {
         xAxis: {
           name: '起点距',
           boundaryGap: false,
-          data: xAxisData,
-          type: 'category',
+          type: 'value',
+          min: Math.min(...xAxisData),
+          max: Math.max(...xAxisData),
           axisLine: {
             lineStyle: {
               color: '#FF8500'
@@ -124,18 +125,13 @@ export default {
         },
         series: [{
           name: '高程',
-          itemStyle: {
-            normal: {
-              color: '#FF8500',
-              lineStyle: {
-                color: '#FF8500',
-                width: 2
-              }
-            }
+          lineStyle: {
+            width: 1,
+            color: '#FF8500',
           },
           areaStyle: {
-            color: '#FF8500',
-            opacity: 0.5
+            opacity: 1,
+            color: '#ffc27f',
           },
           smooth: false,
           symbol: 'none',

ruoyi-ui/src/views/site/plain-water/chart.vue

@@ -40,13 +40,14 @@ export default {
       }
       const { sections, wlevelmax, wlevelmin, wlevel } = plain;
       const xAxisData = sections.map(({ x }) => x);
-      const seriesData = sections.map(({ y }) => y);
+      const seriesData = sections.map(({ x, y }) => ([x, y]));
       const options = {
         xAxis: {
           name: '起点距',
           boundaryGap: false,
-          data: xAxisData,
-          type: 'category',
+          type: 'value',
+          min: Math.min(...xAxisData),
+          max: Math.max(...xAxisData),
           axisLine: {
             lineStyle: {
               color: '#FF8500'
@@ -124,18 +125,13 @@ export default {
         },
         series: [{
           name: '高程',
-          itemStyle: {
-            normal: {
-              color: '#FF8500',
-              lineStyle: {
-                color: '#FF8500',
-                width: 2
-              }
-            }
+          lineStyle: {
+            width: 1,
+            color: '#FF8500',
           },
           areaStyle: {
-            color: '#FF8500',
-            opacity: 0.5
+            opacity: 1,
+            color: '#ffc27f',
           },
           smooth: false,
           symbol: 'none',

ruoyi-ui/src/views/site/plain-water/index.vue

@@ -39,7 +39,7 @@
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template slot-scope="scope">
             <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-delete" @click="handleDelete(scope.row)">删除</el-button>
+<!--            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>-->
           </template>
         </el-table-column>
       </el-table>

ruoyi-ui/src/views/site/section/add.vue

@@ -45,8 +45,8 @@
           <template slot-scope="scope">
             <el-button v-if="scope.row.isEdit" size="mini" type="text" icon="el-icon-circle-check" @click="saveSection(scope.row)">保存</el-button>
             <el-button v-else size="mini" type="text" icon="el-icon-edit" @click="editSection(scope.row)">编辑</el-button>
-            <el-button size="mini" type="text" icon="el-icon-top" @click="insertSection(scope.$index - 1)">向上插入</el-button>
-            <el-button size="mini" type="text" icon="el-icon-bottom" @click="insertSection(scope.$index + 1)">向下插入</el-button>
+            <el-button size="mini" type="text" icon="el-icon-top" @click="insertSection(scope.row, scope.$index)">向上插入</el-button>
+            <el-button size="mini" type="text" icon="el-icon-bottom" @click="insertSection(scope.row, scope.$index + 1)">向下插入</el-button>
             <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteSection(scope.$index)">删除</el-button>
           </template>
         </el-table-column>
@@ -60,7 +60,7 @@
 </template>
 
 <script>
-import { getSite, updateSite } from '@/api/site/site'
+import { getSite } from '@/api/site/site'
 import { addSection, getSection } from '@/api/site/berthing'
 import SectionChart from './chart';
 
@@ -130,27 +130,32 @@ export default {
       this.form.y = s.y;
       s.isEdit = true;
     },
-    insertSection(index) {
-      this.form.x = 0;
-      this.form.y = 0;
+    insertSection(section, index) {
+      this.tableSections.forEach((r) => r.isEdit = false)
       if (index < 0) {
+        const { x, y } = section;
+        this.form.x = x;
+        this.form.y = y;
         this.sections = [
-          { x: 0, y: 0 },
+          { x, y },
           ...this.sections,
         ]
         this.tableSections = [
-          { x: 0, y: 0, isEdit: true },
+          { x, y, isEdit: true },
           ...this.tableSections,
         ]
       } else {
+        const { x, y } = section;
+        this.form.x = x;
+        this.form.y = y;
         this.sections = [
           ...this.sections.slice(0, index),
-          { x: 0, y: 0 },
+          { x, y },
           ...this.sections.slice(index),
         ]
         this.tableSections = [
           ...this.tableSections.slice(0, index),
-          { x: 0, y: 0, isEdit: true },
+          { x, y, isEdit: true },
           ...this.tableSections.slice(index),
         ]
       }

ruoyi-ui/src/views/site/section/chart.vue

@@ -21,11 +21,10 @@ export default {
     })
   },
   beforeDestroy() {
-    if (!this.chart) {
-      return
+    if (this.chart) {
+      this.chart.dispose()
+      this.chart = null
     }
-    this.chart.dispose()
-    this.chart = null
   },
   watch: {
     sections(value) {
@@ -35,13 +34,14 @@ export default {
   methods: {
     setOptions(sections) {
       const xAxisData = sections.map(({ x }) => x);
-      const seriesData = sections.map(({ y }) => y);
+      const seriesData = sections.map(({ x, y }) => ([x, y]));
       this.chart.setOption({
         xAxis: {
           name: '起点距',
           boundaryGap: false,
-          data: xAxisData,
-          type: 'category',
+          type: 'value',
+          min: Math.min(...xAxisData),
+          max: Math.max(...xAxisData),
           axisLine: {
             lineStyle: {
               color: '#FF8500'