雨量接口

src/api/disasterRiskMonitor/rainfall.ts

@@ -24,6 +24,15 @@ export const getMidmapDzzhDetails = (id: string) => {
   });
 };
 
+//地质灾害隐患点列表查询
+export function getGeologicalDisaster(data) {
+  return request({
+    url: "/api/rainfall/dzzh/list",
+    method: "get",
+    params: data
+  });
+}
+
 // 获取周围视频点位接口
 export const getVideoInfo = params => {
   return request({
@@ -46,6 +55,15 @@ export const getRainbowDetails = (id: string) => {
   });
 };
 
+//雨窝点列表查询
+export function getRainhouseSites(data) {
+  return request({
+    url: "/api/rainfall/rain_pits/list",
+    method: "get",
+    params: data
+  });
+}
+
 // 危化企业详情
 export const getChemicalcompanyDetails = (id: string) => {
   return request({

src/components/Select/index.vue

@@ -1,22 +1,22 @@
 <template>
   <div class="select-box" @click="showPicker = true">
-    <div class="select-content">{{ fieldValue  ? fieldValue : '全部'}}</div>
+    <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"
+      :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";
+import { ref } from "vue";
+import { Numeric } from "vant/es/utils";
 interface Column {
   label: string;
   value: string;
@@ -28,26 +28,31 @@ const props = defineProps({
     type: Array as PropType<Column[]>,
     required: true
   },
+  customFieldName: {
+    type: Object,
+    default: {
+      text: "label",
+      value: "value"
+    }
+  },
   canSelectAll: Boolean
 });
-const emits = defineEmits(['update:modelValue', 'confirm']);
+const emits = defineEmits(["update:modelValue", "confirm"]);
 const newColumns = computed(() => {
-  return !!props.canSelectAll ? [{ label: '全部', value: '' }].concat(props.columns) : props.columns;
+  return !!props.canSelectAll
+    ? [{ label: "全部", value: "" }].concat(props.columns)
+    : props.columns;
 });
-const fieldValue = ref('');
+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 });
+  emits("update:modelValue", selectedValues);
+  emits("confirm", { selectedValues, selectedOptions });
 };
 </script>
 
@@ -64,7 +69,7 @@ const onConfirm = ({ selectedValues, selectedOptions }) => {
     margin-left: 5px;
     width: 17px;
     height: 16px;
-    background: url('@/assets/images/down.png') no-repeat;
+    background: url("@/assets/images/down.png") no-repeat;
     background-size: 100% 100%;
   }
 }

src/views/disasterRiskMonitor/rainfallInRainShelter.vue

@@ -1,8 +1,6 @@
 <template>
   <div v-if="!isShowView" class="container">
-    <div class="title">
-      雨窝点雨量监测
-    </div>
+    <div class="title">雨窝点雨量监测</div>
     <div class="box">
       <div class="box-item">
         <div class="box-label">实况：</div>
@@ -10,7 +8,7 @@
           v-for="(item, index) in option1"
           :key="index"
           :class="
-            queryParams.value1 === '1' && queryParams.value2 === item.value
+            queryParams.history_time === item.value
               ? 'box-tag tag-active'
               : 'box-tag'
           "
@@ -25,7 +23,7 @@
           v-for="(item, index) in option1"
           :key="index"
           :class="
-            queryParams.value1 === '2' && queryParams.value2 === item.value
+            queryParams.future_time === item.value
               ? 'box-tag tag-active'
               : 'box-tag'
           "
@@ -37,7 +35,7 @@
     </div>
     <div class="box1">
       <van-search
-        v-model="keyword"
+        v-model="queryParams.keyword"
         placeholder="搜索"
         class="common-search"
         :left-icon="searchImg"
@@ -49,10 +47,12 @@
         </template>
       </van-search>
       <Select
-        v-model="area"
+        v-model="queryParams.area_name"
         :columns="district_type"
+        :customFieldName="{ text: 'label', value: 'label' }"
         canSelectAll
-        @confirm="onSelectConfirm"
+        class="one"
+        @confirm="onSearchKeyword"
       />
     </div>
     <div class="card">
@@ -64,26 +64,38 @@
           table-layout="auto"
           class="common-table"
         >
+          <el-table-column label="位置" prop="name" align="center" />
           <el-table-column
-            label="位置"
-            prop="name"
-            align="center"
-          />
-          <el-table-column
-            label="雨量"
-            prop="latitude"
+            label="雨量(mm)"
+            prop="rainfall"
             align="center"
             width="80px"
           />
           <el-table-column
             label="类型"
-            prop="type"
+            prop="weather_warning_type"
             align="center"
-            width="60px"
-          />
+            width="70px"
+          >
+            <template #default="scope">
+              <div style="display: flex; justify-content: center">
+                <img
+                  :src="iconStatus(scope.row.weather_warninglevel)"
+                  style="width: 40px"
+                  alt=""
+                />
+              </div>
+            </template>
+          </el-table-column>
           <el-table-column label="操作" align="center" width="50px">
             <template #default="scope">
