feat:防汛预案接口联调+水文站数据定时变化

src/api/floodPreventionPlan.js

@@ -0,0 +1,31 @@
+import request from '@/utils/request'
+export function getFloodPreventionList(params) {
+  return request({
+    url: '/api/sddnWeiHe/floodPreventionPlan/list',
+    method: 'get',
+    params: params
+  })
+}
+//新增水文站
+export function toAddFloodPrevention(data){
+    return request({
+    url: '/api/sddnWeiHe/floodPreventionPlan/add',
+    method: 'post',
+    data
+  })
+}
+//修改水文站
+export function toUpdateFloodPrevention(data){
+    return request({
+    url: '/api/sddnWeiHe/floodPreventionPlan/update',
+    method: 'post',
+    data
+  })
+}
+//删除水文站
+export function toDelete(data){
+    return request({
+    url: '/api/sddnWeiHe/floodPreventionPlan/del/'+data.id,
+    method: 'DELETE'
+  })
+}

src/assets/scss/index.scss

@@ -300,4 +300,8 @@ html#baidu-map-hack {
 .art-video-player {
   width: 100% !important;
 }
-
+.primaryBtn {
+    color: #fff !important;
+    background-color: #ff6a6c !important;
+    border-color: #ff6a6c !important;
+  }

src/router/index.js

@@ -4,13 +4,14 @@ import { postMsgUtil } from "@ct/iframe-connect-sdk";
 import Index from "../views/index.vue";
 import AnnouncementManagement from '../views/announcement-management/index.vue'
 import HydrologicalStation from '../views/hydrological-station/index.vue'
-
+import FloodPreventionPlan from '../views/flood-prevention-plan/index.vue'
 Vue.use(VueRouter);
 
 const routes = [
   { path: "/allAlarm/:menu", component: Index },
   { path: "/announcement",component:AnnouncementManagement},
-  { path:"/hydrologicalStation",component:HydrologicalStation}
+  { path:"/hydrologicalStation",component:HydrologicalStation},
+  { path:"/floodPreventionPlan",component:FloodPreventionPlan}
 ];
 
 const router = new VueRouter({

src/views/announcement-management/index.vue

@@ -193,8 +193,8 @@ export default {
         address: [{ required: true, message: '请输入水文站位置', trigger: 'blur' }],
         images: [{ required: true, validator: valiIcon, trigger: 'change' }]
       },
-      loading:false,
-      fbLoading:false,
+      loading: false,
+      fbLoading: false,
       announcementId: ''
     }
   },
