reactor:公告管理及水文站管理样式调整及接口相关字段调整

src/api/announcementApi.js

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

src/api/hydrologicalStationApi.js

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

src/assets/scss/_reset.scss

@@ -10,7 +10,7 @@ del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
+fieldset, form, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed,
 figure, figcaption, footer, header,
@@ -18,7 +18,7 @@ menu, nav, output, ruby, section, summary,
 time, mark, audio, video, input {
   margin: 0;
   padding: 0;
-  border: 0;
+  // border: 0;
   font-size: 100%;
   font-weight: normal;
   vertical-align: baseline;

src/assets/scss/index.scss

@@ -253,3 +253,30 @@ html#baidu-map-hack {
     color: #fff;
   }
 }
+
+.f-select .el-select-dropdown__item{
+    padding: px-to-rem(0) px-to-rem(12)!important;
+    &.selected{
+        color: #ff6a6c;
+        background-color: #fff0f0;
+    }
+    &.hover{
+      background-color: #fff0f0;
+    }
+ }
+.v-date-picker{
+   .el-date-table td.end-date span,.el-date-table td.start-date span{
+      background-color: #ff6a6c;
+   }
+    .el-date-table td.in-range div, .el-date-table td.in-range div:hover, .el-date-table.is-week-mode .el-date-table__row.current div, .el-date-table.is-week-mode .el-date-table__row:hover div{
+      background-color: #fff0f0;
+  }
+    .el-date-table td.today span,.el-select-dropdown__item.selected{
+      color: #ff6a6c;
+  }
+}
+.v-pageination{
+  .el-select-dropdown__item.selected{
+    color: #ff6a6c;
+ }
+}

src/views/announcement-management/index.vue

@@ -9,7 +9,7 @@
         </el-col>
         <el-col :span="8">
           <el-form-item label="公告状态">
-            <el-select v-model="searchForm.announcementStatus" placeholder="请选择">
+            <el-select v-model="searchForm.announcementStatus" placeholder="请选择" popper-class="f-select">
               <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
             </el-select>
           </el-form-item>
@@ -23,7 +23,15 @@
       <el-row>
         <el-col :span="8">
           <el-form-item label="创建时间">
-            <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" @change="handleDateChange">
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              @change="handleDateChange"
+              popper-class="v-date-picker"
+            >
             </el-date-picker>
           </el-form-item>
         </el-col>
@@ -54,11 +62,12 @@
     </el-table>
     <el-pagination
       class="page"
+      popper-class="v-pageination"
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
-      :current-page="currentPage"
+      :current-page="searchForm.pageNum"
       :page-sizes="[10, 20, 50, 100]"
-      :page-size="pageSize"
+      :page-size="searchForm.pageSize"
       small
       background
       layout="total, sizes, prev, pager, next, jumper"
@@ -74,10 +83,17 @@
           <el-input type="textarea" :rows="10" v-model="form.announcementContent"> </el-input>
         </el-form-item>
         <el-form-item label="上传图片" required>
-          <el-upload class="avatar-uploader" action="/api/announcement/uploadImage" accept=".jpg,.jpeg,.png" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeUpload">
+          <el-upload
+            class="avatar-uploader"
+            action="/api/announcement/uploadImage"
+            accept=".jpg,.jpeg,.png"
+            :show-file-list="false"
+            :on-success="handleAvatarSuccess"
+            :before-upload="beforeUpload"
+          >
             <el-button size="small" class="primaryBtn">上传</el-button>
             <div slot="tip" class="el-upload__tip">温馨提示:仅需上传一张小于5M的配图即可，格式支持JPG、PNG、JPEG</div>
-            <img v-if="form.images" :src="form.images" class="preview-image">
+            <img v-if="form.images" :src="form.images" class="preview-image" />
           </el-upload>
         </el-form-item>
         <el-form-item label="公告状态">
@@ -101,6 +117,7 @@
 </template>
 
 <script>
