雨量接口

src/views/disasterRiskMonitor/rainfallInRainShelter.vue

@@ -80,7 +80,7 @@
             <template #default="scope">
               <div style="display: flex; justify-content: center">
                 <img
-                  :src="iconStatus(scope.row.weather_warninglevel)"
+                  :src="iconStatus(scope.row)"
                   style="width: 40px"
                   alt=""
                 />
@@ -119,6 +119,22 @@ 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";
+import tempWhite from "@/assets/images/map/warningInfo/ic_temperature_white.png";
+import tempBlue from "@/assets/images/map/warningInfo/ic_temperature_blue.png";
+import tempOrange from "@/assets/images/map/warningInfo/ic_temperature_orange.png";
+import tempRed from "@/assets/images/map/warningInfo/ic_temperature_red.png";
+import tempYellow from "@/assets/images/map/warningInfo/ic_temperature_yellow.png";
+import thunWhite from "@/assets/images/map/warningInfo/ic_thunderstorm_white.png";
+import thunBlue from "@/assets/images/map/warningInfo/ic_thunderstorm_blue.png";
+import thunOrange from "@/assets/images/map/warningInfo/ic_thunderstorm_orange.png";
+import thunRed from "@/assets/images/map/warningInfo/ic_thunderstorm_red.png";
+import thunYellow from "@/assets/images/map/warningInfo/ic_thunderstorm_yellow.png";
+import thphoonWhite from "@/assets/images/map/warningInfo/ic_typhoon_white.png";
+import thphoonBlue from "@/assets/images/map/warningInfo/ic_typhoon_blue.png";
+import thphoonOrange from "@/assets/images/map/warningInfo/ic_typhoon_orange.png";
+import thphoonRed from "@/assets/images/map/warningInfo/ic_typhoon_red.png";
+import thphoonYellow from "@/assets/images/map/warningInfo/ic_typhoon_yellow.png";
+
 
 const { district_type } = toRefs<any>(useDict("district_type"));
 const router = useRouter();
@@ -175,17 +191,55 @@ const onSearchKeyword = () => {
   });
 };
 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;
+const iconStatus = row => {
+  if (row.weather_warning_type === "暴雨预警") {
+    if (row.weather_warninglevel === "5") {
+      return rainWhite;
+    } else if (row.weather_warninglevel === "4") {
+      return rainBlue;
+    } else if (row.weather_warninglevel === "3") {
+      return rainYellow;
+    } else if (row.weather_warninglevel === "2") {
+      return rainOrange;
+    } else {
+      return rainRed;
+    }
+  } else if (row.weather_warning_type === "高温预警") {
+    if (row.weather_warninglevel === "5") {
+      return tempWhite;
+    } else if (row.weather_warninglevel === "4") {
+      return tempBlue;
+    } else if (row.weather_warninglevel === "3") {
+      return tempYellow;
+    } else if (row.weather_warninglevel === "2") {
+      return tempOrange;
+    } else {
+      return tempRed;
+    }
+  } else if (row.weather_warning_type === "雷雨大风") {
+    if (row.weather_warninglevel === "5") {
+      return thunWhite;
+    } else if (row.weather_warninglevel === "4") {
+      return thunBlue;
+    } else if (row.weather_warninglevel === "3") {
+      return thunYellow;
+    } else if (row.weather_warninglevel === "2") {
+      return thunOrange;
+    } else {
+      return thunRed;
+    }
   } else {
-    return rainRed;
+    if (row.weather_warninglevel === "5") {
+      return thphoonWhite;
+    } else if (row.weather_warninglevel === "4") {
+      return thphoonBlue;
+    } else if (row.weather_warninglevel === "3") {
+      return thphoonYellow;
+    } else if (row.weather_warninglevel === "2") {
+      return thphoonOrange;
+    } else {
+      return thphoonRed;
+    }
   }
 };
 </script>

src/views/disasterRiskMonitor/rainfallMonitoring.vue

@@ -1,20 +1,18 @@
 <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>
         <div
-            v-for="(item, index) in option1"
-            :key="index"
-            :class="
+          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 +20,14 @@
       <div class="box-item">
         <div class="box-label">预警：</div>
         <div
-            v-for="(item, index) in option1"
-            :key="index"
-            :class="
+          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,23 +35,23 @@
     </div>
     <div class="box1">
       <van-search
-          v-model="queryParams.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="queryParams.area_name"
-          :columns="district_type"
-          :customFieldName="{ text: 'label', value: 'label' }"
-          canSelectAll
-          @confirm="onSearchKeyword"
+        v-model="queryParams.area_name"
+        :columns="district_type"
+        :customFieldName="{ text: 'label', value: 'label' }"
+        canSelectAll
+        @confirm="onSearchKeyword"
       />
     </div>
     <div class="card">
