reactor:公告管理+水文站管理接口联调完成

src/api/announcementApi.js

@@ -1,7 +1,7 @@
 import request from '@/utils/request'
 export function getAnnouncementList(params) {
   return request({
-    url: '/api/announcement/list',
+    url: '/announcement/list',
     method: 'get',
     params: params
   })
@@ -9,7 +9,7 @@ export function getAnnouncementList(params) {
 //新增公告
 export function toAddAnnouncement(data){
     return request({
-    url: '/api/announcement/add',
+    url: '/announcement/add',
     method: 'post',
     data
   })
@@ -17,7 +17,7 @@ export function toAddAnnouncement(data){
 //修改公告
 export function toUpdateAnnouncement(data){
     return request({
-    url: '/api/announcement/update',
+    url: '/announcement/update',
     method: 'post',
     data
   })
@@ -25,22 +25,21 @@ export function toUpdateAnnouncement(data){
 //发布公告
 export function toPublish(id) {
   return request({
-    url: '/api/announcement/publish/'+id,
+    url: '/announcement/publish/'+id,
     method: 'post',
   })
 }
 //下架公告
 export function toTakeDown(id) {
   return request({
-    url: '/api/announcement/takeDown/'+id,
+    url: '/announcement/takeDown/'+id,
     method: 'post',
   })
 }
 //删除公告
 export function toDelete(data){
     return request({
-    url: '/api/announcement/del',
-    method: 'DELETE',
-    data
+    url: '/announcement/del/'+data.id,
+    method: 'DELETE'
   })
 }

src/api/hydrologicalStationApi.js

@@ -1,7 +1,7 @@
 import request from '@/utils/request'
 export function getHydrologicalList(params) {
   return request({
-    url: '/api/hydrologicalManagement/list',
+    url: '/hydrologicalManagement/list',
     method: 'get',
     params: params
   })
@@ -9,7 +9,7 @@ export function getHydrologicalList(params) {
 //新增水文站
 export function toAddhydrological(data){
     return request({
-    url: '/api/hydrologicalManagement/add',
+    url: '/hydrologicalManagement/add',
     method: 'post',
     data
   })
@@ -17,7 +17,7 @@ export function toAddhydrological(data){
 //修改水文站
 export function toUpdatehydrological(data){
     return request({
-    url: '/api/hydrologicalManagement/update',
+    url: '/hydrologicalManagement/update',
     method: 'post',
     data
   })
@@ -25,8 +25,7 @@ export function toUpdatehydrological(data){
 //删除水文站
 export function toDelete(data){
     return request({
-    url: '/api/hydrologicalManagement/del',
-    method: 'DELETE',
-    data
+    url: '/hydrologicalManagement/del/'+data.id,
+    method: 'DELETE'
   })
 }

src/api/monitoringDataApi.js

@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+export function getMonitoringList(params) {
+  return request({
+    url: '/monitoringData/list',
+    method: 'get',
+    params: params
+  })
+}
+//新增监测数据
+export function toAddMonitoring(data){
+    return request({
+    url: '/monitoringData/add',
+    method: 'post',
+    data
+  })
+}
+//修改监测数据
+export function toUpdateMonitoring(data){
+    return request({
+    url: '/monitoringData/update',
+    method: 'post',
+    data
+  })
+}
+//删除监测数据
+export function toDelete(data){
+    return request({
+    url: '/monitoringData/del/'+data.id,
+    method: 'DELETE'
+  })
+}
+
+export function toImport(data){
+  return request({
+    url:'/monitoringData/import',
+    headers: {'Content-Type': 'multipart/form-data'},
+    data,
+    method:'post'
+  })
+}

src/utils/request.js

@@ -3,7 +3,7 @@ import axios from 'axios'
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 // 创建axios实例
 const service = axios.create({
-  baseURL: '/hntt-uav',
+  baseURL: '/api',
   // 超时
   timeout: 10000
 })

src/views/announcement-management/index.vue

@@ -49,12 +49,20 @@
     <el-table :data="tableData" border style="width: 100%" height="580">
       <el-table-column prop="announcementName" label="公告名称" align="center"> </el-table-column>
       <el-table-column prop="createrName" label="创建人" align="center"> </el-table-column>
-      <el-table-column prop="createDate" label="创建时间" align="center"> </el-table-column>
+      <el-table-column prop="createTime" label="创建时间" align="center">
+        <template slot-scope="scope">
+          {{ formatDate(scope.row.createTime) }}
+        </template>
+      </el-table-column>
       <el-table-column prop="announcementStatus" label="公告状态" align="center"></el-table-column>
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
-          <el-button size="small" type="text" @click="handleRelease(scope.row)"><img src="@/assets/image/common/p0.png" class="vIcon" /> 发布</el-button>
-          <el-button size="small" type="text" @click="handleTakeDown(scope.row)"><img src="@/assets/image/common/p3.png" class="vIcon" />下架</el-button>
+          <el-button size="small" type="text" @click="handleRelease(scope.row)" v-if="scope.row.announcementStatus == '草稿'"
+            ><img src="@/assets/image/common/p0.png" class="vIcon" /> 发布</el-button
+          >
+          <el-button size="small" type="text" @click="handleTakeDown(scope.row)" v-if="scope.row.announcementStatus == '已发布'"
+            ><img src="@/assets/image/common/p3.png" class="vIcon" />下架</el-button
+          >
           <el-button size="small" type="text" @click="handleEdit(scope.row)"><i class="el-icon-edit"></i> 编辑</el-button>
           <el-button size="small" type="text" @click="handleDelete(scope.row)"><i class="el-icon-delete"></i> 删除</el-button>
         </template>
@@ -80,25 +88,34 @@
           <el-input v-model="form.announcementName"></el-input>
         </el-form-item>
         <el-form-item label="公告内容" prop="announcementContent">
-          <el-input type="textarea" :rows="10" v-model="form.announcementContent"> </el-input>
+          <el-input type="textarea" :rows="7" v-model="form.announcementContent"> </el-input>
         </el-form-item>
         <el-form-item label="上传图片" required>
           <el-upload
             class="avatar-uploader"
             action="/api/announcement/uploadImage"
+            list-type="picture-card"
             accept=".jpg,.jpeg,.png"
+            :file-list="fileList"
             :show-file-list="false"
+            :class="{ 'hide-upload-button': fileList.length >= 1 }"
+            :limit="1"
+            :on-preview="handlePictureCardPreview"
+            :on-remove="handleRemove"
             :on-success="handleAvatarSuccess"
             :before-upload="beforeUpload"
           >
-            <el-button size="small" class="primaryBtn">上传</el-button>
+            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+            <i class="el-icon-plus" v-else></i>
             <div slot="tip" class="el-upload__tip">温馨提示:仅需上传一张小于5M的配图即可，格式支持JPG、PNG、JPEG</div>
-            <img v-if="form.images" :src="form.images" class="preview-image" />
           </el-upload>
         </el-form-item>
         <el-form-item label="公告状态">
-          <el-radio v-model="form.announcementStatus" label="2">草稿</el-radio>
-          <el-radio v-model="form.announcementStatus" label="1">发布</el-radio>
+          <el-radio v-model="form.announcementStatus" :label="2">草稿</el-radio>
+          <el-radio v-model="form.announcementStatus" :label="1">发布</el-radio>
+        </el-form-item>
+        <el-form-item label="创建人" prop="createrName">
+          <el-input v-model="form.createrName"></el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -113,15 +130,22 @@
         <el-button @click="releaseDialogVisible = false" size="small">取 消</el-button>
       </span>
     </el-dialog>
+    <el-dialog :visible.sync="dialogImageVisible">
+      <img width="100%" :src="imageUrl" alt="" />
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import moment from 'moment'
 import { getAnnouncementList, toPublish, toTakeDown, toDelete, toAddAnnouncement, toUpdateAnnouncement } from '@/api/announcementApi'
 export default {
   data() {
     return {
       dateRange: [],
+      imageUrl: '',
+      dialogImageVisible: false,
+      fileList: [],
       searchForm: {
         announcementName: '',
         announcementStatus: '',
@@ -131,11 +155,11 @@ export default {
         pageNum: 1,
         pageSize: 10
       },
-      imageUrl: '',
       form: {
         announcementName: '',
         images: '',
-        announcementStatus: '2',
+        createrName: '',
+        announcementStatus: 2,
         announcementContent: ''
       },
       statusOptions: [
@@ -159,7 +183,8 @@ export default {
       rules: {
         announcementName: [{ required: true, message: '请输入公告名称', trigger: 'blur' }],
         announcementContent: [{ required: true, message: '请输入公告内容', trigger: 'blur' }],
-        address: [{ required: true, message: '请输入水文站位置', trigger: 'blur' }]
+        address: [{ required: true, message: '请输入水文站位置', trigger: 'blur' }],
+        createrName: [{ required: true, message: '请输入创建人', trigger: 'blur' }]
       },
       announcementId: ''
     }
@@ -168,6 +193,9 @@ export default {
     this.fetchData()
   },
   methods: {
+    formatDate(date) {
+      return moment(date).format('YYYY-MM-DD HH:mm:ss')
+    },
     handleSearch() {
       this.fetchData()
     },
@@ -181,11 +209,13 @@ export default {
         pageNum: 1,
         pageSize: 10
       }
+      this.dateRange = []
+      this.fetchData()
     },
     handleDateChange(val) {
       if (val && val.length === 2) {
-        this.searchForm.startTime = val[0]
-        this.searchForm.endTime = val[1]
+        this.searchForm.startTime = this.formatDate(val[0])
+        this.searchForm.endTime = this.formatDate(val[1])
       } else {
         this.searchForm.startTime = ''
         this.searchForm.endTime = ''
@@ -205,6 +235,10 @@ export default {
     },
     handleEdit(row) {
       this.form = JSON.parse(JSON.stringify(row))
+      console.info(row)
+      const obj = this.statusOptions.find((item) => item.label == row.announcementStatus)
+      this.form.announcementStatus = obj ? obj.value : 2
+      console.info(this.form)
       this.title = '编辑公告'
       this.titleType = 'edit'
       this.addDialogVisible = true
@@ -216,6 +250,7 @@ export default {
             message: '删除成功',
             type: 'success'
           })
+          this.fetchData()
         } else {
           this.$message({
             message: '删除失败',
@@ -240,6 +275,8 @@ export default {
     },
     handleAvatarSuccess(res, file) {
       this.form.images = URL.createObjectURL(file.raw)
+      this.imageUrl = res.url
+      this.fileList = [file]
     },
     beforeUpload(file) {
       const isImage = ['image/jpeg', 'image/png', 'image/jpg'].includes(file.type)
@@ -251,21 +288,30 @@ export default {
       if (!isLt5M) {
         this.$message.error('图片大小不能超过5MB!')
       }
+
       return isImage && isLt5M
     },
     toAdd() {
       this.title = '新增公告'
       this.titleType = 'add'
+      this.fileList = []
+      this.form = {
+        announcementName: '',
+        images: '',
+        announcementStatus: 2,
+        announcementContent: ''
+      }
       this.addDialogVisible = true
     },
     toConfirm() {
-      if (this.type) {
+      if (this.type == 1) {
         toPublish(this.announcementId).then((res) => {
           if (res.data) {
             this.$message({
               message: '发布成功',
               type: 'success'
             })
+            this.fetchData()
           } else {
             this.$message({
               message: '发布失败',
@@ -280,6 +326,7 @@ export default {
               message: '下架成功',
               type: 'success'
             })
+            this.fetchData()
           } else {
             this.$message({
               message: '下架失败',
@@ -288,50 +335,63 @@ export default {
           }
         })
       }
+      this.releaseDialogVisible = false
     },
     confirmSubmit() {
-      if (this.titleType == 'add') {
-        toAddAnnouncement(this.form).then((res) => {
-          if (res.data) {
-            this.$message({
-              message: '新增成功',
-              type: 'success'
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          if (this.titleType == 'add') {
+            toAddAnnouncement(this.form).then((res) => {
+              if (res.data) {
+                this.$message({
+                  message: '新增成功',
+                  type: 'success'
+                })
+                this.closeModal()
+                this.fetchData()
+              } else {
+                this.$message({
+                  message: '新增失败',
+                  type: 'error'
+                })
+              }
             })
-            this.closeModal()
-            this.fetchData()
           } else {
-            this.$message({
-              message: '新增失败',
-              type: 'error'
-            })
-          }
-        })
-      } else {
-        toUpdateAnnouncement(this.form).then((res) => {
-          if (res.data) {
-            this.$message({
-              message: '新增成功',
-              type: 'success'
-            })
-            this.closeModal()
-            this.fetchData()
-          } else {
-            this.$message({
-              message: '新增失败',
-              type: 'error'
+            toUpdateAnnouncement(this.form).then((res) => {
+              if (res.data) {
+                this.$message({
+                  message: '新增成功',
+                  type: 'success'
+                })
+                this.closeModal()
+                this.fetchData()
+              } else {
+                this.$message({
+                  message: '新增失败',
+                  type: 'error'
+                })
+              }
             })
           }
-        })
-      }
+        }
+      })
     },
-    closeModal(){
+    closeModal() {
       this.addDialogVisible = false
+      this.fileList = []
       this.form = {
         announcementName: '',
         images: '',
-        announcementStatus: '2',
+        announcementStatus: 2,
         announcementContent: ''
       }
+    },
+    handleRemove(file, fileList) {
+      this.fileList = fileList
+    },
+    handlePictureCardPreview(file) {
+      this.imageUrl = file.url
+      this.dialogImageVisible = true
     }
   }
 }
@@ -347,6 +407,15 @@ export default {
   :deep(.el-input__inner) {
     width: 100%;
   }
+  :deep(.el-upload--picture-card),
+  :deep(.el-upload-list--picture-card .el-upload-list__item) {
+    width: px-to-rem(90);
+    height: px-to-rem(90);
+    line-height: px-to-rem(90);
+  }
+  :deep(.el-upload-list__item-status-label) {
+    display: none;
+  }
   .mb20 {
     margin-bottom: px-to-rem(20);
   }
@@ -408,6 +477,12 @@ export default {
 :deep(.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner) {
   box-shadow: none !important;
 }
+
+:deep(.hide-upload-button) {
+  .el-upload--picture-card {
+    display: none;
+  }
+}
 .preview-image {
   max-width: px-to-rem(100);
   max-height: px-to-rem(100);
@@ -415,4 +490,4 @@ export default {
   border-radius: px-to-rem(4);
   margin-left: px-to-rem(10);
 }
-</style>
+</style>

src/views/hydrological-station/hyInfo.vue

@@ -26,8 +26,8 @@
     <el-table :data="tableData" border style="width: 100%" height="550">
       <el-table-column prop="stationCode" label="水文站编号" align="center"> </el-table-column>
       <el-table-column prop="stationName" label="水文站名称" align="center"> </el-table-column>
-      <el-table-column prop="createDate" label="水文站位置" align="center"> </el-table-column>
-      <el-table-column prop="status" label="水文站经纬度" align="center"></el-table-column>
+      <el-table-column prop="stationLocation" label="水文站位置" align="center"> </el-table-column>
+      <el-table-column prop="stationCoordinates" label="水文站经纬度" align="center"></el-table-column>
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
           <el-button size="small" type="text" @click="jcInfo(scope.row)"><img src="@/assets/image/common/p3.png" class="vIcon" /> 监测信息</el-button>
@@ -58,17 +58,17 @@
         <el-form-item label="水文站编号：" prop="stationCode">
           <el-input v-model="form.stationCode"> </el-input>
         </el-form-item>
-        <el-form-item label="水文站位置：" prop="address">
-          <el-input v-model="form.address"> </el-input>
+        <el-form-item label="水文站位置：" prop="stationLocation">
+          <el-input v-model="form.stationLocation"> </el-input>
         </el-form-item>
-        <el-form-item label="经度：" prop="lat">
-          <el-input v-model="form.lat"> </el-input>
+        <el-form-item label="经度：" prop="stationLatitude">
+          <el-input v-model="form.stationLatitude" type="number"> </el-input>
         </el-form-item>
-        <el-form-item label="纬度：" prop="lng">
-          <el-input v-model="form.lng"> </el-input>
+        <el-form-item label="纬度：" prop="stationLongitude">
+          <el-input v-model="form.stationLongitude" type="number"> </el-input>
         </el-form-item>
-        <el-form-item label="水文站详情：" prop="detailInfo">
-          <el-input type="textarea" :rows="6" v-model="form.detailInfo"> </el-input>
+        <el-form-item label="水文站详情：" prop="stationDetails">
+          <el-input type="textarea" :rows="6" v-model="form.stationDetails"> </el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -80,55 +80,74 @@
 </template>
 
 <script>
-import { getHydrologicalList, toAddhydrological, toUpdatehydrological,toDelete} from '@/api/hydrologicalStationApi'
+import { getHydrologicalList, toAddhydrological, toUpdatehydrological, toDelete } from '@/api/hydrologicalStationApi'
 export default {
   data() {
+    var checkLongitude = (rule, value, callback) => {
+      if (value === '') {
+        return callback(new Error('请输入经度'))
+      }
+      if (value < -180 || value > 180) {
+        return callback(new Error('经度必须在 -180 到 180 之间'))
+      }
+      callback()
+    }
+    var checkLatitude = (rule, value, callback) => {
+      if (value === '') {
+        return callback(new Error('请输入纬度'))
+      }
+      if (value < -90 || value > 90) {
+        return callback(new Error('纬度必须在 -90 到 90 之间'))
+      }
+      callback()
+    }
     return {
       searchForm: {
         stationName: '',
         stationCode: '',
-        pageSize:10,
-        pageNum:1
+        pageSize: 10,
+        pageNum: 1
       },
-      imageUrl: '',
       form: {
         stationName: '',
         stationCode: '',
-        lat: '',
-        lng: '',
-        detailInfo: '',
-        address: ''
+        stationLocation: '',
+        stationLatitude: '',
+        stationLongitude: '',
+        stationDetails: ''
       },
       tableData: [],
       total: 0,
       title: '新增文水站',
       addDialogVisible: false,
-      type: 1,
-      titleType:'add',
+      titleType: 'add',
       rules: {
         stationName: [{ required: true, message: '请输入水文站名称', trigger: 'blur' }],
         stationCode: [{ required: true, message: '请输入水文站编码', trigger: 'blur' }],
-        address: [{ required: true, message: '请输入水文站位置', trigger: 'blur' }],
-        lat: [{ required: true, message: '请输入经度', trigger: 'blur' }],
-        lng: [{ required: true, message: '请输入纬度', trigger: 'blur' }]
+        stationLocation: [{ required: true, message: '请输入水文站位置', trigger: 'blur' }],
+        stationLatitude: [{  validator: checkLatitude, trigger: 'blur' }],
+        stationLongitude: [{  validator: checkLongitude, trigger: 'blur' }]
       }
     }
   },
-  mounted(){
+  mounted() {
     this.fetchData()
   },
   methods: {
-    handleSearch() {},
+    handleSearch() {
+      this.fetchData()
+    },
     resetForm() {
-      this.searchForm= {
+      this.searchForm = {
         stationName: '',
         stationCode: '',
-        pageSize:10,
-        pageNum:1
+        pageSize: 10,
+        pageNum: 1
       }
+      this.fetchData()
     },
     jcInfo(row) {
-      this.$emit('closeHy',row)
+      this.$emit('closeHy', row.id)
     },
     handleEdit(row) {
       this.title = '编辑水文站'
@@ -143,6 +162,7 @@ export default {
             message: '删除成功',
             type: 'success'
           })
+          this.fetchData()
         } else {
           this.$message({
             message: '删除失败',
@@ -160,7 +180,7 @@ export default {
       this.fetchData()
     },
     fetchData() {
-      getHydrologicalList(this.searchForm).then((res)=>{
+      getHydrologicalList(this.searchForm).then((res) => {
         this.tableData = res.data.records
         this.total = res.data.total
       })
@@ -168,52 +188,64 @@ export default {
     toAdd() {
       this.title = '新增文水站'
       this.titleType = 'add'
+      this.form = {
+        stationName: '',
+        stationCode: '',
+        stationLatitude: '',
+        stationLongitude: '',
+        stationDetails: '',
+        stationLocation: ''
+      }
       this.addDialogVisible = true
     },
     confirmSubmit() {
-      if (this.titleType == 'add') {
-        toAddhydrological(this.form).then((res) => {
-          if (res.data) {
-            this.$message({
-              message: '新增成功',
-              type: 'success'
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          if (this.titleType == 'add') {
+            toAddhydrological(this.form).then((res) => {
+              if (res.data) {
+                this.$message({
+                  message: '新增成功',
+                  type: 'success'
+                })
+                this.closeModal()
+                this.fetchData()
+              } else {
+                this.$message({
+                  message: '新增失败',
+                  type: 'error'
+                })
+              }
             })
-            this.closeModal()
-            this.fetchData()
           } else {
-            this.$message({
-              message: '新增失败',
-              type: 'error'
+            toUpdatehydrological(this.form).then((res) => {
+              if (res.data) {
+                this.$message({
+                  message: '修改成功',
+                  type: 'success'
+                })
+                this.closeModal()
+                this.fetchData()
+              } else {
+                this.$message({
+                  message: '修改失败',
+                  type: 'error'
+                })
+              }
             })
           }
-        })
-      } else {
-        toUpdatehydrological(this.form).then((res) => {
-          if (res.data) {
-            this.$message({
-              message: '新增成功',
-              type: 'success'
-            })
-            this.closeModal()
-            this.fetchData()
-          } else {
-            this.$message({
-              message: '新增失败',
-              type: 'error'
-            })
-          }
-        })
-      }
+        }
+      })
     },
-    closeModal(){
+    closeModal() {
       this.addDialogVisible = false
-      this.form={
+      this.form = {
         stationName: '',
         stationCode: '',
-        lat: '',
-        lng: '',
-        detailInfo: '',
-        address: ''
+        stationLatitude: '',
+        stationLongitude: '',
+        stationDetails: '',
+        stationLocation: ''
       }
     }
   }
@@ -247,4 +279,4 @@ export default {
 :deep(.el-pager li.active) {
   background-color: rgba(240, 105, 106, 1) !important;
 }
-</style>
+</style>

src/views/hydrological-station/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="main-contaner">
     <HyInfo v-if="hyInfoShow" @closeHy="closeHy" />
-    <JcInfo v-if="!hyInfoShow" @toBack="hyInfoShow = true" />
+    <JcInfo v-if="!hyInfoShow" @toBack="hyInfoShow = true" :id="hyId"/>
   </div>
 </template>
 
@@ -11,7 +11,8 @@ import JcInfo from './jcInfo.vue'
 export default {
   data() {
     return {
-      hyInfoShow: true
+      hyInfoShow: true,
+      hyId:null
     }
   },
   components: {
@@ -19,8 +20,9 @@ export default {
     JcInfo
   },
   methods:{
-    closeHy(){
+    closeHy(id){
       this.hyInfoShow = false
+      this.hyId = id
     }
   }
 }

src/views/hydrological-station/jcInfo.vue

@@ -4,14 +4,15 @@
       <el-row>
         <el-col :span="8">
           <el-form-item label="上传时间">
-            <el-date-picker v-model="searchForm.createDate" popper-class="v-date-picker" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"> </el-date-picker>
+            <el-date-picker v-model="rangeDate" popper-class="v-date-picker" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" @change="handleDateChange"> </el-date-picker>
           </el-form-item>
         </el-col>
       </el-row>
       <el-row justify="space-between" class="mb20">
         <el-col :span="12" style="text-align: left">
           <el-button size="small" icon="el-icon-plus" class="primaryBtn" @click="toAdd">新增监测数据</el-button>
-          <el-button class="primaryBtn" size="small"><img src="@/assets/image/common/u88.png" class="vIcon" /> 导入</el-button>
+          <input type="file" ref="fileInput" style="display:none;" @change="importData"/>
+          <el-button class="primaryBtn ml10" size="small" @click="toImportData"><img src="@/assets/image/common/u88.png" class="vIcon" /> 导入</el-button>
         </el-col>
         <el-col :span="12" style="text-align: right">
           <el-button size="small" icon="el-icon-search" @click="handleSearch" class="primaryBtn">查询</el-button>
@@ -20,14 +21,20 @@
       </el-row>
     </el-form>
     <el-table :data="tableData" border style="width: 100%" height="600">
-      <el-table-column prop="name" label="实时高程(m)" align="center"> </el-table-column>
-      <el-table-column prop="name" label="昨日最高高程(m)" align="center"> </el-table-column>
-      <el-table-column prop="name" label="1小时雨量(mm)" align="center"> </el-table-column>
-      <el-table-column prop="name" label="当天雨量(mm）" align="center"> </el-table-column>
-      <el-table-column prop="name" label="实时流量(m³/s)" align="center"> </el-table-column>
-      <el-table-column prop="name" label="实时流速(m/s)" align="center"> </el-table-column>
-      <el-table-column prop="name" label="上传时间" align="center"> </el-table-column>
-      <el-table-column prop="name" label="上传人" align="center"> </el-table-column>
+      <el-table-column prop="realTimeElevation" label="实时高程(m)" align="center"> </el-table-column>
+      <el-table-column prop="maxElevationYesterday" label="昨日最高高程(m)" align="center"> </el-table-column>
+      <el-table-column prop="precipitationOneH" label="1小时雨量(mm)" align="center"> </el-table-column>
+      <el-table-column prop="precipitationToday" label="当天雨量(mm）" align="center"> </el-table-column>
+      <el-table-column prop="realTimeDischarge" label="实时流量(m³/s)" align="center"> </el-table-column>
+      <el-table-column prop="realTimeVelocity" label="实时流速(m/s)" align="center"> </el-table-column>
+      <el-table-column prop="createTime" label="上传时间" align="center">
+        <template slot-scope="scope">
+         {{ formatDate(scope.row.createTime) }}
+        </template>
+         </el-table-column>
+      <el-table-column prop="createrName" label="上传人" align="center"> 
+        
+      </el-table-column>
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
           <el-button size="small" type="text" @click="handleEdit(scope.row)"><i class="el-icon-edit"></i> 编辑</el-button>
@@ -40,11 +47,11 @@
       popper-class="v-pageination"
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
-      :current-page="currentPage"
+      :current-page="searchForm.pageNum"
       background
       small
       :page-sizes="[10, 20, 50, 100]"
-      :page-size="pageSize"
+      :page-size="searchForm.pageSize"
       layout="total, sizes, prev, pager, next, jumper"
       :total="total"
     >
@@ -53,13 +60,14 @@
       <el-button size="small" @click="toBack">返回</el-button>
     </div>
     <el-dialog :title="title" :visible.sync="addDialogVisible">
-      <el-form ref="form" :model="form" label-width="110px" class="addJcForm">
-        <el-form-item label="实时高程："> <el-input v-model="form.name"></el-input> <span>m</span> </el-form-item>
-        <el-form-item label="昨日最高高程："> <el-input v-model="form.content"> </el-input><span>m</span> </el-form-item>
-        <el-form-item label="1小时雨量："> <el-input v-model="form.content"> </el-input> <span>mm</span> </el-form-item>
-        <el-form-item label="当天雨量："> <el-input v-model="form.content"> </el-input> <span>mm</span> </el-form-item>
-        <el-form-item label="实时流量："> <el-input v-model="form.content"> </el-input> <span>m³/s</span> </el-form-item>
-        <el-form-item label="实时流速："> <el-input v-model="form.content"> </el-input><span>m/s</span> </el-form-item>
+      <el-form ref="form" :model="form" label-width="120px" class="addJcForm">
+        <el-form-item label="实时高程："> <el-input v-model="form.realTimeElevation" type="number" :min="0"></el-input> <span>m</span> </el-form-item>
+        <el-form-item label="昨日最高高程："> <el-input v-model="form.maxElevationYesterday" type="number" :min="0"> </el-input><span>m</span> </el-form-item>
+        <el-form-item label="1小时雨量："> <el-input v-model="form.precipitationOneH" type="number" :min="0"> </el-input> <span>mm</span> </el-form-item>
+        <el-form-item label="当天雨量："> <el-input v-model="form.precipitationToday" type="number" :min="0"> </el-input> <span>mm</span> </el-form-item>
+        <el-form-item label="实时流量："> <el-input v-model="form.realTimeDischarge" type="number" :min="0"> </el-input> <span>m³/s</span> </el-form-item>
+        <el-form-item label="实时流速："> <el-input v-model="form.realTimeVelocity" type="number" :min="0"> </el-input><span>m/s</span> </el-form-item>
+        <el-form-item label="创建人："> <el-input v-model="form.createrName"> </el-input></el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="confirmSubmit" size="small" class="primaryBtn">确 定</el-button>
@@ -70,61 +78,35 @@
 </template>
 
 <script>
+import { getMonitoringList, toAddMonitoring, toUpdateMonitoring,toDelete,toImport} from '@/api/monitoringDataApi'
+import moment from 'moment'
 export default {
+  props:{
+    id:Number
+  },
   data() {
     return {
       searchForm: {
-        name: '',
-        status: '',
+        stationId:this.id,
+        pageSize: 10,
+        pageNum:1,
         createUser: '',
-        createDate: ''
+        startTime: '',
+        endTime:''
       },
+      rangeDate:[],
       imageUrl: '',
       form: {
-        name: '',
-        content: ''
+        stationId: this.id,
+        realTimeElevation: '',
+        maxElevationYesterday:'',
+        precipitationOneH:'',
+        precipitationToday:'',
+        realTimeDischarge:'',
+        realTimeVelocity:'',
+        createrName:''
       },
-      tableData: [
-        {
-          name: ''
-        },
-        {
-          name: ''
-        },
-        {
-          name: ''
-        },
-        {
-          name: ''
-        },
-        {
-          name: ''
-        },
-        {
-          name: ''
-        },
-        {
-          name: ''
-        },
-        {
-          name: ''
-        },
-        {
-          name: ''
-        },
-        {
-          name: ''
-        },
-        {
-          name: ''
-        },
-        {
-          name: ''
-        },
-        {
-          name: ''
-        }
-      ],
+      tableData: [],
       currentPage: 1,
       pageSize: 10,
       total: 0,
@@ -133,21 +115,61 @@ export default {
       type: 1
     }
   },
+  mounted(){
+    this.fetchData()
+  },
   methods: {
-    handleSearch() {},
+    formatDate(date) {
+      return moment(date).format('YYYY-MM-DD HH:mm:ss')
+    },
+    handleDateChange(val){
+      if (val && val.length === 2) {
+        this.searchForm.startTime = this.formatDate(val[0])
+        this.searchForm.endTime = this.formatDate(val[1])
+      } else {
+        this.searchForm.startTime = ''
+        this.searchForm.endTime = ''
+      }
+    },
+    handleSearch() {
+      this.fetchData()
+    },
     resetForm() {
-      this.$refs.searchForm.resetFields()
+      this.rangeDate = []
+      this.searchForm = {
+        stationId:this.id,
+        pageSize: 10,
+        pageNum:1,
+        createUser: '',
+        startTime: '',
+        endTime:''
+      }
+      this.fetchData()
     },
     toBack() {
       this.$emit('toBack')
     },
     handleEdit(row) {
-      console.info(row)
+      this.form = JSON.parse(JSON.stringify(row))
+      this.titleType = 'edit'
       this.title = '编辑监测数据'
       this.addDialogVisible = true
     },
     handleDelete(row) {
-      console.info(row)
+      toDelete({ id: row.id }).then((res) => {
+        if (res.data) {
+          this.$message({
+            message: '删除成功',
+            type: 'success'
+          })
+          this.fetchData()
+        } else {
+          this.$message({
+            message: '删除失败',
+            type: 'error'
+          })
+        }
+      })
     },
     handleSizeChange(val) {
       this.pageSize = val
@@ -157,12 +179,93 @@ export default {
       this.currentPage = val
       this.fetchData()
     },
-    fetchData() {},
+    fetchData() {
+      getMonitoringList(this.searchForm).then((res)=>{
+        this.tableData = res.data.records
+        this.total = res.data.total
+      })
+    },
     toAdd() {
       this.title = '新增监测数据'
+      this.titleType = 'add'
+      this.form = {
+        stationId: this.id,
+        realTimeElevation: '',
+        maxElevationYesterday:'',
+        precipitationOneH:'',
+        precipitationToday:'',
+        realTimeDischarge:'',
+        realTimeVelocity:'',
+        createrName:''
+      }
       this.addDialogVisible = true
     },
-    confirmSubmit() {}
+     confirmSubmit() {
+       this.$refs.form.validate((valid) => {
+        if (valid) {
+      if (this.titleType == 'add') {
+        toAddMonitoring(this.form).then((res) => {
+          if (res.data) {
+            this.$message({
+              message: '新增成功',
+              type: 'success'
+            })
+            this.closeModal()
+            this.fetchData()
+          } else {
+            this.$message({
+              message: '新增失败',
+              type: 'error'
+            })
+          }
+        })
+      } else {
+        toUpdateMonitoring(this.form).then((res) => {
+          if (res.data) {
+            this.$message({
+              message: '修改成功',
+              type: 'success'
+            })
+            this.closeModal()
+            this.fetchData()
+          } else {
+            this.$message({
+              message: '修改失败',
+              type: 'error'
+            })
+          }
+        })
+      }
+    }
+  })
+    },
+    toImportData(){
+      this.$refs.fileInput.click()
+    },
+    importData(event){
+      const file = event.target.files[0]; 
+      toImport({file:file}).then((res)=>{
+        if(res.data && res.data.errorCount == 0){
+          this.$message.success('导入成功')
+          this.fetchData()
+        }else{
+          this.$message.error('导入失败')
+        }
+      })
+    },
+    closeModal(){
+      this.addDialogVisible = false
+      this.form={
+        stationId: this.id,
+        realTimeElevation: '',
+        maxElevationYesterday:'',
+        precipitationOneH:'',
+        precipitationToday:'',
+        realTimeDischarge:'',
+        realTimeVelocity:'',
+        createrName:''
+      }
+    }
   }
 }
 </script>
@@ -188,6 +291,9 @@ export default {
 .el-upload__tip {
   color: #ff6a6c;
 }
+.ml10{
+  margin-left: px-to-rem(10);
+}
 .vIcon {
   width: px-to-rem(10);
   height: px-to-rem(10);
@@ -197,7 +303,7 @@ export default {
 }
 .addJcForm :deep(.el-form-item__content span) {
   display: inline-block;
-  width: px-to-rem(32);
+  width: px-to-rem(36);
   margin-left: px-to-rem(10);
 }
 .backBtn {

vue.config.js

@@ -54,9 +54,9 @@ module.exports = defineConfig({
         changeOrigin: true,
         rewrite: (p) => p.replace(/^\/system-biz/, '')
       },
-      '/hntt-uav': {
+      '/api': {
         //测试环境
-        target: 'http://10.157.225.55:28083',
+        target: 'http://10.157.225.55:28083',//http://192.168.1.185:28131
         changOrigin: true
       }
     }