feat: 新增断面

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

@@ -0,0 +1,28 @@
+import request from '@/utils/request'
+
+export function listSection(query) {
+  return request({
+    url: '/berthing/queryBerthing',
+    method: 'post',
+    data: query
+  })
+}
+
+export function uploadSection(formData) {
+  return request({
+    url: '/berthing/uploadFile',
+    method: 'post',
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    },
+    data: formData
+  })
+}
+
+export function addSection(data) {
+  return request({
+    url: '/berthing/insertBerthing',
+    method: 'post',
+    data: data
+  })
+}

ruoyi-ui/src/assets/styles/hum.scss

@@ -65,3 +65,9 @@
 .hum-page-form-action {
   margin-top: 20px;
 }
+
+.hum-page-section {
+  background: #fff;
+  padding: 20px;
+  border-radius: 4px;
+}

ruoyi-ui/src/main.js

@@ -37,13 +37,14 @@ import DictTag from '@/components/DictTag'
 import VueMeta from 'vue-meta'
 // 字典数据组件
 import DictData from '@/components/DictData'
-import { formatDate } from "@/utils";
+import { formatDate, formatDateTime } from "@/utils";
 
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey
 Vue.prototype.parseTime = parseTime
 Vue.prototype.formatDate = formatDate
+Vue.prototype.formatDateTime = formatDateTime
 Vue.prototype.resetForm = resetForm
 Vue.prototype.addDateRange = addDateRange
 Vue.prototype.selectDictLabel = selectDictLabel

ruoyi-ui/src/utils/resize.js

