第三步：风险点分类显示

2026-06-26 11:16:12 +08:00
parent 4fa650b584
commit a2189695ef
5 changed files with 101 additions and 43 deletions
@@ -29,29 +29,36 @@
      />
      <el-select v-model="conditions.hiddenPoint" class="search-hidden-point">
        <el-option
-          v-for="(opt, index) in selectOptions"
-          :key="index"
-          :label="`${opt.label}预警点`"
-          :value="opt.value"
+            v-for="(opt, index) in selectOptions"
+            :key="index"
+            :label="opt.value === PointType.RISK_AREA ? opt.label : `${opt.label}预警点`"
+            :value="opt.value"
        />
      </el-select>
    </div>
    <!-- 表格 -->
    <div class="table-box">
      <el-table
-        :data="paginatedData"
-        border
-        style="width: 100%"
-        empty-text="暂无数据"
+          :data="paginatedData"
+          border
+          style="width: 100%"
+          empty-text="暂无数据"
      >
        <el-table-column
-          v-for="(row, index) in tableColumns"
-          :key="index"
-          :prop="row.key"
-          :label="
+            v-for="(row, index) in tableColumns"
+            :key="index"
+            :prop="row.key"
+            :label="
            index == 0 ? `${conditions.hiddenPoint}${row.title}` : row.title
          "
-        />
+        >
+          <template #default="scope" v-if="row.key === 'position'">
+            <div class="position-cell">
+              <div>{{ scope.row.lon?.toFixed(4) }},</div>
+              <div>{{ scope.row.lat?.toFixed(4) }}</div>
+            </div>
+          </template>
+        </el-table-column>
      </el-table>
    </div>

@@ -285,7 +292,7 @@
    text-overflow: ellipsis;
    cursor: pointer;
  }
-  
+
  /* 鼠标悬浮时显示完整名称 */
  :deep(.el-table .el-table__row td:first-child:hover .cell) {
    white-space: normal;
@@ -293,4 +300,12 @@
    text-overflow: unset;
    word-break: break-all;
  }
+
+  /* 位置列样式：经纬度两行显示 */
+  .position-cell {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    line-height: 1.5;
+  }
 </style>
@@ -1,5 +1,6 @@
 import { ref } from 'vue';
 import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots';
+import type { XianRiskSpots } from '@/types/base/XianRiskSpots';
 import type { PaginationType } from '@/types/common/PaginationType';
 import { PointType } from '@/types/common/DisasterType';

