ok

src/api/disasterRiskMonitor/emergencyResponse.ts

@@ -3,8 +3,17 @@ import request from "@/utils/request";
 // 应急响应列表
 export function getEmergencyResponseList(params) {
   return request({
-    url: "/api/gateway/v2/get_emergency_response_list",
+    // url: "/api/gateway/v2/get_emergency_response_list",
+    url: "/api/risk_monitor/emergency/get_emergency_response_list",
     method: "post",
-    data: {query: {response_type: params.query.response_type}}
+    data: {response_type: params.query.response_type}
+  });
+}
+
+export function getAreaMap(params) {
+  return request({
+    url: '/api/risk_monitor/emergency/get_mms_area_info',
+    method: 'get',
+    params: {response_type: params.query.response_type}
   });
 }

src/views/disasterRiskMonitor/emergencyResponse/Droughtprevention.vue

@@ -26,12 +26,13 @@
       table-layout="auto"
       header-cell-class-name="common-table-header"
       :row-class-name="getTableRowClass"
+      empty-text="暂无数据"
     >
       <el-table-column prop="area" align="center" width="85">
         <template #header>
           <div class="table-line" @click="showPicker = true">
             <div>{{ selectLabel === "全部" ? "区县" : selectLabel }}</div>
-            <i class="icon-down" />
+            <!--i class="icon-down"/ -->
           </div>
         </template>
       </el-table-column>
@@ -39,7 +40,7 @@
         <template #header>
           <div class="table-line" @click="showPicker2 = true">
             <div>{{ selectLabel2 === "全部" ? "生效级别" : selectLabel2 }}</div>
-            <i class="icon-down" />
+            <!--i class="icon-down"/ -->
           </div>
         </template>
       </el-table-column>
@@ -47,7 +48,7 @@
         <template #header>
           <div class="table-line" @click="showPicker3 = true">
             <div>时间</div>
-            <i class="icon-down" />
+            <!--i class="icon-down"/ -->
           </div>
         </template>
       </el-table-column>
@@ -60,7 +61,7 @@
     </el-table>
     <van-popup v-model:show="showPicker" round position="bottom">
       <van-picker
-        :model-value="queryParams.area"
+        :model-value="queryParams.query.area"
         :columns="columns"
         @cancel="showPicker = false"
         @confirm="onSelectLevelConfirm"
@@ -68,7 +69,7 @@
     </van-popup>
     <van-popup v-model:show="showPicker2" round position="bottom">
       <van-picker
-        :model-value="queryParams.level"
+        :model-value="queryParams.query.level"
         :columns="columns2"
         @cancel="showPicker2 = false"
         @confirm="onSelectLevelConfirm2"
@@ -81,8 +82,8 @@
         @confirm="onConfirm"
         @cancel="onCancel"
       >
-        <van-date-picker v-model="queryParams.startTime" />
-        <van-date-picker v-model="queryParams.endTime" />
+        <van-date-picker v-model="queryParams.query.startTime" />
+        <van-date-picker v-model="queryParams.query.endTime" />
       </van-picker-group>
     </van-popup>
   </div>
@@ -92,8 +93,9 @@
 import { olMap } from "@/utils/olMap/olMap";
 import mmJson from "@/assets/json/mm.json";
 import { ElTable, ElTableColumn } from "element-plus";
