diff --git a/packages/screen/src/views/WarningManagement/law/detailDrawer.vue b/packages/screen/src/views/WarningManagement/law/detailDrawer.vue index 02c2a30..7a23ff9 100644 --- a/packages/screen/src/views/WarningManagement/law/detailDrawer.vue +++ b/packages/screen/src/views/WarningManagement/law/detailDrawer.vue @@ -26,23 +26,15 @@
-
-
-
- {{ item.name }} - {{ item.count }} -
-
+ + + {{ item.name }} ({{ item.count }}) + +
{ // 根据类型处理数据(统一格式) 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, icon: Icon0, type: '桥梁' }, - { name: '影响隧道', count: 0, icon: Icon2, type: '隧道' }, - { name: '影响边坡', count: 0, icon: Icon1, type: '边坡' }, - { name: '影响驻地', count: 0, icon: Icon3, type: '驻地' }, + { name: '影响路段', count: 0, type: '路段' }, + { name: '影响桥梁', count: 0, type: '桥梁' }, + { name: '影响隧道', count: 0, type: '隧道' }, + { name: '影响边坡', count: 0, 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 {