@@ -0,0 +1,56 @@
+import { debounce } from '@/utils'
+
+export default {
+  data() {
+    return {
+      $_sidebarElm: null,
+      $_resizeHandler: null
+    }
+  },
+  mounted() {
+    this.initListener()
+  },
+  activated() {
+    if (!this.$_resizeHandler) {
+      // avoid duplication init
+      this.initListener()
+    }
+
+    // when keep-alive chart activated, auto resize
+    this.resize()
+  },
+  beforeDestroy() {
+    this.destroyListener()
+  },
+  deactivated() {
+    this.destroyListener()
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_sidebarResizeHandler(e) {
+      if (e.propertyName === 'width') {
+        this.$_resizeHandler()
+      }
+    },
+    initListener() {
+      this.$_resizeHandler = debounce(() => {
+        this.resize()
+      }, 100)
+      window.addEventListener('resize', this.$_resizeHandler)
+
+      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    destroyListener() {
+      window.removeEventListener('resize', this.$_resizeHandler)
+      this.$_resizeHandler = null
+
+      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    resize() {
+      const { chart } = this
+      chart && chart.resize()
+    }
+  }
+}

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

@@ -0,0 +1,287 @@
+<template>
+  <div class="hum-page-container">
+    <div class="extra">
+      <div class="extra-name">当前站点：{{ site.siteName }}</div>
+      <div class="extra-actions">
+        <el-upload :action="uploadAction" :on-success="importSection" name="file" :show-file-list="false">
+          <el-button type="primary">导入</el-button>
+        </el-upload>
+        <el-button class="extra-action-export" @click="resetQuery">导出</el-button>
+      </div>
+    </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%'}" />
+    </div>
+    <div class="hum-page-title" style="margin-top: 30px">断面表</div>
+    <div class="hum-page-section">
+      <el-form :model="form" :rules="rules" size="large" ref="form" label-position="top">
+        <el-row :gutter="30">
+          <el-col :span="6">
+            <el-form-item label="断面名称" prop="berthingName">
+              <el-input
+                v-model="form.berthingName"
+                placeholder="请输入断面名称"
+                clearable
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <el-table v-loading="loading" :data="tableSections" border height="400">
+        <el-table-column label="起点距">
+          <template slot-scope="scope">
+            <el-input v-if="scope.row.isEdit" size="mini" type="text" v-model="form.x" />
+            <span v-else>{{ scope.row.x }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="高程">
+          <template slot-scope="scope">
+            <el-input v-if="scope.row.isEdit" size="mini" type="text" v-model="form.y" />
+            <span v-else>{{ scope.row.y }}</span>
+          </template>
+        </el-table-column>
+        <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 size="mini" type="text" icon="el-icon-delete" @click="deleteSection(scope.$index)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="hum-page-form-action">
+      <el-button @click="$router.back()">取消</el-button>
+      <el-button type="primary" @click="submitForm" :loading="loading">保存</el-button>
+    </div>
+  </div>
+</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'
+
+export default {
+  mixins: [resize],
+  data() {
+    return {
+      id: 0,
+      siteId: 0,
+      site: 0,
+      loading: false,
+      sections: [],
+      tableSections: [],
+      form: {
+        x: 0,
+        y: 0,
+        berthingName: '',
+      },
+      rules: {
+        berthingName: [
+          {required: true, message: "断面名称不能为空", trigger: "blur"}
+        ],
+      },
+      chart: null,
+      uploadAction: `${process.env.VUE_APP_BASE_API}/berthing/uploadFile`
+    }
+  },
+  computed: {
+    title() {
+      return this.id ? '编辑断面' : '新增断面';
+    }
+  },
+  methods: {
+    loadSite() {
+      getSite(this.siteId).then((res) => {
+        this.site = { ...res.data };
+      })
+    },
+    importSection(res) {
+      this.sections = res.data || [];
+      this.tableSections = (res.data || []).map(({ x, y }) => ({ x, y, isEdit: false }))
+    },
+    saveSection(s) {
+      s.x = this.form.x;
+      s.y = this.form.y;
+      s.isEdit = false;
+      this.sections = this.tableSections.map(({ x, y }) => ({ x, y }));
+    },
+    editSection(s) {
+      this.tableSections.forEach((r) => r.isEdit = false)
+      this.form.x = s.x;
+      this.form.y = s.y;
+      s.isEdit = true;
+    },
+    deleteSection(index) {
+      this.tableSections.splice(index, 1);
+      this.sections = this.tableSections.map(({ x, y }) => ({ x, y }));
+    },
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (!valid) {
+          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 => {
+          this.$modal.msgSuccess(this.id ? "编辑成功" : "新增成功");
+          this.$router.back();
+        }).finally(() => {
+          this.loading = false;
+        });
+      });
+    },
+    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;
+    this.siteId = this.$route.query.siteId;
+    if (this.siteId) {
+      this.loadSite();
+    }
+    this.$nextTick(() => {
+      this.chart = echarts.init(this.$refs.chart, 'macarons');
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.extra {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #fff;
+  padding: 20px;
+  border-radius: 4px;
+  &-name {
+    font-size: 14px;
+    font-weight: 500;
+    color: #1D2738;
+  }
+  &-actions {
+    display: flex;
+  }
+  &-action-export {
+    margin-left: 16px;
+  }
+}
+</style>

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

@@ -0,0 +1,123 @@
+<template>
+  <div class="hum-page-container">
+    <div class="hum-page-title">断面管理</div>
+    <div class="hum-page-main">
+      <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>
+      <div class="hum-page-action">
+        <el-button type="primary" @click="$router.push(`/site/section/add?siteId=${siteId}`)">新增断面</el-button>
+      </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" 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>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { listSite } from "@/api/site/site";
+import { listSection } from "@/api/site/berthing";
+
+export default {
+  data() {
+    return {
+      siteId: '',
+      siteList: [],
+      queryParams: {
+        page: 1,
+        size: 1000,
+      },
+      loading: true,
+      total: 0,
+      list: []
+    }
+  },
+  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 => {
+          this.list = response.data.records;
+          this.total = response.data.total;
+          this.loading = false;
+        }
+      );
+    },
+    handleUpdate(site) {
+      this.$router.push(`/site/site/edit/${site.siteId}`);
+    },
+    handleDelete(site) {
+      this.$router.push(`/site/site/config/${site.siteId}`);
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -83,7 +83,7 @@
         <el-table-column label="设备ID" prop="deviceId" />
         <el-table-column label="设站日期" prop="siteTime">
           <template slot-scope="scope">
-            <span>{{ formatDate(scope.row.siteTime, 'yyyy-MM-dd') }}</span>
+            <span>{{ formatDate(scope.row.siteTime) }}</span>
           </template>
         </el-table-column>
         <el-table-column label="行政区域" prop="adminRegion" />
@@ -98,9 +98,8 @@
             <el-button
               size="mini"
               type="text"
-              icon="el-icon-delete"
-              @click="handleDelete(scope.row)"
-              v-hasPermi="['system:role:remove']"
+              icon="el-icon-setting"
+              @click="handleConfig(scope.row)"
             >参数设置</el-button>
           </template>
         </el-table-column>
@@ -144,8 +143,20 @@ export default {
     this.getList();
   },
   methods: {
-    handleQuery() {},
-    resetQuery() {},
+    handleQuery() {
+      this.getList();
+    },
+    resetQuery() {
+      this.queryParams = {
+        page: 1,
+        size: 10,
+        id: '',
+        siteName: '',
+        siteType: '',
+        deviceId: '',
+      };
+      this.getList();
+    },
     getList() {
       this.loading = true;
       listSite(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
@@ -158,7 +169,7 @@ export default {
     handleUpdate(site) {
       this.$router.push(`/site/site/edit/${site.siteId}`);
     },
-    handleDelete(site) {
+    handleConfig(site) {
       this.$router.push(`/site/site/config/${site.siteId}`);
     },
   }