@@ -202,7 +202,7 @@ export default {
     this.fetchData()
   },
   methods: {
-    handlePicChange(file,fileList) {
+    handlePicChange(file, fileList) {
       this.fileList = fileList
       this.objClass.upLoadHide = true
       this.objClass.upLoadShow = false
@@ -251,9 +251,9 @@ export default {
       this.form = JSON.parse(JSON.stringify(row))
       this.objClass.upLoadHide = true
       this.objClass.upLoadShow = false
-      if(row.images!=null){
-        const fileName = row.images.substring(row.images.lastIndexOf('/') + 1);
-        this.fileList = [{name:fileName,url:row.images}]
+      if (row.images != null) {
+        const fileName = row.images.substring(row.images.lastIndexOf('/') + 1)
+        this.fileList = [{ name: fileName, url: row.images }]
       }
       const obj = this.statusOptions.find((item) => item.label == row.announcementStatus)
       this.form.announcementStatus = obj ? obj.value : 2
@@ -262,20 +262,29 @@ export default {
       this.addDialogVisible = true
     },
     handleDelete(row) {
-      toDelete({ id: row.id }).then((res) => {
-        if (res.data) {
-          this.$message({
-            message: '删除成功',
-            type: 'success'
-          })
-          this.fetchData()
-        } else {
-          this.$message({
-            message: '删除失败',
-            type: 'error'
-          })
-        }
+      this.$confirm('是否删除公告？', '警告', {
+        distinguishCancelAndClose: true,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        confirmButtonClass: 'primaryBtn'
       })
+        .then(() => {
+          toDelete({ id: row.id }).then((res) => {
+            if (res.data) {
+              this.$message({
+                message: '删除成功',
+                type: 'success'
+              })
+              this.fetchData()
+            } else {
+              this.$message({
+                message: '删除失败',
+                type: 'error'
+              })
+            }
+          })
+        })
+        .catch((action) => {})
     },
     handleSizeChange(val) {
       this.searchForm.pageSize = val
@@ -291,7 +300,7 @@ export default {
         this.total = res.data.total
       })
     },
-    handleAvatarSuccess(res, file,fileList) {
+    handleAvatarSuccess(res, file, fileList) {
       this.form.images = res.data.fileUrl
       this.imageUrl = res.data.fileUrl
       this.fileList = fileList
@@ -319,7 +328,7 @@ export default {
         announcementStatus: 2,
         announcementContent: ''
       }
-       this.objClass= {
+      this.objClass = {
         upLoadShow: true,
         upLoadHide: false
       }

src/views/flood-prevention-plan/index.vue

@@ -4,7 +4,7 @@
       <el-row>
         <el-col :span="8">
           <el-form-item label="预案名称">
-            <el-input v-model="searchForm.announcementName" placeholder="请输入"></el-input>
+            <el-input v-model="searchForm.planName" placeholder="请输入"></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="8">
@@ -18,13 +18,13 @@
           <el-button size="small" icon="el-icon-plus" class="primaryBtn" @click="toAdd">新增防汛预案</el-button>
         </el-col>
         <el-col :span="12" style="text-align: right">
-          <el-button size="small" icon="el-icon-search" @click="searchData" class="primaryBtn">查询</el-button>
+          <el-button size="small" icon="el-icon-search" @click="fetchData" class="primaryBtn">查询</el-button>
           <el-button size="small" icon="el-icon-refresh-right" @click="resetForm">重置</el-button>
         </el-col>
       </el-row>
     </el-form>
     <el-table :data="tableData" border style="width: 100%" height="620">
-      <el-table-column prop="announcementName" label="预案名称" align="center"> </el-table-column>
+      <el-table-column prop="planName" label="预案名称" align="center"> </el-table-column>
       <el-table-column prop="createrName" label="创建人" align="center"> </el-table-column>
       <el-table-column prop="createTime" label="创建时间" align="center">
         <template slot-scope="scope">
@@ -53,16 +53,25 @@
       :total="total"
     >
     </el-pagination>
-    <el-dialog :visible.sync="dialogVisible">
+    <el-dialog :visible.sync="dialogVisible" @close="closeModal">
       <template slot="title">
         {{ isEditing ? '编辑防汛预案' : '添加防汛预案' }}
       </template>
       <el-form ref="form" :model="form" :rules="rules" label-width="130px">
-        <el-form-item label="防汛预案名称" prop="name">
-          <el-input v-model="form.name"></el-input>
+        <el-form-item label="防汛预案名称" prop="planName">
+          <el-input v-model="form.planName"></el-input>
         </el-form-item>
-        <el-form-item label="上传文件" prop="file">
-          <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-change="handleChange" :file-list="fileList">
+        <el-form-item label="上传文件" prop="planFile">
+          <el-upload
+            class="upload-demo"
+            action="/api/sddnWeiHe/floodPreventionPlan/uploadPpt"
+            accept=".ppt, .pptx"
+            :limit="1"
+            :on-change="handleChange"
+            :on-success="uploadSuccess"
+            :before-upload="beforeUpload"
+            :file-list="fileList"
+          >
             <el-button size="small" type="primary" class="primaryBtn">上传</el-button>
             <div slot="tip" class="el-upload__tip">温馨提示:请上传ppt文件！</div>
           </el-upload>
@@ -78,63 +87,150 @@
 
 <script>
 import moment from 'moment'
+import { getFloodPreventionList, toAddFloodPrevention, toUpdateFloodPrevention, toDelete } from '@/api/floodPreventionPlan'
 export default {
   data() {
     return {
       searchForm: {
-        name: '',
+        planName: '',
         createrName: '',
         pageSize: 10,
         pageNum: 1
       },
-      rules:{
-         name: [{ required: true, message: '请输入防汛预案名称', trigger: 'blur' }],
-        file: [{ required: true, message: '请输入公告内容', trigger: 'change' }],
+      rules: {
+        planName: [{ required: true, message: '请输入防汛预案名称', trigger: 'blur' }],
+        planFile: [{ required: true, message: '请上传PPT文件', trigger: 'change' }]
       },
-      loading:false,
+      loading: false,
       dialogVisible: false,
       fileList: [],
       total: 0,
       isEditing: false,
       tableData: [],
       form: {
-        name: '',
-        fileUrl: ''
+        planName: '',
+        planFile: '',
+        fileName: ''
       }
     }
   },
   mounted() {
-    this.searchData()
+    this.fetchData()
   },
   methods: {
     toAdd() {
-        this.dialogVisible = true
-    },
-    searchData() {
+      this.dialogVisible = true
       this.isEditing = false
     },
+    fetchData() {
+      getFloodPreventionList(this.searchForm).then((res) => {
+        this.tableData = res.data.records
+        this.total = res.data.total
+      })
+    },
     resetForm() {
-      this.form = {
-        name: '',
-        fileUrl: ''
+      this.searchForm = {
+        planName: '',
+        createrName: '',
+        pageSize: 10,
+        pageNum: 1
       }
-      this.isEditing = false
+    },
+    beforeUpload(file){
+      return 
     },
     formatDate(date) {
       return moment(date).format('YYYY-MM-DD HH:mm:ss')
     },
-    handleChange() {},
-    handleEdit() {
+    handleChange(file, fileList) {
+      this.fileList = fileList
+      console.info(fileList)
+    },
+    uploadSuccess(res, file, fileList) {
+      this.form.planFile = res.data.presignedUrl
+      this.form.fileName = res.data.originalName
+    },
+    handleEdit(item) {
       this.isEditing = true
+      this.form = { ...item }
+      if (this.form.planFile != null) {
+        this.fileList = [{ name: this.form.fileName, url: this.form.planFile }]
+        console.info(this.fileList)
+      }
+      this.dialogVisible = true
     },
-    confirmSubmit(){
-
+    confirmSubmit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.loading = true
+          if (!this.isEditing) {
+            toAddFloodPrevention(this.form).then((res) => {
+              this.loading = false
+              this.closeModal()
+              this.fetchData()
+              if (res.data) {
+                this.$message({
+                  message: '新增成功',
+                  type: 'success'
+                })
+              } else {
+                this.$message({
+                  message: '新增失败',
+                  type: 'error'
+                })
+              }
+            })
+          } else {
+            toUpdateFloodPrevention(this.form).then((res) => {
+              this.loading = false
+              if (res.data) {
+                this.$message({
+                  message: '新增成功',
+                  type: 'success'
+                })
+                this.closeModal()
+                this.fetchData()
+              } else {
+                this.$message({
+                  message: '新增失败',
+                  type: 'error'
+                })
+              }
+            })
+          }
+        }
+      })
+    },
+    closeModal() {
+      this.form = {
+        planName: '',
+        planFile: ''
+      }
+      this.fileList = []
+      this.dialogVisible = false
+      this.isEditing = false
+    },
+    handleDownLoad(item) {
+      const link = document.createElement('a')
+      const blob = new Blob([item.planFile],{type:'application/vnd.openxmlformats-officedocument.presentationml.presentation'})
+      const url = window.URL.createObjectURL(blob)
+      link.href = url
+      link.download = item.fileName
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+      window.URL.revokeObjectURL(url)
+      this.$message.success('文件下载成功')
     },
-    handleDownLoad() {},
     handleDelete() {
-        if (confirm('确定要删除吗？')) {
-            console.info('')
-        }
+      this.$confirm('是否删除防汛预案？', '警告', {
+        distinguishCancelAndClose: true,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        confirmButtonClass: 'primaryBtn'
+      })
+        .then(() => {})
+        .catch((action) => {})
     },
     handleSizeChange(val) {
       this.searchForm.pageSize = val
@@ -197,13 +293,16 @@ export default {
   }
 }
 .page {
-    margin-top: px-to-rem(20);
-    text-align: right;
-  }
-   .mb20 {
-    margin-bottom: px-to-rem(20);
-  }
+  margin-top: px-to-rem(20);
+  text-align: right;
+}
+.mb20 {
+  margin-bottom: px-to-rem(20);
+}
 :deep(.el-pager li.active) {
   background-color: rgba(240, 105, 106, 1) !important;
 }
+:deep(.el-loading-mask) {
+  background-color: transparent;
+}
 </style>

src/views/hydrological-station/hyInfo.vue

@@ -102,7 +102,7 @@ export default {
       callback()
     }
     return {
-      loading:false,
+      loading: false,
       searchForm: {
         stationName: '',
         stationCode: '',
@@ -126,8 +126,8 @@ export default {
         stationName: [{ required: true, message: '请输入水文站名称', trigger: 'blur' }],
         stationCode: [{ required: true, message: '请输入水文站编码', trigger: 'blur' }],
         stationLocation: [{ required: true, message: '请输入水文站位置', trigger: 'blur' }],
-        stationLatitude: [{  validator: checkLatitude, trigger: 'blur' }],
-        stationLongitude: [{  validator: checkLongitude, trigger: 'blur' }]
+        stationLatitude: [{ validator: checkLatitude, trigger: 'blur' }],
+        stationLongitude: [{ validator: checkLongitude, trigger: 'blur' }]
       }
     }
   },
@@ -157,20 +157,29 @@ export default {
       this.addDialogVisible = true
     },
     handleDelete(row) {
-      toDelete({ id: row.id }).then((res) => {
-        if (res.data) {
-          this.$message({
-            message: '删除成功',
-            type: 'success'
-          })
-          this.fetchData()
-        } else {
-          this.$message({
-            message: '删除失败',
-            type: 'error'
-          })
-        }
+      this.$confirm('是否删除水文站？', '警告', {
+        distinguishCancelAndClose: true,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        confirmButtonClass: 'primaryBtn'
       })
+        .then(() => {
+          toDelete({ id: row.id }).then((res) => {
+            if (res.data) {
+              this.$message({
+                message: '删除成功',
+                type: 'success'
+              })
+              this.fetchData()
+            } else {
+              this.$message({
+                message: '删除失败',
+                type: 'error'
+              })
+            }
+          })
+        })
+        .catch((action) => {})
     },
     handleSizeChange(val) {
       this.searchForm.pageSize = val
@@ -251,7 +260,7 @@ export default {
         stationDetails: '',
         stationLocation: ''
       }
-      this.$refs.form.resetFields();
+      this.$refs.form.resetFields()
     }
   }
 }

src/views/hydrological-station/jcInfo.vue

@@ -4,14 +4,23 @@
       <el-row>
         <el-col :span="8">
           <el-form-item label="上传时间">
-            <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-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>
-          <input type="file" ref="fileInput" style="display:none;" @change="importData"/>
+          <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">
@@ -29,12 +38,10 @@
       <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) }}
+          {{ formatDate(scope.row.createTime) }}
         </template>
-         </el-table-column>
-      <el-table-column prop="createrName" label="上传人" align="center"> 
-        
       </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>
@@ -61,13 +68,16 @@
     </div>
     <el-dialog :title="title" :visible.sync="addDialogVisible">
       <el-form ref="form" :rules="rules" :model="form" label-width="140px" class="addJcForm">
-        <el-form-item label="实时高程：" prop="realTimeElevation"> <el-input v-model="form.realTimeElevation" type="number" :min="380" :max="420"></el-input> <span>m</span> </el-form-item>
-        <el-form-item label="昨日最高高程：" prop="maxElevationYesterday"> <el-input v-model="form.maxElevationYesterday" type="number" :min="380" :max="420"> </el-input><span>m</span> </el-form-item>
+        <el-form-item label="实时高程：" prop="realTimeElevation">
+          <el-input v-model="form.realTimeElevation" type="number" :min="380" :max="420"></el-input> <span>m</span>
+        </el-form-item>
+        <el-form-item label="昨日最高高程：" prop="maxElevationYesterday">
+          <el-input v-model="form.maxElevationYesterday" type="number" :min="380" :max="420"> </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="实时流量：" prop="realTimeDischarge"> <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" v-loading="loading">确 定</el-button>
@@ -78,63 +88,62 @@
 </template>
 
 <script>
-import { getMonitoringList, toAddMonitoring, toUpdateMonitoring,toDelete,toImport} from '@/api/monitoringDataApi'
+import { getMonitoringList, toAddMonitoring, toUpdateMonitoring, toDelete, toImport } from '@/api/monitoringDataApi'
 import moment from 'moment'
 export default {
-  props:{
-    id:Number
+  props: {
+    id: Number
   },
   data() {
     const validateNumber = (rule, value, callback) => {
-          // 确保是数字
-          if (isNaN(value)) {
-            return callback(new Error('请输入有效的数字'));
-          }
-          
-          // 转换为数字类型
-          const numValue = Number(value);
-          
-          if (numValue < 380) {
-            return callback(new Error('数值不能小于380'));
-          } else if (numValue > 420) {
-            return callback(new Error('数值不能大于420'));
-          } else {
-            callback();
-          }
-        };
+      // 确保是数字
+      if (isNaN(value)) {
+        return callback(new Error('请输入有效的数字'))
+      }
+
+      // 转换为数字类型
+      const numValue = Number(value)
+
+      if (numValue < 380) {
+        return callback(new Error('数值不能小于380'))
+      } else if (numValue > 420) {
+        return callback(new Error('数值不能大于420'))
+      } else {
+        callback()
+      }
+    }
     return {
       searchForm: {
-        stationId:this.id,
+        stationId: this.id,
         pageSize: 10,
-        pageNum:1,
+        pageNum: 1,
         createUser: '',
         startTime: '',
-        endTime:''
+        endTime: ''
       },
-      loading:false,
-      rangeDate:[],
+      loading: false,
+      rangeDate: [],
       imageUrl: '',
       form: {
         stationId: this.id,
         realTimeElevation: '',
-        maxElevationYesterday:'',
-        precipitationOneH:'',
-        precipitationToday:'',
-        realTimeDischarge:'',
-        realTimeVelocity:'',
-        createrName:''
+        maxElevationYesterday: '',
+        precipitationOneH: '',
+        precipitationToday: '',
+        realTimeDischarge: '',
+        realTimeVelocity: ''
       },
       rules: {
-            realTimeElevation: [
-              { required: true, message: '请输入实时高程', trigger: 'blur' },
-              { validator: validateNumber, trigger: ['blur', 'change'] }
-            ],
-            maxElevationYesterday: [
-              { required: true, message: '请输入昨日最高高程', trigger: 'blur' },
-              { validator: validateNumber, trigger: ['blur', 'change'] }
-            ],
-            realTimeDischarge:[{ required: true, message: '请输入实时流量', trigger: 'blur' }]
-          },
+        realTimeElevation: [
+          { required: true, message: '请输入实时高程', trigger: 'blur' },
+          { validator: validateNumber, trigger: ['blur', 'change'] }
+        ],
+        maxElevationYesterday: [
+          { required: true, message: '请输入昨日最高高程', trigger: 'blur' },
+          { validator: validateNumber, trigger: ['blur', 'change'] }
+        ],
+        realTimeDischarge: [{ required: true, message: '请输入实时流量', trigger: 'blur' }]
+      },
       tableData: [],
       currentPage: 1,
       pageSize: 10,
@@ -144,14 +153,14 @@ export default {
       type: 1
     }
   },
-  mounted(){
+  mounted() {
     this.fetchData()
   },
   methods: {
     formatDate(date) {
       return moment(date).format('YYYY-MM-DD HH:mm:ss')
     },
-    handleDateChange(val){
+    handleDateChange(val) {
       if (val && val.length === 2) {
         this.searchForm.startTime = this.formatDate(val[0])
         this.searchForm.endTime = this.formatDate(val[1])
@@ -166,12 +175,12 @@ export default {
     resetForm() {
       this.rangeDate = []
       this.searchForm = {
-        stationId:this.id,
+        stationId: this.id,
         pageSize: 10,
-        pageNum:1,
+        pageNum: 1,
         createUser: '',
         startTime: '',
-        endTime:''
+        endTime: ''
       }
       this.fetchData()
     },
@@ -185,19 +194,26 @@ export default {
       this.addDialogVisible = true
     },
     handleDelete(row) {
-      toDelete({ id: row.id }).then((res) => {
-        if (res.data) {
-          this.$message({
-            message: '删除成功',
-            type: 'success'
-          })
-          this.fetchData()
-        } else {
-          this.$message({
-            message: '删除失败',
-            type: 'error'
-          })
-        }
+      this.$confirm('是否删除监测数据？', '警告', {
+        distinguishCancelAndClose: true,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        confirmButtonClass: 'primaryBtn'
+      }).then(() => {
+        toDelete({ id: row.id }).then((res) => {
+          if (res.data) {
+            this.$message({
+              message: '删除成功',
+              type: 'success'
+            })
+            this.fetchData()
+          } else {
+            this.$message({
+              message: '删除失败',
+              type: 'error'
+            })
+          }
+        })
       })
     },
     handleSizeChange(val) {
@@ -209,7 +225,7 @@ export default {
       this.fetchData()
     },
     fetchData() {
-      getMonitoringList(this.searchForm).then((res)=>{
+      getMonitoringList(this.searchForm).then((res) => {
         this.tableData = res.data.records
         this.total = res.data.total
       })
@@ -220,84 +236,82 @@ export default {
       this.form = {
         stationId: this.id,
         realTimeElevation: '',
-        maxElevationYesterday:'',
-        precipitationOneH:'',
-        precipitationToday:'',
-        realTimeDischarge:'',
-        realTimeVelocity:'',
-        createrName:''
+        maxElevationYesterday: '',
+        precipitationOneH: '',
+        precipitationToday: '',
+        realTimeDischarge: '',
+        realTimeVelocity: ''
       }
       this.addDialogVisible = true
     },
-     confirmSubmit() {
-       this.$refs.form.validate((valid) => {
+    confirmSubmit() {
+      this.$refs.form.validate((valid) => {
         if (valid) {
           this.loading = true
-      if (this.titleType == 'add') {
-        toAddMonitoring(this.form).then((res) => {
-           this.loading = false
-          if (res.data) {
-            this.$message({
-              message: '新增成功',
-              type: 'success'
+          if (this.titleType == 'add') {
+            toAddMonitoring(this.form).then((res) => {
+              this.loading = false
+              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'
+            toUpdateMonitoring(this.form).then((res) => {
+              this.loading = false
+              if (res.data) {
+                this.$message({
+                  message: '修改成功',
+                  type: 'success'
+                })
+                this.closeModal()
+                this.fetchData()
+              } else {
+                this.$message({
+                  message: '修改失败',
+                  type: 'error'
+                })
+              }
             })
           }
-        })
-      } else {
-        toUpdateMonitoring(this.form).then((res) => {
-           this.loading = false
-          if (res.data) {
-            this.$message({
-              message: '修改成功',
-              type: 'success'
-            })
-            this.closeModal()
-            this.fetchData()
-          } else {
-            this.$message({
-              message: '修改失败',
-              type: 'error'
-            })
-          }
-        })
-      }
-    }
-  })
+        }
+      })
     },
-    toImportData(){
+    toImportData() {
       this.$refs.fileInput.click()
     },
-    importData(event){
-      const file = event.target.files[0]; 
-      toImport({file:file,stationId: this.id}).then((res)=>{
-        if(res.data && res.data.errorCount == 0){
+    importData(event) {
+      const file = event.target.files[0]
+      toImport({ file: file, stationId: this.id }).then((res) => {
+        if (res.data && res.data.errorCount == 0) {
           this.$message.success('导入成功')
           this.fetchData()
-        }else{
+        } else {
           this.$message.error('导入失败')
         }
       })
     },
-    closeModal(){
+    closeModal() {
       this.addDialogVisible = false
-      this.form={
+      this.form = {
         stationId: this.id,
         realTimeElevation: '',
-        maxElevationYesterday:'',
-        precipitationOneH:'',
-        precipitationToday:'',
-        realTimeDischarge:'',
-        realTimeVelocity:'',
-        createrName:''
+        maxElevationYesterday: '',
+        precipitationOneH: '',
+        precipitationToday: '',
+        realTimeDischarge: '',
+        realTimeVelocity: ''
       }
-      this.$refs.form.resetFields();
+      this.$refs.form.resetFields()
     }
   }
 }
@@ -323,7 +337,7 @@ export default {
 .el-upload__tip {
   color: #ff6a6c;
 }
-.ml10{
+.ml10 {
   margin-left: px-to-rem(10);
 }
 .vIcon {
@@ -345,4 +359,4 @@ export default {
 :deep(.el-pager li.active) {
   background-color: rgba(240, 105, 106, 1) !important;
 }
-</style>
+</style>

src/views/water-station-popup/index.vue

@@ -140,7 +140,8 @@ export default {
       monitorList: [],
       stationGraphic: {},
       swOption: {},
-      swInfo: {}
+      swInfo: {},
+      timer: {}
     }
   },
   mounted() {
@@ -156,6 +157,7 @@ export default {
     })
   },
   destroyed() {
+    this.stopTimer()
     this.$globalEventBus.$off('clickWaterStation')
     window.map.removeLayer(graphicsLayer)
     this.graphicsLayer = null
@@ -175,6 +177,24 @@ export default {
           this.chartShow = true
           if (res.data) {
             this.swInfo = res.data.info
+            this.startTimer('realTimeElevation',{
+              value: this.swInfo.realTimeElevation,
+              callback: (newValue, amount, isIncrement) => {
+                this.swInfo.realTimeElevation = newValue
+              }
+            })
+            this.startTimer('realTimeDischarge',{
+              value: this.swInfo.realTimeDischarge,
+              callback: (newValue, amount, isIncrement) => {
+                this.swInfo.realTimeDischarge = newValue
+              }
+            })
+             this.startTimer('realTimeVelocity',{
+              value: this.swInfo.realTimeDischarge,
+              callback: (newValue, amount, isIncrement) => {
+                this.swInfo.realTimeVelocity = newValue
+              }
+            })
             const option = {
               backgroundColor: 'transparent',
               color: ['#66DC95'],
@@ -230,7 +250,7 @@ export default {
                   splitLine: { show: false },
                   min: 380,
                   interval: 10,
-                  max:420,
+                  max: 420,
                   axisLine: {
                     lineStyle: {
                       color: '#374672',
@@ -279,6 +299,36 @@ export default {
         console.error(e)
       }
     },
+    startTimer(valueKey,config={}) {
+      if (!this.timer[valueKey]) {
+        const {
+          value = null, 
+          callback = null 
+        } = config || {}
+        this.timer[valueKey] = setInterval(() => {
+          const increment = Math.random() > 0.5 
+          const amount = (Math.random() * 0.04).toFixed(2) + 0.01 
+          let newValue = null
+          if (increment) {
+            newValue = (parseFloat(value) + parseFloat(amount)).toFixed(2) 
+          } else {
+            newValue = (parseFloat(value) - parseFloat(amount)).toFixed(2) 
+          }
+          if (callback && typeof callback === 'function') {
+            callback(newValue, amount, increment)
+          }
+        }, 5000)
+      }else{
+        this.stopTimer(valueKey)
+      }
+    },
+    stopTimer(valueKey) {
+      if (this.timer[valueKey]) {
+        // 确保定时器已启动
+        clearInterval(this.timer[valueKey]) // 停止定时器
+        this.timer = null // 清除定时器引用
+      }
+    },
     getAroundAnalysisOwnList() {
       let radius = this.radius ? parseFloat(this.radius) * 1000 : 1000
       window