feat: 断面管理

ruoyi-system/src/main/java/com/ruoyi/system/service/BerthingService.java

@@ -21,24 +21,24 @@ public interface BerthingService {
 
     ArrayList<PrintExcelDTO> uploadFile(MultipartFile file);
 
-
     boolean insertBerthing(BerthingPointDTO berthingPointDTO);
 
-
     Page<BerthingPoint> queryBerthing(BerthingPointQuery berthingPointQuery);
 
+    BerthingPoint queryBerthingById(Long id);
+
+    Boolean deleteBerthingById(Long id);
 
     boolean  downFile(Long siteId, HttpServletResponse response);
 
+    boolean downFileById(Long id, HttpServletResponse response);
 
     boolean addStopPrint(BerthingPointConfigDTO berthingPointConfigDTO);
 
     Page<BerthingPointConfig> queryStopPrint(StopPointQuery stopPointQuery);
 
-
     boolean addTimePrint(BerthingTimeDTO berthingTimeDTO);
 
-
     Page<BerthingTimeConfig> queryTimePrint(TimePointQuery timePointQuery);
 
     boolean addFloatPrint(BerthingFloatDTO berthingFloatDTO);

ruoyi-system/src/main/java/com/ruoyi/system/service/impl/BerthingServiceImpl.java

@@ -7,6 +7,7 @@ import com.alibaba.excel.context.AnalysisContext;
 import com.alibaba.excel.read.listener.ReadListener;
 import com.alibaba.excel.write.metadata.WriteSheet;
 import com.alibaba.excel.write.style.column.LongestMatchColumnWidthStyleStrategy;
+import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
 import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
 import com.ruoyi.common.exception.base.BaseException;
 import com.ruoyi.system.domain.*;
@@ -24,10 +25,7 @@ import org.springframework.web.multipart.MultipartFile;
 import javax.annotation.Resource;
 import javax.servlet.http.HttpServletResponse;
 import java.text.SimpleDateFormat;
-import java.util.ArrayList;
-import java.util.Comparator;
-import java.util.Date;
-import java.util.List;
+import java.util.*;
 
 
 /**
@@ -127,6 +125,37 @@ public class BerthingServiceImpl implements BerthingService {
         }
     }
 
+    @Override
+    public BerthingPoint queryBerthingById(Long id) {
+        return berthingPointMapper.queryById(id);
+    }
+
+    @Override
+    public Boolean deleteBerthingById(Long id) {
+        BerthingPoint berthingPoint = berthingPointMapper.queryById(id);
+        if (berthingPoint == null) {
+            throw new BaseException("断面不存在");
+        }
+        BerthingPoint siteBerthingPoint = berthingPointMapper.queryBySiteId(berthingPoint.getSiteId());
+        if (Objects.equals(berthingPoint.getBerthingId(), siteBerthingPoint.getBerthingId())) {
+            throw new BaseException("最新断面不能删除");
+        }
+        berthingPointMapper.deleteById(id);
+        return true;
+    }
+
+    @Override
+    public boolean downFileById(Long id, HttpServletResponse response) {
+        if (id == null) {
+            throw new BaseException("断面ID不能为空");
+        }
+        BerthingPoint berthingPoint = berthingPointMapper.queryById(id);
+        if (berthingPoint == null) {
+            throw new BaseException("断面不存在");
+        }
+        return downloadExcel(berthingPoint, response);
+    }
+
     @Override
     public boolean downFile(Long siteId, HttpServletResponse response) {
         if (siteId == null) {
@@ -136,6 +165,10 @@ public class BerthingServiceImpl implements BerthingService {
         if (berthingPoint == null) {
             throw new BaseException("没有断面数据");
         }
+        return downloadExcel(berthingPoint, response);
+    }
+
+    private boolean downloadExcel(BerthingPoint berthingPoint, HttpServletResponse response) {
         try {
             List<PrintExcelDTO> positions = JSONUtil.toList(berthingPoint.getPositions(), PrintExcelDTO.class);
             response.setContentType("application/octet-stream; charset=utf-8");
@@ -338,10 +371,4 @@ public class BerthingServiceImpl implements BerthingService {
     }
 
 
-
-
-
-
-
-
 }

ruoyi-system/src/main/resources/mapper/BerthingPointMapper.xml

@@ -28,7 +28,9 @@
         select
             berthing_id, id, site_id, berthing_name, positions, create_time, status, is_del, factors
         from berthing_point
-        where site_id = #{siteId}
+        where site_id = #{siteId} and is_del = 0 and status = 1
+        order by create_time desc
+        limit 1
     </select>
 
 

ruoyi-ui/src/api/site/berthing.js

@@ -8,6 +8,13 @@ export function listSection(query) {
   })
 }
 
+export function getSection(id) {
+  return request({
+    url: `/berthing/${id}`,
+    method: 'get'
+  })
+}
+
 export function uploadSection(formData) {
   return request({
     url: '/berthing/uploadFile',
@@ -26,3 +33,10 @@ export function addSection(data) {
     data: data
   })
 }
+
+export function deleteSection(id) {
+  return request({
+    url: `/berthing/${id}`,
+    method: 'delete',
+  })
+}

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

@@ -11,7 +11,7 @@
     </div>
     <div class="hum-page-title" style="margin-top: 30px">断面图</div>
     <div class="hum-page-section">
-      <div ref="chart" class="chart" :style="{height: '400px', width: '100%'}" />
+      <SectionChart :sections="sections" />
     </div>
     <div class="hum-page-title" style="margin-top: 30px">断面表</div>
     <div class="hum-page-section">
@@ -44,7 +44,9 @@
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <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-s-operation" @click="editSection(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-delete" @click="deleteSection(scope.$index)">删除</el-button>
           </template>
         </el-table-column>
@@ -58,14 +60,14 @@
 </template>
 
 <script>
-import * as echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from '@/utils/resize'
 import { getSite, updateSite } from '@/api/site/site'
-import { addSection } from '@/api/site/berthing'
+import { addSection, getSection } from '@/api/site/berthing'
+import SectionChart from './chart';
 
 export default {
-  mixins: [resize],
+  components: {
+    SectionChart,
+  },
   data() {
     return {
       id: 0,
@@ -84,7 +86,6 @@ export default {
           {required: true, message: "断面名称不能为空", trigger: "blur"}
         ],
       },
-      chart: null,
       uploadAction: `${process.env.VUE_APP_BASE_API}/berthing/uploadFile`
     }
   },
@@ -94,6 +95,14 @@ export default {
     }
   },
   methods: {
+    loadSection() {
+      getSection(this.id).then((res) => {
+        const positions = JSON.parse(res.data.positions) || [];
+        this.sections = positions;
+        this.form.berthingName = res.data.berthingName;
+        this.tableSections = positions.map(({ x, y }) => ({ x, y, isEdit: false }))
+      })
+    },
     loadSite() {
       getSite(this.siteId).then((res) => {
         this.site = { ...res.data };
@@ -104,6 +113,12 @@ export default {
       this.tableSections = (res.data || []).map(({ x, y }) => ({ x, y, isEdit: false }))
     },
     saveSection(s) {
+      if (!/^-?\d+(\.\d+)?$/.test(this.form.x)) {
+        return this.$message.error("起点距必须是数字")
+      }
+      if (!/^-?\d+(\.\d+)?$/.test(this.form.y)) {
+        return this.$message.error("高程必须是数字")
+      }
       s.x = this.form.x;
       s.y = this.form.y;
       s.isEdit = false;
@@ -115,6 +130,31 @@ export default {
       this.form.y = s.y;
       s.isEdit = true;
     },
+    insertSection(index) {
+      this.form.x = 0;
+      this.form.y = 0;
+      if (index < 0) {
+        this.sections = [
+          { x: 0, y: 0 },
+          ...this.sections,
+        ]
+        this.tableSections = [
+          { x: 0, y: 0, isEdit: true },
+          ...this.tableSections,
+        ]
+      } else {
+        this.sections = [
+          ...this.sections.slice(0, index),
+          { x: 0, y: 0 },
+          ...this.sections.slice(index),
+        ]
+        this.tableSections = [
+          ...this.tableSections.slice(0, index),
+          { x: 0, y: 0, isEdit: true },
+          ...this.tableSections.slice(index),
+        ]
+      }
+    },
     deleteSection(index) {
       this.tableSections.splice(index, 1);
       this.sections = this.tableSections.map(({ x, y }) => ({ x, y }));
@@ -125,10 +165,7 @@ export default {
           return;
         }
         this.loading = true;
-        const promise = this.id
-          ? updateSite({ ...this.form, siteId: this.siteId })
-          : addSection({ ...this.form, siteId: this.siteId, positions: this.sections });
-        promise.then(response => {
+        addSection({ ...this.form, siteId: this.siteId, positions: this.sections }).then(response => {
           this.$modal.msgSuccess(this.id ? "编辑成功" : "新增成功");
           this.$router.back();
         }).finally(() => {
@@ -136,113 +173,6 @@ export default {
         });
       });
     },
-    setOptions(sections) {
-      const xAxisData = sections.map(({ x }) => x);
-      const seriesData = sections.map(({ y }) => y);
-      this.chart.setOption({
-        xAxis: {
-          name: '起点距',
-          boundaryGap: false,
-          data: xAxisData,
-          type: 'category',
-          axisLine: {
-            lineStyle: {
-              color: '#FF8500'
-            }
-          },
-          axisTick: {
-            lineStyle: {
-              color: '#8D99A4'
-            }
-          },
-          axisLabel: {
-            color: '#54606C'
-          },
-          nameTextStyle: {
-            color: '#54606C'
-          }
-        },
-        yAxis: [
-          {
-            name: '高程（m）',
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: '#FF8500'
-              }
-            },
-            axisTick: {
-              show: true,
-              lineStyle: {
-                color: '#8D99A4'
-              }
-            },
-            axisLabel: {
-              color: '#54606C'
-            },
-            nameTextStyle: {
-              color: '#54606C'
-            },
-            min: 'dataMin',
-            max: 'dataMax',
-          },
-          {
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: '#FF8500'
-              }
-            },
-            axisTick: {
-              show: false,
-            },
-            axisLabel: {
-              show: false,
-            },
-          },
-        ],
-        grid: {
-          left: 50,
-          right: 50,
-          bottom: 40,
-          top: 40,
-          containLabel: true
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'cross'
-          },
-          padding: [5, 10]
-        },
-        series: [{
-          name: '高程',
-          itemStyle: {
-            normal: {
-              color: '#FF8500',
-              lineStyle: {
-                color: '#FF8500',
-                width: 2
-              }
-            }
-          },
-          areaStyle: {
-            color: '#FF8500',
-            opacity: 0.5
-          },
-          smooth: false,
-          symbol: 'none',
-          type: 'line',
-          data: seriesData,
-          animations: false,
-        }]
-      })
-    }
-  },
-  watch: {
-    sections(value) {
-      this.setOptions(value)
-    }
   },
   mounted() {
     this.id = this.$route.params.id;
@@ -250,16 +180,9 @@ export default {
     if (this.siteId) {
       this.loadSite();
     }
-    this.$nextTick(() => {
-      this.chart = echarts.init(this.$refs.chart, 'macarons');
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
+    if (this.id) {
+      this.loadSection();
     }
-    this.chart.dispose()
-    this.chart = null
   },
 }
 </script>

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

@@ -0,0 +1,148 @@
+<template>
+  <div ref="chart" class="chart" :style="{height: '400px', width: '100%'}" />
+</template>
+
+<script>
+import * as echarts from "echarts";
+require('echarts/theme/macarons') // echarts theme
+import resize from '@/utils/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    sections: Array
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.chart = echarts.init(this.$refs.chart, 'macarons');
+      if (this.sections.length > 0) {
+        this.setOptions(this.sections);
+      }
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  watch: {
+    sections(value) {
+      this.setOptions(value)
+    }
+  },
+  methods: {
+    setOptions(sections) {
+      const xAxisData = sections.map(({ x }) => x);
+      const seriesData = sections.map(({ y }) => y);
+      this.chart.setOption({
+        xAxis: {
+          name: '起点距',
+          boundaryGap: false,
+          data: xAxisData,
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#FF8500'
+            }
+          },
+          axisTick: {
+            lineStyle: {
+              color: '#8D99A4'
+            }
+          },
+          axisLabel: {
+            color: '#54606C'
+          },
+          nameTextStyle: {
+            color: '#54606C'
+          }
+        },
+        yAxis: [
+          {
+            name: '高程（m）',
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#FF8500'
+              }
+            },
+            axisTick: {
+              show: true,
+              lineStyle: {
+                color: '#8D99A4'
+              }
+            },
+            axisLabel: {
+              color: '#54606C'
+            },
+            nameTextStyle: {
+              color: '#54606C'
+            },
+            min: function (value) {
+              return Math.round(value.min - (value.max - value.min) * 0.1);
+            },
+            max: function (value) {
+              return Math.round(value.max + (value.max - value.min) * 0.1);
+            },
+          },
+          {
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#FF8500'
+              }
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+        grid: {
+          left: 50,
+          right: 50,
+          bottom: 40,
+          top: 40,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          },
+          padding: [5, 10]
+        },
+        series: [{
+          name: '高程',
+          itemStyle: {
+            normal: {
+              color: '#FF8500',
+              lineStyle: {
+                color: '#FF8500',
+                width: 2
+              }
+            }
+          },
+          areaStyle: {
+            color: '#FF8500',
+            opacity: 0.5
+          },
+          smooth: false,
+          symbol: 'none',
+          type: 'line',
+          data: seriesData,
+          animations: false,
+        }]
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -27,7 +27,7 @@
         </el-form>
       </div>
       <div class="hum-page-action">
-        <el-button type="primary" @click="$router.push(`/site/section/add?siteId=${siteId}`)">新增断面</el-button>
+        <el-button type="primary" @click="handleAdd">新增断面</el-button>
       </div>
       <el-table v-loading="loading" :data="list" border>
         <el-table-column label="站码" prop="id" />
@@ -38,33 +38,37 @@
             <span>{{ formatDateTime(scope.row.createTime) }}</span>
           </template>
         </el-table-column>
+        <el-table-column label="断面图" align="center">
+          <template slot-scope="scope">
+            <el-button size="mini" type="text" icon="el-icon-s-operation" @click="showSectionChart(scope.row)">查看</el-button>
+          </template>
+        </el-table-column>
         <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-s-operation"
-              @click="handleUpdate(scope.row)"
-            >断面图</el-button>
-            <el-button
-              v-if="scope.$index > 0"
-              size="mini"
-              type="text"
-              icon="el-icon-delete"
-              @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-download" @click="download(scope.row)">导出</el-button>
+            <el-button v-if="scope.$index > 0" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
     </div>
+
+    <el-dialog title="断面图" :visible.sync="sectionChartVisible" width="60%" destroy-on-close>
+      <SectionChart :sections="sections" />
+    </el-dialog>
+
   </div>
 </template>
 
 <script>
 import { listSite } from "@/api/site/site";
-import { listSection } from "@/api/site/berthing";
+import { listSection, deleteSection } from "@/api/site/berthing";
+import SectionChart from './chart';
 
 export default {
+  components: {
+    SectionChart
+  },
   data() {
     return {
       siteId: '',
@@ -75,7 +79,9 @@ export default {
       },
       loading: true,
       total: 0,
-      list: []
+      list: [],
+      sections: [],
+      sectionChartVisible: false,
     }
   },
   created() {
@@ -108,11 +114,26 @@ export default {
         }
       );
     },
-    handleUpdate(site) {
-      this.$router.push(`/site/site/edit/${site.siteId}`);
+    showSectionChart(section) {
+      this.sectionChartVisible = true;
+      this.sections = JSON.parse(section.positions);
+    },
+    handleAdd() {
+      this.$router.push(`/site/section/add?siteId=${this.siteId}`)
+    },
+    handleUpdate(section) {
+      this.$router.push(`/site/section/edit/${section.berthingId}?siteId=${this.siteId}`)
+    },
+    download(section) {
+      window.open(`${process.env.VUE_APP_BASE_API}/berthing/downFile/${section.berthingId}`, '_blank')
     },
-    handleDelete(site) {
-      this.$router.push(`/site/site/config/${site.siteId}`);
+    handleDelete(section) {
+      this.$modal.confirm('是否确认删除断面名称为"' + section.berthingName + '"的数据项？').then(function() {
+        return deleteSection(section.berthingId);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
     },
   }
 }

waterAffairs-admin/src/main/java/com/ruoyi/web/controller/tool/BerthingController.java

@@ -58,11 +58,28 @@ public class BerthingController {
         return R.ok(berthingService.queryBerthing(berthingPointQuery));
     }
 
+    @GetMapping(value = "/{id}")
+    @ApiOperation("查询断面")
+    public R<BerthingPoint> queryBerthingById(@PathVariable("id") Long id) {
+        return R.ok(berthingService.queryBerthingById(id));
+    }
+
+    @DeleteMapping(value = "/{id}")
+    @ApiOperation("删除断面")
+    public R<Boolean> deleteBerthingById(@PathVariable("id") Long id) {
+        return R.ok(berthingService.deleteBerthingById(id));
+    }
+
     @GetMapping(value = "/downFile")
     @ApiOperation(value = "导出断面")
     public R<Boolean> downFile(Long siteId, HttpServletResponse response) {
         return R.ok(berthingService.downFile(siteId, response));
+    }
 
+    @GetMapping(value = "/downFile/{id}")
+    @ApiOperation(value = "导出断面")
+    public R<Boolean> downFileById(@PathVariable("id") Long id, HttpServletResponse response) {
+        return R.ok(berthingService.downFileById(id, response));
     }
 
     @PostMapping(value = "/addStopPrint")