-              <div class="btn" @click="showDetails(scope.row)" style="color: #1d92ff">查看</div>
+              <div
+                class="btn"
+                style="color: #1d92ff"
+                @click="showDetails(scope.row)"
+              >
+                查看
+              </div>
             </template>
           </el-table-column>
         </el-table>
@@ -96,15 +108,25 @@
 import { reactive, ref } from "vue";
 import searchImg from "@/assets/images/search.png";
 import { ElTable, ElTableColumn } from "element-plus";
-import { getPointInfo } from "@/api/disasterRiskMonitor/rainfall";
-import {useDict} from "@/utils/dict";
+import {
+  getPointInfo,
+  getRainhouseSites
+} from "@/api/disasterRiskMonitor/rainfall";
+import { useDict } from "@/utils/dict";
+import { deepClone } from "@/utils";
+import rainWhite from "@/assets/images/map/warningInfo/ic_rainstorm_white.png";
+import rainBlue from "@/assets/images/map/warningInfo/ic_rainstorm_blue.png";
+import rainOrange from "@/assets/images/map/warningInfo/ic_rainstorm_orange.png";
+import rainRed from "@/assets/images/map/warningInfo/ic_rainstorm_red.png";
+import rainYellow from "@/assets/images/map/warningInfo/ic_rainstorm_yellow.png";
 
-const { district_type } = toRefs<any>(useDict('district_type'));
+const { district_type } = toRefs<any>(useDict("district_type"));
 const router = useRouter();
 let detailsData = ref({
   dataList: []
 });
 const isShowView = ref(false);
+
 const option1 = reactive([
   { text: "1h", value: "1" },
   { text: "3h", value: "3" },
@@ -113,15 +135,24 @@ const option1 = reactive([
   { text: "24h", value: "24" }
 ]);
 const queryParams = reactive({
-  value1: "1",
-  value2: "24",
-  type: "",
-  level: "",
-  area: ""
+  area_name: "",
+  history_time: "24",
+  future_time: "",
+  pageSize: "",
+  keyword: ""
 });
 const handleClickMenu = (value1, value2) => {
-  queryParams.value1 = value1;
-  queryParams.value2 = value2;
+  if (value1 === "1") {
+    if (!!queryParams.future_time) {
+      queryParams.future_time = "";
+    }
+    queryParams.history_time = value2;
+  } else {
+    if (!!queryParams.history_time) {
+      queryParams.history_time = "";
+    }
+    queryParams.future_time = value2;
+  }
 };
 const getTableRowClass = ({ rowIndex }) => {
   return rowIndex % 2 === 0 ? "" : "common-table-tr";
@@ -136,12 +167,27 @@ const showDetails = row => {
     }
   });
 };
