tag

src/router/routes.ts

@@ -69,6 +69,15 @@ export const constantRoutes: Array<RouteRecordRaw> = [
       noCache: true
     }
   },
+  {
+    path: "/riverMonitor",
+    name: "RiverMonitor",
+    component: () => import("@/views/disasterRiskMonitor/hydrologicalMonitor/riverMonitor.vue"),
+    meta: {
+      title: "河道监测",
+      noCache: true
+    }
+  },
   {
     path: "/infoReception",
     name: "InfoReception",

src/views/disasterRiskMonitor/hydrologicalMonitor/index.vue

@@ -16,7 +16,7 @@ import {useRouter} from "vue-router";
 const router = useRouter();
 const menuData = reactive([
   { name: '水库监测', path: 'ReservoirMonitor', img: 'icon1' },
-  { name: '河道监测', key: '2', img: 'icon2' },
+  { name: '河道监测', path: 'RiverMonitor', img: 'icon2' },
 ])
 const handleClick = (name: string) => {
   router.push({ name: name});

src/views/disasterRiskMonitor/hydrologicalMonitor/reservoirMonitor.vue

@@ -11,12 +11,27 @@
     />
     <Map ref="mapRef" class="map" active-map="vectorgraph" :point-type="pointType" :event-details="eventDetails" />
     <van-text-ellipsis class="text-box" :content="detailsData.text" rows="3" expand-text="展开" collapse-text="收起" />
+    <div class="checked-box">
+      <div
+          v-for="(item, index) in tags"
+          :key="index"
+          :class="item.checked ? 'tag-box tag-box-active': 'tag-box'"
+          @click="handleClickTag(item)"
+      >
+        <div class="tag">
+          <i :class="item.icon" />
+          <van-icon v-show="!!item.checked" class="checked-icon" name="checked" />
+        </div>
+        <div class="text">{{ item.name }}</div>
+        <div class="text">{{ '(' + item.num + ')' }}</div>
+      </div>
+    </div>
     <el-table :data="detailsData.dataList">
       <el-table-column label="站点" prop="data1" align="center" />
-      <el-table-column label="河流" prop="data2" align="center" />
+      <el-table-column label="政区" prop="data2" align="center" />
       <el-table-column label="时间" prop="data3" align="center" />
-      <el-table-column label="水位(m)" prop="data4" align="center" />
-      <el-table-column label="超警戒(m)" prop="data5" align="center" sortable />
+      <el-table-column label="库水位(m)" prop="data4" align="center" />
+      <el-table-column label="超汛限水位(m)" prop="data5" align="center" sortable />
     </el-table>
   </div>
 </template>
@@ -24,12 +39,22 @@
 <script lang="ts" setup name="reservoirMonitor">
 import searchImg from "@/assets/images/search.png";
 import closeImg from "@/assets/images/close.png";
-import {onMounted, ref} from "vue";
+import {onMounted, reactive, ref} from "vue";
 import {ElTable, ElTableColumn} from "element-plus";
 
 let pointType = ref([]);
 let eventDetails = ref({});
 let keyword = ref('');
+let tags = reactive([
+  { name: '大型', num: 0, icon: 'icon1', checked: true },
+  { name: '中型', num: 0, icon: 'icon2', checked: true },
+  { name: '小I型', num: 0, icon: 'icon3', checked: true },
+  { name: '小II型', num: 0, icon: 'icon4', checked: false },
+  { name: '超汛限', num: 0, icon: 'icon5', checked: false },
+  { name: '低旱警', num: 0, icon: 'icon5', checked: false },
+  { name: '病险', num: 0, icon: 'icon5', checked: false },
+  { name: '在建', num: 0, icon: 'icon5', checked: false },
+]);
 const detailsData = ref({
   text: '',
   dataList: []
@@ -44,6 +69,9 @@ const onSearchCancel = () => {
   keyword.value = '';
   initData();
 }
+const handleClickTag = (item) => {
+  item.checked = !item.checked;
+}
 const initData = () => {
   detailsData.value = {
     text: '就诞生了附件两款发动机了解案件来看世界分手机否结束骄傲就开了房间离开家可怜见立刻就杀了对方吉林省大家逻辑了及时了解多方了解逻辑范德萨发给收到发给对方独放个',
@@ -89,4 +117,48 @@ onMounted(() => {
     background-color: #fff;
   }
 }
+.checked-box {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  background-color: #fff;
+  padding: 10px 0;
+  .tag-box {
+    width: 45px;
+    margin: 0 15px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .tag {
+      width: 45px;
+      height: 45px;
+      border-radius: 8px;
+      background-color: #f4f6f8;
+      border: 1px solid #ededed;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .text {
+      font-size: 14px;
+      text-align: center;
+      margin-top: 3px;
+    }
+  }
+  .tag-box-active {
+    .tag {
+      position: relative;
+      .checked-icon {
+        color: #56bd69;
+        font-size: 20px;
+        position: absolute;
+        top: -10px;
+        right: -10px;
+      }
+    }
+    .text {
+      color: #2C81FF;
+    }
+  }
+}
 </style>

src/views/disasterRiskMonitor/hydrologicalMonitor/riverMonitor.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="container">
+    <van-search
+        v-model="keyword"
+        class="common-search"
+        :left-icon="searchImg"
+        :right-icon="closeImg"
+        :clearable="false"
+        @search="onSearchKeyword"
+        @click-right-icon.stop="onSearchCancel"
+    />
+    <Map ref="mapRef" class="map" active-map="vectorgraph" :point-type="pointType" :event-details="eventDetails" />
+    <van-text-ellipsis class="text-box" :content="detailsData.text" rows="3" expand-text="展开" collapse-text="收起" />
+    <div class="checked-box">
+      <div
+          v-for="(item, index) in tags"
+          :key="index"
+          :class="item.checked ? 'tag-box tag-box-active': 'tag-box'"
+          @click="handleClickTag(item)"
+      >
+        <div class="tag">
+          <i :class="item.icon" />
+          <van-icon v-show="!!item.checked" class="checked-icon" name="checked" />
+        </div>
+        <div class="text">{{ item.name }}</div>
+        <div class="text">{{ '(' + item.num + ')' }}</div>
+      </div>
+    </div>
+    <el-table :data="detailsData.dataList">
+      <el-table-column label="站点" prop="data1" align="center" />
+      <el-table-column label="河流" prop="data2" align="center" />
+      <el-table-column label="时间" prop="data3" align="center" />
+      <el-table-column label="水位(m)" prop="data4" align="center" />
+      <el-table-column label="超警戒(m)" prop="data5" align="center" sortable />
+    </el-table>
+  </div>
+</template>
+
+<script lang="ts" setup name="riverMonitor">
+import searchImg from "@/assets/images/search.png";
+import closeImg from "@/assets/images/close.png";
+import {onMounted, reactive, ref} from "vue";
+import {ElTable, ElTableColumn} from "element-plus";
+
+let pointType = ref([]);
+let eventDetails = ref({});
+let keyword = ref('');
+let tags = reactive([
+  { name: '超堰顶河道站', num: 0, icon: 'icon1', checked: true },
+  { name: '超警戒河道站', num: 0, icon: 'icon2', checked: true },
+  { name: '漫堤河道站', num: 0, icon: 'icon3', checked: true },
+  { name: '水文站', num: 0, icon: 'icon4', checked: false },
+  { name: '水位站', num: 0, icon: 'icon5', checked: false }
+]);
+let detailsData = ref({
+  text: '',
+  dataList: []
+});
+
+const onSearchKeyword = (val) => {
+  keyword.value = val;
+  initData();
+}
+
+const onSearchCancel = () => {
+  keyword.value = '';
+  initData();
+}
+const handleClickTag = (item) => {
+  item.checked = !item.checked;
+}
+const initData = () => {
+  detailsData.value = {
+    text: '就诞生了附件两款发动机了解案件来看世界分手机否结束骄傲就开了房间离开家可怜见立刻就杀了对方吉林省大家逻辑了及时了解多方了解逻辑范德萨发给收到发给对方独放个',
+    dataList: [
+      { data1: '高州(四)', data2: '鉴江', data3: '10日10:00', data4: 27.82, data5: -2.68 },
+      { data1: '化州(城)', data2: '鉴江', data3: '10日10:00', data4: 26.82, data5: -2.71 },
+    ]
+  }
+}
+
+onMounted(() => {
+  initData();
+})
+</script>
+
+<style lang="scss" scoped>
+.container {
+  height: 100vh;
+  .common-search {
+    :deep(.van-field__left-icon) {
+
+      .van-icon__image {
+        width: 12px;
+        height: 12px;
+      }
+    }
+    :deep(.van-field__right-icon) {
+      width: 30px;
+      height: 30px;
+      padding: 0;
+      .van-icon__image {
+        width: 30px;
+        height: 30px;
+      }
+    }
+  }
+  .map {
+    width: 100%;
+    height: 300px;
+  }
+  .text-box {
+    padding: 10px;
+    background-color: #fff;
+  }
+}
+.checked-box {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  background-color: #fff;
+  padding: 10px 0;
+  .tag-box {
+    width: 45px;
+    margin: 0 15px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .tag {
+      width: 45px;
+      height: 45px;
+      border-radius: 8px;
+      background-color: #f4f6f8;
+      border: 1px solid #ededed;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .text {
+      font-size: 14px;
+      text-align: center;
+      margin-top: 3px;
+    }
+  }
+  .tag-box-active {
+    .tag {
+      position: relative;
+      .checked-icon {
+        color: #56bd69;
+        font-size: 20px;
+        position: absolute;
+        top: -10px;
+        right: -10px;
+      }
+    }
+    .text {
+      color: #2C81FF;
+    }
+  }
+}
+</style>