+import { getAnnouncementList, toPublish, toTakeDown, toDelete, toAddAnnouncement, toUpdateAnnouncement } from '@/api/announcementApi'
 export default {
   data() {
     return {
@@ -110,13 +127,15 @@ export default {
         announcementStatus: '',
         createrName: '',
         startTime: '',
-        endTime: ''
+        endTime: '',
+        pageNum: 1,
+        pageSize: 10
       },
       imageUrl: '',
       form: {
         announcementName: '',
         images: '',
-        announcementStatus: 2,
+        announcementStatus: '2',
         announcementContent: ''
       },
       statusOptions: [
@@ -129,18 +148,10 @@ export default {
           label: '已发布'
         }
       ],
-      tableData: [
-        {
-          announcementName: '',
-          announcementStatus: '',
-          createrName: '',
-          createDate: ''
-        }
-      ],
-      currentPage: 1,
-      pageSize: 10,
+      tableData: [],
       total: 0,
       title: '新增公告',
+      titleType: 'add',
       addDialogVisible: false,
       releaseTitle: '发布公告',
       releaseDialogVisible: false,
@@ -149,16 +160,27 @@ export default {
         announcementName: [{ required: true, message: '请输入公告名称', trigger: 'blur' }],
         announcementContent: [{ required: true, message: '请输入公告内容', trigger: 'blur' }],
         address: [{ required: true, message: '请输入水文站位置', trigger: 'blur' }]
-      }
+      },
+      announcementId: ''
     }
   },