-const getData = () => {
-  getPointInfo("16").then(res => {
-    detailsData.value.dataList = res.data.list;
+const onSearchKeyword = () => {
+  let temp = deepClone(queryParams);
+  temp.area_name = temp.area_name[0];
+  getRainhouseSites(temp).then(res => {
+    detailsData.value.dataList = res.data;
   });
 };
-getData();
+onSearchKeyword();
+const iconStatus = level => {
+  if (level === "5") {
+    return rainWhite;
+  } else if (level === "4") {
+    return rainBlue;
+  } else if (level === "3") {
+    return rainYellow;
+  } else if (level === "2") {
+    return rainOrange;
+  } else {
+    return rainRed;
+  }
+};
 </script>
 
 <style scoped lang="scss">
@@ -460,4 +506,7 @@ getData();
   text-align: center;
   margin-bottom: 8px;
 }
+:deep(.select-box) {
+  flex-shrink: 0;
+}
 </style>

src/views/disasterRiskMonitor/rainfallMonitoring.vue

@@ -7,14 +7,14 @@
       <div class="box-item">
         <div class="box-label">实况：</div>
         <div
-          v-for="(item, index) in option1"
-          :key="index"
-          :class="
-            queryParams.value1 === '1' && queryParams.value2 === item.value
+            v-for="(item, index) in option1"
+            :key="index"
+            :class="
+            queryParams.history_time === item.value
               ? 'box-tag tag-active'
               : 'box-tag'
           "
-          @click="handleClickMenu('1', item.value)"
+            @click="handleClickMenu('1', item.value)"
         >
           {{ item.text }}
         </div>
@@ -22,14 +22,14 @@
       <div class="box-item">
         <div class="box-label">预警：</div>
         <div
-          v-for="(item, index) in option1"
-          :key="index"
-          :class="
-            queryParams.value1 === '2' && queryParams.value2 === item.value
+            v-for="(item, index) in option1"
+            :key="index"
+            :class="
+            queryParams.future_time === item.value
               ? 'box-tag tag-active'
               : 'box-tag'
           "
-          @click="handleClickMenu('2', item.value)"
+            @click="handleClickMenu('2', item.value)"
         >
           {{ item.text }}
         </div>
@@ -37,22 +37,23 @@
     </div>
     <div class="box1">
       <van-search
-        v-model="keyword"
-        placeholder="搜索"
-        class="common-search"
-        :left-icon="searchImg"
-        show-action
-        @search="onSearchKeyword"
+          v-model="queryParams.keyword"
+          placeholder="搜索"
+          class="common-search"
+          :left-icon="searchImg"
+          show-action
+          @search="onSearchKeyword"
       >
         <template #action>
           <div class="search-btn" @click="onSearchKeyword">搜索</div>
         </template>
       </van-search>
       <Select
-        v-model="area"
-        :columns="district_type"
-        canSelectAll
-        @confirm="onSelectConfirm"
+          v-model="queryParams.area_name"
+          :columns="district_type"
+          :customFieldName="{ text: 'label', value: 'label' }"
+          canSelectAll
+          @confirm="onSearchKeyword"
       />
     </div>
     <div class="card">
@@ -66,21 +67,31 @@
         >
           <el-table-column
             label="位置"
-            prop="name"
+            prop="address"
             align="center"
           />
           <el-table-column
-            label="雨量"
-            prop="latitude"
+            label="雨量(mm)"
+            prop="rainfall"
             align="center"
             width="80px"
           />
           <el-table-column
-            label="类型"
-            prop="type"
-            align="center"
-            width="60px"
-          />
+              label="类型"
+              prop="weather_warning_type"
+              align="center"
+              width="70px"
+          >
+            <template #default="scope">
+              <div style="display: flex; justify-content: center">
+                <img
+                    :src="iconStatus(scope.row.weather_warninglevel)"
+                    style="width: 40px"
+                    alt=""
+                />
+              </div>
+            </template>
+          </el-table-column>
           <el-table-column label="操作" align="center" width="50px">
             <template #default="scope">
               <div class="btn" @click="showDetails(scope.row)" style="color: #1d92ff">查看</div>
@@ -99,8 +110,14 @@ import closeImg from "@/assets/images/close.png";
 import icon1 from "@/assets/images/disasterRiskMonitor/galeDisaster/icon1.png";
 import { ElTable, ElTableColumn } from "element-plus";
 import RainfallMonitoringView from "@/views/disasterRiskMonitor/rainfallMonitoringView.vue";
-import { getPointInfo } from "@/api/disasterRiskMonitor/rainfall";
+import {getGeologicalDisaster, getPointInfo, getRainhouseSites} from "@/api/disasterRiskMonitor/rainfall";
 import {useDict} from "@/utils/dict";
+import {deepClone} from "@/utils";
+import rainWhite from "@/assets/images/map/warningInfo/ic_rainstorm_white.png";
+import rainBlue from "@/assets/images/map/warningInfo/ic_rainstorm_blue.png";
+import rainYellow from "@/assets/images/map/warningInfo/ic_rainstorm_yellow.png";
+import rainOrange from "@/assets/images/map/warningInfo/ic_rainstorm_orange.png";
+import rainRed from "@/assets/images/map/warningInfo/ic_rainstorm_red.png";
 
 const { district_type } = toRefs<any>(useDict('district_type'));
 const router = useRouter();
@@ -116,15 +133,24 @@ const option1 = reactive([
   { text: "24h", value: "24" }
 ]);
 const queryParams = reactive({
-  value1: "1",
-  value2: "24",
-  type: "",
-  level: "",
-  area: ""
+  area_name: "",
+  history_time: "24",
+  future_time: "",
+  pageSize: "",
+  keyword: ""
 });
 const handleClickMenu = (value1, value2) => {
-  queryParams.value1 = value1;
-  queryParams.value2 = value2;
+  if (value1 === "1") {
+    if (!!queryParams.future_time) {
+      queryParams.future_time = "";
+    }
+    queryParams.history_time = value2;
+  } else {
+    if (!!queryParams.history_time) {
+      queryParams.history_time = "";
+    }
+    queryParams.future_time = value2;
+  }
 };
 const getTableRowClass = ({ rowIndex }) => {
   return rowIndex % 2 === 0 ? "" : "common-table-tr";
@@ -132,12 +158,27 @@ const getTableRowClass = ({ rowIndex }) => {
 const showDetails = row => {
   router.push({ name: "RainfallMonitoringView", query: { id: row.id } });
 };
-const getData = () => {
-  getPointInfo("17").then(res => {
-    detailsData.value.dataList = res.data.list;
+const onSearchKeyword = () => {
+  let temp = deepClone(queryParams);
+  temp.area_name = temp.area_name[0];
+  getGeologicalDisaster(temp).then(res => {
+    detailsData.value.dataList = res.data;
   });
 };
-getData();
+onSearchKeyword();
+const iconStatus = level => {
+  if (level === "5") {
+    return rainWhite;
+  } else if (level === "4") {
+    return rainBlue;
+  } else if (level === "3") {
+    return rainYellow;
+  } else if (level === "2") {
+    return rainOrange;
+  } else {
+    return rainRed;
+  }
+};
 </script>
 
 <style scoped lang="scss">
@@ -456,4 +497,7 @@ getData();
   text-align: center;
   margin-bottom: 8px;
 }
+:deep(.select-box) {
+  flex-shrink: 0;
+}
 </style>