水库监测

src/components/Select/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="select-box" @click="showPicker = true">
+    <div class="select-content">{{ fieldValue  ? fieldValue : '全部'}}</div>
+    <div class="down-icon" />
+  </div>
+  <van-popup v-model:show="showPicker" destroy-on-close round position="bottom">
+    <van-picker
+        :model-value="pickerValue"
+        :columns="newColumns"
+        :columns-field-names="customFieldName"
+        @cancel="showPicker = false"
+        @confirm="onConfirm"
+    />
+  </van-popup>
+</template>
+
+<script lang="ts" setup name="Select">
+import {ref} from "vue";
+import {Numeric} from "vant/es/utils";
+interface Column {
+  label: string;
+  value: string;
+}
+
+const props = defineProps({
+  modelValue: String,
+  columns: {
+    type: Array as PropType<Column[]>,
+    required: true
+  },
+  canSelectAll: Boolean
+});
+const emits = defineEmits(['update:modelValue', 'confirm']);
+const newColumns = computed(() => {
+  return !!props.canSelectAll ? [{ label: '全部', value: '' }].concat(props.columns) : props.columns;
+});
+const fieldValue = ref('');
+const showPicker = ref(false);
+const pickerValue = ref<Numeric[]>([]);
+const customFieldName = {
+  text: 'label',
+  value: 'value'
+};
+
+const onConfirm = ({ selectedValues, selectedOptions }) => {
+  showPicker.value = false;
+  pickerValue.value = selectedValues;
+  fieldValue.value = selectedOptions[0].label;
+  emits('update:modelValue', selectedValues);
+  emits('confirm', { selectedValues, selectedOptions });
+};
+</script>
+
+<style lang="scss" scoped>
+.select-box {
+  display: flex;
+  align-items: center;
+  .select-content {
+    flex: 1;
+    text-align: center;
+    font-size: 14px;
+  }
+  .down-icon {
+    margin-left: 5px;
+    width: 17px;
+    height: 16px;
+    background: url('@/assets/images/down.png') no-repeat;
+    background-size: 100% 100%;
+  }
+}
+</style>

src/views/disasterRiskMonitor/cityEmergencyEvent.vue

@@ -489,6 +489,7 @@ const initData = () => {
   }
   :deep(.van-search__content) {
     background-color: #ffffff;
+    border: none !important;
   }
   :deep(.van-field__left-icon) {
     .van-icon__image {

src/views/disasterRiskMonitor/earthquakeRapidReport/index.vue

@@ -265,5 +265,16 @@ const handleEventDetail = (id) => {
       }
     }
   }
+  .common-search {
+    :deep(.van-field__right-icon) {
+      width: 30px;
+      height: 30px;
+      padding: 0;
+      .van-icon__image {
+        width: 30px;
+        height: 30px;
+      }
+    }
+  }
 }
 </style>

src/views/disasterRiskMonitor/emergencyOfficials.vue

@@ -3,6 +3,7 @@
     <div v-show="!isShowStructure" class="page-head">
       <van-search
           v-model="keywords"
+          class="common-search"
           placeholder="请输入搜索关键词"
           :left-icon="searchImg"
           :right-icon="closeImg"
@@ -333,4 +334,15 @@ const handleSelect = data => {
   width: 230px;
   margin-top: 2px;
 }
+.common-search {
+  :deep(.van-field__right-icon) {
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    .van-icon__image {
+      width: 30px;
+      height: 30px;
+    }
+  }
+}
 </style>

src/views/disasterRiskMonitor/reservoirMonitor.vue

@@ -13,6 +13,9 @@
           <div class="search-btn" @click="onSearchKeyword">搜索</div>
         </template>
       </van-search>
+      <div class="box3">
+        <Select v-model="area" :columns="district_type" canSelectAll @confirm="onSelectConfirm" />
+      </div>
     </div>
     <Map
       ref="mapRef"
@@ -96,8 +99,11 @@
 
 <script lang="ts" setup name="reservoirMonitor">
 import searchImg from "@/assets/images/search.png";
-import { onMounted, reactive, ref } from "vue";
+import {reactive, ref } from "vue";
 import { ElTable, ElTableColumn } from "element-plus";
+import {useDict} from "@/utils/dict";
+
+const { district_type } = toRefs<any>(useDict('district_type'));
 let mapRef = ref();
 const getImageUrl = name => {
   return new URL(
@@ -107,6 +113,8 @@ const getImageUrl = name => {
 };
 let eventDetails = ref({});
 let keyword = ref("");
+let area = ref("");
+
 let menu1 = ref([
   { name: "大型", num: 2, icon: getImageUrl("icon5.png"), checked: true },
   { name: "中型", num: 1, icon: getImageUrl("icon6.png"), checked: true },
@@ -164,6 +172,10 @@ const onSearchKeyword = val => {
   initData();
 };
 
+const onSelectConfirm = (data) => {
+  initData();
+}
+
 const onSearchCancel = () => {
   keyword.value = "";
   initData();
@@ -306,13 +318,20 @@ const getTableRowClass = ({ rowIndex }) => {
   .box1 {
     padding: 13px 9px;
     background-color: #ffffff;
+    display: flex;
+    align-items: center;
+    .common-search {
+      margin-right: 5px;
+    }
+    .select-box {
+      flex: 1;
+    }
   }
   .box2 {
     position: relative;
     width: 344px;
     min-height: 114px;
-    background: url("@/assets/images/disasterRiskMonitor/riverMonitor/box1.png")
-      no-repeat;
+    background: url("@/assets/images/disasterRiskMonitor/riverMonitor/box1.png") no-repeat;
     background-size: 100% 100%;
     box-shadow: 0 2px 4px 0 rgba(228, 240, 255, 1);
     padding: 35px 0 0 0;
@@ -415,7 +434,7 @@ const getTableRowClass = ({ rowIndex }) => {
       }
     }
   }
-  .common-search {
+  .van-search.common-search {
     border: 1px solid #dce0ee;
     border-radius: 2px;
     padding: 0;
@@ -426,6 +445,7 @@ const getTableRowClass = ({ rowIndex }) => {
     }
     :deep(.van-search__content) {
       background-color: #ffffff;
+      border: none !important;
     }
     :deep(.van-field__left-icon) {
       .van-icon__image {
@@ -528,4 +548,7 @@ const getTableRowClass = ({ rowIndex }) => {
   height: 33px;
   background-size: 100% 100%;
 }
+.box3 {
+  width: 75px;
+}
 </style>

src/views/disasterRiskMonitor/riverMonitor.vue

@@ -369,6 +369,7 @@ const getTableRowClass = ({ rowIndex }) => {
     }
     :deep(.van-search__content) {
       background-color: #ffffff;
+      border: none !important;
     }
     :deep(.van-field__left-icon) {
       .van-icon__image {