-  mounted(){
+  mounted() {
     this.fetchData()
-  },  
+  },
   methods: {
-    handleSearch() {},
+    handleSearch() {
+      this.fetchData()
+    },
     resetForm() {
-      this.$refs.searchForm.resetFields()
+      this.searchForm = {
+        announcementName: '',
+        announcementStatus: '',
+        createrName: '',
+        startTime: '',
+        endTime: '',
+        pageNum: 1,
+        pageSize: 10
+      }
     },
     handleDateChange(val) {
       if (val && val.length === 2) {
@@ -170,34 +192,52 @@ export default {
       }
     },
     handleRelease(row) {
-      console.info(row)
+      this.announcementId = row.id
       this.releaseTitle = '发布公告'
       this.type = 1
       this.releaseDialogVisible = true
     },
     handleTakeDown(row) {
-      console.info(row)
+      this.announcementId = row.id
       this.releaseTitle = '下架公告'
       this.type = 2
       this.releaseDialogVisible = true
     },
     handleEdit(row) {
-      console.info(row)
+      this.form = JSON.parse(JSON.stringify(row))
       this.title = '编辑公告'
+      this.titleType = 'edit'
       this.addDialogVisible = true
     },
     handleDelete(row) {
-      console.info(row)
+      toDelete({ id: row.id }).then((res) => {
+        if (res.data) {
+          this.$message({
+            message: '删除成功',
+            type: 'success'
+          })
+        } else {
+          this.$message({
+            message: '删除失败',
+            type: 'error'
+          })
+        }
+      })
     },
     handleSizeChange(val) {
-      this.pageSize = val
+      this.searchForm.pageSize = val
       this.fetchData()
     },
     handleCurrentChange(val) {
-      this.currentPage = val
+      this.searchForm.pageNum = val
       this.fetchData()
     },
-    fetchData() {},
+    fetchData() {
+      getAnnouncementList(this.searchForm).then((res) => {
+        this.tableData = res.data.records
+        this.total = res.data.total
+      })
+    },
     handleAvatarSuccess(res, file) {
       this.form.images = URL.createObjectURL(file.raw)
     },
@@ -215,31 +255,103 @@ export default {
     },
     toAdd() {
       this.title = '新增公告'
+      this.titleType = 'add'
       this.addDialogVisible = true
     },
     toConfirm() {
       if (this.type) {
-        console.info('发布')
+        toPublish(this.announcementId).then((res) => {
+          if (res.data) {
+            this.$message({
+              message: '发布成功',
+              type: 'success'
+            })
+          } else {
+            this.$message({
+              message: '发布失败',
+              type: 'error'
+            })
+          }
+        })
       } else {
-        console.info('下架')
+        toTakeDown(this.announcementId).then((res) => {
+          if (res.data) {
+            this.$message({
+              message: '下架成功',
+              type: 'success'
+            })
+          } else {
+            this.$message({
+              message: '下架失败',
+              type: 'error'
+            })
+          }
+        })
       }
     },
-    confirmSubmit() {}
+    confirmSubmit() {
+      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'
+            })
+          }
+        })
+      } else {
+        toUpdateAnnouncement(this.form).then((res) => {
+          if (res.data) {
+            this.$message({
+              message: '新增成功',
+              type: 'success'
+            })
+            this.closeModal()
+            this.fetchData()
+          } else {
+            this.$message({
+              message: '新增失败',
+              type: 'error'
+            })
+          }
+        })
+      }
+    },
+    closeModal(){
+      this.addDialogVisible = false
+      this.form = {
+        announcementName: '',
+        images: '',
+        announcementStatus: '2',
+        announcementContent: ''
+      }
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .main-contaner {
+  height: 100%;
+  width: 100%;
+  padding: px-to-rem(24);
+  background-color: #fff;
   :deep(.el-form .el-select),
   :deep(.el-input__inner) {
     width: 100%;
   }
   .mb20 {
-    margin-bottom:  px-to-rem(20);
+    margin-bottom: px-to-rem(20);
   }
   .page {
-    margin-top:  px-to-rem(20);
+    margin-top: px-to-rem(20);
     text-align: right;
   }
   .primaryBtn {
@@ -252,16 +364,55 @@ export default {
   }
   .vIcon {
     width: px-to-rem(12);
-    height:  px-to-rem(12);
+    height: px-to-rem(12);
+  }
+  :deep(.el-form-item .el-form-item__label) {
+    color: #606266;
+    font-size: px-to-rem(14);
+    font-weight: 600;
+  }
+  :deep(.el-range-editor.el-input__inner) {
+    border: px-to-rem(1) solid #dcdfe6;
+  }
+  :deep(.el-date-editor .el-range-separator) {
+    width: auto !important;
+  }
+  :deep(.el-range-editor.is-active),
+  :deep(.el-range-editor.is-active:hover),
+  :deep(.el-select .el-input.is-focus .el-input__inner),
+  :deep(.el-select .el-input__inner:focus),
+  :deep(.el-pagination__sizes .el-input .el-input__inner:hover) {
+    border-color: #a9a9a9;
+  }
+  :deep(.el-table th.el-table__cell) {
+    background-color: #f5f7fa;
+  }
+  :deep(.el-table th.el-table__cell > .cell) {
+    font-size: px-to-rem(14);
+    color: #515a6e;
+    font-weight: 600;
+  }
+  :deep(.el-pagination .el-select .el-input .el-input__inner) {
+    font-size: px-to-rem(14);
+    border-radius: px-to-rem(4);
+    height: px-to-rem(26);
   }
 }
 :deep(.el-pager li.active) {
   background-color: rgba(240, 105, 106, 1) !important;
 }
+:deep(.el-radio input[aria-hidden='true']) {
+  display: none !important;
+}
+
+:deep(.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner) {
+  box-shadow: none !important;
+}
 .preview-image {
   max-width: px-to-rem(100);
   max-height: px-to-rem(100);
   margin-top: px-to-rem(10);
   border-radius: px-to-rem(4);
+  margin-left: px-to-rem(10);
 }
 </style>

src/views/hydrological-station/hyInfo.vue

@@ -1,81 +1,49 @@
 <template>
-  <div class="main-contaner">
+  <div class="main-container">
     <el-form :model="searchForm" label-width="100px" ref="searchForm">
       <el-row>
         <el-col :span="8">
           <el-form-item label="水文站名称">
-            <el-input v-model="searchForm.name" placeholder="请输入"></el-input>
+            <el-input v-model="searchForm.stationName" placeholder="请输入"></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="水文站编号">
-            <el-input
-              v-model="searchForm.number"
-              placeholder="请输入"
-            ></el-input>
+            <el-input v-model="searchForm.stationCode" placeholder="请输入"></el-input>
           </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 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="handleSearch"
-            class="primaryBtn"
-            >查询</el-button
-          >
-          <el-button
-            size="small"
-            icon="el-icon-refresh-right"
-            @click="resetForm"
-            >重置</el-button
-          >
+          <el-button size="small" icon="el-icon-search" @click="handleSearch" 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="550">
-      <el-table-column prop="number" label="水文站编号" align="center">
-      </el-table-column>
-      <el-table-column prop="name" 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="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 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
-          >
-          <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
-          >
+          <el-button size="small" type="text" @click="jcInfo(scope.row)"><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>
       </el-table-column>
     </el-table>
     <el-pagination
       class="page"
+      popper-class="v-pageination"
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
-      :current-page="currentPage"
+      :current-page="searchForm.pageNum"
       :page-sizes="[10, 20, 50, 100]"
-      :page-size="pageSize"
+      :page-size="searchForm.pageSize"
       background
       small
       layout="total, sizes, prev, pager, next, jumper"
@@ -84,11 +52,11 @@
     </el-pagination>
     <el-dialog :title="title" :visible.sync="addDialogVisible">
       <el-form ref="form" :model="form" :rules="rules" label-width="110px">
-        <el-form-item label="水文站名称：" prop="name">
-          <el-input v-model="form.name"></el-input>
+        <el-form-item label="水文站名称：" prop="stationName">
+          <el-input v-model="form.stationName"></el-input>
         </el-form-item>
-        <el-form-item label="水文站编号：" prop="number">
-          <el-input v-model="form.number"> </el-input>
+        <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>
@@ -100,138 +68,156 @@
           <el-input v-model="form.lng"> </el-input>
         </el-form-item>
         <el-form-item label="水文站详情：" prop="detailInfo">
-          <el-input type="textarea" :rows="6" v-model="form.detailInfo">
-          </el-input>
+          <el-input type="textarea" :rows="6" v-model="form.detailInfo"> </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
-        >
-        <el-button @click="addDialogVisible = false" size="small"
-          >取 消</el-button
-        >
+        <el-button type="primary" @click="confirmSubmit" size="small" class="primaryBtn">确 定</el-button>
+        <el-button @click="addDialogVisible = false" size="small">取 消</el-button>
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
+import { getHydrologicalList, toAddhydrological, toUpdatehydrological,toDelete} from '@/api/hydrologicalStationApi'
 export default {
   data() {
     return {
       searchForm: {
-        name: "",
-        number: "",
+        stationName: '',
+        stationCode: '',
+        pageSize:10,
+        pageNum:1
       },
-      imageUrl: "",
+      imageUrl: '',
       form: {
-        name: "",
-        number: "",
-        lat: "",
-        lng: "",
-        detailInfo: "",
-        address: "",
+        stationName: '',
+        stationCode: '',
+        lat: '',
+        lng: '',
+        detailInfo: '',
+        address: ''
       },
-      statusOptions: [
-        {
-          value: "1",
-          label: "草稿",
-        },
-        {
-          value: "2",
-          label: "已发布",
-        },
-      ],
-      tableData: [
-        {
-          name: "",
-          status: "",
-          createUser: "",
-          createDate: "",
-        },
-         {
-          name: "",
-          status: "",
-          createUser: "",
-          createDate: "",
-        },
-         {
-          name: "",
-          status: "",
-          createUser: "",
-          createDate: "",
-        },
-         {
-          name: "",
-          status: "",
-          createUser: "",
-          createDate: "",
-        }, {
-          name: "",
-          status: "",
-          createUser: "",
-          createDate: "",
-        },
-      ],
-      currentPage: 1,
-      pageSize: 10,
+      tableData: [],
       total: 0,
-      title: "新增文水站",
+      title: '新增文水站',
       addDialogVisible: false,
       type: 1,
+      titleType:'add',
       rules: {
-        name: [
-          { required: true, message: "请输入水文站名称", trigger: "blur" },
-        ],
-        number: [
-          { required: true, message: "请输入水文站编码", trigger: "blur" },
-        ],
-        address: [
-          { required: true, message: "请输入水文站位置", trigger: "blur" },
-        ],
-        lat: [{ required: true, message: "请输入经度", trigger: "blur" }],
-        lng: [{ required: true, message: "请输入纬度", trigger: "blur" }],
-      },
-    };
+        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' }]
+      }
+    }
+  },
+  mounted(){
+    this.fetchData()
   },
   methods: {
     handleSearch() {},
     resetForm() {
-      this.$refs.searchForm.resetFields();
+      this.searchForm= {
+        stationName: '',
+        stationCode: '',
+        pageSize:10,
+        pageNum:1
+      }
     },
     jcInfo(row) {
-      console.info(row);
-      this.$emit('closeHy')
+      this.$emit('closeHy',row)
     },
     handleEdit(row) {
-      console.info(row);
-      this.title = "编辑公告";
-      this.addDialogVisible = true;
+      this.title = '编辑水文站'
+      this.titleType = 'edit'
+      this.form = JSON.parse(JSON.stringify(row))
+      this.addDialogVisible = true
     },
     handleDelete(row) {
-      console.info(row);
+      toDelete({ id: row.id }).then((res) => {
+        if (res.data) {
+          this.$message({
+            message: '删除成功',
+            type: 'success'
+          })
+        } else {
+          this.$message({
+            message: '删除失败',
+            type: 'error'
+          })
+        }
+      })
     },
     handleSizeChange(val) {
-      this.pageSize = val;
-      this.fetchData();
+      this.pageSize = val
+      this.fetchData()
     },
     handleCurrentChange(val) {
-      this.currentPage = val;
-      this.fetchData();
+      this.currentPage = val
+      this.fetchData()
+    },
+    fetchData() {
+      getHydrologicalList(this.searchForm).then((res)=>{
+        this.tableData = res.data.records
+        this.total = res.data.total
+      })
     },
-    fetchData() {},
     toAdd() {
-      this.title = "新增文水站";
-      this.addDialogVisible = true;
+      this.title = '新增文水站'
+      this.titleType = 'add'
+      this.addDialogVisible = true
     },
-    confirmSubmit() {}
-  },
-};
+    confirmSubmit() {
+      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'
+            })
+          }
+        })
+      } 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(){
+      this.addDialogVisible = false
+      this.form={
+        stationName: '',
+        stationCode: '',
+        lat: '',
+        lng: '',
+        detailInfo: '',
+        address: ''
+      }
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -240,10 +226,10 @@ export default {
   width: 100%;
 }
 .mb20 {
-  margin-bottom:  px-to-rem(20);
+  margin-bottom: px-to-rem(20);
 }
 .page {
-  margin-top:  px-to-rem(20);
+  margin-top: px-to-rem(20);
   text-align: right;
 }
 .primaryBtn {
@@ -254,11 +240,11 @@ export default {
 .el-upload__tip {
   color: #ff6a6c;
 }
-.vIcon{
-    width:  px-to-rem(12);
-    height:  px-to-rem(12);
+.vIcon {
+  width: px-to-rem(12);
+  height: px-to-rem(12);
+}
+:deep(.el-pager li.active) {
+  background-color: rgba(240, 105, 106, 1) !important;
 }
- :deep(.el-pager li.active){
-    background-color: rgba(240, 105, 106, 1)!important;
-  }
 </style>

src/views/hydrological-station/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="main-contaner">
-    <HyInfo v-if="hyInfoShow" @closeHy="hyInfoShow = false"/>
-    <JcInfo v-if="!hyInfoShow" @toBack="hyInfoShow = true"/>
+    <HyInfo v-if="hyInfoShow" @closeHy="closeHy" />
+    <JcInfo v-if="!hyInfoShow" @toBack="hyInfoShow = true" />
   </div>
 </template>
 
@@ -11,11 +11,72 @@ import JcInfo from './jcInfo.vue'
 export default {
   data() {
     return {
-      hyInfoShow:true,
-    };
+      hyInfoShow: true
+    }
   },
-  components:{
-    HyInfo,JcInfo
+  components: {
+    HyInfo,
+    JcInfo
+  },
+  methods:{
+    closeHy(){
+      this.hyInfoShow = false
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.main-contaner {
+  height: 100%;
+  width: 100%;
+  padding: px-to-rem(24);
+  background-color: #fff;
+  :deep(.el-form-item .el-form-item__label) {
+    color: #606266;
+    font-size: px-to-rem(14);
+    font-weight: 600;
+  }
+  :deep(.el-range-editor.el-input__inner) {
+    border: px-to-rem(1) solid #dcdfe6;
+  }
+  :deep(.el-date-editor .el-range-separator) {
+    width: auto !important;
+  }
+  :deep(.el-range-editor.is-active),
+  :deep(.el-range-editor.is-active:hover),
+  :deep(.el-select .el-input.is-focus .el-input__inner),
+  :deep(.el-select .el-input__inner:focus),
+  :deep(.el-pagination__sizes .el-input .el-input__inner:hover) {
+    border-color: #a9a9a9;
+  }
+  :deep(.el-table th.el-table__cell) {
+    background-color: #f5f7fa;
+  }
+  :deep(.el-table th.el-table__cell > .cell) {
+    font-size: px-to-rem(14);
+    color: #515a6e;
+    font-weight: 600;
+  }
+  :deep(.el-pagination .el-select .el-input .el-input__inner) {
+    font-size: px-to-rem(14);
+    border-radius: px-to-rem(4);
+    height: px-to-rem(26);
+  }
+
+  :deep(
+      .el-date-table td.in-range div,
+      .el-date-table td.in-range div:hover,
+      .el-date-table.is-week-mode .el-date-table__row.current div,
+      .el-date-table.is-week-mode .el-date-table__row:hover div
+    ) {
+    background-color: #fff0f0;
+  }
+  :deep(.el-radio input[aria-hidden='true']) {
+    display: none !important;
+  }
+
+  :deep(.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner) {
+    box-shadow: none !important;
   }
-};
-</script>
+}
+</style>

src/views/hydrological-station/jcInfo.vue

@@ -1,78 +1,43 @@
 <template>
-  <div class="main-contaner">
+  <div class="main-container">
     <el-form :model="searchForm" label-width="100px" ref="searchForm">
       <el-row>
         <el-col :span="8">
           <el-form-item label="上传时间">
-            <el-date-picker
-              v-model="searchForm.createDate"
-              type="daterange"
-              range-separator="至"
-              start-placeholder="开始时间"
-              end-placeholder="结束时间"
-            >
-            </el-date-picker>
+            <el-date-picker v-model="searchForm.createDate" popper-class="v-date-picker" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"> </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>
+          <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>
         </el-col>
         <el-col :span="12" style="text-align: right">
-          <el-button
-            size="small"
-            icon="el-icon-search"
-            @click="handleSearch"
-            class="primaryBtn"
-            >查询</el-button
-          >
-          <el-button
-            size="small"
-            icon="el-icon-refresh-right"
-            @click="resetForm"
-            >重置</el-button
-          >
+          <el-button size="small" icon="el-icon-search" @click="handleSearch" 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="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="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 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
-          >
-          <el-button size="small" type="text" @click="handleDelete(scope.row)"
-            ><i class="el-icon-delete"></i> 删除</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>
       </el-table-column>
     </el-table>
     <el-pagination
       class="page"
+      popper-class="v-pageination"
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
       :current-page="currentPage"
@@ -89,41 +54,16 @@
     </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-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>
       <div slot="footer" class="dialog-footer">
-        <el-button
-          type="primary"
-          @click="confirmSubmit"
-          size="small"
-          class="primaryBtn"
-          >确 定</el-button
-        >
-        <el-button @click="addDialogVisible = false" size="small"
-          >取 消</el-button
-        >
+        <el-button type="primary" @click="confirmSubmit" size="small" class="primaryBtn">确 定</el-button>
+        <el-button @click="addDialogVisible = false" size="small">取 消</el-button>
       </div>
     </el-dialog>
   </div>
@@ -134,101 +74,110 @@ export default {
   data() {
     return {
       searchForm: {
-        name: "",
-        status: "",
-        createUser: "",
-        createDate: "",
+        name: '',
+        status: '',
+        createUser: '',
+        createDate: ''
       },
-      imageUrl: "",
+      imageUrl: '',
       form: {
-        name: "",
-        content: "",
+        name: '',
+        content: ''
       },
       tableData: [
         {
-          name: ""
+          name: ''
+        },
+        {
+          name: ''
+        },
+        {
+          name: ''
+        },
+        {
+          name: ''
+        },
+        {
+          name: ''
+        },
+        {
+          name: ''
         },
         {
-          name: ""
+          name: ''
         },
         {
-          name: ""
-        },{
-          name: ""
-        },{
-          name: ""
-        },{
-          name: ""
-        },{
-          name: ""
-        },{
-          name: ""
-        },{
-          name: ""
-        },{
-          name: ""
-        },{
-          name: ""
-        },{
-          name: ""
-        },{
-          name: ""
+          name: ''
         },
+        {
+          name: ''
+        },
+        {
+          name: ''
+        },
+        {
+          name: ''
+        },
+        {
+          name: ''
+        },
+        {
+          name: ''
+        }
       ],
       currentPage: 1,
       pageSize: 10,
       total: 0,
-      title: "新增监测数据",
+      title: '新增监测数据',
       addDialogVisible: false,
-      type: 1,
-    };
+      type: 1
+    }
   },
   methods: {
     handleSearch() {},
     resetForm() {
-      this.$refs.searchForm.resetFields();
+      this.$refs.searchForm.resetFields()
     },
-    toBack(){
+    toBack() {
       this.$emit('toBack')
     },
     handleEdit(row) {
-      console.info(row);
+      console.info(row)
       this.title = '编辑监测数据'
       this.addDialogVisible = true
     },
     handleDelete(row) {
-      console.info(row);
+      console.info(row)
     },
     handleSizeChange(val) {
-      this.pageSize = val;
-      this.fetchData();
+      this.pageSize = val
+      this.fetchData()
     },
     handleCurrentChange(val) {
-      this.currentPage = val;
-      this.fetchData();
+      this.currentPage = val
+      this.fetchData()
     },
     fetchData() {},
     toAdd() {
-      this.title = "新增监测数据";
-      this.addDialogVisible = true;
+      this.title = '新增监测数据'
+      this.addDialogVisible = true
     },
-    confirmSubmit(){
-
-    }
-  },
-};
+    confirmSubmit() {}
+  }
+}
 </script>
 
 <style lang="scss" scoped>
+// @import url('@/assets/scss/v-common.scss');
 :deep(.el-form .el-select),
 :deep(.el-input__inner) {
   width: 100%;
 }
 .mb20 {
-  margin-bottom:  px-to-rem(20);
+  margin-bottom: px-to-rem(20);
 }
 .page {
-  margin-top:  px-to-rem(20);
+  margin-top: px-to-rem(20);
   text-align: right;
 }
 .primaryBtn {
@@ -239,23 +188,23 @@ export default {
 .el-upload__tip {
   color: #ff6a6c;
 }
-.vIcon{
-  width:  px-to-rem(10);
-  height:  px-to-rem(10);
+.vIcon {
+  width: px-to-rem(10);
+  height: px-to-rem(10);
 }
-.addJcForm :deep(.el-form-item__content){
+.addJcForm :deep(.el-form-item__content) {
   display: flex;
 }
-.addJcForm :deep(.el-form-item__content span){
+.addJcForm :deep(.el-form-item__content span) {
   display: inline-block;
-  width:  px-to-rem(32);
-  margin-left:  px-to-rem(10);
+  width: px-to-rem(32);
+  margin-left: px-to-rem(10);
 }
-.backBtn{
+.backBtn {
   text-align: center;
-  margin-top:  px-to-rem(10);
+  margin-top: px-to-rem(10);
+}
+:deep(.el-pager li.active) {
+  background-color: rgba(240, 105, 106, 1) !important;
 }
- :deep(.el-pager li.active){
-    background-color: rgba(240, 105, 106, 1)!important;
-  }
 </style>

src/views/smart-early-warning/right.vue

@@ -207,6 +207,8 @@ export default {
     }
   }
   .v-collapse {
+    border-top:0;
+    border-bottom:0;
     :deep(.el-collapse-item__header) {
       background: #26344b;
       font-weight: 500;