bxztApp/packages/screen/src/views/RiskWarning/Dialog/responseStatusDialog.vue

<template>
  <base-dialog
    :visible="props.visible"
    title="响应情况"
    :table-data="tableData"
    :table-columns="tableColumns"
    :table-height="200"
    :total="total"
    :current-page="currentPage"
    :page-size="pageSize"
    :z-index="1000"
    :max-width="1300"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    @close="handleClose"
  >
    <!-- 标题栏下方自定义插槽 -->
    <template #header>
      <!-- 统计卡片 -->
      <div class="stats-cards">
        <div
          v-for="(item, index) in statsCardsData"
          :key="index"
          @click="handleClick(item.type)"
          class="stat-card"
          :style="{
            backgroundImage: `url(${cardType == item.type ? selectedIcon : unselectedIcon})`,
            backgroundSize: '100% 100%',
            backgroundPosition: 'center',
          }"
        >
          <div class="stat-icon"><img :src="item.icon" alt="" /></div>
          <div class="stat-content">
            <span class="stat-label">{{ item.label }}</span>
            <span class="stat-value">{{ item.value }}</span>
          </div>
        </div>
      </div>
    </template>

    <!-- 筛选区域 -->
    <template #filter>
      <div class="filter-row">
        <div class="filter-item">
          <span class="filter-label">影响点等级</span>
          <el-select
            :teleported="false"
            v-model="filterForm.pointLevel"
            placeholder="影响点等级"
            clearable
            class="filter-select"
            @change="handleFilterChange"
          >
            <el-option v-for="option in pointLevelOptions" :key="option.value" :label="option.label" :value="option.value" />
          </el-select>
        </div>
        <div class="filter-item">
          <span class="filter-label">是否回应</span>
          <el-select
            :teleported="false"
            v-model="filterForm.isResponded"
            placeholder="是否回应"
            clearable
            class="filter-select"
            @change="handleFilterChange"
          >
            <el-option v-for="option in isRespondedOptions" :key="option.value" :label="option.label" :value="option.value" />
          </el-select>
        </div>
        <div class="filter-item">
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </div>
      </div>
    </template>

    <!-- 影响点等级列插槽 -->
    <template #pointLevel="{ row }">
      <span class="level-tag" :class="row.levelClass">{{ row.pointLevel }}</span>
    </template>

    <!-- 交通主管部门负责人列插槽 -->
    <template #trafficDept="{ row }">
      <div class="person-info">
        <div class="person-name center" v-if="row.trafficDept.name != '-'">
          <span style="margin-right: 5px">{{ row.trafficDept.name }}</span>
          <img class="response-icon" :src="row.trafficDept.isResponded ? row.trafficDept.img : row.trafficDept.img" alt />
        </div>
        <span class="person-phone">{{ row.trafficDept.phone }}</span>
      </div>
    </template>

    <!-- 公路机构责任人列插槽 -->
    <template #roadOrg="{ row }">
      <div class="person-info">
        <div class="person-name center" v-if="row.roadOrg.name != '-'">
          <span style="margin-right: 5px">{{ row.roadOrg.name }}</span>
          <img :src="row.roadOrg.img" class="response-icon" alt="" />
        </div>
        <span class="person-phone">{{ row.roadOrg.phone }}</span>
      </div>
    </template>

    <!-- 养护站负责人列插槽 -->
    <template #maintenance="{ row }">
      <div class="person-info">
        <div class="person-name center" v-if="row.maintenance.name != '-'">
          <span style="margin-right: 5px">{{ row.maintenance.name }}</span>
          <img :src="row.maintenance.img" class="response-icon" alt="" />
        </div>
        <span class="person-phone">{{ row.maintenance.phone }}</span>
      </div>
    </template>

    <!-- 护路员列插槽 -->
    <template #roadKeeper="{ row }">
      <div class="person-info">
        <div class="person-name center" v-if="row.roadKeeper.name != '-'">
          <span style="margin-right: 5px">{{ row.roadKeeper.name }}</span>
          <img :src="row.roadKeeper.img" class="response-icon" alt="" />
        </div>
        <span class="person-phone">{{ row.roadKeeper.phone }}</span>
      </div>
    </template>

    <!-- 路长列插槽 -->
    <template #generalStaff="{ row }">
      <div class="person-info">
        <div class="person-name center" v-if="row.generalStaff.name != '-'">
          <span style="margin-right: 5px">{{ row.generalStaff.name }}</span>
          <img :src="row.generalStaff.img" class="response-icon" alt="" />
        </div>
        <span class="person-phone">{{ row.generalStaff.phone }}</span>
      </div>
    </template>

    <!-- 回应状态列插槽 -->
    <!-- <template #responseStatusData="{ row }">
      <span class="response-status" :class="row.responseClass">{{
        row.responseStatusData
      }}</span>
    </template> -->

    <!-- 最新催告时间列插槽 -->
    <template #urgeTime="{ row }">
      <div class="time-info">
        <span class="time-date">{{ row.urgeTime.date }}</span>
        <span class="time-clock">{{ row.urgeTime.time }}</span>
      </div>
    </template>

    <!-- 操作列插槽 -->
    <template #operation="{ row }">
      <span class="detail-link" @click="handleDetail(row)">详情</span>
    </template>
  </base-dialog>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import { Close, ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import { pointTypeOptions, pointLevelOptions, isRespondedOptions, formatDateTime } from '../component/index.js'
import baseDialog from '../component/baseDialog.vue'
import { request } from '@/utils/request.js'

import respondedIcon from '../../../assets/xiangying/有回应@2x.png'
import notRespondedIcon from '../../../assets/xiangying/无回应@2x.png'
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({
  visible: {
    type: Boolean,
    default: false,
  },
  dispatchDateRange: {
    type: Array,
    default: () => [],
  },
  responseStatusData: {
    type: Object,
    default: () => {},
  },
})

const emit = defineEmits(['update:visible', 'close', 'detail'])

// 筛选表单
const filterForm = ref({
  pointType: '',
  pointLevel: '',
  isResponded: '',
})

const cardType = ref('路段')

// 统计卡片数据
const statsCardsData = ref([
  { type: '路段', label: '影响路段', value: 0, icon: Icon4 },
  { type: '桥梁', label: '影响桥梁', value: 0, icon: Icon0 },
  { type: '隧道', label: '影响隧道', value: 0, icon: Icon2 },
  { type: '边坡', label: '影响边坡', value: 0, icon: Icon1 },
  { type: '驻地', label: '影响驻地', value: 0, icon: Icon3 },
])

// 统一的表格列配置（桥梁、边坡、隧道、路段使用）
const unifiedColumns = [
  { prop: 'id', label: '序号', width: '' },
  { prop: 'pointType', label: '影响点类型', width: '' },
  { prop: 'pointLocation', label: '影响点位置', width: '' },
  { prop: 'pointLevel', label: '影响点等级', width: '', slot: 'pointLevel' },
  { prop: 'checkCount', label: '巡查次数', width: '' },
  { prop: 'trafficDept', label: '交通主管部门负责人', width: '', slot: 'trafficDept' },
  { prop: 'roadOrg', label: '公路机构责任人', width: '', slot: 'roadOrg' },
  { prop: 'maintenance', label: '养护站负责人', width: '', slot: 'maintenance' },
  { prop: 'roadKeeper', label: '护路员', width: '', slot: 'roadKeeper' },
  { prop: 'generalStaff', label: '一般人员(路长履职)', width: '', slot: 'generalStaff' },
  { prop: 'urgeTime', label: '最新催告时间', width: '', slot: 'urgeTime' },
  { prop: 'operation', label: '操作', width: '', slot: 'operation' },
]

// 项目类型专用表格列配置
const projectColumns = [
  { prop: 'id', label: '序号', width: '60' },
  { prop: 'region', label: '影响区域', width: '' },
  { prop: 'pointType', label: '影响点类型', width: '' },
  { prop: 'siteName', label: '驻地名称', width: '' },
  { prop: 'whistleblower', label: '吹哨人', width: '', slot: 'whistleblower' },
  { prop: 'constructionUnit', label: '建设单位包保责任人', width: '', slot: 'constructionUnit' },
  { prop: 'constructionDept', label: '施工单位包保责任人', width: '', slot: 'constructionDept' },
  { prop: 'siteResponsible', label: '驻地包保责任人', width: '', slot: 'siteResponsible' },
  { prop: 'countyResponsible', label: '区县级包保责任人', width: '', slot: 'countyResponsible' },
  { prop: 'cityResponsible', label: '市级包保责任人', width: '', slot: 'cityResponsible' },
  // { prop: 'urgeTime', label: '最新催告时间', width: '', slot: 'urgeTime' },
  // { prop: 'operation', label: '操作', width: '', slot: 'operation' },
]

// 动态表格列配置
const tableColumns = ref(unifiedColumns)

// 表格数据
const tableData = ref([])

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(36)

// 关闭对话框
const handleClose = () => {
  emit('update:visible', false)
  emit('close')
}

// 点击卡片切换
const handleClick = (type) => {
  cardType.value = type
  fetchData()
}
// 顶部卡片数据
const loadBarChartData = async () => {
  try {
    const res = await request({
      url: '/snow-ops-platform/weather-warning/affected-count',
      method: 'GET',
      params: {
        warningId: props.responseStatusData.warningId,
      },
    })

    if (res.code == '00000') {
      const data = res.data
      if (data && Array.isArray(data)) {
        // 英文转中文映射
        const nameMap = {
          'road-section': '路段',
          bridge: '桥梁',
          tunnel: '隧道',
          slope: '边坡',
          project: '驻地',
          Road: '路段',
          Bridge: '桥梁',
          Tunnel: '隧道',
          Slope: '边坡',
          Project: '驻地',
        }

        statsCardsData.value.forEach((item) => {
          data.forEach((stat) => {
            if (stat.extension == item.type) {
              item.value = stat.count || 0
            }
          })
        })
      }
    }
  } catch (error) {
    console.error('加载柱状图数据失败:', error)
  }
}
// 点击遮罩关闭已由base-dialog组件处理

// 查看详情
const handleDetail = (item) => {
  emit('detail', item)
}

// 分页操作
const handleSizeChange = (val) => {
  pageSize.value = val
  fetchData()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchData()
}

// 获取通知实体数据
const fetchData = async () => {
  try {
    const params = {
      start: '',
      end: '',
      offset: (currentPage.value - 1) * pageSize.value,
      limit: pageSize.value,
      warningId: props.responseStatusData.warningId || '',
      riskLevel: filterForm.value.pointLevel || '',
      isResponded: filterForm.value.isResponded,
    }
    if (props.dispatchDateRange && props.dispatchDateRange.length > 0) {
      params.start = formatDateTime(props.dispatchDateRange[0]) || ''
      params.end = formatDateTime(props.dispatchDateRange[1]) || ''
    }

    const res = await request({
      url: '/snow-ops-platform/weather-warning/notice-entity',
      method: 'GET',
      params,
    })

    if (res && res.data) {
      tableData.value = res.data.map((item, index) => {
        // 从 events 中提取不同角色的人员信息
        const trafficDeptEvent = item.events?.find((e) => e.noticeRoles?.includes('交通主管')) || {}
        const roadKeeperEvent = item.events?.find((e) => e.noticeRoles?.includes('护路员')) || {}
        const roadOrgEvent = item.events?.find((e) => e.noticeRoles?.includes('公路机构')) || {}
        const maintenanceEvent = item.events?.find((e) => e.noticeRoles?.includes('养护站')) || {}
        const generalStaffEvent = item.events?.find((e) => e.noticeRoles?.includes('路长')) || {}

        // 获取最新的催告时间
        const lastNoticeTime = item.events?.[0]?.lastNoticeTime || ''
        const urgeTimeParts = lastNoticeTime ? lastNoticeTime.split('T') : ['', '']

        return {
          id: index + 1,
          pointType: getTypeLabel(item.type),
          pointLocation: item.address || '-',
          pointLevel: item.riskLevel || '-',
          levelClass: getLevelClass(item.riskLevel),
          checkCount: item.inspectedCount || 0,
          trafficDept: {
            name: trafficDeptEvent.noticeName || '-',
            phone: trafficDeptEvent.noticePhone || '-',
            img: trafficDeptEvent.replyState === 'read' ? respondedIcon : notRespondedIcon,
            isResponded: trafficDeptEvent.replyState === 'read',
          },
          roadOrg: {
            name: roadOrgEvent.noticeName || '-',
            phone: roadOrgEvent.noticePhone || '-',
            img: roadOrgEvent.replyState === 'read' ? respondedIcon : notRespondedIcon,
            isResponded: roadOrgEvent.replyState === 'read',
          },
          maintenance: {
            name: maintenanceEvent.noticeName || '-',
            phone: maintenanceEvent.noticePhone || '-',
            img: maintenanceEvent.replyState === 'read' ? respondedIcon : notRespondedIcon,
            isResponded: maintenanceEvent.replyState === 'read',
          },
          roadKeeper: {
            name: roadKeeperEvent.noticeName || '-',
            phone: roadKeeperEvent.noticePhone || '-',
            img: roadKeeperEvent.replyState === 'read' ? respondedIcon : notRespondedIcon,
            isResponded: roadKeeperEvent.replyState === 'read',
          },
          generalStaff: {
            name: generalStaffEvent.noticeName || '-',
            phone: generalStaffEvent.noticePhone || '-',
            img: generalStaffEvent.replyState === 'read' ? respondedIcon : notRespondedIcon,
            isResponded: generalStaffEvent.replyState === 'read',
          },

          urgeTime: {
            date: urgeTimeParts[0] || '-',
            time: urgeTimeParts[1] ? urgeTimeParts[1].substring(0, 8) : '-',
          },
        }
      })
      total.value = res.total || 0
    } else {
      tableData.value = []
      total.value = 0
    }
  } catch (error) {
    console.error('获取通知实体数据失败:', error)
  }
}

// 类型映射
const getTypeLabel = (type) => {
  const typeMap = {
    'road-section': '路段',
    road_section: '路段',
    roadSection: '路段',
    bridge: '桥梁',
    tunnel: '隧道',
    slope: '边坡',
    project: '驻地',
  }
  return typeMap[type] || type || '-'
}

// 根据风险等级获取样式类
const getLevelClass = (riskLevel) => {
  if (!riskLevel) return ''
  if (riskLevel.includes('高')) return 'level-serious'
  if (riskLevel.includes('一般')) return 'level-normal'
  return ''
}
// 查询
const handleSearch = () => {
  fetchData()
  loadBarChartData()
}
const handleFilterChange = () => {
  console.log(filterForm.value)

  filterForm.value.pointLevel = filterForm.value.pointLevel || ''
  filterForm.value.isResponded = filterForm.value.isResponded
  currentPage.value = 1
  fetchData()
}

// 监听visible变化
watch(
  () => props.visible,
  (newVal) => {
    filterForm.value = {
      pointType: '',
      pointLevel: '',
      region: '',
    }
    tableData.value = []
    cardType.value = '路段'
    currentPage.value = 1
    if (newVal) {
      fetchData()
      loadBarChartData()
    }
  },
)
watch(
  () => cardType.value,
  (newVal) => {
    if (newVal) {
      tableData.value = []
      currentPage.value = 1
      fetchData()
      loadBarChartData()
      if (newVal == '驻地') {
        tableColumns.value = projectColumns
      } else {
        tableColumns.value = unifiedColumns
      }
    }
  },
)

// 监听日期范围变化
watch(
  () => props.dispatchDateRange,
  () => {
    if (props.visible) {
      fetchData()
    }
  },
  { deep: true },
)

onMounted(() => {
  // 初始化加载顶部卡片数据
  // loadBarChartData()
})
</script>

<style lang="scss" scoped>
// 筛选区域
.filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;

  .filter-item {
    display: flex;
    align-items: center;
    gap: 8px;

    .filter-label {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.8);
      white-space: nowrap;
    }

    .filter-select {
      width: 150px;

      :deep(.el-input__wrapper) {
        background-color: rgba(30, 70, 120, 0.4);
        border: 1px solid rgba(64, 169, 255, 0.3);
        box-shadow: none;
        border-radius: 4px;

        .el-input__inner {
          color: #fff;
          font-size: 13px;

          &::placeholder {
            color: rgba(255, 255, 255, 0.5);
          }
        }

        .el-input__suffix {
          .el-icon {
            color: rgba(255, 255, 255, 0.6);
          }
        }
      }
    }
  }
}

