bdzl2/bxztApp
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
huangchenhao 2026-05-09 15:55:32 +08:00
parent e614b5baef
commit e33df64a8a
1 changed files with 23 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
packages/screen/src/views/WarningManagement/law/detailDrawer.vue
View File

@ -26,23 +26,15 @@
</template>
<div class="table">
<div class="stats-cards">
<div
<el-radio-group size="large" v-model="cardType" @change="handleTypeChange">
<el-radio-button
v-for="(item, index) in impactData"
:key="index"
@click="handleClick(index, item)"
class="stat-card"
:style="{
backgroundImage: `url(${cardType == index ? selectedIcon : unselectedIcon})`,
backgroundSize: '100% 100%',
backgroundPosition: 'center',
}"
:value="index"
>
<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>
{{ item.name }} ({{ item.count }})
</el-radio-button>
</el-radio-group>
</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, 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 {