灾害信息员

src/api/globalMap/spatialAnalysis.ts

@@ -290,6 +290,15 @@ export const getEmergencyTransportResourcesDetails = (id: string) => {
   });
 };
 
+//灾害信息员列表
+export const getEmergencyDisasterInfoOfficerList = (data: any) => {
+  return request({
+    url: '/api/gateway/v2/get_emergency_disaster_info_officer_list',
+    method: 'post',
+    data: data
+  });
+};
+
 //灾害信息员详情
 export const getEmergencyDisasterInfoOfficerDetails = (id: string) => {
   return request({

src/views/globalMap/RightMenu/DisasterInfoOfficer.vue

@@ -0,0 +1,232 @@
+<template>
+  <div class="menu-content">
+    <div class="container">
+      <div class="gradient-text common-dialog-title2">灾害信息员</div>
+      <div class="box-left">
+        <el-input v-model="queryParams.keywords" class="custom-input" placeholder="搜索" @input="initData">
+          <template #prefix>
+            <el-icon class="el-input__icon"><search /></el-icon>
+          </template>
+        </el-input>
+        <div class="btn" @click="handleCancel">取消</div>
+      </div>
+    </div>
+    <div class="custom-table">
+      <div class="th">
+        <div class="td">姓名</div>
+        <div class="td">性别</div>
+        <div class="td">工作单位</div>
+        <div class="td" style="width: 120px; flex: unset">操作</div>
+      </div>
+      <div class="table-content">
+        <div v-for="item in dataList" :key="item.id" class="tr">
+          <div class="td">{{ item.name }}</div>
+          <div class="td">{{ item.gender }}</div>
+          <div class="td">{{ item.location }}</div>
+          <div class="td" style="width: 120px; flex: unset">
+            <div class="text" @click="handleShowDetail(item)">详情</div>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <el-pagination
+          background
+          :hide-on-single-page="true"
+          layout="total, prev, pager, next"
+          :total="total"
+          :page-size="queryParams.size"
+          :current-page="queryParams.current"
+          @current-change="handleChangePage"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="DisasterInfoOfficer">
+import { Search } from '@element-plus/icons-vue';
+import { getEmergencyDisasterInfoOfficerList } from '@/api/globalMap/spatialAnalysis';
+
+const showDetail = inject('showDetail');
+// 数据列表,直接定义为数组
+const dataList = ref([]);
+// 入参
+const queryParams = reactive({
+  current: 1,
+  size: 10,
+  keywords: ''
+});
+const total = ref(0);
+// 调接口
+const initData = () => {
+  getEmergencyDisasterInfoOfficerList({ current: queryParams.current, size: queryParams.size, query: { keywords: queryParams.keywords } }).then(
+    (res) => {
+      dataList.value = res.rows;
+      total.value = res.total;
+    }
+  );
+};
+
+const handleChangePage = (newNum) => {
+  queryParams.current = newNum;
+  initData();
+};
+
+// 取消按钮的逻辑，搜索框清空并重新加载数据
+const handleCancel = () => {
+  queryParams.keywords = '';
+  queryParams.current = 1;
+  initData();
+};
+
+// 展示详情
+const handleShowDetail = (item: any) => {
+  showDetail(
+    {
+      id: item.id,
+      lat: item.latitude,
+      lng: item.longitude
+    },
+    29
+  );
+};
+
+// 调用函数
+onMounted(() => {
+  initData();
+});
+</script>
+
+<style lang="scss" scoped>
+.menu-content {
+  width: 574px;
+  height: 581px;
+  background: url('@/assets/images/map/rightMenu/content.png') no-repeat;
+  background-size: 100% 100%;
+  padding: 60px 10px 10px 15px;
+  font-size: 14px;
+  position: relative;
+  color: #ffffff;
+  .box-left {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    .btn {
+      width: 59px;
+      height: 23px;
+      background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn.png') no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      margin-left: 20px;
+    }
+  }
+}
+.custom-table {
+  width: 100%;
+  height: 470px;
+  display: flex;
+  flex-direction: column;
+  .table-content {
+    flex: 1;
+    overflow-y: auto;
+  }
+  .th {
+    background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    padding: 7px 12px;
+    height: 32px;
+  }
+  .tr {
+    background: url('@/assets/images/map/rightMenu/td.png') no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    padding: 7px 12px;
+    &:hover {
+      background: url('@/assets/images/map/rightMenu/td_checked.png') no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+  .td {
+    flex: 1;
+    color: #edfaff;
+    font-size: 14px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+  .td-text {
+    /* 设置字体透明 */
+    color: transparent;
+    /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
+    -webkit-background-clip: text;
+    /* 非Webkit内核浏览器需要使用标准前缀 */
+    background-clip: text;
+    font-family: 'YouSheBiaoTiHei';
+    /* 设置线性渐变，从红色渐变到蓝色 */
+    background-image: linear-gradient(to bottom, #ffffff 50%, #3075d3 100%);
+    font-size: 14px;
+  }
+  .text-green {
+    background-image: linear-gradient(to bottom, #ffffff 50%, #40c75f 100%);
+  }
+  .text-danger {
+    background-image: linear-gradient(to bottom, #ffffff 50%, #ff2f3c 100%);
+  }
+}
+.text {
+  font-size: 14px;
+  color: #00e8ff;
+  margin-right: 7px;
+  &:last-child {
+    margin-right: 0;
+  }
+}
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 8px;
+  .pagination-container {
+    margin: 0;
+  }
+  :deep(.el-pagination__total) {
+    color: #a7ccdf !important;
+  }
+  :deep(.el-pagination) {
+    .btn-next,
+    .btn-prev {
+      background-color: transparent !important;
+      border: none !important;
+      .el-icon {
+        color: #a7ccdf !important;
+      }
+    }
+    .btn-prev:disabled,
+    .btn-next:disabled {
+      background-color: transparent !important;
+      border: none;
+    }
+    .el-pager li {
+      text-align: center;
+      color: #a7ccdf !important;
+      background-color: #0e3064 !important;
+      border: 1px solid #0c57a7 !important;
+      &:hover {
+        background-color: #038dff !important;
+        border: 1px solid #038dff !important;
+      }
+    }
+    .el-pager li.is-active {
+      background-color: #038dff !important;
+      border: 1px solid #038dff !important;
+    }
+    .el-pagination__goto {
+      color: #a7ccdf !important;
+    }
+  }
+}
+</style>

src/views/globalMap/RightMenu/index.vue

@@ -173,6 +173,10 @@
           :id="menuState.menuData[menuState.activeIndex]?.component"
           :title="menuState.menuData[menuState.activeIndex]?.name"
         />
+        <DisasterInfoOfficer
+          v-if="handleIf('灾害信息员')"
+          v-show="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '灾害信息员'"
+        />
       </div>
     </div>
   </div>
@@ -209,6 +213,7 @@ import RescueTeam from './RescueTeam.vue';
 import TrafficVideo from './TrafficVideo.vue';
 import WindMonitor from './WindMonitor/index.vue';
 import CommonVideo from './CommonVideo.vue';
+import DisasterInfoOfficer from './DisasterInfoOfficer.vue';
 import useMapStore from '@/store/modules/map';
 
 const emits = defineEmits(['update:drawing']);

src/views/globalMap/index.vue

@@ -194,6 +194,7 @@ const addMarkersMethod = debounce(
       }
       const data = res.data ? res.data : [];
       // 通用详情
+      console.log(detailsData.value.id);
       if (!!detailsData.value.id) {
         data.forEach((item) => {
           if (item.id === detailsData.value.id) {
@@ -206,10 +207,10 @@ const addMarkersMethod = debounce(
             });
           }
         });
-        detailsData.value = {
-          id: '',
-          dataType: ''
-        };
+        // detailsData.value = {
+        //   id: '',
+        //   dataType: ''
+        // };
       }
       mapUtils.addMarker2(data);
     });
@@ -239,6 +240,10 @@ const clickMenu = (item, dataList) => {
     if (item.component === 'spatial') {
       showDrawTools.value = !showDrawTools.value;
     }
+    if (item.component && item.component !== 'spatial') {
+      // 打点信息
+      addMarkers(item);
+    }
     rightMenuRef.value.updateMenu(item.checked ? '1' : '2', item);
   } else if (item.path === '2') {
     if (item.name === '附近视频') {
@@ -249,12 +254,11 @@ const clickMenu = (item, dataList) => {
       mapStore.setIsMapSelect(true);
     } else {
       let checked = item.checked ? '1' : '2';
-      // 打点信息
-      addMarkers(item);
-      if (
-        ['易涝隐患点', '省政务无人机', '铁塔运行监测', '通讯保障', '救援队伍', '重点车辆', '河道监测', '水库监测'].includes(item.name) ||
-        item.isVideo
-      ) {
+      if (item.component) {
+        // 打点信息
+        addMarkers(item);
+      }
+      if (item.isVideo) {
         rightMenuRef.value.updateMenu(checked, item);
       } else {
         let index = findChecked(dataList, item.name);