// 表格单元格样式
.level-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;

  &.level-normal {
    background-color: rgba(250, 219, 95, 0.2);
    color: #fadb5f;
    border: 1px solid rgba(250, 219, 95, 0.4);
  }

  &.level-serious {
    background-color: rgba(255, 77, 79, 0.2);
    color: #ff4d4f;
    border: 1px solid rgba(255, 77, 79, 0.4);
  }
}

.person-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  .response-icon {
    width: 30px;
    height: 15px;
  }

  .person-name {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
  }

  .person-phone {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
  }
}

.response-status {
  font-size: 12px;

  &.status-responded {
    color: #52c41a;
  }

  &.status-unresponded {
    color: #ff7a45;
  }
}

.time-info {
  display: flex;
  flex-direction: column;
  gap: 2px;

  .time-date {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
  }

  .time-clock {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
  }
}

.detail-link {
  color: #40a9ff;
  cursor: pointer;
  font-size: 12px;

  &:hover {
    color: #69c0ff;
    text-decoration: underline;
  }
}

// 下拉菜单样式
:deep(.el-select-dropdown) {
  background-color: rgba(20, 50, 90, 0.98);
  border: 1px solid rgba(64, 169, 255, 0.3);

  .el-select-dropdown__item {
    color: rgba(255, 255, 255, 0.85);

    &:hover {
      background-color: rgba(64, 169, 255, 0.2);
    }

    &.selected {
      background-color: rgba(64, 169, 255, 0.3);
      color: #40a9ff;
    }
  }
}

// 统计卡片
.stats-cards {
  display: flex;
  gap: 12px;

  .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;
      }
    }
  }
}
</style>