应急响应

.env.development

@@ -7,6 +7,7 @@ VITE_APP_ENV = 'development'
 # 开发环境
 # baseUrl
 VITE_BASE_API = 'http://10.181.7.236:9988'
+VITE_APP_BASE_API2 = 'http://10.181.7.235/'
 VITE_BASE_DOWNLOAD_API = '/file/download/'
 #VITE_BASE_API = 'http://127.0.0.1:9988'
 

.env.production

@@ -6,6 +6,7 @@ VITE_APP_ENV = 'production'
 
 # baseUrl
 # VITE_BASE_API = "http://19.155.220.206:8088"
+VITE_APP_BASE_API2 = '/'
 VITE_BASE_API = ""
 VITE_BASE_DOWNLOAD_API = '/file/download/'
 

src/api/globalMap/index.ts

@@ -112,4 +112,9 @@ export const getRescueMateriaWarehouseList = (params) => {
     data: params
   });
 }
-
+export function getAreaMap() {
+  return request({
+    url: '/api/spatial_analysis/get_mms_area_info',
+    method: 'get'
+  });
+}

src/router/routes.ts

@@ -400,7 +400,7 @@ export const leaderRoute: Array<RouteRecordRaw> = [
         path: "/emergency_response",
         name: "EmergencyResponse",
         component: () =>
-          import("@/views/disasterRiskMonitor/emergencyResponse.vue"),
+          import("@/views/disasterRiskMonitor/emergencyResponse/index.vue"),
         meta: {
           title: "应急响应",
           noCache: true

src/styles/element-ui.less

@@ -24,3 +24,6 @@
 .common-table-tr {
   background: #f8f9fc !important;
 }
+.el-table .cell {
+  padding:  0 5px;
+}

src/utils/olMap/olMap.ts

@@ -285,24 +285,23 @@ export class olMap {
   /**
    *
    * @param {Geojon} chaozhou 根据geojson对象创建Featrue对象
-   * @param {String} layerName 图层名称
    * @returns VectorLayer
    */
-  createVecByJson(json, layerName = '') {
+  createVecByJson(json, options) {
     const format = new GeoJSON();
     const fs = format.readFeatures(json);
     const converLayer = new VectorLayer({
       source: new VectorSource(),
       style: new Style({
         fill: new Fill({
-          color: 'rgba(16, 36, 59, 0.65)'
+          color: options.fillColor ? options.fillColor : 'rgba(16, 36, 59, 0.65)'
         }),
         stroke: new Stroke({
-          color: 'rgba(38, 138, 185, 1)',
+          color: options.strokeColor ? options.strokeColor : 'rgba(38, 138, 185, 1)',
           width: 2
         })
       }),
-      zIndex: 99
+      zIndex: options.zIndex ? options.zIndex : 99
     });
     this.map.addLayer(converLayer);
     const extent = [-180, -90, 180, 90];

src/views/disasterRiskMonitor/emergencyResponse/Windbreak.vue

@@ -0,0 +1,309 @@
+<template>
+  <div class="container">
+    <div class="map-box">
+      <div class="tip-box">
+        <div class="tip-text1">{{ !!responseLevel ? responseLevel : '茂名市暂无启动防风应急响应' }}</div>
+        <div v-if="!!responseTime" class="tip-text2">{{ responseTime }}更新</div>
+      </div>
+      <div ref="windBreakMapRef" id="map" />
+      <div class="level-box">
+        <div v-for="(item, index) in levelData" :key="index" :class="getClass(item.type)">
+          <div class="level-num">{{ item.value }}</div>
+          <div class="level-text">{{ item.name }}</div>
+        </div>
+      </div>
+    </div>
+    <el-table
+        :data="dataList"
+        table-layout="auto"
+        header-cell-class-name="common-table-header"
+        :row-class-name="getTableRowClass"
+    >
+      <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" />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="level" align="center" width="80">
+        <template #header>
+          <div class="table-line" @click="showPicker2 = true">
+            <div>{{ selectLabel2 === '全部' ? '生效级别' : selectLabel2 }}</div>
+            <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="showPicker2 = true">
+            <div>时间</div>
+            <i class="icon-down" />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="最高启动级别" prop="maxLevel" align="center"/>
+      <el-table-column label="最高级别启动时间" prop="maxLevelTime" align="center" />
+    </el-table>
+    <van-popup v-model:show="showPicker" round position="bottom">
+      <van-picker
+          :model-value="queryParams.area"
+          :columns="columns"
+          @cancel="showPicker = false"
+          @confirm="onSelectLevelConfirm"
+      />
+    </van-popup>
+    <van-popup v-model:show="showPicker2" round position="bottom">
+      <van-picker
+          :model-value="queryParams.level"
+          :columns="columns2"
+          @cancel="showPicker2 = false"
+          @confirm="onSelectLevelConfirm2"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script lang="ts" setup name="Windbreak">
+import { olMap } from '@/utils/olMap/olMap';
+import mmJson from '@/assets/json/mm.json';
+import {ElTable, ElTableColumn} from "element-plus";
+import {getAreaMap} from "@/api/globalMap";
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { district_type, effective_level } = toRefs<any>(proxy?.useDict('district_type', 'effective_level'));
+
+let windBreakMapRef = ref(null);
+let mapState = reactive({
+  center: [110.925175, 22],
+  zoom: 7.8,
+  minZoom: 6,
+  maxZoom: 16,
+  isThreeDimensional: false,
+  // 是否显示比例尺
+  showScale: true
+});
+let map, mapUtils;
+let responseLevel = ref('');
+let responseTime = ref('');
+let levelData = ref([
+  { name: 'Ⅰ级', value: 0, type: '1' },
+  { name: 'Ⅱ级', value: 0, type: '2' },
+  { name: 'Ⅲ级', value: 0, type: '3' },
+  { name: 'Ⅳ级', value: 0, type: '4' }
+]);
+// 初始化地图
+const initMap = () => {
+  mapUtils = new olMap({
+    dom: windBreakMapRef.value,
+    id: ['YZT1640925052482', 'YZT1695608158269'],
+    center: mapState.center,
+    zoom: mapState.zoom,
+    minZoom: mapState.minZoom,
+    maxZoom: mapState.maxZoom,
+    // 加载完成事件
+    onLoadCompleted: (yMap) => {
+      map = yMap;
+      getLevelData();
+      mapUtils.createVecByJson(mmJson, {
+        fillColor: 'transparent'
+      });
+      // mapUtils.createMask(legend.value);
+      map.updateSize();
+    }
+  });
+};
+// 获取级别数据
+const getLevelData = () => {
+  getAreaMap().then((res) => {
+    mapUtils.createMask(res.data);
+  })
+}
+// 获取不同级别样式
+const getClass = (type) => {
+  let res = 'level-item';
+  if (type === '1') {
+    res += ' level1';
+  } else if (type === '2') {
+    res += ' level2';
+  } else if (type === '3') {
+    res += ' level3';
+  }
+  return res;
+}
+
+// 表格查询条件
+const queryParams = reactive({
+  area: [],
+  level: [],
+  startTime: '',
+  endTime: ''
+});
+// 表格数据
+let dataList = ref([]);
+// 获取数据
+const initData = () => {
+  dataList.value = [
+    { area: '电白区', level: 'Ⅳ级', time: '2024-12-05 07:23:55', maxLevel: 'Ⅲ', maxLevelTime: '2024-12-04 16:45:13' }
+  ]
+  responseTime.value = '2024-12-10 10:12:34';
+  initMap();
+}
+
+// 区县
+let showPicker = ref(false);
+let selectLabel = ref("区县");
+// 区县选项
+const columns = computed(() => {
+  let data = [{ text: "全部", value: "" }];
+  if (district_type.value && district_type.value.length > 0) {
+    district_type.value.forEach((item) => {
+      data.push({text: item.label, value: item.value});
+    })
+  }
+  return data;
+});
+// 区县选择回调
+const onSelectLevelConfirm = ({ selectedOptions }) => {
+  showPicker.value = false;
+  selectLabel.value = selectedOptions[0].text;
+  queryParams.area = selectedOptions[0].value;
+  initData();
+};
+
+// 生效级别
+let showPicker2 = ref(false);
+let selectLabel2 = ref('生效级别');
+// 生效级别选项
+const columns2 = computed(() => {
+  let data = [{ text: "全部", value: "" }];
+  if (effective_level.value && effective_level.value.length > 0) {
+    effective_level.value.forEach((item) => {
+      data.push({text: item.label, value: item.value});
+    })
+  }
+  return data;
+});
+// 生效级别选择回调
+const onSelectLevelConfirm2 = ({ selectedOptions }) => {
+  showPicker2.value = false;
+  selectLabel2.value = selectedOptions[0].text;
+  queryParams.level = selectedOptions[0].value;
+  initData();
+};
+
+// table样式
+const getTableRowClass = ({ rowIndex }) => {
+  return rowIndex % 2 === 0 ? "" : "common-table-tr";
+};
+
+onMounted(() => {
+  initData();
+})
+</script>
+
+<style lang="scss" scoped>
+.container {
+  .map-box {
+    width: 100%;
+    height: 300px;
+    position: relative;
+    .tip-box {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 100;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      .tip-text1 {
+        font-size: 14px;
+        line-height: 26px;
+        font-weight: bold;
+        color: #060709;
+      }
+      .tip-text2 {
+        font-size: 12px;
+        color: #757575;
+      }
+    }
+    #map {
+      width: 100%;
+      height: 300px;
+    }
+    .level-box {
+      position: absolute;
+      right: 10px;
+      bottom: 10px;
+      display: flex;
+      align-items: center;
+      .level-item {
+        border: 1px solid #5d66f5;
+        border-radius: 2px;
+        background-color: #ffffff;
+        min-width: 50px;
+        font-size: 14px;
+        margin-left: 3px;
+        &:first-child {
+          margin-left: 0;
+        }
+        .level-num {
+          width: 100%;
+          height:20px;
+          line-height: 20px;
+          text-align: center;
+          padding: 0 3px;
+          color: #060709;
+        }
+        .level-text {
+          width: 100%;
+          height: 20px;
+          line-height: 20px;
+          background-color: #5d66f5;
+          padding: 0 3px;
+          color: #fff;
+          text-align: center;
+        }
+      }
+      .level1 {
+        border: 1px solid #b3292a;
+        .level-text {
+          background-color: #b3292a;
+        }
+      }
+      .level2 {
+        border: 1px solid #e4a744;
+        .level-text {
+          background-color: #e4a744;
+          color: #060709;
+        }
+      }
+      .level3 {
+        border: 1px solid #eeed4f;
+        .level-text {
+          background-color: #eeed4f;
+          color: #060709;
+        }
+      }
+    }
+  }
+
+  .table-line {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 14px;
+    .icon-down {
+      display: inline-block;
+      flex-shrink: 0;
+      width: 14px;
+      height: 14px;
+      background: url("@/assets/images/down.png") no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+}
+</style>

src/views/disasterRiskMonitor/emergencyResponse.vue → src/views/disasterRiskMonitor/emergencyResponse/index.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
     <van-tabs v-model:active="active" background="#f7f9fe">
-      <van-tab title="防风">内容 1</van-tab>
+      <van-tab title="防风">
+        <Windbreak />
+      </van-tab>
       <van-tab title="防汛">内容 2</van-tab>
       <van-tab title="防旱">内容 3</van-tab>
       <van-tab title="防冻">内容 4</van-tab>
@@ -9,8 +11,8 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { ref } from "vue";
+<script setup lang="ts" name="emergencyResponse">
+import Windbreak from "./Windbreak.vue";
 
 const active = ref(0);
 </script>

vite.config.ts

@@ -3,7 +3,7 @@ import { defineConfig, loadEnv } from "vite";
 import vue from "@vitejs/plugin-vue";
 import vueJsx from "@vitejs/plugin-vue-jsx";
 import Components from "unplugin-vue-components/vite";
-import { VantResolver } from "unplugin-vue-components/resolvers";
+import {ElementPlusResolver, VantResolver} from "unplugin-vue-components/resolvers";
 import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
 import AutoImport from 'unplugin-auto-import/vite';
 import path from "path";
@@ -60,6 +60,9 @@ export default defineConfig(({ mode }) => {
           filepath: './.eslintrc-auto-import.json',
           globalsPropValue: true
         },
+        resolvers: [
+          ElementPlusResolver()
+        ],
         vueTemplate: true, // 是否在 vue 模板中自动导入
 
       }),