@@ -56,7 +57,7 @@ export const useDisasterChainTable = () => {
  /**
   * 表格数据
   */
-  const tableDatas = ref<XianHiddenDangerSpots[]>([]);
+  const tableDatas = ref<(XianHiddenDangerSpots | XianRiskSpots)[]>([]);

  /**
   * 分页配置
@@ -123,7 +124,7 @@ export const useDisasterChainTable = () => {
   * 设置表格数据
   * @param datas - 表格数据数组
   */
-  const setTableDatas = (datas: XianHiddenDangerSpots[]) => {
+  const setTableDatas = (datas: (XianHiddenDangerSpots | XianRiskSpots)[]) => {
    tableDatas.value = datas;
    paginationConfig.value.total = datas.length;
    paginationConfig.value.totalPage = Math.ceil(datas.length / paginationConfig.value.pageSize);
@@ -44,7 +44,7 @@ export const usePointsHandle = () => {

        const id = `${prefix}${point.id}`;
        ids.push(id);
-        info.push({ id, name: point.name!, lon: point.lon, lat: point.lat, scale_grade: point.scale_grade, risk_grade: point.risk_grade });
+        info.push({ id, name: point.name!, lon: point.lon, lat: point.lat, scale_grade: point.scale_grade, risk_grade: point.risk_grade, risk_level: point.risk_level });

        options.push({
          id: id,
@@ -20,4 +20,6 @@ export interface Point {
  scale_grade?: string;
  /** 险情等级（隐患点专用） */
  risk_grade?: string;
+  /** 风险区等级（风险点专用） */
+  risk_level?: string;
 }
@@ -76,6 +76,7 @@
  import type { AroundAnalysisState } from '@/types/common/useAroundAnalysisType';
  import type { PointResource } from '@/types/common/useAroundAnalysisType';
  import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots';
+  import type { XianRiskSpots } from '@/types/base/XianRiskSpots';
  import {
    useDisasterChainTable,
    type SearchConditions,
@@ -127,9 +128,10 @@
      { value: PointType.WATER_LOGGING, label: '内涝' },
      { value: PointType.FLASH_FLOOD, label: '山洪' },
      { value: PointType.COLLAPSE, label: '崩塌' },
+      { value: PointType.RISK_AREA, label: '风险区' },
    ]);

-    // 设置表格列配置
+    // 设置表格列配置（默认显示隐患点的列）
    setTableColumns([
      { title: '名称', key: 'disasterName' },
      { title: '位置', key: 'position' },
@@ -143,6 +145,24 @@
     */
    changeConditions.value = (value: SearchConditions) => {
      setConditions(value);
+
+      // 根据选择的类型动态改变表格列
+      if (value.hiddenPoint === PointType.RISK_AREA) {
+        // 风险区：只显示风险区等级
+        setTableColumns([
+          { title: '名称', key: 'disasterName' },
+          { title: '位置', key: 'position' },
+          { title: '风险区等级', key: 'riskLevel' },
+        ]);
+      } else {
+        // 隐患点：显示规模等级和险情等级
+        setTableColumns([
+          { title: '名称', key: 'disasterName' },
+          { title: '位置', key: 'position' },
+          { title: '规模等级', key: 'scaleGrade' },
+          { title: '险情等级', key: 'riskGrade' },
+        ]);
+      }
    };
  });

@@ -174,31 +194,51 @@
          return false;
        });

-        // 将 PointResource 转换为 XianHiddenDangerSpots 格式
-        const convertedData: XianHiddenDangerSpots[] = filteredPoints.map(
-          point => ({
-            id:
-              typeof point.id === 'number'
-                ? point.id
-                : parseInt(String(point.id), 10),
-            name: point.value,
-            disasterName: point.value,
-            position:
-              point.lon !== undefined && point.lat !== undefined
-                ? `${point.lon.toFixed(4)}, ${point.lat.toFixed(4)}`
-                : '未知位置',
-            scaleGrade: String(point.scale_grade || '未知'),
-            riskGrade: String(point.risk_grade || '一般'),
-            lon: point.lon,
-            lat: point.lat,
-            fieldCode: String(point.id),
-            province: '陕西省',
-            city: '西安市',
-            county: '',
-            village: '',
-            isDelete: 0,
-          })
-        );
+        // 根据类型转换数据
+        const convertedData = filteredPoints.map(point => {
+          if (point.category === 'risk-point') {
+            // 风险点数据
+            return {
+              id:
+                  typeof point.id === 'number'
+                      ? point.id
+                      : parseInt(String(point.id), 10),
+              name: point.value,
+              disasterName: point.value,
+              position:
+                  point.lon !== undefined && point.lat !== undefined
+                      ? `${point.lon.toFixed(4)}, ${point.lat.toFixed(4)}`
+                      : '未知位置',
+              riskLevel: String(point.risk_level || '一般'),
+              lon: point.lon,
+              lat: point.lat,
+            } as XianRiskSpots;
+          } else {
+            // 隐患点数据
+            return {
+              id:
+                  typeof point.id === 'number'
+                      ? point.id
+                      : parseInt(String(point.id), 10),
+              name: point.value,
+              disasterName: point.value,
+              position:
+                  point.lon !== undefined && point.lat !== undefined
+                      ? `${point.lon.toFixed(4)}, ${point.lat.toFixed(4)}`
+                      : '未知位置',
+              scaleGrade: String(point.scale_grade || '未知'),
+              riskGrade: String(point.risk_grade || '一般'),
+              lon: point.lon,
+              lat: point.lat,
+              fieldCode: String(point.id),
+              province: '陕西省',
+              city: '西安市',
+              county: '',
+              village: '',
+              isDelete: 0,
+            } as XianHiddenDangerSpots;
+          }
+        });

        console.log('convertedData:', convertedData);
        setTableDatas(convertedData);