feat: PC法规处列表 类型按钮切换为原生el-radio

packages/screen/src/views/WarningManagement/law/detailDrawer.vue

@@ -26,23 +26,15 @@
       </template>
       <div class="table">
         <div class="stats-cards">
-          <div
+          <el-radio-group size="large" v-model="cardType" @change="handleTypeChange">
-            v-for="(item, index) in impactData"
+            <el-radio-button
-            :key="index"
+              v-for="(item, index) in impactData"
-            @click="handleClick(index, item)"
+              :key="index"
-            class="stat-card"
+              :value="index"
-            :style="{
+            >
-              backgroundImage: `url(${cardType == index ? selectedIcon : unselectedIcon})`,
+              {{ item.name }} ({{ item.count }})
-              backgroundSize: '100% 100%',
+            </el-radio-button>
-              backgroundPosition: 'center',
+          </el-radio-group>
-            }"
-          >
-            <div class="stat-icon"><img :src="item.icon" alt="" /></div>
-            <div class="stat-content">
-              <span class="stat-label">{{ item.name }}</span>
-              <span class="stat-value">{{ item.count }}</span>
-            </div>
-          </div>
         </div>
         <div class="search-form">
           <el-select
@@ -90,14 +82,6 @@
 import { ref, onMounted, watch, computed, h, reactive } from 'vue'
 import { request } from '@/utils/request'
 import DynamicTable from '../../../component/DynamicTable/index.js'
-import selectedIcon from '@/assets/xiangying/选中bg@2x.png'
-import unselectedIcon from '@/assets/xiangying/未选中bg@2x.png'
-
-import Icon0 from '@/assets/xiangying/选中@2x.png'
-import Icon1 from '@/assets/xiangying/未选中1@2x.png'
-import Icon2 from '@/assets/xiangying/未选中2@2x.png'
-import Icon3 from '@/assets/xiangying/未选中3@2x.png'
-import Icon4 from '@/assets/xiangying/未选中4@2x.png'
 
 const props = defineProps({
   row: {
@@ -108,7 +92,7 @@ const props = defineProps({
 
 const detailData = ref({})
 const tableData = ref([])
-const cardType = ref('0')
+const cardType = ref(0)
 const cardTypeVal = ref('路段')
 const filterForm = reactive({})
 
@@ -174,7 +158,7 @@ const getApiUrlByType = (type) => {
 
 // 根据类型处理数据（统一格式）
 const processDataByType = (item, type) => {
-  return processUnifiedData(item, type)
+  return processUnifiedData(item, cardTypeVal.value)
 }
 
 // 处理数据为统一格式
@@ -203,7 +187,7 @@ const processUnifiedData = (item, type) => {
     // 影响区域
     region: item.GL1_QXMC || item.COUNTY || item.county || item.region || item.ADMINISTRATIVE_REGION || item.COUNTY_NAME || '-',
     // 影响点类型
-    pointType: impactData.value[type].type || '-',
+    pointType: cardTypeVal.value || '-',
     // 影响点位置（根据类型取不同字段）
     pointLocation: item.GL1_QLMC || item.NAME || item.GL1_SDMC || item.PROJECT_NAME || item.GL1_LXBH || item.name || '-',
     // 影响点等级
@@ -434,7 +418,7 @@ const getAffectedSites = async () => {
     if (cardTypeVal.value == '路段') {
       if (res.data) {
         tableData.value = res.data.map((item, index) => ({
-          ...processDataByType(item, cardType.value),
+          ...processDataByType(item),
           id: index + 1,
         }))
         pagination.total = res.total || 0
@@ -442,7 +426,7 @@ const getAffectedSites = async () => {
     } else if (cardTypeVal.value == '驻地') {
       if (res.data) {
         tableData.value = res.data.map((item, index) => ({
-          ...processDataByType(item, cardType.value),
+          ...processDataByType(item),
           id: index + 1,
         }))
         pagination.total = res.total || 0
@@ -450,7 +434,7 @@ const getAffectedSites = async () => {
     } else if (cardTypeVal.value == '桥梁') {
       if (res.data) {
         tableData.value = res.data.map((item, index) => ({
-          ...processDataByType(item, cardType.value),
+          ...processDataByType(item),
           id: index + 1,
         }))
         pagination.total = res.total || 0
@@ -467,7 +451,7 @@ const getAffectedSites = async () => {
         const currentPageData = allData.slice(startIndex, endIndex)
 
         tableData.value = currentPageData.map((item, index) => ({
-          ...processDataByType(item, cardType.value),
+          ...processDataByType(item),
           id: startIndex + index + 1,
         }))
       } else {
@@ -530,11 +514,11 @@ const handleFilterChange = () => {
 
 // 影响点数据
 const impactData = ref([
-  { name: '影响路段', count: 0, icon: Icon4, type: '路段' },
+  { name: '影响路段', count: 0, type: '路段' },
-  { name: '影响桥梁', count: 0, icon: Icon0, type: '桥梁' },
+  { name: '影响桥梁', count: 0, type: '桥梁' },
-  { name: '影响隧道', count: 0, icon: Icon2, type: '隧道' },
+  { name: '影响隧道', count: 0, type: '隧道' },
-  { name: '影响边坡', count: 0, icon: Icon1, type: '边坡' },
+  { name: '影响边坡', count: 0, type: '边坡' },
-  { name: '影响驻地', count: 0, icon: Icon3, type: '驻地' },
+  { name: '影响驻地', count: 0, type: '驻地' },
 ])
 
 // 顶部卡片数据
@@ -589,9 +573,9 @@ const loadBarChartData = async () => {
 }
 
 // 点击卡片切换
-const handleClick = (index, item) => {
+const handleTypeChange = (index) => {
+  const item = impactData.value[index]
   tableData.value = []
-  cardType.value = index + ''
   cardTypeVal.value = item.type
 
   columns.value = getColumnsByType(item.type)
@@ -716,58 +700,6 @@ onMounted(async () => {
 
 // 统计卡片
 .stats-cards {
-  display: flex;
-  gap: 12px;
-  background-color: #16334e;
-  padding: 5px;
-
-  .stat-card {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 16px;
-    transition: all 0.3s;
-    cursor: pointer;
-    flex: 1;
-
-    &:hover {
-      background: rgba(30, 70, 120, 0.9);
-      border-color: rgba(64, 169, 255, 0.6);
-      box-shadow: 0 0 15px rgba(64, 169, 255, 0.3);
-    }
-
-    .stat-icon {
-      font-size: 18px;
-      color: #40a9ff;
-      width: 34px;
-      height: 34px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      img {
-        width: 100%;
-        height: 100%;
-      }
-    }
-
-    .stat-content {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-
-      .stat-label {
-        font-size: 14px;
-        color: #fff;
-        font-weight: 500;
-      }
-
-      .stat-value {
-        font-size: 14px;
-        font-weight: bold;
-        color: #40a9ff;
-      }
-    }
-  }
 }
 
 .search-form {