@@ -65,11 +63,7 @@
           table-layout="auto"
           class="common-table"
         >
-          <el-table-column
-            label="位置"
-            prop="address"
-            align="center"
-          />
+          <el-table-column label="位置" prop="address" align="center" />
           <el-table-column
             label="雨量(mm)"
             prop="rainfall"
@@ -77,15 +71,15 @@
             width="80px"
           />
           <el-table-column
-              label="类型"
-              prop="weather_warning_type"
-              align="center"
-              width="70px"
+            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)"
+                    :src="iconStatus(scope.row)"
                     style="width: 40px"
                     alt=""
                 />
@@ -94,7 +88,13 @@
           </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>
@@ -110,16 +110,35 @@ 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 {getGeologicalDisaster, getPointInfo, getRainhouseSites} from "@/api/disasterRiskMonitor/rainfall";
-import {useDict} from "@/utils/dict";
-import {deepClone} from "@/utils";
+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";
+import tempWhite from "@/assets/images/map/warningInfo/ic_temperature_white.png";
+import tempBlue from "@/assets/images/map/warningInfo/ic_temperature_blue.png";
+import tempYellow from "@/assets/images/map/warningInfo/ic_temperature_yellow.png";
+import tempOrange from "@/assets/images/map/warningInfo/ic_temperature_orange.png";
+import tempRed from "@/assets/images/map/warningInfo/ic_temperature_red.png";
+import thunWhite from "@/assets/images/map/warningInfo/ic_thunderstorm_white.png";
+import thunBlue from "@/assets/images/map/warningInfo/ic_thunderstorm_blue.png";
+import thunYellow from "@/assets/images/map/warningInfo/ic_thunderstorm_yellow.png";
+import thunOrange from "@/assets/images/map/warningInfo/ic_thunderstorm_orange.png";
+import thunRed from "@/assets/images/map/warningInfo/ic_thunderstorm_red.png";
+import thphoonWhite from "@/assets/images/map/warningInfo/ic_typhoon_white.png";
+import thphoonBlue from "@/assets/images/map/warningInfo/ic_typhoon_blue.png";
+import thphoonYellow from "@/assets/images/map/warningInfo/ic_typhoon_yellow.png";
+import thphoonOrange from "@/assets/images/map/warningInfo/ic_typhoon_orange.png";
+import thphoonRed from "@/assets/images/map/warningInfo/ic_typhoon_red.png";
 
-const { district_type } = toRefs<any>(useDict('district_type'));
+const { district_type } = toRefs<any>(useDict("district_type"));
 const router = useRouter();
 let detailsData = ref({
   dataList: []
@@ -166,17 +185,55 @@ const onSearchKeyword = () => {
   });
 };
 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;
+const iconStatus = row => {
+  if (row.weather_warning_type === "暴雨预警") {
+    if (row.weather_warninglevel === "5") {
+      return rainWhite;
+    } else if (row.weather_warninglevel === "4") {
+      return rainBlue;
+    } else if (row.weather_warninglevel === "3") {
+      return rainYellow;
+    } else if (row.weather_warninglevel === "2") {
+      return rainOrange;
+    } else {
+      return rainRed;
+    }
+  } else if (row.weather_warning_type === "高温预警") {
+    if (row.weather_warninglevel === "5") {
+      return tempWhite;
+    } else if (row.weather_warninglevel === "4") {
+      return tempBlue;
+    } else if (row.weather_warninglevel === "3") {
+      return tempYellow;
+    } else if (row.weather_warninglevel === "2") {
+      return tempOrange;
+    } else {
+      return tempRed;
+    }
+  } else if (row.weather_warning_type === "雷雨大风") {
+    if (row.weather_warninglevel === "5") {
+      return thunWhite;
+    } else if (row.weather_warninglevel === "4") {
+      return thunBlue;
+    } else if (row.weather_warninglevel === "3") {
+      return thunYellow;
+    } else if (row.weather_warninglevel === "2") {
+      return thunOrange;
+    } else {
+      return thunRed;
+    }
   } else {
-    return rainRed;
+    if (row.weather_warninglevel === "5") {
+      return thphoonWhite;
+    } else if (row.weather_warninglevel === "4") {
+      return thphoonBlue;
+    } else if (row.weather_warninglevel === "3") {
+      return thphoonYellow;
+    } else if (row.weather_warninglevel === "2") {
+      return thphoonOrange;
+    } else {
+      return thphoonRed;
+    }
   }
 };
 </script>