feat: 分离断面和历史断面

ruoyi-ui/src/main.js

@@ -2,6 +2,9 @@ import Vue from 'vue'
 
 import Cookies from 'js-cookie'
 
+import 'echarts/theme/macarons'
+import 'echarts'
+
 import Element from 'element-ui'
 import './assets/styles/element-variables.scss'
 

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

@@ -0,0 +1,125 @@
+<template>
+  <div ref="chart" class="chart" :style="{height: '400px', width: '100%'}" />
+</template>
+
+<script>
+import * as echarts from "echarts";
+import resize from '@/utils/resize'
+
+export default {
+  mixins: [resize],
+  mounted() {
+    this.$nextTick(() => {
+      this.chart = echarts.init(this.$refs.chart, 'macarons');
+    })
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose()
+      this.chart = null
+    }
+  },
+  methods: {
+    setOptions(history) {
+      const seriesData = history.map((h, index) => {
+        const positions = JSON.parse(h.positions) || [];
+        return {
+          name: `${index + 1}.${h.berthingName}`,
+          type: 'line',
+          smooth: false,
+          areaStyle: {normal: {}},
+          data: positions.map(({x, y}) => [x, y]),
+        }
+      });
+      const legend = {
+          data: history.map((h, index) => `${index + 1}.${h.berthingName}`),
+      }
+      this.chart.clear();
+      this.chart.setOption({
+        legend,
+        xAxis: {
+          name: '起点距',
+          boundaryGap: false,
+          type: 'value',
+          min: 'dataMin',
+          max: 'dataMax',
+          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: seriesData
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,143 @@
+<template>
+  <div ref="chart" className="chart" :style="{height: '400px', width: '100%'}"/>
+</template>
+
+<script>
+import * as echarts from "echarts";
+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) {
+      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(({x, y}) => ([x, y]));
+      this.chart.clear();
+      this.chart.setOption({
+        xAxis: {
+          name: '起点距',
+          boundaryGap: false,
+          type: 'value',
+          min: Math.min(...xAxisData),
+          max: Math.max(...xAxisData),
+          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,
+          type: 'line',
+          data: seriesData,
+          animations: false,
+        }]
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,142 @@
+<template>
+  <div class="hum-page-container">
+    <div class="hum-page-title">断面管理</div>
+    <div class="hum-page-section">
+      <div class="hum-page-search">
+        <el-form :model="queryParams" size="large" ref="queryForm" label-position="top">
+          <el-row :gutter="30">
+            <el-col :span="6">
+              <el-form-item label="选择站点">
+                <el-select v-model="siteId" placeholder="请选择站点" @change="getList">
+                  <el-option
+                    v-for="item in siteList"
+                    :key="item.siteId"
+                    :label="item.siteName"
+                    :value="item.siteId">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item class="hum-page-search-action">
+                <el-button type="primary" @click="handleQuery">查询</el-button>
+                <el-button @click="resetQuery">重置</el-button>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+      <el-table v-loading="loading" :data="list" border max-height="300">
+        <el-table-column label="序号" type="index" />
+        <el-table-column label="站码" prop="id" />
+        <el-table-column label="断面名称" prop="berthingName" />
+        <el-table-column label="创建日期">
+          <template slot-scope="scope">
+            <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-download" @click="download(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>
+    </div>
+    <div class="hum-page-title" style="margin-top: 30px">断面图</div>
+    <div class="hum-page-section">
+      <ChartList ref="chart" />
+    </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, deleteSection } from "@/api/site/berthing";
+import ChartList from './chart-list';
+import SectionChart from './chart';
+
+export default {
+  components: {
+    ChartList,
+    SectionChart,
+  },
+  data() {
+    return {
+      siteId: '',
+      siteList: [],
+      queryParams: {
+        page: 1,
+        size: 1000,
+      },
+      loading: true,
+      total: 0,
+      list: [],
+      sections: [],
+      sectionChartVisible: false,
+    }
+  },
+  created() {
+    this.init();
+  },
+  methods: {
+    handleQuery() {
+      this.getList()
+    },
+    resetQuery() {},
+    init() {
+      this.loading = true;
+      listSite({ page: 1, size: 1000 }).then(response => {
+          this.siteList = response.data.records || [];
+          if (this.siteList.length > 0) {
+            this.siteId = this.siteList[0].siteId;
+            this.getList();
+          }
+        }
+      ).catch(() => {
+        this.loading = false;
+      });
+    },
+    getList() {
+      this.loading = true;
+      listSection({ ...this.queryParams, siteId: this.siteId }).then(response => {
+          const history = (response.data.records || []).filter(({ status }) => status === 0);
+          this.$refs.chart.setOptions(history);
+          this.list = history
+          this.total = response.data.total;
+          this.loading = false;
+        }
+      );
+    },
+    showSectionChart(section) {
+      this.sectionChartVisible = true;
+      this.sections = JSON.parse(section.positions);
+    },
+    download(section) {
+      window.open(`${process.env.VUE_APP_BASE_API}/berthing/downFile/${section.berthingId}`, '_blank')
+    },
+    handleDelete(section) {
+      this.$modal.confirm('是否确认删除断面名称为"' + section.berthingName + '"的数据项？').then(function() {
+        return deleteSection(section.berthingId);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -4,7 +4,6 @@
 
 <script>
 import * as echarts from "echarts";
-require('echarts/theme/macarons') // echarts theme
 import resize from '@/utils/resize'
 
 export default {
@@ -80,12 +79,8 @@ export default {
             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);
-            },
+            min: 'dataMin',
+            max: 'dataMax',
           },
           {
             axisLine: {
@@ -132,7 +127,6 @@ export default {
             opacity: 0.5
           },
           smooth: false,
-          symbol: 'none',
           type: 'line',
           data: seriesData,
           animations: false,

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

@@ -1,7 +1,7 @@
 <template>
   <div class="hum-page-container">
     <div class="hum-page-title">断面管理</div>
-    <div class="hum-page-main">
+    <div class="hum-page-section">
       <div class="hum-page-search">
         <el-form :model="queryParams" size="large" ref="queryForm" label-position="top">
           <el-row :gutter="30">
@@ -31,38 +31,30 @@
       </div>
       <el-table v-loading="loading" :data="list" border>
         <el-table-column label="站码" prop="id" />
-        <el-table-column label="站点名称" prop="siteName" />
         <el-table-column label="断面名称" prop="berthingName" />
         <el-table-column label="创建日期">
           <template slot-scope="scope">
             <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-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>
+    <div class="hum-page-title" style="margin-top: 30px">断面图</div>
+    <div class="hum-page-section">
       <SectionChart :sections="sections" />
-    </el-dialog>
-
+    </div>
   </div>
 </template>
 
 <script>
 import { listSite } from "@/api/site/site";
-import { listSection, deleteSection } from "@/api/site/berthing";
+import { getSiteSection, deleteSection } from "@/api/site/berthing";
 import SectionChart from './chart';
 
 export default {
@@ -78,7 +70,6 @@ export default {
         size: 1000,
       },
       loading: true,
-      total: 0,
       list: [],
       sections: [],
       sectionChartVisible: false,
@@ -107,16 +98,13 @@ export default {
     },
     getList() {
       this.loading = true;
-      listSection({ ...this.queryParams, siteId: this.siteId }).then(response => {
-          this.list = response.data.records;
-          this.total = response.data.total;
+      getSiteSection(this.siteId).then(response => {
+        if (response.data) {
+          this.list = [response.data];
+          this.sections = JSON.parse(response.data.positions);
           this.loading = false;
         }
-      );
-    },
-    showSectionChart(section) {
-      this.sectionChartVisible = true;
-      this.sections = JSON.parse(section.positions);
+      });
     },
     handleAdd() {
       this.$router.push(`/site/section/add?siteId=${this.siteId}`)
@@ -127,14 +115,6 @@ export default {
     download(section) {
       window.open(`${process.env.VUE_APP_BASE_API}/berthing/downFile/${section.berthingId}`, '_blank')
     },
-    handleDelete(section) {
-      this.$modal.confirm('是否确认删除断面名称为"' + section.berthingName + '"的数据项？').then(function() {
-        return deleteSection(section.berthingId);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
-    },
   }
 }
 </script>