refactor:菜单配置更改

src/router/index.js

@@ -2,10 +2,16 @@ import Vue from "vue";
 import VueRouter from "vue-router";
 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'
 
 Vue.use(VueRouter);
 
-const routes = [{ path: "/allAlarm", component: Index }];
+const routes = [
+  { path: "/allAlarm/:menu", component: Index },
+  { path: "/announcement",component:AnnouncementManagement},
+  { path:"/hydrologicalStation",component:HydrologicalStation}
+];
 
 const router = new VueRouter({
   mode: "history",

src/views/announcement-management/index.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="main-contaner">
+    <el-form :model="form" label-width="100px" ref="searchForm">
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="公告名称">
+            <el-input v-model="form.name" placeholder="请输入"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="公告状态">
+            <el-select v-model="form.status" placeholder="请选择">
+              <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="创建人">
+            <el-input v-model="form.createUser" placeholder="请输入"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="创建时间">
+            <el-date-picker v-model="form.createDate" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"> </el-date-picker>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row justify="space-between">
+        <el-col :span="12">
+          <el-button icon="el-icon-plus">新增公告</el-button>
+        </el-col>
+        <el-col :span="12" style="text-align: right;">
+          <el-button icon="el-icon-search" @click="handleSearch">查询</el-button>
+          <el-button icon="el-icon-refresh-right" @click="resetForm">重置</el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <el-table :data="tableData" border style="width: 100%">
+      <el-table-column prop="name" label="公告名称" width="180"> </el-table-column>
+      <el-table-column prop="createUser" label="创建人"> </el-table-column>
+      <el-table-column prop="createDate" label="创建时间" width="100"> </el-table-column>
+      <el-table-column prop="status" label="公告状态"></el-table-column>
+      <el-table-column label="操作" width="180">
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" @click="handleRelease(scope.row)">发布</el-button>
+          <el-button size="mini" type="text" @click="handleTakeDown(scope.row)">下架</el-button>
+          <el-button size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
+          <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="currentPage"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="total"
+    >
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        name: '',
+        status: '',
+        createUser: '',
+        createDate: ''
+      },
+      statusOptions: [
+        {
+          value: '1',
+          label: '草稿'
+        },
+        {
+          value: '2',
+          label: '已发布'
+        }
+      ],
+      tableData: [
+        {
+          name: '',
+          status: '',
+          createUser: '',
+          createDate: ''
+        }
+      ],
+      currentPage: 1,
+      pageSize: 10,
+      total: 0
+    }
+  },
+  methods: {
+    handleSearch() {
+    },
+    resetForm() {
+      this.$refs.searchForm.resetFields()
+    },
+    handleRelease(row) {
+      console.info(row)
+    },
+    handleTakeDown(row){
+      console.info(row)
+    },
+    handleEdit(row) {
+      console.info(row)
+    },
+    handleDelete(row) {
+      console.info(row)
+    },
+     handleSizeChange(val) {
+      this.pageSize = val;
+      this.fetchData();
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.fetchData();
+    },
+    fetchData(){
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/hydrological-station/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="main-contaner">
+    水文站管理
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+ 
+</style>

src/views/index.vue

@@ -8,14 +8,14 @@
         <div class="home-view">
           <MainMap :mapKey="mapName" :url="configUrl" :options="mapOptions" @onload="onMapload" />
           <LayerListPanel></LayerListPanel>
-          <SandMonitorLeft v-if="mainMenu === '采砂监控'"></SandMonitorLeft>
-          <SandMonitorRight v-if="mainMenu === '采砂监控'"></SandMonitorRight>
-          <SafetyInspectionLeft v-if="mainMenu === '安全巡查'"></SafetyInspectionLeft>
-          <SafetyInspectionRight v-if="mainMenu === '安全巡查'"></SafetyInspectionRight>
+          <SandMonitorLeft v-if="this.mainMenu === 'sandMonitor'"></SandMonitorLeft>
+          <SandMonitorRight v-if="this.mainMenu === 'sandMonitor'"></SandMonitorRight>
+          <SafetyInspectionLeft v-if="this.mainMenu === 'safetyInspection'"></SafetyInspectionLeft>
+          <SafetyInspectionRight v-if="this.mainMenu === 'safetyInspection'"></SafetyInspectionRight>
           <AddInspectionTask />
-          <ComprehensiveOverview v-if="mainMenu === '综合概览'"></ComprehensiveOverview>
-          <HydrologicInfo v-if="mainMenu === '水文信息'"></HydrologicInfo>
-          <SmartEarlyWarning v-if="mainMenu === '智能预警'" />
+          <ComprehensiveOverview v-if="this.mainMenu === 'comprehensiveOverview'"></ComprehensiveOverview>
+          <HydrologicInfo v-if="this.mainMenu === 'hydrologicInfo'"></HydrologicInfo>
+          <SmartEarlyWarning v-if="this.mainMenu === 'smartEarlyWarning'" />
           <WaterStationPopup />
         </div>
       </el-main>
@@ -25,7 +25,6 @@
 
 <script>
 import menuPanel from '@/views/components/menu'
-import { mapState } from 'vuex'
 import MainMap from '@/views/components/map'
 import LayerListPanel from '@/views/components/layerList'
 import SandMonitorLeft from './sand-monitor/left.vue'
@@ -54,11 +53,6 @@ export default {
     AddInspectionTask,
     SmartEarlyWarning
   },
-  computed: {
-    ...mapState({
-      mainMenu: (state) => state.home.mainMenu
-    })
-  },
   data() {
     return {
       mapName: 'cMap',
@@ -88,10 +82,13 @@ export default {
             show: true
           }
         ]
-      }
+      },
+      mainMenu:'comprehensiveOverview',
     }
   },
-
+  created(){
+    this.mainMenu = this.$route.params.menu
+  },
   methods: {
     // 地图加载回调优化
     async onMapload(map) {
@@ -149,4 +146,4 @@ export default {
   height: 100%;
   box-sizing: border-box;
 }
-</style>
+</style>

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

@@ -153,7 +153,7 @@ export default {
         params11: '112.986374,27.817957',
         params12: '暂无'
       },
-      activeNames: ['1','2']
+      activeNames: ['1', '2']
     }
   },
   components: {
@@ -186,8 +186,8 @@ export default {
       .form-item {
         display: flex;
         justify-content: flex-end;
-        gap:px-to-rem(11);
-         .label {
+        gap: px-to-rem(11);
+        .label {
           width: 35%;
           font-weight: 400;
           font-size: px-to-rem(14);
@@ -199,6 +199,9 @@ export default {
           font-weight: 400;
           font-size: px-to-rem(14);
           color: #ffffff;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
         }
       }
     }
@@ -219,8 +222,8 @@ export default {
       background-color: transparent;
       border-bottom: 0;
     }
-    :deep(.el-collapse-item__content){
-        padding:px-to-rem(8) px-to-rem(0)
+    :deep(.el-collapse-item__content) {
+      padding: px-to-rem(8) px-to-rem(0);
     }
   }
 }