-import { getAreaMap } from "@/api/globalMap";
-import { showToast } from "vant";
+// import { getAreaMap } from "@/api/globalMap";
+// import { showToast } from "vant";
+import { getAreaMap, getEmergencyResponseList } from "@/api/disasterRiskMonitor/emergencyResponse";
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { district_type, effective_level, specific_time } = toRefs<any>(
@@ -142,10 +144,24 @@ const initMap = () => {
 };
 // 获取级别数据
 const getLevelData = () => {
-  getAreaMap().then(res => {
+  getAreaMap(queryParams.value).then(res => {
     mapUtils.createMask(res.data);
   });
 };
+const getRomanLevel = level => {
+  if (level == '')
+    return '';
+  
+    if (level == '1')
+    return 'Ⅰ级';
+  else if (level == '2')
+    return 'Ⅱ级';
+  else if (level == '3')
+    return 'Ⅲ级';
+  else if (level == '4')
+    return 'Ⅳ级';
+  return level;
+};
 // 获取不同级别样式
 const getClass = type => {
   let res = "level-item";
@@ -155,6 +171,8 @@ const getClass = type => {
     res += " level2";
   } else if (type === "3") {
     res += " level3";
+  } else if (type === "4") {
+    res += " level4";
   }
   return res;
 };
@@ -168,37 +186,64 @@ const onCancel = () => {
 };
 
 // 表格查询条件
-const queryParams = reactive({
-  area: [],
-  level: [],
-  startTime: [],
-  endTime: []
+const queryParams = ref({
+  query: {
+    response_type: '3', // 1:防风 2:防汛3:防旱4:防冻 6:防暴雨
+    area: [],
+    level: [],
+    startTime: [],
+    endTime: []
+  },
+  current: 1,
+  size: 10
 });
 // 表格数据
 let dataList = ref([]);
 // 获取数据
 const initData = () => {
   getList();
-  responseTime.value = "2024-12-10 10:12:34";
   initMap();
   const currentDate = new Date();
   const currentYear = currentDate.getFullYear();
   const currentMonth = String(currentDate.getMonth() + 1).padStart(2, "0"); // 确保月份是两位数
   const currentDay = String(currentDate.getDate()).padStart(2, "0");
-  queryParams.startTime = [currentYear, currentMonth, currentDay];
-  queryParams.endTime = [currentYear, currentMonth, currentDay];
+  queryParams.value.query.startTime = [currentYear, currentMonth, currentDay];
+  queryParams.value.query.endTime = [currentYear, currentMonth, currentDay];
 };
 
-const getList = () => {
+const  getList = async () => {
+  responseTime.value = "";
+  responseLevel.value = "";
+  let res = await getEmergencyResponseList(queryParams.value);
+  res.data.forEach(i => {
+    dataList.value.push({
+      area: i.area,
+      level: getRomanLevel(i.level),
+      time: i.time,
+      maxLevel: getRomanLevel(i.maxLevel),
+      maxLevelTime: i.maxLevelTime
+    });
+    levelData.value.forEach(x => {
+      if (x.type == i.level) 
+      {
+        x.value ++;
+      }
+    });
+    responseTime.value = i.time;
+    responseLevel.value = "茂名市防旱应急响应："+getRomanLevel(i.level);
+  });
+  
+  /*
   dataList.value = [
     {
-      area: "电白区",
+      response: "电白区",
       level: "Ⅳ级",
       time: "2024-12-05 07:23:55",
       maxLevel: "Ⅲ",
       maxLevelTime: "2024-12-04 16:45:13"
     }
   ];
+  */
 };
 // 区县
 let showPicker = ref(false);
@@ -217,7 +262,7 @@ const columns = computed(() => {
 const onSelectLevelConfirm = ({ selectedOptions }) => {
   showPicker.value = false;
   selectLabel.value = selectedOptions[0].text;
-  queryParams.area = selectedOptions[0].value;
+  queryParams.value.query.area = selectedOptions[0].value;
   initData();
 };
 
@@ -238,7 +283,7 @@ const columns2 = computed(() => {
 const onSelectLevelConfirm2 = ({ selectedOptions }) => {
   showPicker2.value = false;
   selectLabel2.value = selectedOptions[0].text;
-  queryParams.level = selectedOptions[0].value;
+  queryParams.value.query.level = selectedOptions[0].value;
   initData();
 };
 
@@ -259,7 +304,7 @@ const columns3 = computed(() => {
 const onSelectLevelConfirm3 = ({ selectedOptions }) => {
   showPicker3.value = false;
   selectLabel3.value = selectedOptions[0].text;
-  queryParams.level = selectedOptions[0].value;
+  queryParams.value.query.level = selectedOptions[0].value;
   initData();
 };
 

src/views/disasterRiskMonitor/emergencyResponse/Floodprevention.vue

@@ -26,12 +26,13 @@
         table-layout="auto"
         header-cell-class-name="common-table-header"
         :row-class-name="getTableRowClass"
+        empty-text="暂无数据"
     >
       <el-table-column prop="area" align="center" width="85">
         <template #header>
           <div class="table-line" @click="showPicker = true">
             <div>{{ selectLabel === "全部" ? "区县" : selectLabel }}</div>
-            <i class="icon-down" />
+            <!--i class="icon-down"/ -->
           </div>
         </template>
       </el-table-column>
@@ -39,7 +40,7 @@
         <template #header>
           <div class="table-line" @click="showPicker2 = true">
             <div>{{ selectLabel2 === "全部" ? "生效级别" : selectLabel2 }}</div>
-            <i class="icon-down" />
+            <!--i class="icon-down"/ -->
           </div>
         </template>
       </el-table-column>
@@ -47,7 +48,7 @@
         <template #header>
           <div class="table-line" @click="showPicker3 = true">
             <div>时间</div>
-            <i class="icon-down" />
+            <!--i class="icon-down"/ -->
           </div>
         </template>
       </el-table-column>
@@ -60,7 +61,7 @@
     </el-table>
     <van-popup v-model:show="showPicker" round position="bottom">
       <van-picker
-          :model-value="queryParams.area"
+          :model-value="queryParams.query.area"
           :columns="columns"
           @cancel="showPicker = false"
           @confirm="onSelectLevelConfirm"
@@ -68,7 +69,7 @@
     </van-popup>
     <van-popup v-model:show="showPicker2" round position="bottom">
       <van-picker
-          :model-value="queryParams.level"
+          :model-value="queryParams.query.level"
           :columns="columns2"
           @cancel="showPicker2 = false"
           @confirm="onSelectLevelConfirm2"
@@ -81,8 +82,8 @@
           @confirm="onConfirm"
           @cancel="onCancel"
       >
-        <van-date-picker v-model="queryParams.startTime" />
-        <van-date-picker v-model="queryParams.endTime" />
+        <van-date-picker v-model="queryParams.query.startTime" />
+        <van-date-picker v-model="queryParams.query.endTime" />
       </van-picker-group>
     </van-popup>
   </div>
@@ -92,8 +93,9 @@
 import { olMap } from "@/utils/olMap/olMap";
 import mmJson from "@/assets/json/mm.json";
 import { ElTable, ElTableColumn } from "element-plus";
-import { getAreaMap } from "@/api/globalMap";
-import { showToast } from "vant";
+// import { getAreaMap } from "@/api/globalMap";
+// import { showToast } from "vant";
+import { getAreaMap, getEmergencyResponseList } from "@/api/disasterRiskMonitor/emergencyResponse";
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { district_type, effective_level, specific_time } = toRefs<any>(
@@ -142,10 +144,24 @@ const initMap = () => {
 };
 // 获取级别数据
 const getLevelData = () => {
-  getAreaMap().then(res => {
+  getAreaMap(queryParams.value).then(res => {
     mapUtils.createMask(res.data);
   });
 };
+const getRomanLevel = level => {
+  if (level == '')
+    return '';
+  
+    if (level == '1')
+    return 'Ⅰ级';
+  else if (level == '2')
+    return 'Ⅱ级';
+  else if (level == '3')
+    return 'Ⅲ级';
+  else if (level == '4')
+    return 'Ⅳ级';
+  return level;
+};
 // 获取不同级别样式
 const getClass = type => {
   let res = "level-item";
@@ -155,6 +171,8 @@ const getClass = type => {
     res += " level2";
   } else if (type === "3") {
     res += " level3";
+  } else if (type === "4") {
+    res += " level4";
   }
   return res;
 };
@@ -168,37 +186,64 @@ const onCancel = () => {
 };
 
 // 表格查询条件
-const queryParams = reactive({
-  area: [],
-  level: [],
-  startTime: [],
-  endTime: []
+const queryParams = ref({
+  query: {
+    response_type: '2', // 1:防风 2:防汛3:防旱4:防冻 6:防暴雨
+    area: [],
+    level: [],
+    startTime: [],
+    endTime: []
+  },
+  current: 1,
+  size: 10
 });
 // 表格数据
 let dataList = ref([]);
 // 获取数据
 const initData = () => {
   getList();
-  responseTime.value = "2024-12-10 10:12:34";
   initMap();
   const currentDate = new Date();
   const currentYear = currentDate.getFullYear();
   const currentMonth = String(currentDate.getMonth() + 1).padStart(2, "0"); // 确保月份是两位数
   const currentDay = String(currentDate.getDate()).padStart(2, "0");
-  queryParams.startTime = [currentYear, currentMonth, currentDay];
-  queryParams.endTime = [currentYear, currentMonth, currentDay];
+  queryParams.value.query.startTime = [currentYear, currentMonth, currentDay];
+  queryParams.value.query.endTime = [currentYear, currentMonth, currentDay];
 };
 
-const getList = () => {
+const  getList = async () => {
+  responseTime.value = "";
+  responseLevel.value = "";
+  let res = await getEmergencyResponseList(queryParams.value);
+  res.data.forEach(i => {
+    dataList.value.push({
+      area: i.area,
+      level: getRomanLevel(i.level),
+      time: i.time,
+      maxLevel: getRomanLevel(i.maxLevel),
+      maxLevelTime: i.maxLevelTime
+    });
+    levelData.value.forEach(x => {
+      if (x.type == i.level) 
+      {
+        x.value ++;
+      }
+    });
+    responseTime.value = i.time;
+    responseLevel.value = "茂名市防汛应急响应："+getRomanLevel(i.level);
+  });
+  
+  /*
   dataList.value = [
     {
-      area: "电白区",
+      response: "电白区",
       level: "Ⅳ级",
       time: "2024-12-05 07:23:55",
       maxLevel: "Ⅲ",
       maxLevelTime: "2024-12-04 16:45:13"
     }
   ];
+  */
 };
 // 区县
 let showPicker = ref(false);
@@ -217,7 +262,7 @@ const columns = computed(() => {
 const onSelectLevelConfirm = ({ selectedOptions }) => {
   showPicker.value = false;
   selectLabel.value = selectedOptions[0].text;
-  queryParams.area = selectedOptions[0].value;
+  queryParams.value.query.area = selectedOptions[0].value;
   initData();
 };
 
@@ -238,7 +283,7 @@ const columns2 = computed(() => {
 const onSelectLevelConfirm2 = ({ selectedOptions }) => {
   showPicker2.value = false;
   selectLabel2.value = selectedOptions[0].text;
-  queryParams.level = selectedOptions[0].value;
+  queryParams.value.query.level = selectedOptions[0].value;
   initData();
 };
 
@@ -259,7 +304,7 @@ const columns3 = computed(() => {
 const onSelectLevelConfirm3 = ({ selectedOptions }) => {
   showPicker3.value = false;
   selectLabel3.value = selectedOptions[0].text;
-  queryParams.level = selectedOptions[0].value;
+  queryParams.value.query.level = selectedOptions[0].value;
   initData();
 };
 

src/views/disasterRiskMonitor/emergencyResponse/Freezeproofing.vue

@@ -26,12 +26,13 @@
       table-layout="auto"
       header-cell-class-name="common-table-header"
       :row-class-name="getTableRowClass"
+      empty-text="暂无数据"
     >
       <el-table-column prop="area" align="center" width="85">
         <template #header>
           <div class="table-line" @click="showPicker = true">
             <div>{{ selectLabel === "全部" ? "区县" : selectLabel }}</div>
-            <i class="icon-down" />
+            <!--i class="icon-down"/ -->
           </div>
         </template>
       </el-table-column>
@@ -39,7 +40,7 @@
         <template #header>
           <div class="table-line" @click="showPicker2 = true">
             <div>{{ selectLabel2 === "全部" ? "生效级别" : selectLabel2 }}</div>
-            <i class="icon-down" />
+            <!--i class="icon-down"/ -->
           </div>
         </template>
       </el-table-column>
@@ -47,7 +48,7 @@
         <template #header>
           <div class="table-line" @click="showPicker3 = true">
             <div>时间</div>
-            <i class="icon-down" />
+            <!--i class="icon-down"/ -->
           </div>
         </template>
       </el-table-column>
@@ -60,7 +61,7 @@
     </el-table>
     <van-popup v-model:show="showPicker" round position="bottom">
       <van-picker
-        :model-value="queryParams.area"
+        :model-value="queryParams.query.area"
         :columns="columns"
         @cancel="showPicker = false"
         @confirm="onSelectLevelConfirm"
@@ -68,7 +69,7 @@
     </van-popup>
     <van-popup v-model:show="showPicker2" round position="bottom">
       <van-picker
-        :model-value="queryParams.level"
+        :model-value="queryParams.query.level"
         :columns="columns2"
         @cancel="showPicker2 = false"
         @confirm="onSelectLevelConfirm2"
@@ -81,8 +82,8 @@
         @confirm="onConfirm"
         @cancel="onCancel"
       >
-        <van-date-picker v-model="queryParams.startTime" />
-        <van-date-picker v-model="queryParams.endTime" />
+        <van-date-picker v-model="queryParams.query.startTime" />
+        <van-date-picker v-model="queryParams.query.endTime" />
       </van-picker-group>
     </van-popup>
   </div>
@@ -92,8 +93,9 @@
 import { olMap } from "@/utils/olMap/olMap";
 import mmJson from "@/assets/json/mm.json";
 import { ElTable, ElTableColumn } from "element-plus";
-import { getAreaMap } from "@/api/globalMap";
-import { showToast } from "vant";
+// import { getAreaMap } from "@/api/globalMap";
+// import { showToast } from "vant";
+import { getAreaMap, getEmergencyResponseList } from "@/api/disasterRiskMonitor/emergencyResponse";
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { district_type, effective_level, specific_time } = toRefs<any>(
@@ -142,10 +144,24 @@ const initMap = () => {
 };
 // 获取级别数据
 const getLevelData = () => {
-  getAreaMap().then(res => {
+  getAreaMap(queryParams.value).then(res => {
     mapUtils.createMask(res.data);
   });
 };
+const getRomanLevel = level => {
+  if (level == '')
+    return '';
+  
+    if (level == '1')
+    return 'Ⅰ级';
+  else if (level == '2')
+    return 'Ⅱ级';
+  else if (level == '3')
+    return 'Ⅲ级';
+  else if (level == '4')
+    return 'Ⅳ级';
+  return level;
+};
 // 获取不同级别样式
 const getClass = type => {
   let res = "level-item";
@@ -155,6 +171,8 @@ const getClass = type => {
     res += " level2";
   } else if (type === "3") {
     res += " level3";
+  } else if (type === "4") {
+    res += " level4";
   }
   return res;
 };
@@ -168,37 +186,64 @@ const onCancel = () => {
 };
 
 // 表格查询条件
-const queryParams = reactive({
-  area: [],
-  level: [],
-  startTime: [],
-  endTime: []
+const queryParams = ref({
+  query: {
+    response_type: '4', // 1:防风 2:防汛3:防旱4:防冻 6:防暴雨
+    area: [],
+    level: [],
+    startTime: [],
+    endTime: []
+  },
+  current: 1,
+  size: 10
 });
 // 表格数据
 let dataList = ref([]);
 // 获取数据
 const initData = () => {
   getList();
-  responseTime.value = "2024-12-10 10:12:34";
   initMap();
   const currentDate = new Date();
   const currentYear = currentDate.getFullYear();
   const currentMonth = String(currentDate.getMonth() + 1).padStart(2, "0"); // 确保月份是两位数
   const currentDay = String(currentDate.getDate()).padStart(2, "0");
-  queryParams.startTime = [currentYear, currentMonth, currentDay];
-  queryParams.endTime = [currentYear, currentMonth, currentDay];
+  queryParams.value.query.startTime = [currentYear, currentMonth, currentDay];
+  queryParams.value.query.endTime = [currentYear, currentMonth, currentDay];
 };
 
-const getList = () => {
+const  getList = async () => {
+  responseTime.value = "";
+  responseLevel.value = "";
+  let res = await getEmergencyResponseList(queryParams.value);
+  res.data.forEach(i => {
+    dataList.value.push({
+      area: i.area,
+      level: getRomanLevel(i.level),
+      time: i.time,
+      maxLevel: getRomanLevel(i.maxLevel),
+      maxLevelTime: i.maxLevelTime
+    });
+    levelData.value.forEach(x => {
+      if (x.type == i.level) 
+      {
+        x.value ++;
+      }
+    });
+    responseTime.value = i.time;
+    responseLevel.value = "茂名市防冻应急响应："+getRomanLevel(i.level);
+  });
+  
+  /*
   dataList.value = [
     {
-      area: "电白区",
+      response: "电白区",
       level: "Ⅳ级",
       time: "2024-12-05 07:23:55",
       maxLevel: "Ⅲ",
       maxLevelTime: "2024-12-04 16:45:13"
     }
   ];
+  */
 };
 // 区县
 let showPicker = ref(false);
@@ -217,7 +262,7 @@ const columns = computed(() => {
 const onSelectLevelConfirm = ({ selectedOptions }) => {
   showPicker.value = false;
   selectLabel.value = selectedOptions[0].text;
-  queryParams.area = selectedOptions[0].value;
+  queryParams.value.query.area = selectedOptions[0].value;
   initData();
 };
 
@@ -238,7 +283,7 @@ const columns2 = computed(() => {
 const onSelectLevelConfirm2 = ({ selectedOptions }) => {
   showPicker2.value = false;
   selectLabel2.value = selectedOptions[0].text;
-  queryParams.level = selectedOptions[0].value;
+  queryParams.value.query.level = selectedOptions[0].value;
   initData();
 };
 
@@ -259,7 +304,7 @@ const columns3 = computed(() => {
 const onSelectLevelConfirm3 = ({ selectedOptions }) => {
   showPicker3.value = false;
   selectLabel3.value = selectedOptions[0].text;
-  queryParams.level = selectedOptions[0].value;
+  queryParams.value.query.level = selectedOptions[0].value;
   initData();
 };
 

src/views/disasterRiskMonitor/emergencyResponse/Windbreak.vue

@@ -26,28 +26,29 @@
       table-layout="auto"
       header-cell-class-name="common-table-header"
       :row-class-name="getTableRowClass"
+      empty-text="暂无数据"
     >
       <el-table-column prop="area" align="center" width="85">
         <template #header>
-          <div class="table-line" @click="showPicker = true">
+          <div class="table-line" @click="showPicker = false">
             <div>{{ selectLabel === "全部" ? "区县" : selectLabel }}</div>
-            <i class="icon-down" />
+            <!--i class="icon-down"/ -->
           </div>
         </template>
       </el-table-column>
       <el-table-column prop="level" align="center" width="80">
         <template #header>
-          <div class="table-line" @click="showPicker2 = true">
+          <div class="table-line" @click="showPicker2 = false">
             <div>{{ selectLabel2 === "全部" ? "生效级别" : selectLabel2 }}</div>
-            <i class="icon-down" />
+            <!--i class="icon-down"/ -->
           </div>
         </template>
       </el-table-column>
       <el-table-column prop="time" align="center" width="80">
         <template #header>
-          <div class="table-line" @click="showPicker3 = true">
+          <div class="table-line" @click="showPicker3 = false">
             <div>时间</div>
-            <i class="icon-down" />
+            <!--i class="icon-down"/ -->
           </div>
         </template>
       </el-table-column>
@@ -60,7 +61,7 @@
     </el-table>
     <van-popup v-model:show="showPicker" round position="bottom">
       <van-picker
-        :model-value="queryParams.area"
+        :model-value="queryParams.query.area"
         :columns="columns"
         @cancel="showPicker = false"
         @confirm="onSelectLevelConfirm"
@@ -68,7 +69,7 @@
     </van-popup>
     <van-popup v-model:show="showPicker2" round position="bottom">
       <van-picker
-        :model-value="queryParams.level"
+        :model-value="queryParams.query.level"
         :columns="columns2"
         @cancel="showPicker2 = false"
         @confirm="onSelectLevelConfirm2"
@@ -81,8 +82,8 @@
         @confirm="onConfirm"
         @cancel="onCancel"
       >
-        <van-date-picker v-model="queryParams.startTime" />
-        <van-date-picker v-model="queryParams.endTime" />
+        <van-date-picker v-model="queryParams.query.startTime" />
+        <van-date-picker v-model="queryParams.query.endTime" />
       </van-picker-group>
     </van-popup>
   </div>
@@ -92,9 +93,9 @@
 import { olMap } from "@/utils/olMap/olMap";
 import mmJson from "@/assets/json/mm.json";
 import { ElTable, ElTableColumn } from "element-plus";
-import { getAreaMap } from "@/api/globalMap";
-import { showToast } from "vant";
-import { getEmergencyResponseList } from "@/api/disasterRiskMonitor/emergencyResponse";
+// import { getAreaMap } from "@/api/globalMap";
+// import { showToast } from "vant";
+import { getAreaMap, getEmergencyResponseList } from "@/api/disasterRiskMonitor/emergencyResponse";
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { district_type, effective_level, specific_time } = toRefs<any>(
@@ -115,10 +116,10 @@ let map, mapUtils;
 let responseLevel = ref("");
 let responseTime = ref("");
 let levelData = ref([
-  { name: "Ⅰ级", value: 0, type: "Ⅰ" },
-  { name: "Ⅱ级", value: 0, type: "Ⅱ" },
-  { name: "Ⅲ级", value: 0, type: "Ⅲ" },
-  { name: "Ⅳ级", value: 0, type: "Ⅳ" }
+  { name: "Ⅰ级", value: 0, type: "1" },
+  { name: "Ⅱ级", value: 0, type: "2" },
+  { name: "Ⅲ级", value: 0, type: "3" },
+  { name: "Ⅳ级", value: 0, type: "4" }
 ]);
 // 初始化地图
 const initMap = () => {
@@ -143,20 +144,34 @@ const initMap = () => {
 };
 // 获取级别数据
 const getLevelData = () => {
-  getAreaMap().then(res => {
+  getAreaMap(queryParams.value).then(res => {
     mapUtils.createMask(res.data);
   });
 };
+const getRomanLevel = level => {
+  if (level == '')
+    return '';
+  
+    if (level == '1')
+    return 'Ⅰ级';
+  else if (level == '2')
+    return 'Ⅱ级';
+  else if (level == '3')
+    return 'Ⅲ级';
+  else if (level == '4')
+    return 'Ⅳ级';
+  return level;
+};
 // 获取不同级别样式
 const getClass = type => {
   let res = "level-item";
-  if (type === "Ⅰ") {
+  if (type === "1") {
     res += " level1";
-  } else if (type === "Ⅱ") {
+  } else if (type === "2") {
     res += " level2";
-  } else if (type === "Ⅲ") {
+  } else if (type === "3") {
     res += " level3";
-  } else if (type === "Ⅳ") {
+  } else if (type === "4") {
     res += " level4";
   }
   return res;
@@ -200,16 +215,22 @@ const  getList = async () => {
   responseTime.value = "";
   responseLevel.value = "";
   let res = await getEmergencyResponseList(queryParams.value);
-  res.rows.forEach(i => {
+  res.data.forEach(i => {
     dataList.value.push({
-      area: i.response_addr,
-      level: i.response_level+"级",
-      time: i.response_time,
-      maxLevel: i.response_level,
-      maxLevelTime: i.response_time
+      area: i.area,
+      level: getRomanLevel(i.level),
+      time: i.time,
+      maxLevel: getRomanLevel(i.maxLevel),
+      maxLevelTime: i.maxLevelTime
+    });
+    levelData.value.forEach(x => {
+      if (x.type == i.level) 
+      {
+        x.value ++;
+      }
     });
-    responseTime.value = i.response_time;
-    responseLevel.value = "茂名市防风应急响应："+i.response_level+"级";
+    responseTime.value = i.time;
+    responseLevel.value = "茂名市防风应急响应："+getRomanLevel(i.level);
   });
   
   /*